My Monkey Do

A Log of Coding Solutions

jquery

WordPress 3.6 update caveats

by

The main problem in updating WordPress is the version of jQuery that is used is also updated.  jQuery is updated from version 1.8.3 to version 1.10.2.   Below is a record of what I’v gone through.  It’ll grow as I update more sites.

 

  • GravityForms (ajax) in PrettyPhoto – Using PrettyPhoto’s inline lightbox it creates a duplicate of the content you want in the lightbox.  Because of this, GravityForm’s replaceWith() call when using ajax replaces the original form, not the duplicated form in the lightbox.  The effect is you’ll need to press the submit button twice to see the form’s confirmation message.  To resolve this you need to bind to the ‘gform_confirmation_loaded’ event and have the replaceWith work on the form in the lightbox.  See form_display.php in GravityForms plugin for help.
  • Comprehensive Google Map Plugin v7.0.31 – This plugin requires that you have jQuery version 1.3 and above.  Seems right except mathematically, 1.3 is greater than 1.10.  So the plugin will popup a message saying you are using a version of jQuery older than 1.3.  To fix this if it’s not yet updated, find assets/js/cgmp.framework.min.js and find where it checks the version.  Details here.

IE Doesn’t see padding on hover

by

Problem

Internet Explorer 8 (I no longer even look at IE 7) seems to not be able to see the padding on an anchor tag within a ul > li > a structure.   Using jQuery I have a hover event on the li, however it only works on the bottom 1px of the li.

 

Solution

I tried adding position:relative and zoom:1, as some have suggested but that doesn’t work.  I then just tried to put a background in the anchor tag to see if IE even recognizes that the anchor tag has padding.  It did recognize the padding and once the background was in the hover also worked.  Turns out IE needs a background set?  I found another person who had this problem and the solution was to set the background to a transparent image of 1×1 px.

 

http://stackoverflow.com/questions/12197999/ie-not-including-margin-and-padding-in-hover-without-background-set

jQuery – When to use return false or preventDefault

by

Ran into a great article that explains the differences between return false, preventDefault and stopPropagation.  Here’s a summary:

  • return false does both preventDefault and stopProgagation
  • preventDefault just stops the browser default event.
  • stopPropagation stops bubbling.

In most cases you would only want to do preventDefault.  If you stopPropagation you prevent your code from being extensible.

 

source:  http://fuelyourcoding.com/jquery-events-stop-misusing-return-false/

Fade in, fade out not smooth in jQuery

by

Problem:

I had a large banner with multiple layers and animation going on.  I was trying to fade out a 1000px+ by 400px or so image along with other moving objects.  In addition to that the image had some transparency in it, so some solutions of putting a background in it would not apply to this.  The problem was that the image would just disappear instead of fading.

Solution:

Use the animate jQuery function.  Once I changed to using the animate function the fade out worked perfectly.  I think the animate is faster because it does not change the visibility of an element.  In other words it does not hide or show the element.

jQuery Legacy Versions

by

jQuery is a great javascript library that I have beeen using for a while now.  The problem with using it for a long time is that websites get out of date and when you want to add a cool new feature to the website sometimes it is not compatible with an old version of jQuery.

In jQuery 1.4 there were some API changes that breaks jQuery UI 1.7.2 and earlier.  jQuery 1.7.3 is the lowest version that supports jQuery 1.4 and up.

Just my luck, the website I was trying to update used jQuery v1.3.2 and UI v1.7.2.  The site used jQuery UI intensively throughout the site so upgrading to the latest jQuery was not feasible for what I had to do.  Instead, since I was creating a new page, I decided to use the newest version of jQuery for this page only.  If I ever need to use both jQuery versions on one page, I can always use noConflict like how this guy says.

As a side note, jQuery UI Tabs was redesigned in v1.9 but will still support v1.8 API until v2.0.

 

To get a full list of legacy jQuery downloads, go to google code:  http://code.google.com/p/jqueryjs/downloads/list (newer versions are on github)

 

To get a full list of jQuery UI downloads, go to google code:  http://code.google.com/p/jquery-ui/downloads/list

To get a history of jQuery UI releases, go to their blog:  http://blog.jqueryui.com/

 

Scroll to Top with jQuery

by

A very simple and easy solution:

 

var container = $('div'),
    scrollTo = $('#row_8');

container.scrollTop(
    scrollTo.offset().top - container.offset().top + container.scrollTop()
);

// Or you can animate the scrolling:
container.animate({
    scrollTop: scrollTo.offset().top - container.offset().top + container.scrollTop()
});

 

source: http://stackoverflow.com/questions/2905867/how-to-scroll-to-specific-item-using-jquery
keywords: jquery scrollTop element