Wordpress Themes - WP Forum at BFA

Wordpress Themes - WP Forum at BFA (http://forum.bytesforall.com/index.php)
-   Sidebars & Widgets (http://forum.bytesforall.com/forumdisplay.php?f=14)
-   -   [SOLVED] Reveal and hide widget content using jquery (http://forum.bytesforall.com/showthread.php?t=17294)

shallowmeya Apr 11, 2012 10:00 PM

[SOLVED] Reveal and hide widget content using jquery
 
Hi there,

I decided to use the Atahualpa theme for the customizable sidebars/widgets, which I am very much appreciating, however I'm having some trouble getting the dynamic effect I'm going for.

Here's the idea for the site:
All of the content is distributed into 4 categories, with each category showing up in a separate widget (2 in the left sidebar widgets and 2 right sidebar widgets). I'm using the "Category Column" plugin for that.
The content of each widget is hidden until a link (i.e. the title of the category) is clicked. Ideally it would work and look like the RevealingPhotoSlider effect, so onclick the height and width of the DIV containing the widget (which is nested in a cell -- I'm using tables) would expand, displacing the other widgets.

I've tried manipulating the photorevealer.js, css.php, and functions.php files to integrate the RevealingPhotoSlider into the Atahualpa theme, and it's gone through phases of different things working, not working, and/or looking wonky, but I've finally hit a dead end. Check it out for yourself: http://elizabethpovinelli.com

I (tried to) set it up so that, in theory, the category titles -- Academic, Karrabing, etc -- would act as links that trigger the jQuery command expanding the height and width of the DIVs. It's not working, though.

Is there an easier way to do this than to try to manipulate a jQuery script that wasn't meant for Atahualpa? Should I just switch to a different theme (I really don't want to!)? Should I use a different slider? Should I try to integrate more of the coding into the Atahualpa Theme Editor interface rather than messing with the raw stuff?

Any help is very much appreciated! Here are the relevant codes (photorevealer.js, css.php, header.php, footer.php) in a zip file: http://dl.dropbox.com/u/11520865/helpme.zip

Fair warning: the code is most likely abysmal and embarrassing. I'm basically blindly picking my way through the jQuery (and the PHP for that matter) and really have no idea what to do!

shallowmeya Apr 22, 2012 06:02 PM

So I figured out how to get the effect, just in case anyone has a similar question in the future. Rather than trying to integrate the jquery script into the theme, which was a painful (and unsuccessful) process, I found a simpler albeit less dynamic solution using the Hackadelic WidgetVoodoo plugin.

This plugin allows you to expand and collapse widgets by clicking on the title. So, I messed with the functions.php file a bit to include an image before the title of each widget, and I created widget-content containers by adding a called "the_content" after each widget-title. Then I added a CSS insert to assign "the_content" a large width, while the widget-title DIV was assigned a smaller width in the "widget style" section of the theme editor.

Works really well!


All times are GMT -6. The time now is 01:12 PM.

Powered by vBulletin® Copyright ©2000 - 2024, Jelsoft Enterprises Ltd.