Solved

Multiple javascripts interfering with each other

Posted on 2007-04-11
7
595 Views
Last Modified: 2012-05-05
My site is a css site and I am using 2 javascripts, (matching column heights from killersites.com and a slideshow from codelifter). Both scripts are in a separate .js file and are linked to the page. The slideshow has a body onload function: <body onload="showHot=true;self.focus()"; > and this is not allowing the match column heights script to work. I have tried adding both js scripts to the onload call, but that stops the slideshow from working correctly and allows the matching columns script to work. I used: <body onload="showHot=true;self.focus(); matchColumns=function()">. This was just a guess so I am probably mistaken. The webpage with slideshow is at www.sharonrieger.com.
Both javascript codes are below:

matchColumns=function(){

     var divs,contDivs,maxHeight,divHeight,d;
      
     // get all <div> elements in the document

     divs=document.getElementsByTagName('div');

     contDivs=[];

     // initialize maximum height value

     maxHeight=0;

     // iterate over all <div> elements in the document

     for(var i=0;i<divs.length;i++){

          // make collection with <div> elements with class attribute 'container'

          if(/\bcolumn\b/.test(divs[i].className)){

                d=divs[i];

                contDivs[contDivs.length]=d;

                // determine height for <div> element

                if(d.offsetHeight){

                     divHeight=d.offsetHeight;                               

                }

                else if(d.style.pixelHeight){

                     divHeight=d.style.pixelHeight;                               

                }

                // calculate maximum height

                maxHeight=Math.max(maxHeight,divHeight);

          }

     }

     // assign maximum height value to all of container <div> elements

     for(var i=0;i<contDivs.length;i++){

          contDivs[i].style.height=maxHeight + "px";

     }

}

// Runs the script when page loads

window.onload=function(){

     if(document.getElementsByTagName){

          matchColumns();                   

     }

}
__________________________________________________________
var SlideShowSpeed = 3000;

// Set the duration of crossfade (in seconds)
var CrossFadeDuration = 2;

var Picture = new Array(); // don't change this
var Caption = new Array(); // don't change this
var Links = new Array();
var showHot = false;       // don't change this

// Specify the image files...
// To add more images, just continue
// the pattern, adding to the array below.
// To use fewer images, remove lines
// starting at the end of the Picture array.
// Caution: The number of Pictures *must*
// equal the number of Captions!

Picture[1]  = '/Images/slide-shows/home/mens-retreat.jpg';
Picture[2]  = '/Images/slide-shows/home/webcast.jpg';
Picture[3]  = '/Images/slide-shows/home/PS.jpg';
Picture[4]  = '/Images/slide-shows/home/junior-pharisee.jpg';
Picture[5]  = '/Images/slide-shows/home/senior-home.jpg';
Picture[6]  = '/Images/slide-shows/home/couple-w-bible.jpg';
Picture[7]  = '/Images/slide-shows/home/ABC-skit.jpg';
Picture[8]  = '/Images/slide-shows/home/give_me_Jesus.jpg';
Picture[9]  = '/Images/slide-shows/home/puppets.jpg';
Picture[10] = '/Images/slide-shows/home/broadcasts.jpg';

// Specify the Captions...
// To add more captions, just continue
// the pattern, adding to the array below.
// To use fewer captions, remove lines
// starting at the end of the Caption array.
// Caution: The number of Captions *must*
// equal the number of Pictures!

Caption[1]  = "Conferences/Events";
Caption[2]  = "Webcasts";
Caption[3]  = "Video Clips";
Caption[4]  = "Guest Preaching";
Caption[5]  = "Community Service";
Caption[6]  = "Devotionals";
Caption[7]  = "Drama/Comedy";
Caption[8]  = "Christian Music";
Caption[9]  = "Children/Puppets";
Caption[10] = "Broadcast/Radio";

// Specify the URL

Links[1]  = "/HTML/conferences-events.html";
Links[2]  = "/HTML/Multimedia/webcasts.html";
Links[3]  = "/HTML/Multimedia/videos.html";
Links[4]  = "/HTML/guest-preaching.html";
Links[5]  = "/HTML/community-service.html";
Links[6]  = "/HTML/Devotionals/devotionals.html";
Links[7]  = "/HTML/drama.html";
Links[8]  = "/HTML/Multimedia/music.html";
Links[9]  = "/HTML/children-entertainmnet.html";
Links[10] = "/HTML/Multimedia/broadcasts-Christian.html";

// =====================================
// Do not edit anything below this line!
// =====================================

var tss;
var iss;
var jss = 0;
var pss = Picture.length-1;

var preLoad = new Array();
for (iss = 1; iss < pss+1; iss++){
preLoad[iss] = new Image();
preLoad[iss].src = Picture[iss];}

function control(how){
if (showHot){
if (how=="H") jss = 1;
if (how=="F") jss = jss + 1;
if (how=="B") jss = jss - 1;
if (jss > (pss)) jss=1;
if (jss < 1) jss = pss;
if (document.all){
document.images.PictureBox.style.filter="blendTrans(duration=2)";
document.images.PictureBox.style.filter="blendTrans(duration=CrossFadeDuration)";
document.images.PictureBox.filters.blendTrans.Apply();}
document.images.PictureBox.src = preLoad[jss].src;
if (document.getElementById) {
      document.getElementById("CaptionBox").innerHTML= Caption[jss];
      document.getElementById("imgLink").href= Links[jss];      
}
if (document.all) document.images.PictureBox.filters.blendTrans.Play();
}}

Also, using the forward and backwards button on the slideshow causes the pages to jump depending on your view. I know this is a tough question, and maybe I should ask about the jumping issue in a separate question. But I thought they might be related. If not, I will post them separately.

Thanks for considering my issues.
alabina
0
Comment
Question by:alabina
  • 2
  • 2
  • 2
  • +1
7 Comments
 
LVL 11

Accepted Solution

by:
flipz earned 500 total points
ID: 18889503
For starters - just try change this function:

// Runs the script when page loads
window.onload=function(){
     if(document.getElementsByTagName){
          matchColumns();                  
     }
}

to run without the page load event:

// Runs the script when page loads
//window.onload=function(){
     if(document.getElementsByTagName){
          matchColumns();                  
     }
//}
0
 
LVL 28

Expert Comment

by:TName
ID: 18889611
Hm, have you tried it the other way around?

<body onload="matchColumns(); showHot=true;self.focus();">
0
 
LVL 11

Expert Comment

by:flipz
ID: 18889735
I think the issue is that the onload in the body tag and the window.onload=function() in the Javascript are working against each other so I don't think that re-ordering them will work but I guess it is worth a shot to find out.
0
Courses: Start Training Online With Pros, Today

Brush up on the basics or master the advanced techniques required to earn essential industry certifications, with Courses. Enroll in a course and start learning today. Training topics range from Android App Dev to the Xen Virtualization Platform.

 
LVL 29

Expert Comment

by:Badotz
ID: 18890077
Depending on how you attach your event handler, you can allow for multiple event handlers per event. Here is one approach:

http://novemberborn.net/javascript/event-cache
0
 
LVL 28

Expert Comment

by:TName
ID: 18890129
>I think the issue is that the onload in the body tag and the window.onload=function() in the Javascript are working against each other so I don't think that re-ordering them will work but I guess it is worth a shot to find out.

You're right, I also think that's the issue, and what I said was indeed a wild guess, but I've just tested it and it seems to work (even with the window.onload still in the script, but of course that wouldn't be needed anymore then).
0
 
LVL 29

Expert Comment

by:Badotz
ID: 18890137
Sorry, the link above is for tracking and removing eventhandlers to prevent memory leaks, not attaching multiple event handlers to a single event. Nevertheless, attaching multiple event handlers to a single event is possible; search Google for a few ways.
0
 

Author Comment

by:alabina
ID: 18891950
I removed the window.onload function from the match column height script and that did the trick. I know, that is so simple, but I needed someone to point that out to me. I am just learning javascript so this is a good lesson for me.

Thanks
0

Featured Post

Courses: Start Training Online With Pros, Today

Brush up on the basics or master the advanced techniques required to earn essential industry certifications, with Courses. Enroll in a course and start learning today. Training topics range from Android App Dev to the Xen Virtualization Platform.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
Removing HTML elements using javascript 4 43
Adding a Javascript click event to an HTML element given a class dynamically 5 36
Javascript_Set_dropdown_value 7 32
Jquery 10 19
When you need to keep track of a simple list of numbers or strings, the Array object is your most direct tool.  As we saw in my earlier EE Article (http://www.experts-exchange.com/A_3488.html), typical array handling might look like this: (CODE) B…
In my daily work (mainly using ASP.net), I need to write a lot of JavaScript code. One of the most repetitive tasks I do are the jQuery Ajax calls. You know: (CODE) I don't know if for you it's the same, but for me is soooo tedious to write the …
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

786 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question