Category 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?

JQuery Ajax method: POST not working Windows servers

I was trying to debug a fellow programmers code that was not working. It looked like it was not loading include files that were trying to load using jQuery’s Ajax function. I was only seeing the problem on Windows servers … Continue reading

Posted in AJAX, jQuery, JSON | Comments Off on JQuery Ajax method: POST not working Windows servers

Change URL hash with JavaScript using location.hash

This fun little function will change the hash (#) in the URL. In this example, I have an input element and it’s contents will populate the hash. On the “keyup” event the “location.hash” function creates or changes the hash to … Continue reading

Posted in JavsScript, jQuery | Tagged , , , , | Comments Off on Change URL hash with JavaScript using location.hash

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

How to Create a Basic jQuery Plugin

This is one of the best “to the point” jQuery plugin tutorials I have seen. http://learn.jquery.com/plugins/basic-plugin-creation/

Posted in JavsScript, jQuery | Comments Off on How to Create a Basic jQuery Plugin

6 Practical Examples For Building Parallax Websites

http://tutorialzine.com/2015/09/6-practical-examples-for-building-parallax-websites/

Posted in JavsScript, jQuery, Parallax | Comments Off on 6 Practical Examples For Building Parallax Websites

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

55 Jquery Tutorials, Resources, Tips And Tricks: Ultimate Collection

Good stuff: http://www.1stwebdesigner.com/53-jquery-tutorials-resources-tips-and-tricks-ultimate-collection/

Posted in jQuery | Comments Off on 55 Jquery Tutorials, Resources, Tips And Tricks: Ultimate Collection

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

10 JQUERY SNIPPETS EVERY DESIGNER SHOULD KNOW

Pretty simple usable scripts. I’ve used a a few of these many times over and over (animate scroll, make two divs the same height, zebra stripe rows, etc.) http://www.webdesignerdepot.com/2014/01/10-jquery-snippets-every-designer-should-know/

Posted in jQuery | Tagged , | Comments Off on 10 JQUERY SNIPPETS EVERY DESIGNER SHOULD KNOW

show hide side menu – hamburger

Simple slide in/out menu. This script expands the menu width. You could easily have it truly slide in and out. This is really expand and collapse menu. <!DOCTYPE HTML> <html> <head> <meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″> <title>Untitled Document</title> <style> body, html, … Continue reading

Posted in HTML/CSS, JavsScript, jQuery | Comments Off on show hide side menu – hamburger

Vertically Align contents of DIV

I first put the contents in a DIV inside the parent DIV.  I used jQuery to get the height of both the main wrapper and the nested content DIV. Then, subtract to height of the content DIV from the height of … Continue reading

Posted in HTML/CSS, HTML5, JavsScript, jQuery | Comments Off on Vertically Align contents of DIV

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

Yes, I did reinvent the wheel. I spend about 3 hours creating a Captcha type form validation script.

I had a custom form in a WordPress page that submitted to PHP form handler. I needed some type of Captcha style validation function. All the plugins I found used form plugins, and all the PHP scripts I found required … Continue reading

Posted in JavsScript, jQuery, PHP/MySQL, Web Dev | Comments Off on Yes, I did reinvent the wheel. I spend about 3 hours creating a Captcha type form validation script.

JavaScript include

Med size static site (50+ pages) needs nav update. Really? jQuery take me way. 50+ static pages. They were originally done using Dreamweaver templates, so technically they weren’t static, but the who knows where the template files are now. I’m … Continue reading

Posted in JavsScript, jQuery | Comments Off on JavaScript include

Cannot target inline elements an apply jQuery Hover in IE 7-8?

  The code below only seems to work for the block-level elements only, with the acceptation of input. $(“a, span, strong, div, p, input”).hover(function(){ $(this).stop().fadeTo(100,0.4); },function(){ $(this).stop().fadeTo(100,1); }); I get the same results using css(opacity), animate(opacity) BTW. Animate works, but … Continue reading

Posted in JavsScript, jQuery | Leave a comment

Another good JSON/jQuery tut – A Beginner’s Guide To jQuery-Based JSON API Clients

A Beginner’s Guide To jQuery-Based JSON API Clientshttp://coding.smashingmagazine.com/2012/02/09/beginners-guide-jquery-based-json-api-clients/

Posted in JavsScript, jQuery, JSON | Leave a comment

Simple jQuery Parallax effect

This simple example will scroll the images inside the “box” DIV at a slower rate than the container. $(document).ready(function() { $(“#box”).scroll(function() { s = $(“#box”).scrollTop(); $(“#box img”).css(“-webkit-transform”,”translateY(” + (s/3) + “px)”); $(“#box img”).css(“-moz-transform”,”translateY(” + (s/3) + “px)”); $(“#box img”).css(“-ms-transform”,”translateY(” + … Continue reading

Posted in CSS3, JavsScript, jQuery | Tagged , , , | Leave a comment

5 Ways to Make Ajax Calls with jQuery

There are at least five ways to make AJAX calls with the jQuery library. For beginners, however, the differences between each can be a bit confusing. In this tutorial, we’ll line them up and make a comparison. Additionally. we’ll review … Continue reading

Posted in AJAX, jQuery | Leave a comment

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

Center horizonal scroll using JS and jQuery

I had a project that had a large amount of horizontal content that would be wider than most screens (1500 pixels wide) and the need was for the scroll bar to be in center so you would see the center … Continue reading

Posted in JavsScript, jQuery | Leave a comment