SitePoint Sponsor

User Tag List

Results 1 to 18 of 18
  1. #1
    SitePoint Enthusiast
    Join Date
    Feb 2003
    Posts
    46
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    HELP: 3 JS in a page - Browser or onLoad handler conflict?

    Hi All,
    I am trying to use the script for a PHP integrated website whereby, I am having HEADER and FOOTER for all pages. But the problem is I am already having two other Javascripts in the HEADER so, somehow I am having problem getting the script to work. When I tried to get all the three javascripts to work, the JS menu buttons refused to load properly. Below you will find how both IE and Netscape react towards the script.

    Could somebody help me solve this conflict. This seems to be onLoad function handler problem but I don't know how to go about it. Or browser compatibility problem.

    Something very interesting is happening and I don't know how to go about it. Below script shows the the two different reaction of both IE and Netscape.

    Both IE and Netscape used to load successfull without the Random Table Backgroung Image Rotater. This problem startd when I added the Random Table BG Image Rotater that's why I am including this script also.


    RED
    : This is how Netscape loads the menu buttons successfully.
    BLUE: This is how IE loads the menu buttons successfully.

    JS Menu Buttons

    var clicked=""
    var gtype=".gif"
    var selstate="_over"
    if (typeof(loc)=="undefined" || loc==""){
    var loc=""
    if (document.body&&document.body.innerHTML){
    var tt = document.body.innerHTML.toLowerCase();
    var last = tt.indexOf("menu_button.js\"");
    if (last>0){
    var first = tt.lastIndexOf("\"", last);
    if (first>0 && first<last) loc = document.body.innerHTML.substr(first+1,last-first-1);
    }
    }
    }

    document.write("<table border=\"0\" cellspacing=\"0\" cellpadding=\"0\"><tr>");
    tr(false);
    writeButton("","index.php?page=index","images/menu_button_b1",96,37,"home","",0);
    writeButton("","index.php?page=register",
    "images/menu_button_b2",96,37,"register for free","",0);
    writeButton("","index.php?page=sign_in",
    "images/menu_button_b3",96,37,"members login","",0);
    writeButton("","index.php?page=search",
    "images/menu_button_b4",96,37,"search for match","",0);
    writeButton("","index.php?page=browse","menu_button_b5",96,37,"browse","",0);
    writeButton("","index.php?page=faq","menu_button_b6",96,37,"information","",0);
    writeButton("","index.php?page=faq",
    "menu_button_b7",96,37,"help and dating tips","",0);
    writeButton("","mailto? echo $admin_mail ?>",
    "menu_button_b8",96,37,"contact","",0); tr(true);
    document.write("</tr></table>")
    loc="";

    function tr(b){}

    function turn_over(name) {
    if (document.images != null && clicked != name) {
    document[name].src = document[name+"_over"].src;
    }
    }

    function turn_off(name) {
    if (document.images != null && clicked != name) {
    document[name].src = document[name+"_off"].src;
    }
    }

    function reg(gname,name)
    {
    if (document.images)
    {
    document[name+"_off"] = new Image();
    document[name+"_off"].src = loc+gname+gtype;
    document[name+"_over"] = new Image();
    document[name+"_over"].src = loc+gname+"_over"+gtype;
    }
    }

    function evs(name){ return " onmouseover=\"turn_over('"+ name + "')\" onmouseout=\"turn_off('"+ name + "')\""}

    function writeButton(urld, url, name, w, h, alt, target, hsp)
    {
    gname = name;
    while(typeof(document[name])!="undefined") name += "x";
    reg(gname, name);
    tr(true);
    document.write("<td>");
    if (alt != "") alt = " alt=\"" + alt + "\"";
    if (target != "") target = " target=\"" + target + "\"";
    if (w > 0) w = " width=\""+w+"\""; else w = "";
    if (h > 0) h = " height=\""+h+"\""; else h = "";
    if (url != "") url = " href=\"" + urld + url + "\"";

    document.write("<a " + url + evs(name) + target + ">");

    if (hsp == -1) hsp =" align=\"right\"";
    else if (hsp > 0) hsp = " hspace=\""+hsp+"\"";
    else hsp = "";

    document.write("<img src=\""+loc+gname+gtype+"\" name=\"" + name + "\"" + w + h + alt + hsp + " border=\"0\" /></a></td>");
    tr(false);
    }

    ======================================================
    And here is the script I added when the problem started.
    ======================================================

    JS Random Table BG Image Rotater

    <script type="text/javascript" language="javascript">
    <!--
    var img_urls = [
    'js_imageslide/bg_image001.jpg' ,
    'js_imageslide/bg_image002.jpg' ,
    'js_imageslide/bg_image003.jpg' ,
    'js_imageslide/bg_image004.jpg' ,
    'js_imageslide/bg_image005.jpg' ,
    'js_imageslide/bg_image006.jpg' ,
    'js_imageslide/bg_image007.jpg' ,
    'js_imageslide/bg_image008.jpg' ,
    'js_imageslide/bg_image009.jpg' ,
    'js_imageslide/bg_image0010.jpg' ,
    'js_imageslide/bg_image0011.jpg' ,
    'js_imageslide/bg_image0012.jpg'
    ];
    var idx_array, idx_str, obj;
    if (!/__RANDOM_BG_IMAGE_ROTATOR__/.test(self.name))
    {
    var idx, i, ind1, ind2, temp, arraylength = img_urls.length;
    idx_array = new Array(arraylength);
    for (i = 0; i < arraylength; ++i) idx_array[i] = i;
    for (i = 0; i < arraylength; ++i)
    {
    ind1 = Math.floor(Math.random() * arraylength);
    ind2 = Math.floor(Math.random() * arraylength);
    temp = idx_array[ind1];
    idx_array[ind1] = idx_array[ind2];
    idx_array[ind2] = temp;
    }
    idx_str = idx_array.join(',');
    }
    else
    {
    idx_str = self.name.split('__RANDOM_BG_IMAGE_ROTATOR__')[1];
    }
    idx_array = idx_str.split(',');
    var first_idx = idx_array.splice(0,1);
    var TABLE_background = img_urls[first_idx];
    idx_array[idx_array.length] = first_idx;
    idx_str = idx_array.join(',');
    self.name = '__RANDOM_BG_IMAGE_ROTATOR__' + idx_str;
    obj = new Image();
    obj.src = img_urls[idx_array[0]];

    onload = function()
    {
    document.getElementById('imageslider').style.backgroundImage = 'url(' + TABLE_background + ')';
    }

    //-->
    </script>


    Thanks in advance.

    CocoX.
    Last edited by CocoX; Nov 11, 2003 at 11:51.
    P E A C E IS THE ONLY WAY TO P E A C E ...!

  2. #2
    SitePoint Enthusiast
    Join Date
    Feb 2003
    Posts
    46
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi All,

    Where are you all the JAVASCRIPT GURUS? Please, help me out from this frustration. The menu buttons used to load successfully with both the IE and Netscape until I added the Random Table BG Image Rotater script.

    As you can see from the above script, there is a possible conflict with the onLoad function handler which I have no idea how to solve.

    Thanks in advance.

    CocoX.
    P E A C E IS THE ONLY WAY TO P E A C E ...!

  3. #3
    Web-coding NINJA! silver trophy beetle's Avatar
    Join Date
    Jul 2002
    Location
    Dallas, TX
    Posts
    2,900
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    It doesn't appear to be an onload issue. However, without actually seeing the page in question, it's nigh impossible to determine the problem from just looking at the code.
    beetle a.k.a. Peter Bailey
    blogs: php | prophp | security | design | zen | software
    refs: dhtml | gecko | prototype | phpdocs | unicode | charsets
    tools: ide | ftp | regex | ffdev




  4. #4
    SitePoint Enthusiast
    Join Date
    Feb 2003
    Posts
    46
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi beetle,
    Quote Originally Posted by beetle
    It doesn't appear to be an onload issue. However, without actually seeing the page in question, it's nigh impossible to determine the problem from just looking at the code.


    Please check it up with both IE and Netscape to see how both browsers react toward the Script 1 as above.

    Thanks in advance.

    CocoX.
    Last edited by CocoX; Nov 15, 2003 at 16:10.
    P E A C E IS THE ONLY WAY TO P E A C E ...!

  5. #5
    SitePoint Enthusiast
    Join Date
    Feb 2003
    Posts
    46
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi beetle,
    What's up? Have you seen what I am talking about? It's quite strange isn't it?

    As said earlier, everything used to work fine until I added the Random Table BG Image Rotater script. I love it and I really want to have it.

    S. O. S.

    Thanks in advance.

    CocoX.
    P E A C E IS THE ONLY WAY TO P E A C E ...!

  6. #6
    SitePoint Evangelist Mr. Brownstone's Avatar
    Join Date
    May 2002
    Location
    Relative
    Posts
    452
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Instead of using "images/menu_button_??" or "menu_button_??" style URL's, try absolute URL's instead: "/images/menu_button_??". (Note the backslash at the beginning of the path.)
    Of course, that's just my opinion. I could be wrong.

  7. #7
    SitePoint Enthusiast
    Join Date
    Feb 2003
    Posts
    46
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi Mr. Brownstone,
    Thanks so much for your tips but I have already tried that and IE refused to load the image buttons.

    Netscape load all the buttons perfect. Check it up to see what I am talking about.

    Thanks again.

    CocoX.
    P E A C E IS THE ONLY WAY TO P E A C E ...!

  8. #8
    SitePoint Enthusiast
    Join Date
    Feb 2003
    Posts
    46
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi adios,
    You know how happy I was when you provided me with the Random Table BG Image Rotater script and now my happiness has turn to frustration. You asked for the link to the site which I also provided and since then nothing had been heard from you.

    Please can't you comment on this problem if there is a possible solution. I shall be very grateful.

    So, what do you think about this; onload = function() which has no name? Could this be the possible problem? Or just browser problem?

    Please give me a hint.

    Thanks again in advance.

    CocoX.
    P E A C E IS THE ONLY WAY TO P E A C E ...!

  9. #9
    I'll take mine raw silver trophy MikeFoster's Avatar
    Join Date
    Dec 2002
    Location
    Alabama, USA
    Posts
    2,560
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Using Opera 7.30 on Win2K...

    A nested table has id='imageslider', but I'm getting an error:
    message: Statement on line 47: Expression evaluated to null or undefined and is not convertible to Object: document.getElementById("imageslider")
    Backtrace:
    Line 47 of linked script http://www.ilook4date.com/js_imageslide/imageslider.js
    document.getElementById("imageslider").style.backgroundImage = "url(" + TABLE_background + ")";
    The line causing the error is being executed 'before' the window.onload event - so the 'imageslider' element doesn't yet exist.

    Just a personal opinion... I don't like to mix so much js in with the html (your opening body tag). I suggest something similar to the following...
    Code:
    <html>
    <head>
    <script type='text/javascript'>
    
    // make appropriate checks to see if we need to downgrade or not
    if (document.getElementById || document.all) { // just an example
      window.onload = myOnload;
    }
    
    function myOnload()
    {
      MM_preloadImages('nav_buttons/nav_buttons_b1_over.gif',
                       'nav_buttons/nav_buttons_b2_over.gif',
                       'nav_buttons/nav_buttons_b3_over.gif',
                       'nav_buttons/nav_buttons_b5_over.gif',
                       'nav_buttons/nav_buttons_b6_over.gif',
                       'nav_buttons/nav_buttons_b7_over.gif',
                       'nav_buttons/nav_buttons_b8_over.gif',
                       'nav_buttons/nav_buttons_b4_over.gif');
    
      imageslider('js_imageslide/bg_image001.jpg',
                  'js_imageslide/bg_image002.jpg',
                  'js_imageslide/bg_image003.jpg',
                  'js_imageslide/bg_image004.jpg',
                  'js_imageslide/bg_image005.jpg',
                  'js_imageslide/bg_image006.jpg',
                  'js_imageslide/bg_image007.jpg',
                  'js_imageslide/bg_image008.jpg',
                  'js_imageslide/bg_image009.jpg',
                  'js_imageslide/bg_image0010.jpg',
                  'js_imageslide/bg_image0011.jpg',
                  'js_imageslide/bg_image0012.jpg');
    } // end onload
    
    </script>
    </head>
    <body>
    ...
    </body>
    </html>

  10. #10
    SitePoint Enthusiast
    Join Date
    Feb 2003
    Posts
    46
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi MikeFoster,
    Thanks so much for your help.

    Well originally, the above two scripts are the one which was giving me problem. This error you have encountered is an alternative script to the Menu Buttons which loads all the buttons but blocking the imageslider(Random Table BG Image Rotater).

    The two original scripts as above is the opposite. The imageslider loads all the bg images but IE and Netscape react differently towards the menu buttons absolute url to the images as shown above.

    All the same, I don't get you well what you are suggesting here. What about the two scripts. Do you mean the two should stay where they are before adding what you are suggesting? Could you pls explain further what exactly to do with the script.

    I am now trying to link both scripts externally to see how that also will influence the onLoad handler of the scripts and that's what you are now seeing. Of course, it does not work..

    I guess the real problem lies in the Random Table BG Image Rotater which is somehow set as a single js asumming as the only js in the page with the only onLoad function handler with no real name or difination. But unfortunately, the onLoad handler have to handle now multiple js which I have no idea how to go about it as I am not the programmer of the imageslider script. I got this script from the forum and the member who furnished me with the script either refused to say anything about the problem or just ignore me completely which is also very frustrating and quite very strange for somebody who rendered a free help.

    So any kind of help is welcome.

    Thanks again in advance.

    CocoX.
    P E A C E IS THE ONLY WAY TO P E A C E ...!

  11. #11
    I'll take mine raw silver trophy MikeFoster's Avatar
    Join Date
    Dec 2002
    Location
    Alabama, USA
    Posts
    2,560
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I'll be honest, it's hard to help when the page online is not what we're debugging. I tried to piece together everything you've provided. All the js is in the html file (for this testing). I've attached this file. Please go over it. Let's start over, debugging with this file - or, you put it all together like you want it and we'll debug with that file. When you get the file like you want it (for now leave all js in the html file) please upload it to your site so we'll both be looking at and debugging the same page.

    thanks

  12. #12
    I'll take mine raw silver trophy MikeFoster's Avatar
    Join Date
    Dec 2002
    Location
    Alabama, USA
    Posts
    2,560
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Sorry. The attachment has to be approved.
    Last edited by MikeFoster; Nov 13, 2003 at 13:43.

  13. #13
    SitePoint Enthusiast
    Join Date
    Feb 2003
    Posts
    46
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi MikeFoster,

    Thanks so much this is a real start.

    No problem I shall wait for the attachment.

    Thanks again.

    CocoX.
    P E A C E IS THE ONLY WAY TO P E A C E ...!

  14. #14
    I'll take mine raw silver trophy MikeFoster's Avatar
    Join Date
    Dec 2002
    Location
    Alabama, USA
    Posts
    2,560
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi CocoX,

    I've uploaded the zip file to my site. Let me know when you have it.

  15. #15
    SitePoint Enthusiast
    Join Date
    Feb 2003
    Posts
    46
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi MikeFoster,

    Thanks a thousand times for all your help and efforts.

    Firstly, I could not get the zip file. When I clicked, it really sent me to your site but I could not find the file and the download also didn't start automatically. I also tried to save the link but nothing happend.

    But all the same as said, thanks so much for the help.

    Everything seems to be working fine now. You can check it up by visiting the site. What really happend was, I went through the whole script and the html coding one by one and I found out from the menu button script some strange function calls as I didn't know the real function of the code, I removed it completely to try it. And that was the magic all the menu buttons load togather with the Table Background Images appearing randomly as expected. Very interesting.

    I am really happy now that everything works fine. It's rather unfortunate that web developers have to go through such frustrations some times.

    I would also love to have a look at the script you tried to send me. I may also need it in the future.

    Thanks a million times again.

    CocoX.
    P E A C E IS THE ONLY WAY TO P E A C E ...!

  16. #16
    SitePoint Wizard silver trophy
    Join Date
    May 2003
    Posts
    1,843
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    ...and thank you for stalking me around the web, bad-mouthing my attempts to help you out, and implying that there was something wrong with my code, it was ruining your site, and I was refusing to 'fix' it because of some personal shortcoming. Left several other annoyed people in your wake as well.

    I'd appreciate it if you didn't use anything I gave you. My worst single experience in several years of doing this. Spare me the whiny response, not interested.

    adios
    ::: certified wild guess :::

  17. #17
    I'll take mine raw silver trophy MikeFoster's Avatar
    Join Date
    Dec 2002
    Location
    Alabama, USA
    Posts
    2,560
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    CocoX, sorry about the zip file. But I'm glad you solved the problem.

  18. #18
    SitePoint Enthusiast
    Join Date
    Feb 2003
    Posts
    46
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    NOTE OF APOLOGY TO ADIOS: TO ME YOU ARE STILL MY HERO!!

    Hi adios,
    Sorry for the way you feel. Try to understand my situation as well.

    As said earlier, I honored you personally for the script and by then when I could not get it to work, I pleaded for you just to say something after viewing my site. Nothing had been heard from you. I also stated that I am not a javascript expert and therefore need your help. I didn't know what was causing the problem.

    Thus, was I all over the net seeking help. Of cause, this could scare other members as well. Sorry for that.

    Adios with your record of helping other members or users I couldn't really understand why you kept silence without a word of assurance and motivation. Please adios, do not be angree with me just take it as one of your frustrated students out of control. That's one of those bad experiences you teachers have to go through which is rather unfortunate.

    So, once again sorry for what this situation might have cause you.
    Thanks you all for the help you offered through the process of this problem.

    CocoX.
    P E A C E IS THE ONLY WAY TO P E A C E ...!


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •