I've made no progress on this. I only seem to be able to break it in different ways every time I make a change that seems right. Can anybody lend a hand?
On Oct 9, 4:17 pm, illtron <[EMAIL PROTECTED]> wrote: > Hi, I posted this a few weeks ago but I didn't get any traction. I've > been fumbling with it on and off since then, but I'm not getting > anywhere. I figured it couldn't hurt to try again. > > I think I'm pretty close to getting this to work, but it's not quite > there. This is essentially tab functionality, but the initially > showing div > needs to be randomly chosen. I can either show the random div > initially, but then the links don't work. Alternatively, I can make > the links work, but then I can't get the random div. > > The code I'm including shows working links. To (attempt to) show the > random div, I'm using > thishttp://www.leftrightdesigns.com/library/jquery/randomchild/ > > The links use this:http://enure.net/dev/hide-all-except-one/ > > I was trying to take this part, which shows the first child div of > #toggleThis: $('#toggleThis > div:first').attr('id') > > And substitute this: $('#toggleThis').randomChild() but it doesn't > work. > > Can anybody weigh in and tell me where I'm going wrong? Thanks! > > <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" > "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd";> > <html xmlns="http://www.w3.org/1999/xhtml";> > <head> > <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> > <title>Random test</title> > <style type="text/css">.hide { display: none; }</style> > <script type="text/javascript" src="http://code.jquery.com/jquery- > latest.min.js"></script> > <script type="text/javascript"> > $(document).ready(function() { > var hash = window.location.hash; > (!hash) ? > hideAllExcept('#' + $('#toggleThis > div:first').attr('id')) > : hideAllExcept(window.location.hash); > $('a.toggle').click(function() { > var href = $(this).attr('href'); > hideAllExcept(href); > }); > > }); > > function hideAllExcept(el) { > $('#toggleThis div').addClass('hide'); > $(el).removeClass('hide'); > $('a.toggle').removeClass('active'); > $('a[href="' + el + '"]').addClass('active'); > > } > > jQuery.fn.randomChild = function(settings) { > return this.each(function(){ > var c = $(this).children().length; > var r = Math.ceil(Math.random() * c); > $(this).children().hide().parent().children(':nth- > child(' + r + ')').show(); > }); > > }; > > </script> > </head> > <body> > <ul> > <li><a href="#lorem" class="toggle">Lorem ipsum</a></ > li> > <li><a href="#ut" class="toggle">Ut enim ad</a></li> > <li><a href="#duis" class="toggle">Duis aute</a></li> > <li><a href="#execepteur" class="toggle">Excepteur > sint</a></li> > </ul> > <div id="toggleThis"> > <div id="lorem">Lorem ipsum dolor sit amet.</div> > <div id="ut">Ut enim ad minim veniam.</div> > <div id="duis">Duis aute irure dolor.</div> > <div id="execepteur">Excepteur sint occaecat.</div> > </div> > </body> > </html>
