Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 9 of 9
  1. #1
    New to the CF scene
    Join Date
    May 2013
    Posts
    4
    Thanks
    3
    Thanked 0 Times in 0 Posts

    Issue with loading DIV at page load

    Im having an issue to display Tab1 content at page load. I used visibility:visible; for DIV id=box1 and it doesnt load at start of page. Hence I tried z-index and it didnt show at page load either. What could be the issue?

    Code:
    <style>
    .tab
     {
       font-size:14px;
       cursor:pointer;
       color:0072E4;
       text-align: center;
       }
    .tab:hover {
       background-color:#f6f6f6;
    }
    .tab:active {
       position:relative;
       top:1px;
    }
    .contents
       {
       background:#fff;
       position:relative;
       width:16%;
       height:100%;
       display:none;
       }
    </style>
    <script>
    function tabcon(i) {
      var boxes = 3;
      for( var x = 1; x <= boxes; x++) {
         if(x != i){
          document.getElementById('box'+x).style.display ="none";
        }else{
          document.getElementById('box'+x).style.display ="block";
        }
      }
    }
    </script>
    <div>
    <table style="width:100%; border-collapse:collapse" height=30 cellspacing="0" cellpadding="0" border="0">
    <td class="tab" onclick="javascript:tabcon(1);" style="border-right: 1px dotted #CCCCCC">Tab1</td>
    <td class="tab" onclick="javascript:tabcon(2);" style="border-right: 1px dotted #CCCCCC">Tab2</td>
    <td class="tab" onclick="javascript:tabcon(3);">Tab3</td>
    </tr>
    </table>
    </div>
    <div id="box1" class="contents" style="visibility:visible;">
    Tab1 Tab1 Tab1 Tab1 Tab1 Tab1 Tab1 
    Tab1 Tab1 Tab1 Tab1 Tab1 Tab1 Tab1 
    Tab1 Tab1 Tab1 Tab1 Tab1 Tab1 Tab1 
    Tab1 Tab1 Tab1 Tab1 Tab1 Tab1 Tab1 
    </div>
    <div id="box2" class="contents" >
    Tab2 Tab2 Tab2 Tab2 Tab2 Tab2 Tab2 
    Tab2 Tab2 Tab2 Tab2 Tab2 Tab2 Tab2 
    Tab2 Tab2 Tab2 Tab2 Tab2 Tab2 Tab2 
    Tab2 Tab2 Tab2 Tab2 Tab2 Tab2 Tab2 
    </div>
    <div id="box3" class="contents">
    Tab3 Tab3 Tab3 Tab3 Tab3 Tab3 Tab3 
    Tab3 Tab3 Tab3 Tab3 Tab3 Tab3 Tab3 
    Tab3 Tab3 Tab3 Tab3 Tab3 Tab3 Tab3 
    Tab3 Tab3 Tab3 Tab3 Tab3 Tab3 Tab3 
    </div>

  • #2
    New Coder
    Join Date
    Apr 2005
    Location
    Detroit, MI: Home of the body bag
    Posts
    35
    Thanks
    1
    Thanked 8 Times in 8 Posts
    Okay, so I'm not going to try to ask how your javascript function is going to work, because your purpose is to have the first box show up on page load. That being said, please do this:

    1) Remove that inline visibility:visible property on #box 1.
    2) Remove display:none from your .contents declaration. So it will look like:

    Code:
    .contents {
       background:#fff;
       position:relative;
       width:16%;
       height:100%;
       }
    Add the same class with what's called a general sibling selector to your style sheet:
    Code:
    .contents ~ .contents {
      display:none;
    }
    What this does is apply the property to anything past the initial selector. So the first one won't be affected (hence the removal of the display property), but any classes after the first "contents" class WILL be affected. For the structure you have, your HTML this should work even in IE7.

    PS: You are missing an opening table row tag <tr>.
    Last edited by Judgment Day; 05-10-2013 at 06:47 AM.

  • Users who have thanked Judgment Day for this post:

    denteen (05-10-2013)

  • #3
    New to the CF scene
    Join Date
    May 2013
    Posts
    4
    Thanks
    3
    Thanked 0 Times in 0 Posts
    Thanks a lot that worked very well. So as I understand a sibling selector basically matches elements from the same parent.

  • #4
    New Coder
    Join Date
    Apr 2005
    Location
    Detroit, MI: Home of the body bag
    Posts
    35
    Thanks
    1
    Thanked 8 Times in 8 Posts
    Quote Originally Posted by denteen View Post
    Thanks a lot that worked very well. So as I understand a sibling selector basically matches elements from the same parent.
    Well, we could technically do something like:
    h1 ~ p { declarations }
    And whatever styles are applied to the paragraph tag will work as long as it's after the h1 tag in the same hierarchy.

    So this works:
    Code:
    <h1></h1>
    <p></p>
    <p></p>
    This also works:
    Code:
    <h1></h1>
    <div></div>
    <p></p>
    <p></p>
    This does NOT work:
    Code:
    <p></p>
    <p></p>
    <h1></h1>
    This also does NOT work since it's they're not siblings:
    Code:
    <div>
      <h1></h1>
    </div>
    
    <p></p>
    So the combiner element (~) is saying "affect these elements if you're after 'this' element"...or in your case, "apply display:none to all content classes after the first content class".

  • Users who have thanked Judgment Day for this post:

    denteen (05-10-2013)

  • #5
    New to the CF scene
    Join Date
    May 2013
    Posts
    4
    Thanks
    3
    Thanked 0 Times in 0 Posts
    That is a good example. Is it possible to use more than one selector at the same or combining selectors?

  • #6
    New Coder
    Join Date
    Apr 2005
    Location
    Detroit, MI: Home of the body bag
    Posts
    35
    Thanks
    1
    Thanked 8 Times in 8 Posts
    Quote Originally Posted by denteen View Post
    That is a good example. Is it possible to use more than one selector at the same or combining selectors?
    Not entirely certain what you mean. I'm assuming you're asking if can use multiple instances of the example I provided on the same level, like:

    Code:
    <h1></h1>
    <p></p>
    <p></p>
    <h1></h1>
    <p></p>
    <p></p>
    If I'm wrong in my assumption, let me know what you mean. Thanks!

  • Users who have thanked Judgment Day for this post:

    denteen (05-10-2013)

  • #7
    Senior Coder DanInMa's Avatar
    Join Date
    Nov 2010
    Location
    Salem,Ma
    Posts
    1,577
    Thanks
    13
    Thanked 248 Times in 248 Posts
    did you try

    Code:
    <div id="box1" class="contents" style="display=block;">

  • #8
    New to the CF scene
    Join Date
    May 2013
    Posts
    4
    Thanks
    3
    Thanked 0 Times in 0 Posts
    Multiple Instances. Yes thats right.

    As for display:block;, for some reason it didn't work.

  • #9
    New Coder
    Join Date
    Apr 2005
    Location
    Detroit, MI: Home of the body bag
    Posts
    35
    Thanks
    1
    Thanked 8 Times in 8 Posts
    Quote Originally Posted by denteen View Post
    Multiple Instances. Yes thats right.

    As for display:block;, for some reason it didn't work.
    From that example I provided, as long as they're on the same hierarchy level, it should work.

    So if declared this in my stylesheet:

    Code:
    p {
      background:#F00;
      display:block;
      height:100px;
      width:800px;
    }
    
    p ~ p {
     background:#00F;
    }
    The background would be blue on all subsequent paragraph tags except for the first one (which should be red), even if I add another header tag in between because they're all on the same level.

    Code:
    <h1></h1>
    <p></p>
    <p></p>
    <h1></h1>
    <p></p>
    <p></p>
    Based on the same CSS code, however:

    Code:
    <h1></h1>
    <p></p>
    <p></p>
    <div>
      <h1></h1>
      <p></p>
      <p></p>
    </div>
    Only the second and fourth <p> tags would be affected because the enclosing div is nesting elements, therefore it's not on the same level. But within that level, the second paragraph tag follows the same CSS declaration. So the 1st <p> tag and the 1st <p> tag within the div will be red, and the others will be blue.

    Hopefully this makes sense.


  •  

    Posting Permissions

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