Hide All Except One Tabs showing hidden content brriefly

9 New Member

I am using jQuery & hideAllExcept.j s 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).rea dy(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 Reply

4672

acoder

16,027

Recognized Expert Moderator MVP

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

New Member

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.j s to include a 2nd (document).read y(function(){ applied to the toggleThis divs?

Note I did have to use jQuery.noConfli ct 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

Recognized Expert Moderator MVP

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

New Member

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('#toggle This > div:first').att r('id'))

to this
hideAllExcept(' #' + jQuery('#toggle This > div:first').att r('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

Recognized Expert Moderator MVP

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

New Member

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

Recognized Expert Moderator MVP

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

Jun 25 '08 #8

Similar topics

2828

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 great, but when I add nested tabs there is a problem with the 'visibility' not being inherited and some parts stay visible in the sub-tabs. Sorry if this is unclear. Here's how I have it layed out: I have a <span> for each content section of...

Javascript

8010

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) document.layers.visibility = 'visible'; else if (document.all) { document.all.style.visibility = 'visible';

Javascript

6404

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 that layer further down uppon showing this layer. When a person closes that layer the content underneath the layer moves up again and closes the empty space. How is this possible? I am playing around with some code I am posting with this thread....

Javascript

8083

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 display. If they put a value in the text box in the second row then display the third row etc. etc. etc. to 10 rows. I'm pretty new to javascript, so I'm not to sure where to start. Any help would be great, thanks a lot.

Javascript

2144

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 searchTableUS (displayed when USA is selected) and searchTableCA when (displayed when canada is selected) <table id="searchTableUS"> <tr>

Javascript

4173

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. I don`t want to change the way i have used to show and hide layers. check down code :- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html...

HTML / CSS

65410

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 ________________________________________________________ <?PHP @session_start(); //Start our session. if(@!session_is_registered('PrintTheJavaScript')){ //If the session is not registered (and it's not). @session_register('PrintTheJavaScript'); //Register the...

Javascript

9632

What is ONU?

by: marktang | last post by:

ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However, people are often confused as to whether an ONU can Work As a Router. In this blog post, we’ll explore What is ONU, What Is Router, ONU & Router’s main usage, and What is the difference between ONU and Router. Let’s take a closer look ! Part I. Meaning of...

General

10302

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, it seems that the internal comparison operator "<=>" tries to promote arguments from unsigned to signed. This is as boiled down as I can make it. Here is my compilation command: g++-12 -std=c++20 -Wnarrowing bit_field.cpp Here is the code in...

C / C++

10071

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 Update option using the Control Panel or Settings app; it automatically checks for updates and installs any it finds, whether you like it or not. For most users, this new feature is actually very convenient. If you want to control the update process,...

Windows Server

8958

AI Job Threat for Devs

by: agi2029 | last post by:

Let's talk about the concept of autonomous AI software engineers and no-code agents. These AIs are designed to manage the entire lifecycle of a software development project—planning, coding, testing, and deployment—without human intervention. Imagine an AI that can take a project description, break it down, write the code, debug it, and then launch it, all on its own.... Now, this would greatly impact the work of software developers. The idea...

Career Advice

6723

Couldn’t get equations in html when convert word .docx file to html file in C#.

by: conductexam | last post by:

I have .net C# application in which I am extracting data from word file and save it in database particularly. To store word all data as it is I am converting the whole word file firstly in HTML and then checking html paragraph one by one. At the time of converting from word file to html my equations which are in the word document file was convert into image. Globals.ThisAddIn.Application.ActiveDocument.Select();...

C# / C Sharp

5372

Trying to create a lan-to-lan vpn between two differents networks

by: TSSRALBI | last post by:

Hello I'm a network technician in training and I need your help. I am currently learning how to create and manage the different types of VPNs and I have a question about LAN-to-LAN VPNs. The last exercise I practiced was to create a LAN-to-LAN VPN between two Pfsense firewalls, by using IPSEC protocols. I succeeded, with both firewalls in the same network. But I'm wondering if it's possible to do the same thing, with 2 Pfsense firewalls...

Networking - Hardware / Configuration

5501

Windows Forms - .Net 8.0

by: adsilva | last post by:

A Windows Forms form does not have the event Unload, like VB6. What one acts like?

Visual Basic .NET

4036

transfer the data from one system to another through ip address

by: 6302768590 | last post by:

Hai team i want code for transfer the data from one system to another through IP address by using C# our system has to for every 5mins then we have to update the data what the data is updated we have to send another system

C# / C Sharp

3631

How to add payments to a PHP MySQL app.

by: muto222 | last post by:

How can i add a mobile payment intergratation into php mysql website.

PHP