Databases
StackOverflow2013
Postsdbo
POHow do I fade one <div> out with jQuery and fade another <div> in?
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POHow do I fade one <div> out with jQuery and fade another <div> in?
    primarykey
    data
    text
    <p>I am building my portfolio and I want to create a gallery to display my projects. I have a selection of seven divs containing content that form a tabbed navigation-esque section of my website. As with other tabbed navigations, only one div containing content will be active at any one time. However, unlike other tabbed navigations, this one is controlled by PHP. If certain content (currently set to a file_exists function but will soon be MySQL controlled) is available, the div will be written into the navigation and the appropriate link will be displayed. If it is not, then the link will be hidden and the div will not be written. The files required are based on a $_GET call, and the files required vary depending on the string inside my $_GET variable.</p> <p>Each tab has a unique id. Currently (since I am no Javascript expert), I have a "reset" option that sets the style of all named divs to a "hidden" style, before bringing my chosen div to a "visible" state.</p> <p>What I want to do, if it is possible, is this:</p> <p>I want to go from #div1 to #div2. Divs 1, 2, 4 and 6 (for this example) are active. I click the link that tells my page to display #div2 (the function currently only says to hide ALL divs and then display #div2, the hiding of all other divs is a separate function, which is called within this function). #div1 is currently visible.</p> <ol> <li>#div1 will fade out</li> <li>#div2 will fade in</li> </ol> <p>Divs 4 and 6 will not be affected. Divs 3, 5 and 7 will not be touched since they (as far as my page is concerned) do not exist. Each fade can take 3 seconds for this example.</p> <p>I am vaguely aware that $('#div2').fadeIn(3000); would constitute a fade in effect for #div2 and the fadeOut() counterpart would constitute a fade out. How do I use jQuery (I have 1.5.2 on my site) to fade #div1 out and fade #div2 in WITHOUT affecting any other div, or is it easier to keep the code as it is where it hides all of my divs and just fade #div2 in? Please remember, I am not a Javascript expert, I'm barely a beginner, so please do not insult the length of my script or my inability to understand something which I guess would be so simple.</p> <p>Please remember that I have up to seven divs in my navigation. The script must find the div that is visible based on the link that is clicked and fade it out, then fade in my chosen div, and it must not touch any of the remaining divs.</p> <p>Is that easy enough to understand and gain an answer?</p> <h2>EDIT @ 01:46 GMT, 30/04/2010</h2> <p>Thanks, but these don't look like what I want. They look like they would work if there were only two divs, but remember, there are up to seven, and the link should know which div is visible and which are not accounted for.</p> <p>I currently have my PHP script to say "If this file exists, then make this div and apply the style 'visibleTab' to it. Otherwise, make it, but apply the style 'hiddenTab' to it." My Javascript (now jQuery) code is as follows:</p> <pre><code> function resetTabs() { $("#postersandprint").removeClass("tabs visibleTab").removeClass("hiddenTab").addClass("hiddenTab"); $("#mobileapp").removeClass("tabs visibleTab").removeClass("hiddenTab").addClass("hiddenTab"); $("#stylesheets").removeClass("tabs visibleTab").removeClass("hiddenTab").addClass("hiddenTab"); $("#storyboards").removeClass("tabs visibleTab").removeClass("hiddenTab").addClass("hiddenTab"); $("#motionpieces").removeClass("tabs visibleTab").removeClass("hiddenTab").addClass("hiddenTab"); $("#interactives").removeClass("tabs visibleTab").removeClass("hiddenTab").addClass("hiddenTab"); $("#developmentwork").removeClass("tabs visibleTab").removeClass("hiddenTab").addClass("hiddenTab"); } function showTab(tabname) { resetTabs(); $('#'+tabname).fadeIn(3000); $("#"+tabname).removeClass("hiddenTab").addClass("tabs visibleTab"); } </code></pre> <p>The principle is this:</p> <p>My link has an onclick that calls my showTab function and places the appropriate div id inside the function, so for example: </p> <pre><code>&lt;a href="javascript:;" onclick="showTab('mobileapp');"&gt;Link&lt;/a&gt; </code></pre> <p>The function hides all of the divs and then fades in the one called by 'tabname', in this case, "mobileapp".</p> <p>I have told each reset function to remove any class called 'hiddenTab' as well as any class called 'visibleTab' and 'tabs' before adding the 'hiddenTab' class as a kind of "fail safe" approach. I have also told my showTab function to explicitly remove the "hiddenTab" class from my tab that I want visible and to add the classes "tabs" and "visibleTab". I forget why I have two styles, but i am sure the reason will come to me.</p> <p>I want my jQuery script to know which div is visible and which one is not out of the selection of seven. The #div1 and #div2 was an example, but it could be any div from the selection. Before, when I used the document.getElementById function, it worked perfectly, I just wanted to add a fade on to the script to make it look better. Now, it works, but only when I cycle through the divs once. Afterwards, it just appends my div underneath the visible one, it doesn't hide them. I know I have missed something, or I have messed up somewhere, but what have I missed? Where have I messed up?</p>
    singulars
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PTQuestion
    1. USNathan Bunn
    1. USNathan Bunn
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PO
      singulars
      1. PTAnswer
    2. PO
      singulars
      1. PTAnswer
    3. PO
      singulars
      1. PTAnswer
    1. VO
      singulars
      1. POHow do I fade one <div> out with jQuery and fade another <div> in?
      1. This table or related slice is empty.
      1. VTUpMod
    2. VO
      singulars
      1. POHow do I fade one <div> out with jQuery and fade another <div> in?
      1. This table or related slice is empty.
      1. VTUpMod
    3. VO
      singulars
      1. POHow do I fade one <div> out with jQuery and fade another <div> in?
      1. UStradyblix
      1. VTFavorite
    1. This table or related slice is empty.
 

Querying!

 
Guidance
A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload