[RESOLVED] 2 jQuery scripts mixing functions – how can I separate?

I have two jQuery scripts running on the same page. One of them dynamically assigns height parameters to the wordpress page. The other is a slideshow script which makes images transition from one to the next in a slideshow.

When the slideshow is inserted into the wordpress page, it works fine, but in IE7 there is extra page height whenever there is a slideshow on the page. In other browsers it is fine, and on other pages that dont have a slideshow the page height is fine.

Looking at the source code, it seems that the dynamically assigned div height paramaters that are injected into the slideshow divs by the jQuery slideshow script are getting involved in other divs on the page, influencing their height.

It seems that the slideshow script is interfering with the page height script. how can I make it so they dont entangle?

Here is the page height jQuery script that assigned dynamic height to the “art-content-layout-row” div (the div that controls page height)

[CODE]/* begin Layout */
jQuery(function () {
if (!jQuery.browser.msie || parseInt(jQuery.browser.version) > 7) return;
var c = jQuery(‘div.art-content’);
if (c.length !== 1) return;
var s = c.parent().children(‘.art-layout-cell:not(.art-content)’);
jQuery(window).bind(‘resize’, function () {
var w = 0; c.css(‘width’, “100%”);
s.each(function () { w += this.clientWidth; });
c.w = c.parent().width();c.css(‘width’, c.w – w);
}).trigger(‘resize’);
jQuery(‘div.art-content-layout-row’).each(function () {
this.c = jQuery(this).children(‘.art-layout-cell’);
}).bind(‘resize’, function () {
if (this.h == this.clientHeight) return;
this.c.css(‘height’, ‘auto’);
this.h = this.clientHeight;
this.c.css(‘height’, this.h + ‘px’);
}).trigger(‘resize’);
});
/* end Layout */[/CODE]

It is the latter part of the above code where the conflict is happening i.e. the bit that mentionds “art-content-layout-row” downward.

As the slideshow script is way too long to post, I have managed to deleted parts of it bit by bit until there is almost none of it left but so that the problem continues to happen with the logic of the script staying intact.

I have even renamed some variables to further see if they are part of the issue.

I have ended up with this bare-bones remaining bit of the slideshow jQuery script which, while it no longer displays the slideshow, still reproduces the page height issue when in use:

[CODE](function($){function lollipop(){suck;}$.fn.cyccle=function(boo){

return this.each(function(){var $sss=handles(this,boo).f?$():$(this).children();

if($sss.length<2){return;}var zzz=buildOptions($(this),$sss);

});};function handles(boo){return boo;}function buildOptions($sss){

$sss.css({position:”absolute”,top:0,left:520});

;
};

;})(jQuery);

[/CODE]

and the initialising part just below it in the same .js file which is this:

[CODE]jQuery(function( $ ){
//jQuery(document).ready(function($) {
$(‘.slideshow-plain’).cyccle({
fx: ‘fade’
});
});[/CODE]

When looking at the html source in the page, the slideshow script inserts this jQuery unique number beside the dynamically added div parameters in the slideshow divs like this:

cyclew=”666″ cycleh=”555″ jQuery=”130236363678267″

It turns out that this same unique number is assigning itself to the art-content-layout-row div which is supposed to be controlled by the other script.

I am wondering if the fact that these unique id numbers being the same is causing the issue, as though the system is thinking that these two scripts are somehow the same one?

Both scripts are in different directories and called separately in the page footer.

If anyone can point me in the right direction as to whether there is some simple way of making the scripts behave separately that would be GREAT. I am now to jQuery and still trying to understand these things. What is that unique number anyway? HOw is it generated and what does it mean? Is that central to the issue?

I have a test site located at: [url]http://panoramawebservices.com/artisteertest/testpage/[/url] where you can see the slideshow and view the page source to see what I mean.

NOTE that the problem is only via IE7 – all other browsers are fine. I also notice that the first script I mentioned that affects page height mentions browser version in the second line – that might mean something..

Any help would be appreciated. Thanks.

Also in #JavaScript _↴