jQuery Forum

I'm using the Cycle2 plugin to try and add swipe support for my slideshow on mobile devices as per http://jquery.malsup.com/cycle2/demo/swipe.php

However I can't seem to get it to work. My options are set like so:

1. $(document).ready(function(){
2.     $('.cycle > .content .content').cycle({
3.         fx: 'scrollHorz',
4.         speed: 350,
5.         timeout: 5000,
6.         next: '.next',
7.         prev: '.prev',
8.         slides: 'figure',
9.         swipe: true
10.     });
11. });

I've also tried removing the links from the images incase they were interfering but no luck. I can navigate the slides with the next / prev buttons, but not swipe gestures.

Here is a link to the page — http://bit.ly/28KW4ye

Can anyone see what I'm doing wrong?

http://www.mattpealing.co.uk

I'm trying to modify the animation speed in the Bootstrap Switch toggle buttons but to no avail, there appears to be no parameter to let me change it? — http://www.bootstrap-switch.org/options.html

Is it possible to achieve this by modifying the core code? It looks very complex though and way beyond my Js abilities to figure out!

https://github.com/nostalgiaz/bootstrap-switch/archive/master.zip

I'm trying to match the height of the content area and sidebar on the following site:

• http://www.dev-cheweng.co.uk.gridhosted.co.uk/about/

I've added the following line of code to my file js.js

1. $('.height-page').matchHeight();

Here is the class for my content area:

1. <div id="content" class="grid_8 height-page">

And my sidebar:

1. <aside id="sidebar" class="grid_4">
2.     <div class="content height-page">

The script appear to be loading fine, just they're not matching the height. All I get output for both elements is along these lines:

1. <div class="grid_8 height-page" id="content" style="">

I did originally target each element in the Js with their individual IDs / classes, but couldn't get that to work either. So then I thought maybe I can only apply the height matching to specific classes, hence me going with .height-page , but of course that doesn't work either

Can anyone see what I'm doing wrong?

http://www.mattpealing.co.uk

I have several .row elements structured like so:

1. <div class="row row-even">
2.                         <div class="container_12 content">
3.                            
4.                             <div class="grid_4 box">
5.                                 <div class="content">
6.                                    
7.                                     <h3><a href="#">Corporate Transactional Services</a></h3>
8.                                    
9.                                 </div>
10.                             </div>
11.                            
12.                             <div class="grid_4 box box-alt">
13.                                 <div class="content">
14.                                    
15.                                     <h3><a href="#">Company Law</a></h3>
16.                                    
17.                                 </div>
18.                             </div>
19.                            
20.                             <div class="grid_4 box">
21.                                 <div class="content">
22.                                    
23.                                     <h3><a href="#">Mercantile Services</a></h3>
24.                                    
25.                                 </div>
26.                             </div>
27.                        
28.                         </div>
29.                     </div>

and I'm trying to use the equal height columns plugin to set the '.box > .content' divs so that they are the same size as the parent .row element.

Seeing as there are several .row elements on the page, I'm trying to get my script to cycle through each one:

1. $('#page .row').each(function() {
2.             $(this).find('.container_12, .row .box-alt > .content').equalHeightColumns();
3.         });

But it doesn't seem to be working, the .container_12 element gets assigned a height of '0px'

Does anyone know what I'm doing wrong? Is it possible to use the plugin in this way?

I'm trying to prevent a form from submitting if any fields on there have a specific value:

1. $('#form-register form').submit(function() {
2.     if ($(this).find('*[value="Select Brand"]').length > 0);
3.         alert ('Please select an appliance and a brand');
4.         return false;
5. });

However I seem to get the alert message every time I try to submit the form, even when no fields have that value.

There is a select box that has 'Select Brand' as its default value, however I still get the message even when I change it to something else.

Can anyone see what I'm doing wrong?

I have a function that executes when a specific <select> field has its value changed:

1. $(document).on('change','#form-register .gfield_list tr td:first-child select', function() {

However, I'd also like the function to run whenever the page is reloaded, is there a way I can do this simply with the on() method?

I've looked on Google for a solution but can't seem to find anything that matches my needs.

The closest I've found is this:

1. alert (postcodeVal.replace(/\s+/, "").length);

But it gives me the incorrect amount of space characters in a string, e.g. I'm trying it with postcodes (so one whitespace character) but it's giving me an answer of '5'.

Can anyone see how I need to amend it?

I have a form that is generated via Gravity Forms for WordPress:

• http://www.mattpealing-server.co.uk/~devappli/register/

And have set the little '+ / -' icons to display tooltips to give instructions to the user with this simple bit of code:

1. $('.add_list_item, .delete_list_item').tooltip();

You can see how it looks here:





However, when I add a new row using the '+' button, notice how any subsequent rows do not have a tooltip show up when you hover over the icons:




I see no errors in the FF error console. Can anyone see the problem? I hear that this particular plugin is supposed to detect new DOM elements?

I'm trying to code a script that will animate a couple of absolutely positioned images for as long as the user is hover over one of them.

The markup consists of a <figure> with 3 images inside it. Two of which are positioned absolutely to the <figure>

I have the following code so that, when you hover over a <figure>, it displays one of the other (hidden) images. Then I want it so that after 3 seconds it displays the second image for 3 seconds, and then displays the other one again in an endless loop.

Here's what I have so far:

1. function headscapeLeft(headscapeShot) {
2.       $(headscapeShot).find('.left').show();
3.       timeoutToken = setTimeout(headscapeRight(headscapeShot), 1000);
4. }
5. function headscapeRight(headscapeShot) {
6.       $(headscapeShot).find('.right').show();
7.       timeoutToken = setTimeout(headscapeLeft(headscapeShot), 1000);
8. }
9.    
10. // headscape rollovers
11. $('#feed-headscape-shot .feed > figure').each(function() {
12.     $(this).hover(function() {
13.         var timeoutToken;
14.         headscapeLeft($(this));
15.     });
16. });

But I get an error saying 'too much recursion' and it often crashes my browser!

I can't seem to access any values from the $(this) variable when creating my own function. The show() method doesn't work and the alert statement just gives me 'undefined'.

1. function headscapeLeft() {
2.       $(this).find('.left').show();
3.       alert($(this).html());    
4. }
5.    
6. // headscape rollovers
7. $('#feed-headscape-shot .feed > figure').each(function() {
8.     $(this).hover(function() {
9.         var timeoutToken;
10.         headscapeLeft();
11.     });
12. });

However if I move the code from the headscapeLeft() function and into the anonymous function then it works perfectly.

Can anyone see what I'm doing wrong?

I'm using 'List' fields in the WordPress plugin 'Gravity Forms' so that users can 'add' more dropdowns into a form, with a maximum of 6.

I've set the following code to run a function whenever a select field from the first <td> of each table row has its value changed:

1. $('#form-register .gfield_list tr td:first select').live('change', function() {
2.     alert('1');
3. })

However, this only works on the first select field. When I add subsequent dropdowns through the frontend, they do not produce the alert statement when I change their value.

Does anyone know how I can modify my code so that all dropdowns added in future have this event bound to them?

I'm looking for a datepicker plugin that will allow users to easily pick a date, but without needing to specify a day.

So the final output would basically be like `MM/YYYY`

Does such a thing exist?

Notice the dropdown nav on the left sidebar (where the little arrow icon is):
- http://concept.mattpealing.co.uk/mkr-14072013/homepage.htm

Is there a way to get it to slide to the right instead of downwards?

Here is the js I'm using currently:

1. // animate .children on hover
2. $('#nav-products .dropdown').hoverIntent(function() {
3.     $(this).find('ul').slideDown(175);
4. }, function() {
5.     $(this).find('ul').slideUp(175);
6. });

http://www.mattpealing.co.uk

I'm using Gravity Forms on a WordPress site and have a form with markup similar to:

1. <ul>
2.     <li><input type="text" /></li>
3.     <li><input type="text" /></li>
4.     <li><input type="text" /></li>
5.     <li><input type="text" /></li>
6.     <li><input type="text" /></li>
7.     <li><input type="text" /></li>
8. </ul>

What I need to do is set two <li> elements to have the class of 'active' when they both have values entered by the user into their child <input> fields.

So if they enter a value into the first two fields, both of them have a class of active. If the user removes a value from one or two of them, then both of them have the class removed.

The same goes for fields 3 and 4, 5 and 6, 7 and 8 etc. Think of the fields in groups of two so to speak.

Does anyone know how I can do this? Hope that makes sense!

I have a <ul> like so:

1. <ul>
2.     <li>Lorem ipsum dolor sit amet</li>
3.     <li>Lorem ipsum dolor sit amet</li>
4.     <li>Lorem ipsum dolor sit amet</li>
5.     <li>Lorem ipsum dolor sit amet</li>
6.     <li>Lorem ipsum dolor sit amet</li>
7.     <li>Lorem ipsum dolor sit amet</li>
8. </ul>

But I want to wrap a div around each set of 2 <li>'s like so:

1. <ul>
2.     <div>
3.         <li>Lorem ipsum dolor sit amet</li>
4.         <li>Lorem ipsum dolor sit amet</li>
5.     </div>
6.     <div>
7.         <li>Lorem ipsum dolor sit amet</li>
8.         <li>Lorem ipsum dolor sit amet</li>
9.     </div>
10.     <div>
11.         <li>Lorem ipsum dolor sit amet</li>
12.         <li>Lorem ipsum dolor sit amet</li>
13.     </div>
14. </ul>

I imagine I can take care of it the wrap() method but can't think of what selector I'd need to use?

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