Here is the a prototype of the finished product to show you what I was trying to acheive.
http://members.optusnet.com.au/greg.bird/mm/collapse.html * Long page broken up into smaller sections based on H2's * Each scetion is wrapped in a div with a unique ID * All but the first section is hidden * Side navigation created dynamically based on H2's. This toggles the visability of the various sections * Users can see entire page by clicking SHOW ALL I am Considering using an accordian style navigation rather than show/hide. Thanks again John. Your help was invaluable! John Resig wrote: > > Ok, I did some more digging and you're right. I don't think I ever > actually tested nextUntil (oops!) > > The full implementation can be found here: > http://john.jquery.com/jquery/test/nextuntil.html > > This includes a working version of nextUntil: > $.fn.nextUntil = function(expr) { > var match = []; > > // We need to figure out which elements to push onto the array > this.each(function(){ > // Traverse through the sibling nodes > for( var i = this.nextSibling; i; i = i.nextSibling ) { > // Make sure that we're only dealing with elements > if ( i.nodeType != 1 ) continue; > > // If we find a match then we need to stop > if ( jQuery.filter( expr, [i] ).r.length ) break; > > // Otherwise, add it on to the stack > match.push( i ); > } > }); > > return this.pushStack( match, arguments ); > }; > > Additionally, I realized that .wrap() isn't going to do what you need > it to. .wrap() wraps each matched element with the same structure. So > if you matched 3 paragraphs, you'd have three surrounding divs too. > Since you want it to wrap all of the matched elements with a single > element, I made a new .wrapAll() plugin: > > $.fn.wrapAll = function() { > // There needs to be at least one matched element for this to work > if ( !this.length ) return this; > > // Find the element that we're wrapping with > var b = jQuery.clean(arguments)[0]; > > // Make sure that its in the right position in the DOM > this[0].parentNode.insertBefore( b, this[0] ); > > // Find its lowest point > while ( b.firstChild ) b = b.firstChild; > > // And add all the elements there > return this.appendTo(b); > }; > > So - all of that should help you along now. Let me know if this works for > you. > > --John > > On 10/18/06, Greg Bird <[EMAIL PROTECTED]> wrote: >> >> Thanks for this Blair.....a really interesting approach and one I >> wouldn't >> have thought of myself. >> >> At the moment, I am having problems with the NextUntil function, but once >> I >> have this solved, your suggestion may be a really neat implementation. >> >> Cheers, Greg >> >> >> >> Blair McKenzie-2 wrote: >> > >> > This is just a guess: >> > >> > function BuildNav() { >> > $("#content h2").each(function(){ >> > $(this).before("<div class='note >> > newdivmarker'></div>").nextUntil("h2").appendTo(".newdivmarker"); >> $(" >> > div.newdivmarker").removeClass("newdivmarker); >> > }); >> > } >> > >> > It relies on the assumption that appendTo moves the origonal element >> list, >> > rather than clones them. Basically: >> > >> > 1. It adds your div before the heading, with a temporary marker so >> we >> > can find it again >> > 2. Selects all elements until the next heading >> > 3. Moves them to the div >> > 4. Removes the marker from the div >> > >> > >> > Blair >> > >> > >> > On 10/18/06, Greg Bird <[EMAIL PROTECTED]> wrote: >> >> >> >> >> >> Hi John, >> >> >> >> >> >> thanks again for your help, unfortunately I have deployed your >> >> suggestions >> >> and am still unable to get it to work. You can view my testpage at: >> >> http://members.optusnet.com.au/greg.bird/mm/collapse.html >> >> >> >> My .js now reads: >> >> >> >> $(document).ready(function(){ >> >> BuildNav(); >> >> }); >> >> //DEFINE NextUntil FUNCTION >> >> >> >> $.fn.nextUntil = function(expr) { >> >> var match = []; >> >> >> >> this.each(function(){ >> >> var cur = this.nextSibling; >> >> while ( cur && jQuery.filter( expr, [cur] ).r.length ) { >> >> match = jQuery.merge( match, [ cur ] ); >> >> cur = cur.nextSibling; >> >> } >> >> console.log(this,cur,match); >> >> }); >> >> >> >> return this.pushStack( match, arguments ); >> >> }; >> >> >> >> /*BUILD SIDE NAVIGATION*/ >> >> function BuildNav() { >> >> $("#content h2").each(function(){ >> >> $(this).nextUntil("h2").wrap("<div class='note'></div>"); >> >> }); >> >> } >> >> >> >> I have logged the script and it appears that the "match" array is not >> >> being >> >> populated. I suspect that the Jquery.merge function is not triggering >> >> properly >> >> >> >> Does this function work with JQUERY 1.0.2? In note in the JQUERY doco >> >> that >> >> the function call is now $.merge. Trialled this without success. >> >> >> >> My aim here is to put a unique div around each section of the page and >> >> then >> >> dynamically create an expand/collapse navigation system. Have already >> >> achieved a similar result with a sliding navigation system. You can >> see >> >> this at: >> >> >> >> http://members.optusnet.com.au/greg.bird/mm/index.html >> >> >> >> This was easier as I didn't need to wrap div's around anything, but >> >> simply >> >> anchor to the existing H2's >> >> >> >> >> >> Have you got any suggestions? Do you have any test pages so that I >> can >> >> view >> >> your implementation? >> >> >> >> Thanks in advance, Greg >> >> >> >> John Resig wrote: >> >> > >> >> > Hi Greg - >> >> > >> >> > I created a plugin a while back that can help with this, called >> >> nextUntil: >> >> > >> >> > $.fn.nextUntil = function(expr) { >> >> > var match = []; >> >> > >> >> > this.each(function(){ >> >> > var cur = this.nextSibling; >> >> > while ( cur && jQuery.filter( expr, [cur] ).r.length ) { >> >> > match = jQuery.merge( match, [ cur ] ); >> >> > cur = cur.nextSibling; >> >> > } >> >> > }); >> >> > >> >> > return this.pushStack( match, arguments ); >> >> > }; >> >> > >> >> > Just include that after you include jquery.js then do the following: >> >> > >> >> > $("#content h2").each(function(){ >> >> > $(this).nextUntil("h2").wrap("<div class='note'></div>"); >> >> > }); >> >> > >> >> > Just 3 lines! Not too shabby :) >> >> > >> >> > --John >> >> > >> >> > On 10/18/06, Greg Bird <[EMAIL PROTECTED]> wrote: >> >> >> >> >> >> Hi everyone. >> >> >> >> >> >> I am attempting to develop some dynamic "in page" navigation. I am >> a >> >> big >> >> >> fan of structural markup. >> >> >> >> >> >> Each H2 represents a new section of the current document. >> >> >> >> >> >> I wish to: >> >> >> 1. Find each H2 >> >> >> 2. Wrap this in a unique div, up to (but not including) the next >> H2. >> >> This >> >> >> will then be used to further manipulate the page >> >> >> >> >> >> >> >> >> >> >> >> <div id="content> >> >> >> ........ >> >> >> <h2>First section</h2> >> >> >> ...[arbitary HTML].... >> >> >> <h2>second section</h2> >> >> >> ...[arbitary HTML].... >> >> >> <h2>third section</h2> >> >> >> ......... >> >> >> </div> >> >> >> >> >> >> Becomes: >> >> >> <div id="content> >> >> >> ........ >> >> >> <div id="1"> >> >> >> <h2>First section</h2> >> >> >> ...[arbitary HTML].... >> >> >> </div> >> >> >> >> >> >> <div id="2"> >> >> >> <h2>second section</h2> >> >> >> ...[arbitary HTML].... >> >> >> </div> >> >> >> <h2>third section</h2> >> >> >> ......... >> >> >> </div> >> >> >> >> >> >> Here is the JQuery that I have developed to date: >> >> >> >> >> >> $(document).ready(function(){ >> >> >> BuildNav(); >> >> >> }); >> >> >> /*BUILD SIDE NAVIGATION*/ >> >> >> function BuildNav() { >> >> >> //add back to top links before each H2 >> >> >> $('#content h2').each(function(i){ >> >> >> if(i==0){//FIRST H2 >> >> >> $(this).before('<div id="'+ i +'" class="note">')//START A NEW DIV >> >> WITH >> >> >> UNIQUE ID >> >> >> } >> >> >> else { >> >> >> $(this).before('</div><div id="'+ i +'" class="note">');//TERMINATE >> >> >> PREVIOUS DIV, BEGIN NEW ONE >> >> >> } >> >> >> }) >> >> >> $('#content').append('</div>');//TERMINATE FINAL DIV >> >> >> } >> >> >> >> >> >> This looks sensible to me but fails. It appears you cannot inject >> >> >> unterminated tags and that JQUERY automatically closes tags on >> >> insertion, >> >> >> resulting in: >> >> >> >> >> >> <div id="content> >> >> >> ........ >> >> >> <div id="1"></div> >> >> >> <h2>First section</h2> >> >> >> ...[arbitary HTML].... >> >> >> <div id="2"></div> >> >> >> <h2>second section</h2> >> >> >> ...[arbitary HTML].... >> >> >> <div id="3"></div> >> >> >> <h2>third section</h2> >> >> >> ......... >> >> >> </div> >> >> >> >> >> >> Can anyone give me any clues? Thanks in advance, Greg Bird >> >> > >> >> > _______________________________________________ >> >> > jQuery mailing list >> >> > [email protected] >> >> > http://jquery.com/discuss/ >> >> > >> >> > >> >> Quoted from: >> >> >> >> >> http://www.nabble.com/Please-help%21-Dynamically-Wrapping-DIV%27s-around-structural-markup.-tf2464168.html#a6869443 >> >> >> >> -- >> >> View this message in context: >> >> >> http://www.nabble.com/Please-help%21-Dynamically-Wrapping-DIV%27s-around-structural-markup.-tf2464168.html#a6870422 >> >> Sent from the JQuery mailing list archive at Nabble.com. >> >> >> >> >> >> _______________________________________________ >> >> jQuery mailing list >> >> [email protected] >> >> http://jquery.com/discuss/ >> >> >> > >> > _______________________________________________ >> > jQuery mailing list >> > [email protected] >> > http://jquery.com/discuss/ >> > >> > >> >> -- >> View this message in context: >> http://www.nabble.com/Please-help%21-Dynamically-Wrapping-DIV%27s-around-structural-markup.-tf2464168.html#a6870801 >> Sent from the JQuery mailing list archive at Nabble.com. >> >> >> _______________________________________________ >> jQuery mailing list >> [email protected] >> http://jquery.com/discuss/ >> > > > -- > John Resig > http://ejohn.org/ > [EMAIL PROTECTED] > > _______________________________________________ > jQuery mailing list > [email protected] > http://jquery.com/discuss/ > > -- View this message in context: http://www.nabble.com/Please-help%21-Dynamically-Wrapping-DIV%27s-around-structural-markup.-tf2464168.html#a6907473 Sent from the JQuery mailing list archive at Nabble.com. _______________________________________________ jQuery mailing list [email protected] http://jquery.com/discuss/
