I've been playing around with this, but I can't come up with a good solution. It seems like I can only break another thing when I fix one.
On Sep 24, 4:24 pm, illtron <[EMAIL PROTECTED]> wrote: > I think I'm pretty close to getting this to work, but it's not quite. > 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/jquery.ran... > 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>
