jQuery Forum

I'm trying to wrap part of a string with a span tag, like so:

1. // set teaser text
2. $('.student_stories_header').each(function() {
3.     $(this).next('p').text().substring(50).wrap('<span class="expand_content" />');
4.     return false;
5. });

But I'm getting the error:

Error: TypeError: $(...).next(...).text(...).substring(...).wrap is not a function

Can anyone see what the problem is? Also if possible it would be good to dissect the string by word count as opposed to characters




http://www.mattpealing.co.uk

I need to run a function whenever:

1. A desktop browser is resized
2. A tablet / smartphone has its orientation changed

Is there one particular even that will handle both by any chance or do I need to use different ones?

http://www.mattpealing.co.uk

What I need to do is target every 3rd element but starting from the first.

So basically it would be 1, 4, 7, 10... etc

I'm using the following:

1. $('#nav li:nth-child(3)').css('clear', 'both');
   

But this targets the 3rd element only

Is there any way I can get it to loop through the way I need it?


http://www.mattpealing.co.uk

I'm using the following script to set an autocomplete on a text field:

1. $("#franchisee_type").autocomplete({
2.     source: function(request, response) {
3.         var results = $.ui.autocomplete.filter(tags, request.term);
4.         response(results.slice(0, 4));
5.     },
6.     appendTo: "#ui-autocomplete-wrapper-01"
7. });

It works fine in decent browsers, but in IE the autocomplete won't load at all. It used to load until I added all that code under the 'source' option in order to limit the amount of results to '4'.

I now get the error in the attached image.

Any ideas what might be wrong? Could the problem be caused by the comma after the closing brace?






http://www.mattpealing.co.uk

I'm using the following code to execute a supersized slideshow:

1. jQuery(function($){   
2.     $.supersized({
3.    
4.         // Functionality
5.         slide_interval          :   4000,        // Length between transitions
6.         transition              :   6,             // 0-None, 1-Fade, 2-Slide Top, 3-Slide Right, 4-Slide Bottom, 5-Slide Left, 6-Carousel Right, 7-Carousel Left
7.         transition_speed        :    1250,        // Speed of transition
8.                                                   
9.         // Components                           
10.         slide_links                :    false,    // Individual links for each slide (Options: false, 'num', 'name', 'blank')
11.         slides                     :      [        // Slideshow Images
12.                                         { image : '../../wp-content/themes/croftoncontracts/image/supersized/flooring/01.jpg' },
13.                                         { image : '../../wp-content/themes/croftoncontracts/image/supersized/flooring/02.jpg' },
14.                                         { image : '../../wp-content/themes/croftoncontracts/image/supersized/flooring/03.jpg' }
15.                                     ]
16.     });
17. });

I need to modify it however, so that it pulls in images dynamically rather than grabbing 3 specific images.

I can use WordPress to specify what images need to be in the slideshow (e.g. by outputting some hidden fields that contain the paths to the images.

However how would I tell jQuery to then set these images to the correct options?

I imagine I would need to use either a foreach loop or an each() method?

I hope that makes sense!


http://www.mattpealing.co.uk

I'm trying to add / remove .current classes on a set of <li> elements on the following page:
http://concept.mattpealing.co.uk/w-c-22062012/1-dev/

The actual bit of code in question is:

1. <div id="feed-home-certifications" class="grid_12 feed">
2.     <ul>
3.         <li id="iso-9001" class="grid_2 alpha"><a href="#">ISO 9001</a></li>
4.         <li id="iso-14001" class="grid_2"><a href="#">ISO 14001</a></li>
5.         <li id="ohsas-18001" class="grid_2"><a href="#">OHSAS 18001</a></li>
6.         <li id="iso-22000" class="grid_2"><a href="#">ISO 22000</a></li>
7.         <li id="as-9100" class="grid_2"><a href="#">AS 9100</a></li>
8.         <li id="haccp" class="grid_2 omega"><a href="#">HACCP</a></li>
9.     </ul>
10. </div>

And here is the jQuery that I'm trying to achieve it with:

1. // looping animations
2. $(document).ready(function() {
3.     var timeoutToken;
4.    
5.     // feed-home-certifications
6.     function linkOne() {
7.           $('#iso-9001').addClass('current').delay(1000).removeClass('current');
8.           timeoutToken = setTimeout(linkTwo, 1000);
9.     }
10.     function linkTwo() {
11.           $('#iso-14001').addClass('current').delay(1000).removeClass('current');
12.           timeoutToken = setTimeout(linkThree, 3000);
13.     }
14.     function linkThree() {
15.           $('#ohsas-18001').addClass('current').delay(1000).removeClass('current');
16.           timeoutToken = setTimeout(linkOne, 3000);           
17.     }
18.     linkOne();
19. });

However I find the class of .current just simply isn't being added. The wierd thing is, when I look in Firebug it seems to be doing *something* I think. As the 'class' attribute is highlighted yellow when the animation is supposed to be happenning.

See here:


Does anyone know what might be wrong with my script?

http://www.mattpealing.co.uk

I have a div element; .bubble which contains several <section> elements.

I am trying to set it so that when a button is clicked, it hides the current <section> and shows the next one.

1. $(document).ready(function() {
2.     $('#pealo-fact .button').click(function() {
3.         var section = $(this).parent().find('.bubble section');
4.         $(this).parent().find('.bubble section').slideUp(250);
5.         $(this).parent().find('.bubble').next('section').show();
6.         return false;
7.     });
8. });

However it doesn't seem to be working properly. Rather than showing the next section element, it shows all of them, except for the one that has just been hidden.

Can anyone see what I'm doing wrong?

Also, when it shows the last section, will it go back to the beginning when the button is clicked again?


http://www.mattpealing.co.uk

I cannot seem to access the $(this) variable from within my function:

1. $(document).ready(function() {
2.     $('#page .row .content').hover(function() {
3.         var timeoutToken;
4.         function headingHover() {
5.             $(this).find('.grids > aside .heading').css('background', 'none');
6.             timeoutToken = setTimeout(headingHover, 100);
7.         }
8.         headingHover();
9.     });
10. });

I can, however, target the element like so:

1. $('.grids > aside .heading').css('background', 'none');

But obviously, that targets ALL of the .heading elements rather than the appropriate one.

Does anyone know how I can access $(this).find() ?

http://www.mattpealing.co.uk

I have a signup form with 3 checkboxes. All of which need to be checked in order to proceed:

1. jQuery(document).ready(function() {
2.     jQuery('#signup_form').submit(function() {
3.         if (jQuery('#verify-16').is(':checked') && jQuery('#verify-tc').is(':checked') && jQuery('#verify-pp').is(':checked')) {
4.             return true;
5.         } else {
6.             if (jQuery('#verify-16').not(':checked')) {
7.                 alert('Please confirm that you are older than 16 yrs of age, but younger than 30');
8.             }
9.             if (jQuery('#verify-tc').not(':checked')) {
10.                 alert('Please confirm that you agree with our Terms & Conditions');
11.             }
12.             if (jQuery('#verify-pp').not(':checked')) {
13.                 alert('Please confirm that you agree with our Privacy Policy');
14.             }
15.             return false;
16.         }
17.     });
18. });

The script is suppose to alert the appropriate message depending on which checkbox is not checked. If I check all 3 then the form submits correctly. However, if I have so much as one field unchecked then I am given all 3 alert statements.

So even if I only have #verify-pp unchecked, it will still alert all 3 messages.

Can anyone see any issues with my code?

Is there an easy way to achieve this in jQuery?

I have a date gathered from 3 form fields, 'dd' 'mm' and 'yyyy'. But I need to work out a timestamp from that.

Is this possible?

http://www.mattpealing.co.uk

I have 3 sections inside a div and would like to fade each one in / out at regular intervals:

1. <div id="banner-home" class="banner">
2.     <section class="one">
3.         <span class="content">Advice + Support</span>
4.         <span class="bubble"></span>
5.     </section>
6.     <section class="two">
7.         <span class="content">Immigration<br />+ Asylum</span>
8.         <span class="bubble"></span>
9.     </section>
10.     <section class="three">
11.         <span class="content">Women's Rights</span>
12.         <span class="bubble"></span>
13.     </section>
14. </div>

You can *kind of* see what I mean here:

1. $(document).ready(function() {
2.     $('#banner-home section .bubble').hide();
3.     $('#banner-home .one .bubble').fadeIn(500).delay(1500).fadeOut(500);
4.     $('#banner-home .two .bubble').fadeIn(500).delay(1500).fadeOut(500);
5.     $('#banner-home .three .bubble').fadeIn(500).delay(1500).fadeOut(500);
6. });

Except I want it so that it works like so:

1. The first bubble fades in and fades out
2. Then the second bubble fades in and fades out
3. Then the third bubble fades in and fades out

http://www.mattpealing.co.uk

I need to avoid a few things for certain versions of Internet Explorer, and so my code after the body tag looks like so:

1. <body>
2. <!--[if lt IE 9]>
3. <div id="body-ie">
4. <![endif]-->

Then in jQuery, I need it to do this for any browser that isn't IE8 or below:

1. $(this).parent().next().slideUp(250);

However, in IEs 8 and below I need to do this:

1. $(this).parent().next().hide();

However I can't find a way to determine if $(this) has an ancestor of #body-ie

Does anyone know of a way to do this?

I have part of a script like so:

1. var audioPlaylist = new Playlist("2", [
2. {
3. mp3:"audio/eight-day-week.m4a"
4. },
5. {
6. name:"All You Need is Love",
7. mp3:"audio/all-you-need-is-love.m4a"
8. }

That adds two songs into a playlist on the jPlayer plugin.

On my webpage, I have set Wordpress to output a series of "hidden" <input> tags that contain the paths of each of the songs.

I would then like to loop through the <input> tags, perhaps using the .each() method and append the song urls to the array.

But I have no idea how to structure it! Surely I can't just throw an each() loop in the middle of declaring the array?

If anyone could point me in the right direction that would be great!


http://www.mattpealing.co.uk

If you look at the following page:
http://www.mattpealing-server.co.uk/~handstan/film-making-with-young-people-and-community-groups/

And then click the video thumbnail on the right (see attached image):


I am having trouble opening up a Vimeo video using Fancybox.

I have taken the iframe embed code off my Vimeo account, however I am getting js errors popping up in Internet Explorer. I get about 3 of them which I can cancel and then I am able to watch the video.

Does anyone know why this might be? Could it be that I am not executing Fancybox for an iframe properly?

Here is the HTML where the thumbnail is:

1. <div class="grid_3 alpha thumb">
2.                     <span class="icon-play"></span>
3.                     <input type="hidden" value="137" class="thumb-media-feed">
4.                                             <a href="#media-137" class="fancybox-inline"></a>
5.                                         <img alt="Behind the Golden Gates" src="http://www.mattpealing-server.co.uk/~handstan/wp-content/uploads/2011/06/Screen-shot-2011-06-20-at-11.57.20-160x86.png">
6.                 </div>

And here is how I am executing Fancybox:

1. $(document).ready(function() {
2.     $('.fancybox-inline').click(function() {
3.         return false;
4.     });
5.     $('.fancybox-inline').fancybox({
6.         'transitionIn'    : 'elastic',
7.         'transitionOut'    : 'elastic',
8.         'titlePosition'    : 'over',
9.         'hideOnContentClick' : false,
10.         'autoDimensions' : false,
11.         'width' : 580,
12.         'height' : 410
13.     });
14. })

Not only that, but I am getting another issue in Firefox. If you open the video by clicking the thumbnail then the video opens fine, however if you close it and then re-open it then I just get a blank white box opening up with no video inside it!

Could this again be caused by me not having set up Fancybox properly?



http://www.mattpealing.co.uk

I've probably worded the title of this completely wrong, but it's the most suitable one I can think of!

Here is the code I'm working with (for jPlayer plugin):

1. $(document).ready(function(){
2.     $('.jp-jplayer').jPlayer({
3.         ready: function () {
4.             $(this).jPlayer('setMedia', {
5.                 m4v: 'www.someurl.com/video.m4v'
6.             });
7.         },
8.         ended: function (event) {
9.             $(this).jPlayer('play');
10.         }
11.     });
12. });

What I'm trying to do is modify the code so that instead of m4v: 'www.someurl.com/video.m4v' it uses the value of the following:

1. $(this).next('input').val()

I can output this value in an alert statement no problem, but problems arise if I change my loop like so:

1. $(this).jPlayer('setMedia', {
2.                 m4v: $(this).next('input').val()
3.             });

Does anyone know how I can modify my script so that it gets the urls from hidden input tags? On my page I have several '.jp-jplayer' elements and inside each one is an element similar to the following:

1. <input type="hidden" value="www.someurl.com/video.m4v" /> 

If anyone could help me out that would be great!


http://www.mattpealing.co.uk

I am building the following website:
http://www.mattpealing-server.co.uk/~handstan/

But am having trouble getting the <span> tag above the video thumbnails to change when the thumbnails are hovered.

Ive attached a screenshot of the area of the page that I mean (see bottom).

But for some reason it doesnt behave as I intended. The <span> tags are supposed to slide up / down, but sometimes they just instantly switch from one to the other. Also, sometimes they don't animate until the cursor leaves the thumbnail, not hovers over it.

I want it so that the <span> tags animate as soon as the thumbnail is hovered. Is this actually possible?

It's quite hard to properly explain my problem but if you click the link you'll see what I mean.






http://www.mattpealing.co.uk

This might be a really stupid question, but in order to play an m4v file through jPlayer do I need an actual m4v player installed on my system?

I have been pinching code from the demo on this page:

• http://www.jplayer.org/latest/demo-01-video/

I can get the videos that are on the demo page to work fine, but when I switch the m4v url to the m4v file on my website it does not work.

I can see that the demo script also offers the video in .ogv format, I imagine this must be an alternative incase I cannot play m4v files?

If I leave the .ogv url in the script, then it plays the video that is on the demo, but if I remove the ogv url then I just get a blank screen in place of where the video should be.

So basically, if I have only the m4v url and no ogv url, I cannot play anything. If I have both url's then I only see the video that is on the demo site (e.g. the ogv url, my m4v video appears to get ignored)

Could this mean that I have software to playback the video in ogv format but not in m4v? I'm using a Mac so it might be using Quicktime or something?

I just took it that the jPlayer plugin handled video playback itself? But now I'm thinking this isn't the case, is it because it's an HTML5 player?

http://www.mattpealing.co.uk

I'm using the following script:

1. <script type="text/javascript">
2. $(document).click(function(e) {
3.           if(!$(e.target).is('#top-section .link')) {
4.                 $('.slide-down').slideUp(500);
5.           } else {
6.               $('.slide-down').slideDown(500);
7.           }
8.     });
9. </script>

This makes the containing div expand by making div.slideDown animate downwards.

The script works fine. But I have noticed that if I want to close the div (e.g. for it to slide back up) I have to click outside of the hyperlink that starts the event in the first place.

Does anyone know how I can modify the script so that clicking the hyperlink for a second time will cause the div to close again rather than having to click outside it?


http://www.mattpealing.co.uk

I have a script that is supposed to:

1. Make sure that the user selects a performance from a select field
2. Make sure that the user hasn't selected a performance that contains the string "SOLD OUT" in its value

Here is the code I am using:

1. $(document).ready(function() {
2.     $('#paypal-purchase').submit(function() {
3.         alert($('#paypal-purchase-date').val());
4.         if($('#paypal-purchase-date').val() == 'Select Performance Date') {
5.             alert ('Please select a performance date');
6.             return false;
7.         }
8.         if($('#paypal-purchase-date').val().search('SOLD OUT')) {
9.             alert ("Please select a performance that hasn't sold out");
10.             return false;
11.         }
12.     });
13. });

However, each time I submit the form, it always gives me the message:

"Please select a performance that hasn't sold out"

However, I have tried an alert statement to see what the value of the field is (when the form is submitted) and it doesn't always contain "SOLD OUT", it only contains that when I've selected an event that has actually sold out.

If it helps, here is the HTML for the select box:

1. <select id="paypal-purchase-date" name="on0">
2.             <option selected="selected" value="Select Performance Date">Select Performance Date</option>
3.             <option class="sold-out" value="11 April 2011">
4.                 11 April 2011 (SOLD OUT)
5.             </option>
6.            
7.             <option value="20 April 2011">
8.                 20 April 2011
9.             </option>
10.        
11.        
12.             <option value="21 April 2011">
13.                 21 April 2011
14.             </option>
15.        
16.        
17.             <option value="22 April 2011">
18.                 22 April 2011
19.             </option>
20.        
21.        
22.             <option class="sold-out" value="23 April 2011">
23.                 23 April 2011 (SOLD OUT)
24.             </option>
25.        
26.        
27.             <option value="24 April 2011">
28.                 24 April 2011
29.             </option>
30.        
31.        
32.             <option class="sold-out" value="25 April 2011">
33.                 25 April 2011 (SOLD OUT)
34.             </option>
35.        
36.        
37.             <option value="26 April 2011">
38.                 26 April 2011
39.             </option>
40.        
41.        
42.             <option class="sold-out" value="27 April 2011">
43.                 27 April 2011 (SOLD OUT)
44.             </option>
45.        
46.        
47.             <option value="28 April 2011">
48.                 28 April 2011
49.             </option>
50.            
51.         </select>

If anyone has any ideas why it might not be working that'd be great :D


http://www.mattpealing.co.uk

I'm using the following code that adds to <a> tags to each <td> inside a table.

1. $(document).ready(function() {
2.     $('.calendar td:not(.notinmonth.)').each(function() {
3.         $(this).append('<a href="#" class="available am">AM: Available</a>').append('<a href="#" class="available pm">PM: Available</a>');
4.     });
5.     $('.calendar td:not(.notinmonth.)').each(function() {
6.         $(this).has('.event').remove('.am');
7.     });
8. });

The second half of the code looks to see if any of the cells contain an element with class 'event'. If one exists, then the '.am' anchor should be removed.

However this does not appear to be happening. After carrying out a few tests with the 'alert' function, it looks as though the script thinks that every cell contains a '.event' element, but I have no idea why! Not only that, it doesn't remove the '.am' link from any of them.

Here is the markup for the table (the cell with 'Day 9' in it is the only one that should match having an '.event' element:

1. <table class="calendar">
2.     <thead>
3.         <tr><th>Mon</th><th>Tue</th><th>Wed</th><th>Thu</th><th>Fri</th><th class="weekend">Sat</th><th class="weekend">Sun</th></tr>
4.     </thead>
5.     <tbody>
6.         <tr><td class="notinmonth"></td><td class="notinmonth"></td><td class="notinmonth"></td><td class="notinmonth"></td><td class="past"><span class="day">1</span><a class="available am" href="#">AM: Available</a><a class="available pm" href="#">PM: Available</a></td><td class="past weekend"><span class="day">2</span><a class="available am" href="#">AM: Available</a><a class="available pm" href="#">PM: Available</a></td><td class="past weekend"><span class="day">3</span><a class="available am" href="#">AM: Available</a><a class="available pm" href="#">PM: Available</a></td></tr><tr><td class="today"><span class="day">4</span><a class="available am" href="#">AM: Available</a><a class="available pm" href="#">PM: Available</a></td><td><span class="day">5</span><a class="available am" href="#">AM: Available</a><a class="available pm" href="#">PM: Available</a></td><td><span class="day">6</span><a class="available am" href="#">AM: Available</a><a class="available pm" href="#">PM: Available</a></td><td><span class="day">7</span><a class="available am" href="#">AM: Available</a><a class="available pm" href="#">PM: Available</a></td><td><span class="day">8</span><a class="available am" href="#">AM: Available</a><a class="available pm" href="#">PM: Available</a></td><td class="weekend">
7.     <span class="day">9</span>
8. <div class="vevent event">
9.     <span class="time dtstart"><span title="2011-04-09T09:00:00+01:00" class="value-title"> 9:00AM</span> - </span>
10.     <span class="summary booking-availability">Matt P</span>
11. </div>
12. <div class="vevent event">
13.     <span class="time dtstart"><span title="2011-04-09T13:00:00+01:00" class="value-title"> 1:00PM</span> - </span>
14.     <span class="summary ">PM Event</span>
15. </div><a class="available am" href="#">AM: Available</a><a class="available pm" href="#">PM: Available</a></td><td class="weekend"><span class="day">10</span><a class="available am" href="#">AM: Available</a><a class="available pm" href="#">PM: Available</a></td></tr><tr><td><span class="day">11</span><a class="available am" href="#">AM: Available</a><a class="available pm" href="#">PM: Available</a></td><td><span class="day">12</span><a class="available am" href="#">AM: Available</a><a class="available pm" href="#">PM: Available</a></td><td><span class="day">13</span><a class="available am" href="#">AM: Available</a><a class="available pm" href="#">PM: Available</a></td><td><span class="day">14</span><a class="available am" href="#">AM: Available</a><a class="available pm" href="#">PM: Available</a></td><td><span class="day">15</span><a class="available am" href="#">AM: Available</a><a class="available pm" href="#">PM: Available</a></td><td class="weekend"><span class="day">16</span><a class="available am" href="#">AM: Available</a><a class="available pm" href="#">PM: Available</a></td><td class="weekend"><span class="day">17</span><a class="available am" href="#">AM: Available</a><a class="available pm" href="#">PM: Available</a></td></tr><tr><td><span class="day">18</span><a class="available am" href="#">AM: Available</a><a class="available pm" href="#">PM: Available</a></td><td><span class="day">19</span><a class="available am" href="#">AM: Available</a><a class="available pm" href="#">PM: Available</a></td><td><span class="day">20</span><a class="available am" href="#">AM: Available</a><a class="available pm" href="#">PM: Available</a></td><td><span class="day">21</span><a class="available am" href="#">AM: Available</a><a class="available pm" href="#">PM: Available</a></td><td><span class="day">22</span><a class="available am" href="#">AM: Available</a><a class="available pm" href="#">PM: Available</a></td><td class="weekend"><span class="day">23</span><a class="available am" href="#">AM: Available</a><a class="available pm" href="#">PM: Available</a></td><td class="weekend"><span class="day">24</span><a class="available am" href="#">AM: Available</a><a class="available pm" href="#">PM: Available</a></td></tr><tr><td><span class="day">25</span><a class="available am" href="#">AM: Available</a><a class="available pm" href="#">PM: Available</a></td><td><span class="day">26</span><a class="available am" href="#">AM: Available</a><a class="available pm" href="#">PM: Available</a></td><td><span class="day">27</span><a class="available am" href="#">AM: Available</a><a class="available pm" href="#">PM: Available</a></td><td><span class="day">28</span><a class="available am" href="#">AM: Available</a><a class="available pm" href="#">PM: Available</a></td><td><span class="day">29</span><a class="available am" href="#">AM: Available</a><a class="available pm" href="#">PM: Available</a></td><td class="weekend"><span class="day">30</span><a class="available am" href="#">AM: Available</a><a class="available pm" href="#">PM: Available</a></td><td class="weekend notinmonth"></td>
16.     </tr>
17.     </tbody>
18. </table>

If anyone could shed some light as to why it might not be working that would be great :D


http://www.mattpealing.co.uk

I've setup a jQuery file to set the last element with class 'divide' to be given an additional class 'divide-last', like so:

1. // apply first + last classes
2. $(document).ready(function() {
3.     $('#nav li:first').addClass('first');
4.     $('#nav li:last').addClass('last');
5.     $('#header .contact ul li:last').addClass('last');
6.     $('#content .divide:last').addClass('divide-last');
7. });

This works on every page except for one! See the following:
http://www.mattpealing.co.uk/concept/hbp/contact-us-landlords.php

The markup is pretty much identical to any other page, but for some reason the JavaScript is just ignoring it. I've tried

1. alert($('.divide').html())

Just to make sure that there are no HTML errors, but that bit works fine.

If anyone has ideas that would be great, as I am completely clueless

http://www.mattpealing.co.uk

I've coded a very basic script to display any form that contains a specific child element, like so:

1. // keep the contact form open if any error messages are present
2. $(document).ready(function() {
3.     $('#content .gform_wrapper').each(function() {
4.         if($(this).find('.validation_error')) {
5.             $(this).show();
6.         }
7.     });
8. //    location.href = location.href+'#gform_7';
9. });

But it just displays every form even if it doesn't contain '.validation_error' ! Does anybody know why? Is the find() method not valid to use in this way?

http://www.mattpealing.co.uk

I've tried two fixes to get around this issue. I need to add a 'hover' pseudo selector to a couple of <li> elements.

Currently I'm using this plugin:
https://github.com/gilmoreorless/jquery-ie6hover

But IE6 seems to completely ignore it! I've also tried this script as well as one other:
http://www.webdeveloper.com/forum/showthread.php?t=162225

But again, no luck.

Is there something wrong in my code that is preventing anything from working? You can view the page here:
http://www.mattpealing.co.uk/concept/jsm/

The divs with the class 'mega-menu' are supposed to open up, just like they do with every other browser.

If anybody has any ideas what is wrong with it that would be great :D

http://www.mattpealing.co.uk

I'm looking for a plugin that will allow me to add a scrollbar similar to the 'Latest Web Design Projects' on this website:
http://www.red-fern.co.uk/

I've used jQuery scrollbar scripts before, but never one that scrolls automatically every few seconds, does anybody know of one that functions like that?

Thanks

http://www.mattpealing.co.uk

I have several <a> tags with the class 'a-menu-description', and an equal number of divs with the class 'menu-description'.

I am trying to get it so that only one div opens for the appropriate <a> tag, but when I click any of the <a> tags, all of the divs open up.

Here is my code:

1. $(document).ready(function() {
2.     $('.a-menu-description').click(function() {
3.         $(this).parent().parent().next().find($('.menu-description').slideDown('slow'));
4.         return false;
5.     });
6. });

Does anybody know what I can add in so that only the div associated with the <a> tag opens as opposed to all of them?

Thanks.


http://www.mattpealing.co.uk