SitePoint Sponsor

User Tag List

Results 1 to 24 of 24
  1. #1
    SitePoint Addict
    Join Date
    Jun 2007
    Posts
    358
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    problem display:none/block divs via javascript.

    hello,

    Rather than going on a wild explanation on what's the the problem, it'll be much quicker and easier if i let you look at it yourself, so I'll post my page source (actual contents taken out, of course).

    HTML Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    
    <html xmlns="http://www.w3.org/1999/xhtml">
    
    <head>
    	<meta http-equiv="Content-Language" content="en-us" />
    	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    </head>
    
    <style>
    p
    {
     margin: 0px;
     padding: 0px;
    }
    
    body, html
    {
     width: 100%;
     height: 100%;
     margin: 0px; 
     padding: 0px;
     background-color: #e9e9e9;
    }
    
    form
    {
     margin: 0px;
     padding: 0px;
    }
    
    .favBg
    {
     display: none;
     border: 0px;
     padding: 0px;
     margin: 0px;
     width: 100%;
     position: absolute;
     background-color: #000000;
     opacity: 0.5;
     filter: Alpha(opacity:50);
     z-index: 999;
    }
    
    .favArea
    {
     display: none;
     border-width: 1px;
     border-style: solid;
     border-color: #125717;
     padding: 0px;
     position: absolute;
     background-color: white;
     z-index: 1000;
    }
    
    .button1
    {
     display: none;
     margin-top: 86px;
     margin-bottom: 0px;
     margin-left: 0px;
     margin-right:0px;
     padding: 0px;
     width: 500px;
     height: 295px;
     position: relative;
     background-color: blue;
    }
    
    .button2
    {
     display: none;
     margin-top: 86px;
     margin-bottom: 0px;
     margin-left: 0px;
     margin-right:0px;
     padding: 0px;
     width: 500px;
     height: 295px;
     position: relative;
     background-color: red;
    }
    
    .button3
    {
     display: none;
     margin-top: 86px;
     margin-bottom: 0px;
     margin-left: 0px;
     margin-right:0px;
     padding: 0px;
     width: 500px;
     height: 295px;
     position: relative;
     background-color: green;
    }
    
    .button4
    {
     display: none;
     margin-top: 86px;
     margin-bottom: 0px;
     margin-left: 0px;
     margin-right: 0px;
     padding: 0px;
     width: 500px;
     height: 295px;
     position: relative;
     background-color: yellow;
    }
    
    .infoMsg
    {
      padding-top: 10px;
      padding-bottom: 0px;
      padding-left: 0px;
      padding-right: 0px;
      margin-top: 0px;
      margin-bottom: 0px;
      margin-left: 10px;
      margin-right: 10px;
      font-family: Verdana, Arial, Tahoma;
      font-weight: bolder;
      font-size: 15px;
      color: white;
      letter-spacing: 0px;
      position: relative;
    }
    
    .closeMsg
    {
      padding: 0px;
      margin-top: 2px;
      margin-bottom: 0px;
      margin-left: 5px;
      margin-right: 0px;
      font-family: Verdana, Arial, Tahoma;
      font-weight: none;
      font-size: 12px;
      color: black;
      letter-spacing: 0px;
      position: relative;
    }
    
    .buttons
    {
     border-width: 2px;
     border-style: solid;
     border-color: black;
     padding: 0px;
     margin-top: 80px;
     margin-bottom: 0px;
     margin-right: 0px;
     margin-left: 0px;
    }
    
    </style>
    
    <script>
    
    function OffWindowHeight()
    {
     var OffWindowHeight=0;
    
     window.scrollTo(0,10000000);
    
     if(typeof self.pageYOffset!='undefined')
     OffWindowHeight=self.pageYOffset;
     else if(document.compatMode && document.compatMode != 'BackCompat')
     OffWindowHeight=document.documentElement.scrollTop;
     else if(document.body && typeof(document.body.scrollTop)!='undefined')
     OffWindowHeight=document.body.scrollTop;
    
     window.scrollTo(0,0);
    
     return OffWindowHeight;
    }
    
    function WindowHeight() 
    {
      var WindowHeight = 0;
      if( typeof( window.innerWidth ) == 'number' ) 
      WindowHeight = window.innerHeight;
      else if (document.documentElement &&  document.documentElement.clientHeight) 
      WindowHeight = document.documentElement.clientHeight;
      else if(document.body && document.body.clientHeight) 
      WindowHeight = document.body.clientHeight;
    
      return WindowHeight;
    }
    
    function pHeight()
    {
      var pHeight = OffWindowHeight() + WindowHeight();
      return pHeight;
      
    }
    
    function favBg()
    {
      var favHeight = document.getElementById('favBg');
      favHeight.style.height = pHeight() + 'px';
    }
    
    var cdiv = "blank";
    function favArea() 
    {
     if (cdiv == "blank") 
     { cdiv = window.setInterval("favArea()", 50); }
     var msgBox = document.getElementById("favArea");
     objh = parseFloat(msgBox.style.height)/2;
     objw = parseFloat(msgBox.style.width)/2;
     msgBox.style.top = Math.floor(Math.round((document.documentElement.offsetHeight/2)+document.documentElement.scrollTop)-objh)+'px';
     msgBox.style.left = Math.floor(Math.round((document.documentElement.offsetWidth/2)+document.documentElement.scrollLeft)-objw)+'px';
    }
    
    function button1()
    {
     var favBg = document.getElementById('favBg');
     favBg.style.display = 'block';
     var favAreaMsg = document.getElementById('favArea');
     favAreaMsg.style.display = 'block';
     var button1 = document.getElementById('button1');
     button1.style.display = 'block';
    }
    
    function button2()
    {
     var favBg = document.getElementById('favBg');
     favBg.style.display = 'block';
     var favAreaMsg = document.getElementById('favArea');
     favAreaMsg.style.display = 'block';
     var button2 = document.getElementById('button2');
     button2.style.display = 'block';
    }
    
    function button3()
    {
     var favBg = document.getElementById('favBg');
     favBg.style.display = 'block';
     var favAreaMsg = document.getElementById('favArea');
     favAreaMsg.style.display = 'block';
     var button3 = document.getElementById('button3');
     button3.style.display = 'block';
    }
    
    function button4()
    {
     var favBg = document.getElementById('favBg');
     favBg.style.display = 'block';
     var favAreaMsg = document.getElementById('favArea');
     favAreaMsg.style.display = 'block';
     var button4 = document.getElementById('button4');
     button4.style.display = 'block';
    }
    
    function closeMsg()
    {
     var favBg = document.getElementById('favBg');
     favBg.style.display = 'none';
     
     var favAreaMsg = document.getElementById('favArea');
     favAreaMsg.style.display = 'none';
     
     var button1 = document.getElementById('button1');
     button1.style.display = 'none';
     
     var button2 = document.getElementById('button2');
     button2.style.display = 'none';
     
     var button3 = document.getElementById('button3');
     button3.style.display = 'none';
     
     var button4 = document.getElementById('button4');
     button4.style.display = 'none'; 
    }
    </script>
    
    <body onload="favBg(); favArea();">
    
    <div id="favArea" class="favArea" style="width: 500px; height: 400px;">
     <div id="button1" class="button1"><p class="infoMsg">button1</p></div>
     <div id="button2" class="button2"><p class="infoMsg">button2</p></div>
     <div id="button3" class="button3"><p class="infoMsg">button3</p></div> 
     <div id="button4" class="button4"><p class="infoMsg">button4</p></div> 
     
     <p class="closeMsg"><a onclick="closeMsg();">Close</a></p>
    </div>
    
    <div id="favBg" class="favBg"></div>
    
    <div align="center">
    <div style="width: 400px; height:200px; background-color: white;">
    <form action="page.php" method="post">
     <input onclick="closeMsg(); button1();" class="buttons" style="color: blue;" type="button" value="button1"> 
     <input onclick="button2();" class="buttons" style="color: red;" type="button" value="button2"> 
     <input onclick="button3();" class="buttons" style="color: green;" type="button" value="button3"> 
     <input onclick="button4();" class="buttons" style="color: yellow;" type="button" value="button4">
    </form>
    </div>
    </div>
    
    </body>
    </html>
    Firstly try the above code in Firefox and opera. It works well. Try clicking then in order and randomly e.g:- 'button1' then 'button4' then 'button2' everything will be good.

    Similarly try the code in the above manner in internet explorer, the results are different. It just isn't working the way it's supposed to, as which you can understand from trying it out in ff and opera.

    in ie if done like this: 'button1' then 'button4' then 'button2', it the shows div with id 'button4' with no text, instead of the div with id 'button2' and text saying "button2".

    Also notice that in clicking 'close' the function closeMsg() is run, wich sets all to 'display: none'.

    Just check out the code, you'll understand what's the problem. I'll only complicate thinks if i try to explain it.

    Thanks in advance

  2. #2
    SitePoint Wizard gRoberts's Avatar
    Join Date
    Oct 2004
    Location
    Birtley, UK
    Posts
    2,439
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I've had a look and I can replicate the issue, but I can't find the reason why.

    I'll have a play soon.


  3. #3
    SitePoint Addict
    Join Date
    Jun 2007
    Posts
    358
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    ah gRoberts again, you are a very helpful person. Thanks in advance

  4. #4
    SitePoint Wizard gRoberts's Avatar
    Join Date
    Oct 2004
    Location
    Birtley, UK
    Posts
    2,439
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    i'm trying to rewrite this to see if there is anything wrong, but I can't find what it is. What are you trying to do?


  5. #5
    SitePoint Addict
    Join Date
    Jun 2007
    Posts
    358
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by gRoberts View Post
    i'm trying to rewrite this to see if there is anything wrong, but I can't find what it is. What are you trying to do?
    well i think that would be obvious if you tried out the code on browser, anyway here is what I'm trying to do

    suppose there are four buttons, each brings up a div when clicked, which is closed upon clinking "close" on the div.

    There are 4 buttons and 4 divs associated to the content related to each buttons (text, images etc.. in div).

    Consider example a button "gallery" brings up a div with image thumbnails.

    here the the 4 divs share the global background div and the containing div. only the contents in the containing div are different. so Different divs are placed in the containing div, eg:- gallery, logos, portfolio etc..

    i don't know what's wrong, the script works perfect in all browsers except internet explorer. Its probably an IE "block" rendering bug.

    So in a nutshell, what I'm trying to do is make it work on IE without completely changing the script if possible (because I'm almost sure it's a IE bug and not a error in script)

    hope i explained it correctly, I'm really not good at explaining things

  6. #6
    SitePoint Guru Chroniclemaster1's Avatar
    Join Date
    Jun 2007
    Location
    San Diego, CA
    Posts
    784
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I hope 3s not a crowd.

    I use this general method for a set of drop down menus on my website. Let me poke around and see what I can come up with too.
    Whatever you can do or dream you can, begin it.
    Boldness has genius, power and magic in it. Begin it now.

    Chroniclemaster1, Founder of Earth Chronicle
    A Growing History of our Planet, by our Planet, for our Planet.

  7. #7
    SitePoint Guru Chroniclemaster1's Avatar
    Join Date
    Jun 2007
    Location
    San Diego, CA
    Posts
    784
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    ok, I've diagnosed the problem. In IE, clicking a button fundamentally changes favArea. It applies the color of the button, and each button overrides the lower numbers.

    In Firefox, favArea is always white when it's first called so that the final step, button, applies the appropriate color and text. In IE favArea is only white the very first time it's called. Then the button you click applies that color to favArea. So when you click your second button, favArea comes up the color of the previous button. If your second button is higher than the first, the button function overlays that color, but if the second (and successive) buttons are lower, the button function is apparently applied "under" the color.

    I can also doesn't seem to be a cascade issue. Changing the order of the button styles doesn't affect which takes precedence. Button 4 always trumps the other styles.
    Whatever you can do or dream you can, begin it.
    Boldness has genius, power and magic in it. Begin it now.

    Chroniclemaster1, Founder of Earth Chronicle
    A Growing History of our Planet, by our Planet, for our Planet.

  8. #8
    SitePoint Addict
    Join Date
    Jun 2007
    Posts
    358
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Chroniclemaster1 View Post
    ok, I've diagnosed the problem. In IE, clicking a button fundamentally changes favArea. It applies the color of the button, and each button overrides the lower numbers.

    In Firefox, favArea is always white when it's first called so that the final step, button, applies the appropriate color and text. In IE favArea is only white the very first time it's called. Then the button you click applies that color to favArea. So when you click your second button, favArea comes up the color of the previous button. If your second button is higher than the first, the button function overlays that color, but if the second (and successive) buttons are lower, the button function is apparently applied "under" the color.

    I can also doesn't seem to be a cascade issue. Changing the order of the button styles doesn't affect which takes precedence. Button 4 always trumps the other styles.
    i put each color specific for each button so that everyone can understand better, so there are 4 divs within favArea. Each is toggled to display:none/block depending on which button is clicked. and all the button divs are set to display:none on clicking close. and also when the "error" happens, the text are also displayed.

  9. #9
    SitePoint Wizard gRoberts's Avatar
    Join Date
    Oct 2004
    Location
    Birtley, UK
    Posts
    2,439
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    no your more then welcome to join in, i'm stumped on this one. Whats worse is it seems extremely simple. I think its down to the favArea/favBg javascript.


  10. #10
    SitePoint Addict
    Join Date
    Jun 2007
    Posts
    358
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    the problem most surely is IE rendering, do you think you could suggest a workaround for that?

  11. #11
    SitePoint Addict
    Join Date
    Jun 2007
    Posts
    358
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    can anyone help me? is there no way to do it? no workaround?

  12. #12
    SitePoint Wizard gRoberts's Avatar
    Join Date
    Oct 2004
    Location
    Birtley, UK
    Posts
    2,439
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    CssExp... Another early bird I see.

    I'm at home at the mo, and don't have long until I leave for work. I will try and see what I can find whilst at work.

    Gav


  13. #13
    SitePoint Guru Chroniclemaster1's Avatar
    Join Date
    Jun 2007
    Location
    San Diego, CA
    Posts
    784
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I haven't come up with any solutions yet.

    I agree with both of you. It's a problem in how IE renders it, and I think we've localized it to the favArea/favBg javascript. I've tried two main tacks so far. Preventing IE from imposing default color on the favArea, or failing that, refreshing the favArea so it goes white again.

    It goes well, really.
    Whatever you can do or dream you can, begin it.
    Boldness has genius, power and magic in it. Begin it now.

    Chroniclemaster1, Founder of Earth Chronicle
    A Growing History of our Planet, by our Planet, for our Planet.

  14. #14
    SitePoint Addict
    Join Date
    Jun 2007
    Posts
    358
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    ah, sorry if i seemed impatient. It's just that i myself kept experimenting to get a viable workaround, but i kept failing so i got a bit frustrated and impatient. :P

  15. #15
    SitePoint Guru Chroniclemaster1's Avatar
    Join Date
    Jun 2007
    Location
    San Diego, CA
    Posts
    784
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    don't we all? No apologies necessary. We're all part of the same crazy club.
    No breakthroughs yet. Usually I find a way to fix a piece of code for a browser that makes it break even worse in the other, but so far no dice. And I'm really frustrated that I can't figure out why it gives priority to the higher numbers. That seems like something we should be able to track it down.
    Whatever you can do or dream you can, begin it.
    Boldness has genius, power and magic in it. Begin it now.

    Chroniclemaster1, Founder of Earth Chronicle
    A Growing History of our Planet, by our Planet, for our Planet.

  16. #16
    SitePoint Addict
    Join Date
    Jun 2007
    Posts
    358
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    i tried using without any numbers i.e. "hotel" instead of "button1" and so on, until there are no id's functions etc with numbers. It still does the same. IE seems to give priority to the one which defined after another. Moreover what truly baffles me is that, if it's going to keep showing a div that it gave priority to then why the text of that div is also not appearing. I can't seem to figure out why it's this way.

    But the thing is, i have seen many sites using the same approach and they all seem to work on IE. Maybe it couldn't be done by this method. Well I'll keep on experimenting...

  17. #17
    SitePoint Guru Chroniclemaster1's Avatar
    Join Date
    Jun 2007
    Location
    San Diego, CA
    Posts
    784
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    you may be on to something there, so it doesn't care about the numerics? It still does it when you deploy non-integer ids?

    hmmmmm... is it following the order of the CSS definitions (what was .button1, .button2, etc.), or the order of the javascript functions (what was button1(), button2(), etc.)? Which determines the preference?
    Whatever you can do or dream you can, begin it.
    Boldness has genius, power and magic in it. Begin it now.

    Chroniclemaster1, Founder of Earth Chronicle
    A Growing History of our Planet, by our Planet, for our Planet.

  18. #18
    SitePoint Addict
    Join Date
    Jun 2007
    Posts
    358
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Chroniclemaster1 View Post
    you may be on to something there, so it doesn't care about the numerics? It still does it when you deploy non-integer ids?

    hmmmmm... is it following the order of the CSS definitions (what was .button1, .button2, etc.), or the order of the javascript functions (what was button1(), button2(), etc.)? Which determines the preference?
    i did a through check, this happens in IE regardless of the following.
    1. with or without numerics.
    2. any order of declaration of javascript functions.
    3. any order of declaration of CSS definitions.

    At first i tried reversing the order (.button4, .button3.. so on)/(button4(), button().. so on) still no luck. I even tried completely randomizing the order. Still no chance.

    it gives priority like so, to simplify I'll mention its colors.
    green < red < blue < yellow.

    in the bellow code i also changed the order of the input buttons as well, in addition to other changes.

    HTML Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    
    <html xmlns="http://www.w3.org/1999/xhtml">
    
    <head>
    	<meta http-equiv="Content-Language" content="en-us" />
    	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    </head>
    
    <style>
    p
    {
     margin: 0px;
     padding: 0px;
    }
    
    body, html
    {
     width: 100&#37;;
     height: 100%;
     margin: 0px; 
     padding: 0px;
     background-color: #e9e9e9;
    }
    
    form
    {
     margin: 0px;
     padding: 0px;
    }
    
    .favBg
    {
     display: none;
     border: 0px;
     padding: 0px;
     margin: 0px;
     width: 100%;
     position: absolute;
     background-color: #000000;
     opacity: 0.5;
     filter: Alpha(opacity:50);
     z-index: 999;
    }
    
    .favArea
    {
     display: none;
     border-width: 1px;
     border-style: solid;
     border-color: #125717;
     padding: 0px;
     position: absolute;
     background-color: white;
     z-index: 1000;
    }
    
    .portfolio
    {
     display: none;
     margin-top: 86px;
     margin-bottom: 0px;
     margin-left: 0px;
     margin-right:0px;
     padding: 0px;
     width: 500px;
     height: 295px;
     position: relative;
     background-color: red;
    }
    
    .contact
    {
     display: none;
     margin-top: 86px;
     margin-bottom: 0px;
     margin-left: 0px;
     margin-right: 0px;
     padding: 0px;
     width: 500px;
     height: 295px;
     position: relative;
     background-color: yellow;
    }
    
    .gallery
    {
     display: none;
     margin-top: 86px;
     margin-bottom: 0px;
     margin-left: 0px;
     margin-right:0px;
     padding: 0px;
     width: 500px;
     height: 295px;
     position: relative;
     background-color: blue;
    }
    
    .support
    {
     display: none;
     margin-top: 86px;
     margin-bottom: 0px;
     margin-left: 0px;
     margin-right:0px;
     padding: 0px;
     width: 500px;
     height: 295px;
     position: relative;
     background-color: green;
    }
    
    .infoMsg
    {
      padding-top: 10px;
      padding-bottom: 0px;
      padding-left: 0px;
      padding-right: 0px;
      margin-top: 0px;
      margin-bottom: 0px;
      margin-left: 10px;
      margin-right: 10px;
      font-family: Verdana, Arial, Tahoma;
      font-weight: bolder;
      font-size: 15px;
      color: white;
      letter-spacing: 0px;
      position: relative;
    }
    
    .closeMsg
    {
      padding: 0px;
      margin-top: 2px;
      margin-bottom: 0px;
      margin-left: 5px;
      margin-right: 0px;
      font-family: Verdana, Arial, Tahoma;
      font-weight: none;
      font-size: 12px;
      color: black;
      letter-spacing: 0px;
      position: relative;
    }
    
    .buttons
    {
     border-width: 2px;
     border-style: solid;
     border-color: black;
     padding: 0px;
     margin-top: 80px;
     margin-bottom: 0px;
     margin-right: 0px;
     margin-left: 0px;
    }
    
    </style>
    
    <script>
    
    function OffWindowHeight()
    {
     var OffWindowHeight=0;
    
     window.scrollTo(0,10000000);
    
     if(typeof self.pageYOffset!='undefined')
     OffWindowHeight=self.pageYOffset;
     else if(document.compatMode && document.compatMode != 'BackCompat')
     OffWindowHeight=document.documentElement.scrollTop;
     else if(document.body && typeof(document.body.scrollTop)!='undefined')
     OffWindowHeight=document.body.scrollTop;
    
     window.scrollTo(0,0);
    
     return OffWindowHeight;
    }
    
    function WindowHeight() 
    {
      var WindowHeight = 0;
      if( typeof( window.innerWidth ) == 'number' ) 
      WindowHeight = window.innerHeight;
      else if (document.documentElement &&  document.documentElement.clientHeight) 
      WindowHeight = document.documentElement.clientHeight;
      else if(document.body && document.body.clientHeight) 
      WindowHeight = document.body.clientHeight;
    
      return WindowHeight;
    }
    
    function pHeight()
    {
      var pHeight = OffWindowHeight() + WindowHeight();
      return pHeight;
      
    }
    
    function favBg()
    {
      var favHeight = document.getElementById('favBg');
      favHeight.style.height = pHeight() + 'px';
    }
    
    var cdiv = "blank";
    function favArea() 
    {
     if (cdiv == "blank") 
     { cdiv = window.setInterval("favArea()", 50); }
     var msgBox = document.getElementById("favArea");
     objh = parseFloat(msgBox.style.height)/2;
     objw = parseFloat(msgBox.style.width)/2;
     msgBox.style.top = Math.floor(Math.round((document.documentElement.offsetHeight/2)+document.documentElement.scrollTop)-objh)+'px';
     msgBox.style.left = Math.floor(Math.round((document.documentElement.offsetWidth/2)+document.documentElement.scrollLeft)-objw)+'px';
    }
    
    function portfolio()
    {
     var favBg = document.getElementById('favBg');
     favBg.style.display = 'block';
     var favAreaMsg = document.getElementById('favArea');
     favAreaMsg.style.display = 'block';
     var portfolio = document.getElementById('portfolio');
     portfolio.style.display = 'block';
    }
    
    function contact()
    {
     var favBg = document.getElementById('favBg');
     favBg.style.display = 'block';
     var favAreaMsg = document.getElementById('favArea');
     favAreaMsg.style.display = 'block';
     var contact = document.getElementById('contact');
     contact.style.display = 'block';
    }
    
    function gallery()
    {
     var favBg = document.getElementById('favBg');
     favBg.style.display = 'block';
     var favAreaMsg = document.getElementById('favArea');
     favAreaMsg.style.display = 'block';
     var gallery = document.getElementById('gallery');
     gallery.style.display = 'block';
    }
    
    function support()
    {
     var favBg = document.getElementById('favBg');
     favBg.style.display = 'block';
     var favAreaMsg = document.getElementById('favArea');
     favAreaMsg.style.display = 'block';
     var support = document.getElementById('support');
     support.style.display = 'block';
    }
    
    function closeMsg()
    {
     var favBg = document.getElementById('favBg');
     favBg.style.display = 'none';
     
     var favAreaMsg = document.getElementById('favArea');
     favAreaMsg.style.display = 'none';
     
     var gallery = document.getElementById('gallery');
     gallery.style.display = 'none';
     
     var contact = document.getElementById('contact');
     contact.style.display = 'none'; 
     
     var portfolio = document.getElementById('portfolio');
     portfolio.style.display = 'none';
     
     var support = document.getElementById('support');
     support.style.display = 'none';
    
    }
    </script>
    
    <body onload="favBg(); favArea();">
    
    <div id="favArea" class="favArea" style="width: 500px; height: 400px;">
     <div id="gallery" class="gallery"><p class="infoMsg">gallery</p></div>
     <div id="portfolio" class="portfolio"><p class="infoMsg">portfolio</p></div>
     <div id="support" class="support"><p class="infoMsg">support</p></div> 
     <div id="contact" class="contact"><p class="infoMsg">contact</p></div> 
     
     <p class="closeMsg"><a onclick="closeMsg();">Close</a></p>
    </div>
    
    <div id="favBg" class="favBg"></div>
    
    <div align="center">
    <div style="width: 400px; height:200px; background-color: white;">
    <form action="page.php" method="post">
     <input onclick="closeMsg(); gallery();" class="buttons" style="color: blue;" type="button" value="gallery"> 
     <input onclick="closeMsg(); contact();" class="buttons" style="color: yellow;" type="button" value="contact">
     <input onclick="closeMsg(); support();" class="buttons" style="color: green;" type="button" value="support">
     <input onclick="closeMsg(); portfolio();" class="buttons" style="color: red;" type="button" value="portfolio">  
    </form>
    </div>
    </div>
    
    </body>
    </html>
    here all the order are changed, also the names of buttons(style+function+name+id etc.. related buttons).

    but it still gives the same priority: green < red < blue < yellow.

    in the following code i changed the colors of the divs, it gives priority to the exact same divs regardless of the properties defined to them.

    HTML Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    
    <html xmlns="http://www.w3.org/1999/xhtml">
    
    <head>
    	<meta http-equiv="Content-Language" content="en-us" />
    	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    </head>
    
    <style>
    p
    {
     margin: 0px;
     padding: 0px;
    }
    
    body, html
    {
     width: 100%;
     height: 100%;
     margin: 0px; 
     padding: 0px;
     background-color: #e9e9e9;
    }
    
    form
    {
     margin: 0px;
     padding: 0px;
    }
    
    .favBg
    {
     display: none;
     border: 0px;
     padding: 0px;
     margin: 0px;
     width: 100%;
     position: absolute;
     background-color: #000000;
     opacity: 0.5;
     filter: Alpha(opacity:50);
     z-index: 999;
    }
    
    .favArea
    {
     display: none;
     border-width: 1px;
     border-style: solid;
     border-color: #125717;
     padding: 0px;
     position: absolute;
     background-color: white;
     z-index: 1000;
    }
    
    .portfolio
    {
     display: none;
     margin-top: 86px;
     margin-bottom: 0px;
     margin-left: 0px;
     margin-right:0px;
     padding: 0px;
     width: 500px;
     height: 295px;
     position: relative;
     background-color: green;
    }
    
    .contact
    {
     display: none;
     margin-top: 86px;
     margin-bottom: 0px;
     margin-left: 0px;
     margin-right: 0px;
     padding: 0px;
     width: 500px;
     height: 295px;
     position: relative;
     background-color: blue;
    }
    
    .gallery
    {
     display: none;
     margin-top: 86px;
     margin-bottom: 0px;
     margin-left: 0px;
     margin-right:0px;
     padding: 0px;
     width: 500px;
     height: 295px;
     position: relative;
     background-color: yellow;
    }
    
    .support
    {
     display: none;
     margin-top: 86px;
     margin-bottom: 0px;
     margin-left: 0px;
     margin-right:0px;
     padding: 0px;
     width: 500px;
     height: 295px;
     position: relative;
     background-color: red;
    }
    
    .infoMsg
    {
      padding-top: 10px;
      padding-bottom: 0px;
      padding-left: 0px;
      padding-right: 0px;
      margin-top: 0px;
      margin-bottom: 0px;
      margin-left: 10px;
      margin-right: 10px;
      font-family: Verdana, Arial, Tahoma;
      font-weight: bolder;
      font-size: 15px;
      color: white;
      letter-spacing: 0px;
      position: relative;
    }
    
    .closeMsg
    {
      padding: 0px;
      margin-top: 2px;
      margin-bottom: 0px;
      margin-left: 5px;
      margin-right: 0px;
      font-family: Verdana, Arial, Tahoma;
      font-weight: none;
      font-size: 12px;
      color: black;
      letter-spacing: 0px;
      position: relative;
    }
    
    .buttons
    {
     border-width: 2px;
     border-style: solid;
     border-color: black;
     padding: 0px;
     margin-top: 80px;
     margin-bottom: 0px;
     margin-right: 0px;
     margin-left: 0px;
    }
    
    </style>
    
    <script>
    
    function OffWindowHeight()
    {
     var OffWindowHeight=0;
    
     window.scrollTo(0,10000000);
    
     if(typeof self.pageYOffset!='undefined')
     OffWindowHeight=self.pageYOffset;
     else if(document.compatMode && document.compatMode != 'BackCompat')
     OffWindowHeight=document.documentElement.scrollTop;
     else if(document.body && typeof(document.body.scrollTop)!='undefined')
     OffWindowHeight=document.body.scrollTop;
    
     window.scrollTo(0,0);
    
     return OffWindowHeight;
    }
    
    function WindowHeight() 
    {
      var WindowHeight = 0;
      if( typeof( window.innerWidth ) == 'number' ) 
      WindowHeight = window.innerHeight;
      else if (document.documentElement &&  document.documentElement.clientHeight) 
      WindowHeight = document.documentElement.clientHeight;
      else if(document.body && document.body.clientHeight) 
      WindowHeight = document.body.clientHeight;
    
      return WindowHeight;
    }
    
    function pHeight()
    {
      var pHeight = OffWindowHeight() + WindowHeight();
      return pHeight;
      
    }
    
    function favBg()
    {
      var favHeight = document.getElementById('favBg');
      favHeight.style.height = pHeight() + 'px';
    }
    
    var cdiv = "blank";
    function favArea() 
    {
     if (cdiv == "blank") 
     { cdiv = window.setInterval("favArea()", 50); }
     var msgBox = document.getElementById("favArea");
     objh = parseFloat(msgBox.style.height)/2;
     objw = parseFloat(msgBox.style.width)/2;
     msgBox.style.top = Math.floor(Math.round((document.documentElement.offsetHeight/2)+document.documentElement.scrollTop)-objh)+'px';
     msgBox.style.left = Math.floor(Math.round((document.documentElement.offsetWidth/2)+document.documentElement.scrollLeft)-objw)+'px';
    }
    
    function portfolio()
    {
     var favBg = document.getElementById('favBg');
     favBg.style.display = 'block';
     var favAreaMsg = document.getElementById('favArea');
     favAreaMsg.style.display = 'block';
     var portfolio = document.getElementById('portfolio');
     portfolio.style.display = 'block';
    }
    
    function contact()
    {
     var favBg = document.getElementById('favBg');
     favBg.style.display = 'block';
     var favAreaMsg = document.getElementById('favArea');
     favAreaMsg.style.display = 'block';
     var contact = document.getElementById('contact');
     contact.style.display = 'block';
    }
    
    function gallery()
    {
     var favBg = document.getElementById('favBg');
     favBg.style.display = 'block';
     var favAreaMsg = document.getElementById('favArea');
     favAreaMsg.style.display = 'block';
     var gallery = document.getElementById('gallery');
     gallery.style.display = 'block';
    }
    
    function support()
    {
     var favBg = document.getElementById('favBg');
     favBg.style.display = 'block';
     var favAreaMsg = document.getElementById('favArea');
     favAreaMsg.style.display = 'block';
     var support = document.getElementById('support');
     support.style.display = 'block';
    }
    
    function closeMsg()
    {
     var favBg = document.getElementById('favBg');
     favBg.style.display = 'none';
     
     var favAreaMsg = document.getElementById('favArea');
     favAreaMsg.style.display = 'none';
     
     var gallery = document.getElementById('gallery');
     gallery.style.display = 'none';
     
     var contact = document.getElementById('contact');
     contact.style.display = 'none'; 
     
     var portfolio = document.getElementById('portfolio');
     portfolio.style.display = 'none';
     
     var support = document.getElementById('support');
     support.style.display = 'none';
    
    }
    </script>
    
    <body onload="favBg(); favArea();">
    
    <div id="favArea" class="favArea" style="width: 500px; height: 400px;">
     <div id="gallery" class="gallery"><p class="infoMsg">gallery</p></div>
     <div id="portfolio" class="portfolio"><p class="infoMsg">portfolio</p></div>
     <div id="support" class="support"><p class="infoMsg">support</p></div> 
     <div id="contact" class="contact"><p class="infoMsg">contact</p></div> 
     
     <p class="closeMsg"><a onclick="closeMsg();">Close</a></p>
    </div>
    
    <div id="favBg" class="favBg"></div>
    
    <div align="center">
    <div style="width: 400px; height:200px; background-color: white;">
    <form action="page.php" method="post">
     <input onclick="closeMsg(); gallery();" class="buttons" style="color: yellow;" type="button" value="gallery"> 
     <input onclick="closeMsg(); contact();" class="buttons" style="color: blue;" type="button" value="contact">
     <input onclick="closeMsg(); support();" class="buttons" style="color: red;" type="button" value="support">
     <input onclick="closeMsg(); portfolio();" class="buttons" style="color: green;" type="button" value="portfolio">  
    </form>
    </div>
    </div>
    
    </body>
    </html>
    everything is completely in random order but still this happens...

  19. #19
    SitePoint Guru Chroniclemaster1's Avatar
    Join Date
    Jun 2007
    Location
    San Diego, CA
    Posts
    784
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question

    It's the COLORS????

    @#$%$#%^*&(^&*&*()

    There, I feel a little better. How in the @$#%^@#$^ is it getting an order from the colors! Wait, no I'm rereading.... hang on...

    ok, so it's the order of the divs? hmmm.... I thought I'd tried changing the order of the divs already (but leaving the colors the same), and the colors still had the same order of priority.

    May I just say, in the perfect English accent of a good butler, of course... this is infuriating.

    Well, look at it this way, at least you know your command of javascript and CSS are good if nobody can find a solution yet. I'll go back and look at the divs specifically again. Maybe it IS an issue with the cascade, if the Javascript or the HTML somehow are exposing each class as we activate and it wipes any attempts to trigger previous divs.
    Whatever you can do or dream you can, begin it.
    Boldness has genius, power and magic in it. Begin it now.

    Chroniclemaster1, Founder of Earth Chronicle
    A Growing History of our Planet, by our Planet, for our Planet.

  20. #20
    SitePoint Addict
    Join Date
    Jun 2007
    Posts
    358
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    of course I'm saying it's not colors or other defined property of the div, or the order of css definition or order of javscript and definitively not the order of buttons.

    but order of the divs.

    lets say it gives priority like this:
    HTML Code:
     <div id="button1" class="button1"><p class="infoMsg">button1</p></div>
     <div id="button2" class="button2"><p class="infoMsg">button2</p></div>
     <div id="button3" class="button3"><p class="infoMsg">button3</p></div> 
     <div id="button4" class="button4"><p class="infoMsg">button4</p></div>
    for simplicity I'll mention divs by it's color. Here the order is like this blue < red < green < yellow.

    now consider.
    HTML Code:
    <div id="button2" class="button2"><p class="infoMsg">button2</p></div>
     <div id="button1" class="button1"><p class="infoMsg">button1</p></div>
     <div id="button4" class="button4"><p class="infoMsg">button4</p></div>  
     <div id="button3" class="button3"><p class="infoMsg">button3</p></div>
    Here the order is like this red < blue < yellow < green.

    So it's finally narrowed down to what the trouble maker is, but i can't still figure out why IE is doing it. It seems so simple yet can't seem to find a good way to fix it.

  21. #21
    SitePoint Addict
    Join Date
    Jun 2007
    Posts
    358
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Problem Solved, came up with a workaround.

    HTML Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    
    <html xmlns="http://www.w3.org/1999/xhtml">
    
    <head>
    	<meta http-equiv="Content-Language" content="en-us" />
    	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    </head>
    
    <style>
    p
    {
     margin: 0px;
     padding: 0px;
    }
    
    body, html
    {
     width: 100&#37;;
     height: 100%;
     margin: 0px; 
     padding: 0px;
     background-color: #e9e9e9;
    }
    
    form
    {
     margin: 0px;
     padding: 0px;
    }
    
    .favBg
    {
     visibility: hidden;
     border: 0px;
     padding: 0px;
     margin: 0px;
     width: 100%;
     position: absolute;
     background-color: #000000;
     opacity: 0.5;
     filter: Alpha(opacity:50);
     z-index: 999;
    }
    
    .favArea
    {
     visibility: hidden;
     border-width: 1px;
     border-style: solid;
     border-color: #125717;
     padding: 0px;
     position: absolute;
     background-color: white;
     z-index: 1000;
    }
    
    .button1
    {
     visibility: hidden;
     padding: 0px;
     margin-top: 86px;
     margin-left: 0px;
     width: 500px;
     height: 295px;
     position: absolute;
     background-color: blue;
    }
    
    .button2
    {
     visibility: hidden;
     padding: 0px;
     margin-top: 86px;
     margin-left: 0px;
     width: 500px;
     height: 295px;
     position: absolute;
     background-color: red;
    }
    
    .button3
    {
     visibility: hidden;
     padding: 0px;
     margin-top: 86px;
     margin-left: 0px;
     width: 500px;
     height: 295px;
     position: absolute;
     background-color: green;
    }
    
    .button4
    {
     visibility: hidden;
     padding: 0px;
     margin-top: 86px;
     margin-left: 0px;
     width: 500px;
     height: 295px;
     position: absolute;
     background-color: yellow;
    }
    
    .infoMsg
    {
      padding-top: 10px;
      padding-bottom: 0px;
      padding-left: 0px;
      padding-right: 0px;
      margin-top: 0px;
      margin-bottom: 0px;
      margin-left: 10px;
      margin-right: 10px;
      font-family: Verdana, Arial, Tahoma;
      font-weight: bolder;
      font-size: 15px;
      color: white;
      letter-spacing: 0px;
      position: relative;
    }
    
    .closeMsg
    {
      padding: 0px;
      margin-top: 383px;
      margin-bottom: 0px;
      margin-left: 5px;
      margin-right: 0px;
      font-family: Verdana, Arial, Tahoma;
      font-weight: none;
      font-size: 12px;
      color: black;
      letter-spacing: 0px;
    }
    
    .buttons
    {
     border-width: 2px;
     border-style: solid;
     border-color: black;
     padding: 0px;
     margin-top: 80px;
     margin-bottom: 0px;
     margin-right: 0px;
     margin-left: 0px;
    }
    
    </style>
    
    <!--[If IE]>
    <style>
    .button1
    {
     visibility: hidden;
     padding: 0px;
     margin-top: 86px;
     margin-left: -5px;
     width: 500px;
     height: 295px;
     position: absolute;
     background-color: blue;
    }
    
    .button2
    {
     visibility: hidden;
     padding: 0px;
     margin-top: 86px;
     margin-left: -5px;
     width: 500px;
     height: 295px;
     position: absolute;
     background-color: red;
    }
    
    .button3
    {
     visibility: hidden;
     padding: 0px;
     margin-top: 86px;
     margin-left: -5px;
     width: 500px;
     height: 295px;
     position: absolute;
     background-color: green;
    }
    
    .button4
    {
     visibility: hidden;
     padding: 0px;
     margin-top: 86px;
     margin-left: -5px;
     width: 500px;
     height: 295px;
     position: absolute;
     background-color: yellow;
    }
    </style>
    <![endif]-->
    <script>
    
    function OffWindowHeight()
    {
     var OffWindowHeight=0;
    
     window.scrollTo(0,10000000);
    
     if(typeof self.pageYOffset!='undefined')
     OffWindowHeight=self.pageYOffset;
     else if(document.compatMode && document.compatMode != 'BackCompat')
     OffWindowHeight=document.documentElement.scrollTop;
     else if(document.body && typeof(document.body.scrollTop)!='undefined')
     OffWindowHeight=document.body.scrollTop;
    
     window.scrollTo(0,0);
    
     return OffWindowHeight;
    }
    
    function WindowHeight() 
    {
      var WindowHeight = 0;
      if( typeof( window.innerWidth ) == 'number' ) 
      WindowHeight = window.innerHeight;
      else if (document.documentElement &&  document.documentElement.clientHeight) 
      WindowHeight = document.documentElement.clientHeight;
      else if(document.body && document.body.clientHeight) 
      WindowHeight = document.body.clientHeight;
    
      return WindowHeight;
    }
    
    function pHeight()
    {
      var pHeight = OffWindowHeight() + WindowHeight();
      return pHeight;
      
    }
    
    function favBg()
    {
      var favHeight = document.getElementById('favBg');
      favHeight.style.height = pHeight() + 'px';
    }
    
    var cdiv = "blank";
    function favArea() 
    {
     if (cdiv == "blank") 
     { cdiv = window.setInterval("favArea()", 50); }
     var msgBox = document.getElementById("favArea");
     objh = parseFloat(msgBox.style.height)/2;
     objw = parseFloat(msgBox.style.width)/2;
     msgBox.style.top = Math.floor(Math.round((document.documentElement.offsetHeight/2)+document.documentElement.scrollTop)-objh)+'px';
     msgBox.style.left = Math.floor(Math.round((document.documentElement.offsetWidth/2)+document.documentElement.scrollLeft)-objw)+'px';
    }
    
    function button1()
    {
     var favBg = document.getElementById('favBg');
     favBg.style.visibility = 'visible';
     var favAreaMsg = document.getElementById('favArea');
     favAreaMsg.style.visibility = 'visible';
     var button1 = document.getElementById('button1');
     button1.style.visibility = 'visible';
    }
    
    function button2()
    {
     var favBg = document.getElementById('favBg');
     favBg.style.visibility = 'visible';
     var favAreaMsg = document.getElementById('favArea');
     favAreaMsg.style.visibility = 'visible';
     var button2 = document.getElementById('button2');
     button2.style.visibility = 'visible';
    }
    
    function button3()
    {
     var favBg = document.getElementById('favBg');
     favBg.style.visibility = 'visible';
     var favAreaMsg = document.getElementById('favArea');
     favAreaMsg.style.visibility = 'visible';
     var button3 = document.getElementById('button3');
     button3.style.visibility = 'visible';
    }
    
    function button4()
    {
     var favBg = document.getElementById('favBg');
     favBg.style.visibility = 'visible';
     var favAreaMsg = document.getElementById('favArea');
     favAreaMsg.style.visibility = 'visible';
     var button4 = document.getElementById('button4');
     button4.style.visibility = 'visible';
    }
    
    function closeMsg()
    {
     var favBg = document.getElementById('favBg');
     favBg.style.visibility = 'hidden';
     
     var favAreaMsg = document.getElementById('favArea');
     favAreaMsg.style.visibility = 'hidden';
     
     var button1 = document.getElementById('button1');
     button1.style.visibility = 'hidden';
     
     var button2 = document.getElementById('button2');
     button2.style.visibility = 'hidden';
     
     var button3 = document.getElementById('button3');
     button3.style.visibility = 'hidden';
     
     var button4 = document.getElementById('button4');
     button4.style.visibility = 'hidden'; 
    }
    </script>
    
    <body onload="favBg(); favArea();">
    
    <div id="favArea" class="favArea" style="width: 500px; height: 400px;">
     <div id="button1" class="button1"><p class="infoMsg">button1</p></div>
     <div id="button2" class="button2"><p class="infoMsg">button2</p></div>
     <div id="button3" class="button3"><p class="infoMsg">button3</p></div> 
     <div id="button4" class="button4"><p class="infoMsg">button4</p></div> 
     
     <p class="closeMsg"><a onclick="closeMsg();">Close</a></p>
    </div>
    
    <div id="favBg" class="favBg"></div>
    
    <div align="center">
    <div style="width: 400px; height:200px; background-color: white;">
    <form action="page.php" method="post">
     <input onclick="button1();" class="buttons" style="color: blue;" type="button" value="button1"> 
     <input onclick="button2();" class="buttons" style="color: red;" type="button" value="button2"> 
     <input onclick="button3();" class="buttons" style="color: green;" type="button" value="button3"> 
     <input onclick="button4();" class="buttons" style="color: yellow;" type="button" value="button4">
    </form>
    </div>
    </div>
    
    </body>
    </html>
    Last edited by cssExp; Jul 1, 2007 at 01:04.

  22. #22
    SitePoint Guru Chroniclemaster1's Avatar
    Join Date
    Jun 2007
    Location
    San Diego, CA
    Posts
    784
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Sweet!

    This is awesome!

    I played around with it here at work. I've got Firefox and IE7 on an XP box and it works beautifully

    I even played with it. I'm not sure how it works on other computers, but it's all pretty standard syntax and works identically on my work computer & browsers. I think it should transport well. I was able to reduce the If statement to...

    Code:
    <!--[If IE]>
    <style>
    
    .button1, .button2, .button3, .button4
    {
     margin-left: -5px;
    }
    
    </style>
    <![endif]-->
    Whatever you can do or dream you can, begin it.
    Boldness has genius, power and magic in it. Begin it now.

    Chroniclemaster1, Founder of Earth Chronicle
    A Growing History of our Planet, by our Planet, for our Planet.

  23. #23
    SitePoint Addict
    Join Date
    Jun 2007
    Posts
    358
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    ah right, i forgot to group it all in to one since they all use the same property thanks.

    I hope this thread will be useful to other people like me who to want do something like this.

  24. #24
    SitePoint Guru Chroniclemaster1's Avatar
    Join Date
    Jun 2007
    Location
    San Diego, CA
    Posts
    784
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I'm glad that changing from display to visibility making the positioning absolute finally got it to behave. It doesn't look like you had to change any of the real javascript at all. Just switch the CSS.

    I hope other people found this interesting as well. I know I did. If fact, now that it looks like we're finished with this, I posted my own problem. It's not as sophistacated but it is using unobtrusive javascript. I'd appreciate if anyone reading this has any ideas. Stop on by.
    http://www.sitepoint.com/forums/showthread.php?t=488973
    Whatever you can do or dream you can, begin it.
    Boldness has genius, power and magic in it. Begin it now.

    Chroniclemaster1, Founder of Earth Chronicle
    A Growing History of our Planet, by our Planet, for our Planet.


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
  •