www.webdeveloper.com
Page 1 of 3 123 LastLast
Results 1 to 15 of 34

Thread: One js script is blocking every js on the page. Why ???

  1. #1
    Join Date
    Aug 2004
    Location
    Switzerland
    Posts
    1,101

    One js script is blocking every js on the page. Why ???

    Hi !
    On my website, I did a script to have a specific style sheet if the browser window is resized to 1024px or less than that. Everything seemed to be working alright, but when I uploaded that yesterday, I realized that this script broke all my other javascript on the page. Popup (shadowbox) wouldn't load, the ajax effects on the online shop would be totally broken, and I can't figure out why.

    Here is the script :
    Code:
    <script language="JavaScript" type="text/javascript">
    day=new Date()     //..get the date
    
    x=day.getHours()    //..get the hour
    	function getBrowserWidth(){
    		if (window.innerWidth){
    			return window.innerWidth;}	
    		else if (document.documentElement && document.documentElement.clientWidth != 0){
    			return document.documentElement.clientWidth;	}
    		else if (document.body){return document.body.clientWidth;}		
    			return 0;
    	}
    
    var browserWidth = getBrowserWidth();
    
    if(x>=8 && x<20) {
    // dynamicLayout by Kevin Hale
    function dynamicLayout(){
    var browserWidth = getBrowserWidth();
    
    	//Load Wide CSS Rules
    	if (browserWidth <= 1024){
    		changeLayout("fantasy_1024");
    	}
    	//Load Wider CSS Rules
    	if (browserWidth > 1024){
    		changeLayout("fantasy");
    	}
    }
    
    if (browserWidth <= 1024){
    currentStyle = "fantasy_1024";
    }
    if (browserWidth > 1024){
    currentStyle = "fantasy";
    }
    } 
    
    else {
    
    // dynamicLayout by Kevin Hale
    function dynamicLayout(){
    var browserWidth = getBrowserWidth();
    
    	//Load Wide CSS Rules
    	if (browserWidth <= 1024){
    		changeLayout("fantastique_1024");
    	}
    	//Load Wider CSS Rules
    	if (browserWidth > 1024){
    		changeLayout("fantastique");
    	}
    }
    if (browserWidth <= 1024){
    currentStyle = "fantastique_1024";
    }
    if (browserWidth > 1024){
    currentStyle = "fantastique";
    }
    }
    </script>
    <script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/js/dynamiclayout.js"></script>
    and here is dynamiclayout.js :
    Code:
    // - - - - - - - - - - - - - - - - - - - - -
    //
    // Title : Dynamic Resolution Dependent Layout Demo
    // Author : Kevin Hale
    // URL : http://particletree.com
    // getBrowserWidth is taken from The Man in Blue Resolution Dependent Layout Script
    // http://www.themaninblue.com/experiment/ResolutionLayout/
    
    
    
    
    // changeLayout is based on setActiveStyleSheet function by Paul Sowdon 
    // http://www.alistapart.com/articles/alternate/
    function changeLayout(description){
       var i, a;
       for(i=0; (a = document.getElementsByTagName("link")[i]); i++){
    	   if(a.getAttribute("title") == description){a.disabled = false;}
    	   else if(a.getAttribute("title") != "default"){a.disabled = true;}
       }
    
    }
    
    function reloading() {
    	location = location.href;
    }
    
    	//addEvent() by John Resig
    	function addEvent( obj, type, fn ){ 
    	   if (obj.addEventListener){ 
    	      obj.addEventListener( type, fn, false );
    	   }
    	   else if (obj.attachEvent){ 
    	      obj["e"+type+fn] = fn; 
    	      obj[type+fn] = function(){ obj["e"+type+fn]( window.event ); } 
    	      obj.attachEvent( "on"+type, obj[type+fn] ); 
    	   } 
    	} 
    	
    	//Run dynamicLayout function when page loads and when it resizes.
    	addEvent(window, 'load', dynamicLayout);
    	addEvent(window, 'resize', reloading);
    At first, I thought of a duplicate variable, but I have the impression it's more something about the page reloading.
    Anybody has a clue about that ? For the moment, I put everything back like before on the online website, so I can only test it localy.
    I'm going crazy with this script, took already quite long to make it work with the alternate stylesheet depending on computer's clock, and this on top of it is quite discouraging.
    Thanks for all advice !

    PS : all the other scripts are after this one on the page. It's a wordpress installation so I can't modify it. I tried doing a static page and calling the other scripts before this one, but it didn't work.
    Last edited by Ness_du_Frat; 12-02-2008 at 05:17 AM.

  2. #2
    Join Date
    Dec 2005
    Posts
    155
    var browserWidth = getBrowserWidth();

    This line is there twice, try removing at one of the places

  3. #3
    Join Date
    Aug 2004
    Location
    Switzerland
    Posts
    1,101
    Actually, this was done on purpose. If I remove it, the script doesn't work anymore (I know, it's really weird...).

  4. #4
    Join Date
    Aug 2004
    Location
    Switzerland
    Posts
    1,101
    Anybody else with a suggestion ?

  5. #5
    Join Date
    Dec 2005
    Location
    Queen Creek, AZ
    Posts
    1,564
    have you checked that your brace count is correct, and in the right place?
    the function "dynamicLayout" will only exist in scope if x is between 8 and 20...or is that intentional?

  6. #6
    Join Date
    Oct 2008
    Location
    U.S.
    Posts
    726
    This first script of yours:
    Code:
    <script language="JavaScript" type="text/javascript">
    day=new Date()     //..get the date
    
    x=day.getHours()    //..get the hour
    	function getBrowserWidth(){
    		if (window.innerWidth){
    			return window.innerWidth;}	
    		else if (document.documentElement && document.documentElement.clientWidth != 0){
    			return document.documentElement.clientWidth;	}
    		else if (document.body){return document.body.clientWidth;}		
    			return 0;
    	}
    
    var browserWidth = getBrowserWidth();
    
    if(x>=8 && x<20) {
    // dynamicLayout by Kevin Hale
    function dynamicLayout(){
    var browserWidth = getBrowserWidth();
    
    	//Load Wide CSS Rules
    	if (browserWidth <= 1024){
    		changeLayout("fantasy_1024");
    	}
    	//Load Wider CSS Rules
    	if (browserWidth > 1024){
    		changeLayout("fantasy");
    	}
    }
    
    if (browserWidth <= 1024){
    currentStyle = "fantasy_1024";
    }
    if (browserWidth > 1024){
    currentStyle = "fantasy";
    }
    } 
    
    else {
    
    // dynamicLayout by Kevin Hale
    function dynamicLayout(){
    var browserWidth = getBrowserWidth();
    
    	//Load Wide CSS Rules
    	if (browserWidth <= 1024){
    		changeLayout("fantastique_1024");
    	}
    	//Load Wider CSS Rules
    	if (browserWidth > 1024){
    		changeLayout("fantastique");
    	}
    }
    if (browserWidth <= 1024){
    currentStyle = "fantastique_1024";
    }
    if (browserWidth > 1024){
    currentStyle = "fantastique";
    }
    }
    </script>
    <script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/js/dynamiclayout.js"></script>

    I reworked that for you, as it is quite messy and improper. Definitely should change that to this:
    Code:
    <script language="JavaScript" type="text/javascript">
    
    function getBrowserWidth(){
      if (window.innerWidth) {
        return window.innerWidth;
      } else if (document.documentElement && document.documentElement.clientWidth != 0) {
        return document.documentElement.clientWidth;
      } else if (document.body) {
        return document.body.clientWidth;
      } else {		
        return 0;
      }
    }
    
    function dynamicLayout(){
      var d = new Date(); //..get the date
      var x = d.getHours(); //..get the hour
      var browserWidth = getBrowserWidth();
      var smallLayout = "fantastique_1024"; //will be this from 8 p.m. through 7:59 a.m.
      var bigLayout = "fantasy"; //will be this from 8 p.m. through 7:59 a.m.
      if(x >= 8 && x < 20) {
        smallLayout = "fantasy_1024"; //hours 8 a.m. through 7:59 p.m.
        bigLayout = "fantastique"; //hours 8 a.m. through 7:59 p.m.
      }
      if (browserWidth <= 1024) {
        changeLayout(smallLayout); //Load Wide CSS Rules
      }
      if (browserWidth > 1024){
        changeLayout(bigLayout); //Load Wider CSS Rules
      }
    }
    
    </script>
    <!-- Are you positive the php code in this tag below is correct? 
    Try without the php code and hard code the path to the .js file to be sure, if still trouble -->
    <script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/js/dynamiclayout.js"></script>

    Then, if still trouble, change this in the dynamiclayout.js file:
    //Run dynamicLayout function when page loads and when it resizes.
    addEvent(window, 'load', dynamicLayout);
    addEvent(window, 'resize', reloading);
    To this:
    Code:
    //Run dynamicLayout function when page loads and when it resizes.
    window.onload = function () { dynamicLayout(); };
    addEvent(window, 'resize', reloading);
    And if that still does not work, change that to this instead:
    Code:
    function addLoadEvent(func){
      var oldonload = window.onload;
      if (typeof window.onload != 'function') {
        window.onload = func;
      } else {
        window.onload = function () {
          if (oldonload) {
            oldonload();
          }
          func();
        }
      }
    }
    
    addLoadEvent(dynamicLayout);
    
    addEvent(window, 'resize', reloading);
    Let us know if this works out. If not, I may have other ideas, just ask.

  7. #7
    Join Date
    Dec 2005
    Posts
    155
    var browserWidth = getBrowserWidth();

    remove var in the function, you are declaring a variable twice that might have created a problem.

  8. #8
    Join Date
    Aug 2004
    Location
    Switzerland
    Posts
    1,101
    @astupidname :
    thanks for your work ! Actually, I'm a quite messy person, but my script, at first, was something along the lines of yours.
    Main problem : I NEED the variable "currentStyle" to be set to "fantasy", "fantastique" "fantasy_1024" or "fantastique_1024" according to the time of the day and the layout. The variable currentStyle is called many times in the rest of the page, for various crucial elements of the design, and if it's inside the function, it doesn't work, even if set as global variable.
    Anyway, I tried it, but it didn't work. As soon as I changed the things inside dynamicfunction, the layout stopped changing. But the scripts on the page are still blocked.
    Too bad

    @jvanamali : tried it, didn't change anything.
    @crazyMerlin : brace count seems correct, double checked it right now. And if you check it, function dynamiclayout is also called in the else statement. So it's working at anytime, but it's not returning the same values.

    I noticed something else. If I store my choice in a cookie (by clicking on one item in the switcher, therefore stocking the value of currentStyle in a cookie), all the javascript work like usual. Having currentStyle already stored bypasses the dynamiclayout function.
    So it's this part of the script, specifically, that is messing up with the javascript.
    Also, it doesn't mess up with everything, as some things ("tigra hints") are still working, although there are located after the dynamiclayout function. What is the problem with all the ajax stuff ? (scriptaculous and thickbox, lightbox and similar stuff)
    I checked the generated script, and all the URLs are correct, no tag was omitted, and everything else is working.
    On the generated script, the calls to the scriptaculous files, thickbox scripts and such are done after the dynamic layout thing, but before the rest of the page. Nothing is wrong there. Some javascript is located after dynamic layout (tigra hints, but also some javascript simple image switch), and still working like a charm.

    I'm going to give you the URL to the real website, still working with the older script, which works normally, but doesn't include the switch to get a smaller version with a smaller window. I don't want google to reference it, so you'll have to remove the spaces :
    http://www. millesaisons .fr

  9. #9
    Join Date
    Aug 2004
    Location
    Switzerland
    Posts
    1,101
    Anybody else with a suggestion ?

  10. #10
    Join Date
    Nov 2002
    Location
    Milan, MI
    Posts
    152
    Without spending a lot of time debugging or getting into the internals, my knee-jerk reaction is to rename currentStyle to something else. Are you having this problem only in Internet Explorer? currentStyle is used by IE to represent the style sheet settings of an element. I believe it's similar to getComputedStyle, though it's been a long time since I've used either. See:

    http://msdn.microsoft.com/en-us/libr...31(VS.85).aspx

    Of course that means you'll have to rename it everywhere you're using it. But even if it doesn't solve the problem, its probably a good idea to rename it to something else, anyway; to avoid other potential conflicts.

    One other thing I just noticed. You state that the currentStyle setting doesn't work when it's in the dynamicLayout function; but dynamicLayout appears to be called onload. So are you sure that the rest of your scripts are accessing currentStyle only after the dynamicLayout function is called? If you're setting currentStyle while the page is loading but then calling dynamicLayout after the page is finished loading, then they may be out of sync anyway; since the browser may not have completely finished setting the window-based parameters you're referring to for the layout swap until after the page has finished loading.

    HTH,

  11. #11
    Join Date
    Aug 2004
    Location
    Switzerland
    Posts
    1,101
    Hi Dragle,
    currentStyle is the one thing that's working perfecly all through the page. Everything is working as it should, page is loading without problem, the design is like it should be.
    My problem is linked specifically to two other scripts : namely Thickbox, and the scripts used in the online shop, which are using the scriptaculous library.
    Everything else on the page is working as it should, tigra hints, which are also javascript, are working fine, the javascript image swap is working.

    I could change currentStyle to something else, but that would mean modifying something like 20 pages, and at the moment, I don't have any issue with this specific script on the online website. It was tested in IE as well, and works smoothly.

    But if you think that this particular variable might be the thing that is blocking the other scripts, I will rename it to something else (which would be a problem, because all the pages online at the moment use currentStyle, that mean I would have to change everything, reupload everything, change it in the working file as well. Now, everything is set up and I just need this specific file to work, then it's a matter of uploading only one file for everything to be in place and working).
    Honestly, I don't see why currentStyle would be blocking things now, as the only new thing is the dynamiclayout script, and all the currentStyle and friends script was here before and was working well with the rest of the scripts.

  12. #12
    Join Date
    Nov 2002
    Location
    Milan, MI
    Posts
    152
    The changeLayout function, as you've implemented it, will disable anything defined via a link tag that does not have a title matching the desired title or 'default.' Presumably some of your other scripts are depending on some of those linked stylesheets (for example, millesaisons.css, thickbox.css, extra.css, to name a few). So, when you set up your test page, did you remember to code all the links that you want to persist between the different style swaps with a title of 'default?'

    Also, when you get it going I suspect you will have to do something to ensure you don't trigger resizes in Internet Explorer when you don't expect them. When I tried testing it here IE fell into an infinite loop (because resetting the style sheets triggered a resize).

    Best regards!

  13. #13
    Join Date
    Aug 2004
    Location
    Switzerland
    Posts
    1,101
    Ohohoh, that might be it !!! Indeed, I think the problem might be with these kind of things... Will be hard to fix, but I'm gonna give it a try... Thanks ! I'll post here once I've added a "default" to all the links in the page and tell you what happened

  14. #14
    Join Date
    Aug 2004
    Location
    Switzerland
    Posts
    1,101
    Yes, that was it !!! I would never have found out without your help. When I designed this and borrowed this script, I knew about the need to set all the other stylesheets to "default", but I totally forgot about the ones generated by wordpress... And as I've done this script two months ago, I really wouldn't have remembered that.
    I'll know have to check the thing in IE. Right now, I'm on a Mac, so I need to grab my pc and make some tests.
    What triggered the infinite loop exactly ?

  15. #15
    Join Date
    Nov 2002
    Location
    Milan, MI
    Posts
    152
    I'm not getting the loop now; so possibly it was style sheet specific (have you made any mods to the style sheets today?)

    You're tying a page reload to the onresize handler of the window; and what was happening to me earlier was that when the style sheet was switched the resize handler would trigger. Then the page would reload, the changeLayout function would be called again, and the style sheet would be switched, and the resize handler would be triggered, and the page would reload, the changeLayout function would be called again... etc.

    But I'm not seeing the problem right at the moment.

    Cheers!

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

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



Recent Articles