www.webdeveloper.com
Page 2 of 3 FirstFirst 123 LastLast
Results 16 to 30 of 34

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

  1. #16
    Join Date
    Aug 2004
    Location
    Switzerland
    Posts
    1,101
    Big problem... Nothing is working in IE. I mean, I don't even get a stylesheet. Firefox is great, I'm sure other browsers are as well, but on IE 7, it's not doing the trick.
    (can't test it in IE8 as I don't have it)

    The most annoying thing is that my server is on my mac and I can't test anything in IE...

    Now, I put everything back to normal, but it's just sooooo painful... I must have spent something like 15 hours on the total thing, not including the hours after I discovered it was messing up with other things on the page, and now, I can't even use it.

    I doubt it's the currentStyle problem : this one as been here since the beginning and was working fine with IE. So I really don't know what it could be. Is IE not recognizing the stylesheets because of their names ? Is the script simply not working in IE ?

  2. #17
    Join Date
    Aug 2004
    Location
    Switzerland
    Posts
    1,101
    I finally managed something : IE doesn't like "alternate stylesheet", and FF doesn't like it when it's NOT alternate stylesheet.
    I did the trick with a simple if IE statement.
    It's working, the resize in IE is not as smooth as in FF, but at least, it's doing something.
    If you want, you can test it here :
    http://www. millesaisons .fr

  3. #18
    Join Date
    Aug 2004
    Location
    Switzerland
    Posts
    1,101
    Arrrgh, problems again...
    I'm at my best friend's, who has windows vista and IE8 (I only have IE7), and I discovered something strange and extremely annoying :
    During the day, everything is acting as the day (I mean, the titles are the day titles, the stylesheets for the popup are day stylesheets, image swap items are day items), exact the main stylesheet...
    If I change the time on the computer to have the night design, everything works fine.
    I have the impression only the night stylesheet is selected by this version of explorer. It works in both designs : 1280 and 1024. Design change, but only for the night version.
    Also, I sometimes have a strange behavior of the items (which are selected according to the variable currentStyle) : sometimes, the 1280 items are appearing in the 1024 version, and reverse.
    What can that be ?
    In IE7, everything works fine.

    This is what I added :
    <!--[if IE]>
    <link rel="stylesheet" href="http://www.millesaisons.fr/millesaisons/wp-content/themes/default-fr/fantasy_1024.css" type="text/css" title="fantasy_1024" />
    <link rel="stylesheet" href="http://www.millesaisons.fr/millesaisons/wp-content/themes/default-fr/fantasy.css" type="text/css" title="fantasy" />
    <link rel="stylesheet" href="http://www.millesaisons.fr/millesaisons/wp-content/themes/default-fr/fantastique_1024.css" type="text/css" title="fantastique_1024" />
    <link rel="stylesheet" href="http://www.millesaisons.fr/millesaisons/wp-content/themes/default-fr/fantastique.css" type="text/css" title="fantastique" />
    <![endif]-->

    <link rel="alternate stylesheet" href="http://www.millesaisons.fr/millesaisons/wp-content/themes/default-fr/fantasy_1024.css" type="text/css" title="fantasy_1024" />
    <link rel="alternate stylesheet" href="http://www.millesaisons.fr/millesaisons/wp-content/themes/default-fr/fantasy.css" type="text/css" title="fantasy" />
    <link rel="alternate stylesheet" href="http://www.millesaisons.fr/millesaisons/wp-content/themes/default-fr/fantastique_1024.css" type="text/css" title="fantastique_1024" />
    <link rel="alternate stylesheet" href="http://www.millesaisons.fr/millesaisons/wp-content/themes/default-fr/fantastique.css" type="text/css" title="fantastique" />
    Site in online right now, I'm not at home, I don't have my files with me so I cannot put everything back to the old version before tonight... ggrrrr...

  4. #19
    Join Date
    Nov 2002
    Location
    Milan, MI
    Posts
    152
    AFAIK, IE does not support conditional function declarations as you've written them, so only your second dynamicLayout declaration is honored by that browser (regardless of current day/hour settings). You would need to either declare those functions as literals, or change your structure such that only one dynamicLayout function is declared including all the logic you need, such as what astupidname recommended earlier in this thread.

    Here's a possible setup that takes your currentStyle variable into consideration:

    Code:
    <script 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;
          return 0;
       }
    
       function getCurrentStyle() {
          var day = new Date();
          var x   = day.getHours();
          var browserWidth = getBrowserWidth();
          if ((x >= 8) && (x < 20))
             return (browserWidth <= 1024) ? 'fantasy_1024' : 'fantasy';
          else
             return (browserWidth <= 1024) ? 'fantastique_1024' : 'fantastique';
       }
       currentStyle = getCurrentStyle();
    
       function dynamicLayout() {
          currentStyle = getCurrentStyle();
          changeLayout(currentStyle);
       }
    
    </script>
    I'm making a couple assumptions here; namely that you don't actually need day, x, and browserWidth to be global variables as in your original definition. But it should give you the idea, and has the advantage that currentStyle should always stay in sync with the style sheet swaps.

    Also, I don't immediately know where changeStyle is, but it might need to be changed, too; i.e., something like:

    Code:
    function changeStyle(theStyle) {
       currentStyle = theStyle;
       changeLayout(currentStyle);
    }
    Good luck!
    Last edited by dragle; 12-05-2008 at 08:55 AM. Reason: added changeStyle note
    Dan

  5. #20
    Join Date
    Aug 2004
    Location
    Switzerland
    Posts
    1,101
    Thanks a lot ! I'll have to wait till late tonight to test it on the actual website, but on the local server, it works (but it always worked in FF). Any chance you know a way to visualize a local server that's located on a mac from a PC ? Tried it yesterday, I see the folders on the root of the server, but I can't access them, although everything was chmoded to 777 and I'm on a local network...
    Anyway, it'll be difficult to test it on IE8 as I don't have this browser. I'll have to check if I can install it without erasing my installation of IE7...

    ChangeStyle is located and called after the rest of the stuff, and used for manual switching of the stylesheets.

    Not sure I understand why I need to change it ? Do I need to make that new function, if currentStyle is set before the function is called, or is it for another reason ?

    Thanks a lot for your time and your help, I don't know what I would have done without you...

  6. #21
    Join Date
    Nov 2002
    Location
    Milan, MI
    Posts
    152
    You're welcome, glad I could help.

    changeStyle is probably fine, I was just thinking off the top of my head that you may have needed to add something to ensure that currentStyle was kept in sync, but it looks like you're handling that in a different way already.

    As far as the Mac, sorry but no; I've never run a Web server off a Mac so can't help you there. I'd assume you would just access it via the local IP like you could a PC server.

    Good luck!

    Dan
    Dan

  7. #22
    Join Date
    Aug 2004
    Location
    Switzerland
    Posts
    1,101
    Dragle, really, really, thanks a million !
    Now, everything is working is FF, IE7 and IE8 (or at least on my version of it, which doesn't seem to be the same as the one my bestfriend is running, as it was not producing the same effects at all : mine would simple load no stylesheet).
    The piece of code you gave me is great, it does exactly the same in five time less code, and I must say I hated how messy mine was.
    However, to have it finally working in IE7 and IE8, it was necessary to do a conditional statement as IE wouldn't load the stylesheets if they were called alternate, and firefox wouldn't allow the switch if alternate was NOT written in the rel attribute.
    In addition to that, I also had to add :
    <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
    to get a stylesheet working in IE8.

    Something remains, though : sometimes, in IE (not in FF), I'll get an error 503, server not available... Is the reload messing somehow with the server ? (the server is not on my computer)
    And also, last question : in IE (and only in IE), if I'm in a browser window smaller than 1024 (so that the small design stylesheet has been loaded) whenever I click on an internal link to go to another page, the big layout will be loaded first, will flicker for about 1 second, and then the small layout will load. Any idea how this could be prevented ? I really don't understand why the big layout would be loaded first...

    You can test it now at the same address : http://www. millesaisons .fr
    I hope everything looks fine on your side too ! I almost felt my heart break today when I was showing the site to my bestfriend and discovered it was completly messed up on her version of IE...

  8. #23
    Join Date
    Aug 2004
    Location
    Switzerland
    Posts
    1,101
    Anybody with advise on this server error ?

  9. #24
    Join Date
    Nov 2002
    Location
    Milan, MI
    Posts
    152
    Do you know if the server has any kind of automated blocking for people who make the same request repeatedly in a short period of time? (Perhaps some type of automatic firewall rule?) The way you have it setup, if a person were to resize their window by grabbing and dragging one of the window's sides (or a corner), the resize handler would be fired continuously again and again as the window shrinks. It's been awhile since I've played with resize handlers, but as I recall IE was always a little tricky in that regard, firing them at times I didn't expect and/or much more often than other browsers did. The net result would be that the server is getting a bunch of hits, all to the same page from the same person, in rapid fire; so the server may be automatically throttling the connection. That's just a guess though; I didn't actually see that problem on your site from here. One possible approach is to add a timeout to the resize handler, say 50 ms or so, and then cancel/reset that timeout each time the resize handler is called (so that immediate, successive hits to the resize handler will be ignored by your script).

    As far as the flicker, as you noted IE doesn't support alternate style sheets; so it's just loading and interpreting all four of them. The big one happens to be last, so therefore its definitions override the other three, and that's the one you briefly see applied to the page first; just long enough for the dynamicLayout call to happen on page load. Then the "real" style sheet is loaded as a result of the dynamicLayout call. On my side FF has a similar problem; I get a style-sheet less display of the data for a moment, then the selected style sheet is applied.

    You may be able to "fix" it by calling dynamicLayout as soon as it is defined (which must be AFTER the style sheets have been loaded), i.e.,
    Code:
       function dynamicLayout() {
          currentStyle = getCurrentStyle();
          changeLayout(currentStyle);
       }
       dynamicLayout();
    With that, you wouldn't need to set currentStyle separately, since the dynamicLayout call does it for you. Be sure to test it, though; I'm still skeptical that all the browsers will consistently report the window width before the page has loaded. But it's probably worth a shot.

    Cheers!
    Dan

  10. #25
    Join Date
    Aug 2004
    Location
    Switzerland
    Posts
    1,101
    Thanks, I'll try that tomorrow, when I've access to the PC again.

    However, just one general question : since dynamiclayout needs the getCurrentStyle function, how does it work it dynamiclayout is called before the getCurrentStyle function ? Won't it trigger an error, something like "undefined function" ?

    So, if I understood your suggestion correctly, I should rewrite it like that :

    Code:
    <!--[if IE]>
    <link rel="stylesheet" href="<?php bloginfo('template_directory'); ?>/fantasy_1024.css" type="text/css" title="fantasy_1024" />
    <link rel="stylesheet" href="<?php bloginfo('template_directory'); ?>/fantasy.css" type="text/css" title="fantasy" />
    <link rel="stylesheet" href="<?php bloginfo('template_directory'); ?>/fantastique_1024.css" type="text/css" title="fantastique_1024" />
    <link rel="stylesheet" href="<?php bloginfo('template_directory'); ?>/fantastique.css" type="text/css" title="fantastique" />
    <![endif]-->
    
    <link rel="alternate stylesheet" href="<?php bloginfo('template_directory'); ?>/fantasy_1024.css" type="text/css" title="fantasy_1024" />
    <link rel="alternate stylesheet" href="<?php bloginfo('template_directory'); ?>/fantasy.css" type="text/css" title="fantasy" />
    <link rel="alternate stylesheet" href="<?php bloginfo('template_directory'); ?>/fantastique_1024.css" type="text/css" title="fantastique_1024" />
    <link rel="alternate stylesheet" href="<?php bloginfo('template_directory'); ?>/fantastique.css" type="text/css" title="fantastique" />
    
    
    <script type="text/javascript">
    
       function dynamicLayout() {
          currentStyle = getCurrentStyle();
          changeLayout(currentStyle);
       }
    
       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;
       }
    
       function getCurrentStyle() {
          var day = new Date();
          var x   = day.getHours();
          var browserWidth = getBrowserWidth();
          if ((x >= 8) && (x < 20))
             return (browserWidth <= 1024) ? 'fantasy_1024' : 'fantasy';
          else
             return (browserWidth <= 1024) ? 'fantastique_1024' : 'fantastique';
       }
    
    </script>
    <script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/js/dynamiclayout.js"></script>
    Is that correct ?


    About the server, yes, this must be the problem. For the timeout for the resize-handler, I'll try to do some research to see how I could implement something like that, but it seems a great idea.

    Thanks !
    Last edited by Ness_du_Frat; 12-08-2008 at 04:22 PM.

  11. #26
    Join Date
    Nov 2002
    Location
    Milan, MI
    Posts
    152
    No, I just meant to throw in an extra dynamicLayout call as the script was actually loading (so that the style sheet can be selected as the page is loading, instead of having to wait until the page is completely loaded). I.E., the top script would become:
    Code:
    <script 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;
          return 0;
       }
    
       function getCurrentStyle() {
          var day = new Date();
          var x   = day.getHours();
          var browserWidth = getBrowserWidth();
          if ((x >= 8) && (x < 20))
             return (browserWidth <= 1024) ? 'fantasy_1024' : 'fantasy';
          else
             return (browserWidth <= 1024) ? 'fantastique_1024' : 'fantastique';
       }
    
       function dynamicLayout() {
          currentStyle = getCurrentStyle();
          changeLayout(currentStyle);
       }
       dynamicLayout();
    
    </script>
    Leave the rest as is. You will call dynamicLayout again on page load, but the extra call shouldn't hurt anything and should avoid potential issues with scenarios where the window's width isn't accurately set while the page is loading.

    And to answer your other question, yes, you can get away with this:
    Code:
       <script type="text/javascript">
          alert(theFunction());
          function theFunction() {
             return 'It worked.';
          }
       </script>
    as long as theFunction is a named (as opposed to anonymous/literal) function and is defined within the same <script>...</script> block as the code that's calling it. Otherwise, theFunction has to be defined prior to the call.

    Cheers!
    Dan

  12. #27
    Join Date
    Aug 2004
    Location
    Switzerland
    Posts
    1,101
    Ok, great !!!
    Tested in FF, I still get a moment where no stylesheet is loaded, but I guess that's not something avoidable.
    I'll test tonight on the PC and I'll post the feedback here.
    Thanks a lot, and thanks for your explanation with the function ! Javascript is really not something I'm used to, so I'm grateful for your help and for your explanations !!!

  13. #28
    Join Date
    Nov 2002
    Location
    Milan, MI
    Posts
    152
    My bad; I didn't look closely enough at the code and broke the rule I mentioned above. dynamicLayout includes a call to changeLayout, which isn't defined until the next script block; therefore your original assumption was correct: dynamicLayout can't be called until after the next script block is loaded. Do you have access to the script where changeLayout is defined? If so, just add the dynamicLayout call there:
    Code:
    ...
    ...
       dynamicLayout();
       //Run dynamicLayout function when page loads and when it resizes.
       addEvent(window, 'load', dynamicLayout);
       addEvent(window, 'resize', reloading);
    Otherwise, you could just add another script block after the one that loads the changeLayout function:
    Code:
    <script type="text/javascript">
       dynamicLayout();
    </script>
    And then remove the extra dynamicLayout call from where I had it in the example in my previous post.

    For FF, are you sure you can't just mark one of the stylesheets outside the IE conditional block as a normal stylesheet (as opposed to alternate)? That, in combination with the extra dynamicLayout might make the effect a bit smoother there.

    Cheers!
    Dan

  14. #29
    Join Date
    Aug 2004
    Location
    Switzerland
    Posts
    1,101
    Ok, great ! I made the changes you suggested, I'll test in a few hours on the PC !

  15. #30
    Join Date
    Aug 2004
    Location
    Switzerland
    Posts
    1,101
    So, I followed your suggestions, and it's working, kind of. I don't get the big stylesheet appearing in IE before the smaller one loads, but I do get quite a delay before the page loads. I think it's better than the big-small effect.
    In FF, I tried marking one of the stylesheet as "normal" (simply deleting the alternate in the rel attribute), but it was messing up with the thickbox style sheet (no idea why) and didn't help. So it remains like that.
    On your side, do you see the delay in IE ?
    Anyway, I think I'll leave it like that, it will never be perfect and I don't feel like spending 10 extra hours on this, and making you spend time as well is making me feel a bit guilty.
    Thanks a billion for your precious help on this !!! You rule !

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