Response title
This is preview!
- Screen name: fpjansen
fpjansen's Profile
2 Posts
5 Responses
0
Followers
Activity Trend
Last 30 days
- Last 30 days
- Date Interval
From Date : To Date :
Loading Chart...
Show:
- Expanded view
- List view
Private Message
- I'm very new at jQuery and I am trying to write a selector that returns a div with a particular id and all its descendants. What I have is$('.boxBody > div:eq(' + $('#tabMenu > li').index(this) + ')').contents().andSelf().slideDown('1500');The problem is that the slideDown sets style="display:block" for the div, but not for any divs that may be nested below it. What should I change to get the right behavior?Thanks!!
- I'm trying to debug a tabbed menu implementation, where I have a variety of pages that are made visible based on tab clicks. This works well, until I have a page that is laid out with nested divs. Any content beyond the child of the selected page (page_about shows 'Put an image here' but not 'This is where...') remains invisible.I've tried a number of options in the slideDown statement, but failed thus far.Thanks for any help,
FrankThe HTML excerpt looks thus:<div class="boxBody"><div id="page_home" class="page show"><div id="slider" class="show"><h1>Put some stuff here for the home page</h1></div></div><div id="page_galleries" class="page"><h1>This is where we put the stuff for the Galleries page!</h1></div><div id="page_services" class="page"><h1>This is where we put the stuff for the Services page!</h1></div><div id="page_about" class="page"><div id="aboutContent"><div id="aboutContentImg"><p>Put an image here</p></div><div id="aboutContentTxt"><h1>This is where we put the stuff for the About page!</h1></div></div><div id="aboutImg"><h2>This is some image</h2></div></div><div id="page_proofs" class="page"><h1>This is where we put the stuff for the Proofs page!</h1></div><div id="page_contact" class="page"><h1>This is where we put the stuff for the Contact page!</h1></div></div>The ready function is:$(document).ready(function() {//Get all the LI from the #tabMenu UL$('#tabMenu > li').click(function(){//remove the selected class from all LI$('#tabMenu > li').removeClass('selected');//Reassign the LI$(this).addClass('selected');//Hide all the DIV in .boxBody$('.boxBody div.page').slideUp('1500');//Look for the right DIV in boxBody according to the Navigation UL index, therefore, the arrangement is very important.$('.boxBody > div:eq(' + $('#tabMenu > li').index(this) + ')').contents().andSelf().slideDown('1500');}).mouseover(function() {//Add and remove class, Personally I dont think this is the right way to do it, anyone please suggest$(this).addClass('mouseover');$(this).removeClass('mouseout');}).mouseout(function() {//Add and remove class$(this).addClass('mouseout');$(this).removeClass('mouseover');});});- «Prev
- Next »
Moderate user : fpjansen