JQuery Help WordPress

• SOLVED

Hi All,
So glad I came across this site, definitely bookmarking it, and hopefully i can join in on helping others.

Hi all, just need a little help editing the free wordpress theme wp-coda.

Here are the references for my question:

Original Wp-Coda Theme
[[LINK href="http://wp.choicethemes.com/wp-coda/"]]WP-CODA[[/LINK]]



As you can see in my theme, each panel has a custom background (please excuse the mess,there are two image sizes, only the first image is the correct size for the panel)

what i would like to do is:
1. have my content div, which overlays on top of the custom background image fade in once the slide animation is done,

2. This animation should be reset,but only after you choose another panel, so that when clicking on the the next panel link, it also fades in the content for that panel.

3.load in content for the Home page (ul:first) without any trigger's (clicks) I just need this to fade in after x seconds after that panel is loaded, regardless of whether someone clicks it's anchor link. if necessary i can create a separate page template for the home page.


Here is my jquery file. the content div ID is "panContent" you will be able to see where I was able to get it to fade in on trigger.


$(document).ready(function () {
var $panels = $('#slider .scrollContainer > div');
var $container = $('#slider .scrollContainer');
var horizontal = true;
if (horizontal) {
$panels.css({
'float': 'left',
'position': 'relative'
});
$container.css('width', $panels[0].offsetWidth * $panels.length)
}
var $scroll = $('#slider .scroll').css('overflow', 'hidden');

function selectNav() {
$(this).parents('ul:first').find('a').removeClass('selected').end().end().addClass('selected');
}
$('#slider .navigation').find('a').click(selectNav);
$('.panContent').hide();
function trigger(data) {
var el = $('#slider .navigation').find('a[href$="' + data.id + '"]').get(0);
selectNav.call(el);

$('.panContent').fadeIn(1000); // THIS IS WHERE I MADE MY ATTEMPT


}
if (window.location.hash) {
trigger({
id: window.location.hash.substr(1)
})
} else {
$('ul.navigation a:first').click()

}

var offset = parseInt((horizontal ? $container.css('paddingTop') : $container.css('paddingLeft')) || 0) * -1;
var scrollOptions = {
target: $scroll,
items: $panels,
navigation: '.navigation a',
prev: '.scrollMeLeft',
next: '.scrollMeRight',
axis: 'xy',
onAfter: trigger,
offset: offset,
duration: 500,
easing: 'swing'
};
$('#slider').serialScroll(scrollOptions);
$.localScroll(scrollOptions);
scrollOptions.duration = 1;
$.localScroll.hash(scrollOptions)
});




Answers (2)

2010-10-27

Utkarsh Kukreti answers:

Replace the code from function trigger() to the next if else by

function trigger(data) {
var el = $('#slider .navigation').find('a[href$="' + data.id + '"]').get(0);
selectNav.call(el);

$('.panContent').hide();
$('#' + data.id + ' .panContent').fadeIn(1000);
console.log(data);
}
if (window.location.hash) {
trigger({
id: window.location.hash.substr(1)
})
} else {
trigger({
id: 'about'
});
}


---

Vacant comments:

Thanks Utkarsh, at first it seemed to only work with firebug activated,
i removed the console.log and everything seems to be working smoooothly!

thanks very much!

2010-10-27

Oleg Butuzov answers:

Utkarsh

comment
console.log(data);

if firebug not enabled it will show an error.

---

Vacant comments:

Thanks Oleg, i'm sorry i didnt see your addition till just now, yes i did notice the Console log issue, thank you for pointing it out though.