Tag Archives: jQuery

Using “jQuery” instead of “$” in WordPress

In jQuery, the dollar sign character ($) is a shortcut used to represent “jQuery”. You can start your expressions like this: $(‘.content’).css(‘color’,’red’); But, other JS libraries and frameworks also use this character, so with WordPress you must use “JQuery” instead … Continue reading

Posted in jQuery, WordPress | Tagged , | Comments Off on Using “jQuery” instead of “$” in WordPress

Is object in viewport?

I can’t remember if I posted this before, so I am posting again. This fun little script checks to see if a particular object is in the viewport. http://codepen.io/TroyThib/pen/PPOzyv

Posted in JavsScript, jQuery | Tagged , , | Comments Off on Is object in viewport?

Create a JavaScript array and loop through it

Create a JavaScript array and loop through it: var theBeatles = [ “John Lennon”, “Paul McCartney”, “George Harrison”, “Ringo Starr” ]; for (i = 0; i < theBeatles.length; i++) { $(‘#myDiv’).append(theBeatles[i]+’ ‘); }

Posted in JavsScript, jQuery | Tagged , , , , | Comments Off on Create a JavaScript array and loop through it

Scroll to ID – JavaScript and jQuery

When you have internal page links (anchor links) and you want a nice scroll effect instead the harshness of just the immediate jump-to that internal links give you, use some fun jQuery to get er done. // scroll to ID … Continue reading

Posted in JavsScript, jQuery | Tagged , , , | Comments Off on Scroll to ID – JavaScript and jQuery

Use preventDefault() to stop a link from trying to open URL

This comes into play when using anchor links to trigger JS functions. For example, you might have a link that jumps you to a section of the same page, but the click even also triggers some other functions, like animating … Continue reading

Posted in JavsScript, jQuery | Tagged , , , | Comments Off on Use preventDefault() to stop a link from trying to open URL

Swap columns – change order of DIVs

Here’s the scenario. You have a two column layout. Maybe you have some copy on the left and a hero image on the right. This works great for desktops, and for mobile you want to stack the columns, but it reads … Continue reading

Posted in jQuery | Tagged , , , | Comments Off on Swap columns – change order of DIVs

Jquery – click hover animate

$(“.hover”).hover(function(){ $(this).animate({ fontSize:’20px’, opacity:’0.5′ }); },function(){ $(this).animate({ fontSize:’16px’, opacity:’1′ });}); $(“.click”).click(function(){ $(‘.click’).animate({ fontSize:’20px’, opacity:’0.5′ });}););

Posted in jQuery | Tagged , , , | Comments Off on Jquery – click hover animate

Event Propagation

Event PropagationThis is when a triggered event not only fires the intened event, but also fires events for parent and child DOM nodes (event bubbling and event capturing). Event BubblingThis happens when an event bubbles up to the parent nodes. … Continue reading

Posted in JavsScript, jQuery | Tagged , , , , , , | Comments Off on Event Propagation

jQuery hover example

$(document).ready(function() {   $(“p”).hover(function(){ $(“p”).css(“background-color”,”yellow”);   },function(){   $(“p”).css(“background-color”,”pink”);>   }); });

Posted in jQuery | Tagged , | Leave a comment

Forms – jQuery datepicker

Need a date picker for your “date” form field? jQuery datepicker makes it easy. Link to the UI styles and UI JS files, and link to the jQuery framework of course <link rel=”stylesheet” href=”http://code.jquery.com/ui/1.10.1/themes/base/jquery-ui.css” /> <script src=”http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js”></script> <script src=”http://code.jquery.com/ui/1.10.1/jquery-ui.js”></script> Add … Continue reading

Posted in HTML/CSS, jQuery | Tagged , , | Leave a comment

Using GPS with jQuery Mobile

Nice simple tutorial on Geo location and maps for mobile. http://the-jquerymobile-tutorial.org/jquery-mobile-tutorial-CH23.php

Posted in HTML5, jQuery, Mobile | Tagged , , , | Leave a comment