By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
440,727 Members | 766 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 440,727 IT Pros & Developers. It's quick & easy.

Hide All Except One Tabs showing hidden content brriefly

P: 9
I am using jQuery & hideAllExcept.js from this demo tute
http://enure.net/dev/hide-all-except-one/

The issue is that on a page with other content, the images I have placed in the toggleThis divs loads before everything is ready and they briefly appear stacked below, before disappearing when they snap into place. hiddeAllExcept.js does use $(document).ready(function() {

I had this same issue with jCarousel, only the dynamically loaded version did not do this. Any input on a workaround appreciated.

Expand|Select|Wrap|Line Numbers
  1. <!-- import the DOM logic from external javascript files -->
  2.         <script type="text/javascript" src="http://enure.net/_js/jquery.min.js"></script>
  3.         <script type="text/javascript" src="http://enure.net/dev/hide-all-except-one/hideAllExcept.js"></script>
  4.  
  5. <style type="text/css">
  6.  .hide { display: none; } /* required */
  7.  body { background-color: #ffffff; }
  8.  #wrapp { margin: 0; padding: 0; width:300px;   background-color: white;}
  9.  #ccc;border-right: 1px solid #ccc;border-bottom: 1px solid #ccc; font-family: 'arial',  helvetica, sans-serif; font-weight: bold; font-size: 70%;}
  10.  ul { padding-left: 0; padding-bottom:0 }
  11.  li { float: left; display: block; margin-right: 0.1em; }
  12.  ul#buttons {
  13.   margin: .1em .1em .1em .1em;
  14.   font-family: arial, helvetica, sans-serif;
  15.   font-weight: bold;
  16.   font-size: 70%;
  17.  
  18.  }
  19.  ul#buttons li { padding: .1em .1em .1em .1em; border-right: 1px solid #000; border-left: 1px solid #000; border-top: 1px solid #000; border-bottom: 1px solid #000; border-bottom: 0; 
  20.   background-image: url(tabsBG.gif);}
  21.  div#toggleThis { margin-top: 0; margin-bottom:0; border-left: 1px solid #ccc;border-right: 1px solid #ccc;}
  22.  div#toggleThis div {  padding: 0; color: #000; border-left:#eee; font-family: georgia, serif; }
  23.  a, a:link, a:visited { color: #111; text-decoration: none; }
  24.  a.active, a:hover { color: red; }
  25.  
  26. </style>
  27.  
  28.     </head>
  29.     <body>
  30.        <div id="wrapp">
  31.  
  32.  
  33.             <ul id="buttons">
  34.                 <li><a class="toggle" href="#one">&nbsp;one&nbsp;</a></li> <!-- The js looks for any links with a class of 'toggle'. It then makes visible the id which matches the href. -->
  35.                 <li><a class="toggle" href="#two">&nbsp;two&nbsp;</a></li>
  36.                 <li><a class="toggle" href="#three">&nbsp;three&nbsp;</a></li>
  37.             </ul>
  38.            <div id="toggleThis"> <!-- the js looks for an id of 'toggleThis' and divs inside of it. -->
  39.                 <div id="one"><br /><br /><br />DIV ONE CAN HAVE ANYTHING IN IT INCLUDING IMAGES
  40. </div>
  41.                 <div id="two"><br /><br /><br />DIV TWO CAN HAVE ANYTHING IN IT INCLUDING IMAGES
  42.             </div>
  43.                 <div id="three"><br /><br /><br />DIV THREE  CAN HAVE ANYTHING IN IT INCLUDING IMAGES
  44.  
  45. </div>
  46.             </div>
  47.  
  48.  
  49. </div>
  50.  
Jun 23 '08 #1
Share this Question
Share on Google+
7 Replies


acoder
Expert Mod 15k+
P: 16,027
You'll want to hide them to begin with. Either add the class hide to each div, or just add display:none to toggleThis until the document is ready.
Jun 24 '08 #2

P: 9
Thanks for your help. I tried an inline style of display:none for divs two & three. This kept them hidden even when button divs were clicked. I then tried

div#toggleThis div.hide and div#toggleThis.hide neither worked.

Or did you mean I should add this to the style as it is div two & three that show below the wrapp div until the page loads

#wrapp { margin: 0; padding: 0; width:300px; background-color: white;}
#one{ margin: 0; padding: 0; width:300px; height:218px;}
#two.hide{ margin: 0; padding: 0; width:300px; height:218px;}
#three.hide{ margin: 0; padding: 0; width:300px; height:218px;}

That did not seem to work either :(

Do you think I need to change the hideAllExcept.js to include a 2nd (document).ready(function(){ applied to the toggleThis divs?

Note I did have to use jQuery.noConflict as the page this needs to go on uses prototype.js

Expand|Select|Wrap|Line Numbers
  1. jQuery.noConflict();
  2. jQuery(document).ready(function() {
  3.     var hash = window.location.hash;
  4.  
  5.     (!hash) ?  
  6.         hideAllExcept('#' + jQuery('#toggleThis > div:first').attr('id')) 
  7.             : hideAllExcept(window.location.hash);
  8.  
  9.     jQuery('a.toggle').click(function() {
  10.         var href = jQuery(this).attr('href');
  11.         hideAllExcept(href);
  12.     });
  13. });
  14.  
  15. function hideAllExcept(el) {
  16.     jQuery('#toggleThis div').addClass('hide');
  17.     jQuery(el).removeClass('hide');
  18.  
  19.     jQuery('a.toggle').removeClass('active');
  20.     jQuery('a[href="' + el + '"]').addClass('active');
  21.  
  22. }
Jun 24 '08 #3

acoder
Expert Mod 15k+
P: 16,027
I think it'd be a good idea to use the class instead, so if you set the class of divs two and three to "hide". See if that works.
Jun 24 '08 #4

P: 9
OK so I tried this as changing all 3 divs to class rather than ID collapsed all 3

.one{ margin: 0; padding: 0; display:block; width:300px; height:218px;}
.two.hide{ margin: 0; padding: 0; width:300px; height:218px;}
.three.hide{ margin: 0; padding: 0; width:300px; height:218px;}

I can see .one but the show hide toggleThis is not working now for .two & .three.

I even changed
hideAllExcept('#' + jQuery('#toggleThis > div:first').attr('id'))

to this
hideAllExcept('#' + jQuery('#toggleThis > div:first').attr('class'))

As you probably guessed I'm one of those people that use jQuery without a real good idea of exactly how the library works.
Jun 24 '08 #5

acoder
Expert Mod 15k+
P: 16,027
No, what I meant was adding the class to the HTML, i.e.
[html]<div id="two" class="hide">[/html]so the two divs will initially be hidden. hideAllExcept should remove the class to display it again. I haven't tested, but that's the general idea.
Jun 25 '08 #6

P: 9
Thank you for your patience! That worked. I had tried it as an inline style but not as a class.

Edited to add. I learned a lot from you.
Jun 25 '08 #7

acoder
Expert Mod 15k+
P: 16,027
Glad to hear it! Post again if you have more questions.
Jun 25 '08 #8

Post your reply

Sign in to post your reply or Sign up for a free account.