StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

POApplying effects to a div class for the current page/tab using jQuery
text
Body
copied!<p>I have three leaves in my navigation bar on <a href="http://nickputman.com/test/" rel="nofollow">this page</a>. Each leaf section is a nav link consisting of div classes with absolute positioning and different z-indexes, so that I can fade in the green leaves over the brown.</p> <p>There is also a fading transition between pages, which is based on the dynamic page changing method on <a href="http://css-tricks.com/6336-dynamic-page-replacing-content/" rel="nofollow">CSS tricks</a>, which uses a hashchange to change the pages.</p> <p>You can see all of the code relevant to the fading of the leaves on the nav bar on <a href="http://jsfiddle.net/nickharambee/RqgzS/1/" rel="nofollow">this jsfiddle</a> (the script also contains the code for the transitions between pages).</p> <p>The part I am struggling with is how to refer to the div class ".current" (which contains the green leaves that are faded in and out) for the current page. I need to do this so that, when the website is first opened, either on the home page or the about page, the green leaf for the current page is set to opacity:1 as the page is loaded (this is what happens when the user clicks on a page to load it, but not when the page first loads).</p> <p>I could set the opacity for the .current class in the CSS for each page, but using the hashchange method, only the HTML for #main-content is changed, so this wouldn't work. I presume that I need to find a way of setting this in my javascript, referring somehow to the current page/tab.</p> <p>Related to this is how I change the opacity of the green leaves for the current page in the click handler for the .close div/link, i.e. if the contact form is closed when the home page is active, the home page green leaf will fade in (as it is the current page), and the same with the about page. Again, it would seem that I need to find a way of referring to the current page/tab in the click handler.</p> <p>Could someone help me with this?</p> <p>Thanks,</p> <p>Nick</p>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

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