Hide All Except One Tabs showing hidden content brriefly

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

 <!-- import the DOM logic from external javascript files -->

        <script type="text/javascript" src="http://enure.net/_js/jquery.min.js"></script>

        <script type="text/javascript" src="http://enure.net/dev/hide-all-except-one/hideAllExcept.js"></script>
 
<style type="text/css">

 .hide { display: none; } /* required */

 body { background-color: #ffffff; }

 #wrapp { margin: 0; padding: 0; width:300px;   background-color: white;}

 #ccc;border-right: 1px solid #ccc;border-bottom: 1px solid #ccc; font-family: 'arial',  helvetica, sans-serif; font-weight: bold; font-size: 70%;}

 ul { padding-left: 0; padding-bottom:0 }

 li { float: left; display: block; margin-right: 0.1em; }

 ul#buttons {

  margin: .1em .1em .1em .1em;

  font-family: arial, helvetica, sans-serif;

  font-weight: bold;

  font-size: 70%;
 
 }

 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; 

  background-image: url(tabsBG.gif);}

 div#toggleThis { margin-top: 0; margin-bottom:0; border-left: 1px solid #ccc;border-right: 1px solid #ccc;}

 div#toggleThis div {  padding: 0; color: #000; border-left:#eee; font-family: georgia, serif; }

 a, a:link, a:visited { color: #111; text-decoration: none; }

 a.active, a:hover { color: red; }
 
</style>
 
    </head>

    <body>

       <div id="wrapp">
 
            <ul id="buttons">

                <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. -->

                <li><a class="toggle" href="#two">&nbsp;two&nbsp;</a></li>

                <li><a class="toggle" href="#three">&nbsp;three&nbsp;</a></li>

            </ul>

           <div id="toggleThis"> <!-- the js looks for an id of 'toggleThis' and divs inside of it. -->

                <div id="one"><br /><br /><br />DIV ONE CAN HAVE ANYTHING IN IT INCLUDING IMAGES

</div>

                <div id="two"><br /><br /><br />DIV TWO CAN HAVE ANYTHING IN IT INCLUDING IMAGES

            </div>

                <div id="three"><br /><br /><br />DIV THREE  CAN HAVE ANYTHING IN IT INCLUDING IMAGES
 
</div>

            </div>
 
</div>

Jun 23 '08 #1

Subscribe Post Reply

4642

acoder

16,027

Expert Mod 8TB

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

somnamblst

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

 jQuery.noConflict();

jQuery(document).ready(function() {

    var hash = window.location.hash;
 
    (!hash) ?  

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

            : hideAllExcept(window.location.hash);
 
    jQuery('a.toggle').click(function() {

        var href = jQuery(this).attr('href');

        hideAllExcept(href);

    });

});
 
function hideAllExcept(el) {

    jQuery('#toggleThis div').addClass('hide');

    jQuery(el).removeClass('hide');
 
    jQuery('a.toggle').removeClass('active');

    jQuery('a[href="' + el + '"]').addClass('active');
 
}

Jun 24 '08 #3

acoder

16,027

Expert Mod 8TB

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

somnamblst

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

16,027

Expert Mod 8TB

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

somnamblst

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

16,027

Expert Mod 8TB

Glad to hear it! Post again if you have more questions.

Jun 25 '08 #8

Similar topics

nested tabs

by: horndude77 | last post by:

Ok, this might be for a web designing group, but here's my problem. I'm trying to make a web page with tabs which you can navigate between without the page reloading. I have one set of tabs working...

Javascript

Hide / Show form Elements.

by: jerryyang_la1 | last post by:

I've found this script that allows be to hide/show form elements.. <script language="JavaScript"><!-- var toggle = true; function show(object) { if (document.layers && document.layers)...

Javascript

show/hide layer

by: Merlin | last post by:

Hi there, I am trying to create a form with an dynamic field that can be shown or hidden. As I saw for example on google it is possible with JS to show a layer and move the content underneath...

Javascript

Hide/Show Rows based on text box input

by: jimstruckster | last post by:

I have a table with 10 rows, I want all rows except for the first to be hidden when the page first opens up. If the user puts a value in a text box in the first row then I want the second row to...

Javascript

Show-hide table content wrapping

by: lisa232 | last post by:

Hi All, I have a problem with some javascript code. I am trying to toggle display between two tables upon change of a select box ( to alternate between search forms) eg. one called...

Javascript

show hide layer in IE and Mozilla

by: pamate | last post by:

hi, I want to show hide layers. I am able to show and hide layers but i am facing problem that, cant view the cursor in Mozilla,but i can type in input text box, its overlapping the layers. ...

HTML / CSS

Hide JavaScript code from the client

by: SOLAV | last post by:

This is the only working way to completely hide your JavaScript code from the client just like PHP or ASP code. Here we'll need the help of PHP. Here is the code: index.php...

Javascript

How to turn on java script in a villaon keypad mobile phone

by: Charles Arthur | last post by:

How do i turn on java script on a villaon, callus and itel keypad mobile phone

Java

Migrating Website to Cloud - Emmanuel Katto

by: emmanuelkatto | last post by:

Hi All, I am Emmanuel katto from Uganda. I want to ask what challenges you've faced while migrating a website to cloud. Please let me know. Thanks! Emmanuel

General

Navigating the Data Structures and Algorithms (DSA)

by: BarryA | last post by:

What are the essential steps and strategies outlined in the Data Structures and Algorithms (DSA) roadmap for aspiring data scientists? How can individuals effectively utilize this roadmap to progress...

Algorithms / Advanced Math

Looking to do Android software development, any suggestions? Is flutter better?

by: nemocccc | last post by:

hello, everyone, I want to develop a software for my android phone for daily needs, any suggestions?

General

Is that possible of reading the .csv file in column wise and the column have different lengths ?

by: Sonnysonu | last post by:

This is the data of csv file 1 2 3 1 2 3 1 2 3 1 2 3 2 3 2 3 3 the lengths should be different i have to store the data by column-wise with in the specific length. suppose the i have to...

C / C++

How to build RAID in BIOS?

by: Hystou | last post by:

There are some requirements for setting up RAID: 1. The motherboard and BIOS support RAID configuration. 2. The motherboard has 2 or more available SATA protocol SSD/HDD slots (including MSATA, M.2...

Computer Hardware

Problem With Comparison Operator <=> in G++

by: Oralloy | last post by:

Hello folks, I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>". The problem is that using the GNU compilers,...

C / C++

The easy way to turn off automatic updates for Windows 10/11

by: Hystou | last post by:

Overview: Windows 11 and 10 have less user interface control over operating system update behaviour than previous versions of Windows. In Windows 11 and 10, there is no way to turn off the Windows...

Windows Server

Discussion: How does Zigbee compare with other wireless protocols in smart home applications?

by: tracyyun | last post by:

Dear forum friends, With the development of smart home technology, a variety of wireless communication protocols have appeared on the market, such as Zigbee, Z-Wave, Wi-Fi, Bluetooth, etc. Each...

General