Skip to main content

jQuery

Great Hotspot Image Swap
Great Hotspot Image Swap
Using ‘hotspots’ to swap images is pretty straight forward, and can be really effective…. try this method from Stackoverflow <img src="/nav.jpg" /> //set off state var nav_off = "/images/nav-off.jpg"; // functions for over and off function over(image) { $("#main-nav").attr("src", image...
jQuery .hover();
jQuery .hover();
Like .click(), the params are normally other functions. .hover() is pretty much the same as mouseover() however… .hover() can have it’s ‘re-set’ function in the same block of code, whereas .mouseover() needs .mouseout() to reset it…. So in a nutshell, .hover() is much cleaner…. See examples at...
jQuery .click();
jQuery .click();
Event handler that gets attached to a jQuery object thats targeting an element… i.e. $(h4).click();The above triggers when you click on a h4 tag, but to get it to actually do something, you need to add a function… i.e. .click(function({ //do something }));Or a full example… $(h4).click(function...
More powerful jQuery selectors
More powerful jQuery selectors
:first The first match of the page. li a:first returns the first link also under a list item :last The last match of the page. li a:last returns the last link also under a list item :first-child The first child element. li:first-child returns the first item of each list :last-child The last child...
Powerful jQuery Tag Selectors
Powerful jQuery Tag Selectors
Here are a few examples of tag selectors that go between the ‘magic’ jQuery $();….. * Matches any element E Matches all elements with tag name E i.e. $(‘img’); E F Matches all elements with tag name F That are descendents of E i.e. $(‘li a’); E>F Matches all elements with tag name F That are...
To 'Get' an element in jQuery
To 'Get' an element in jQuery
To ‘get’ and element ID or CLASS you can use the same functions as CSS i.e. $('#id-name');or $('.class-name');You can use single or double quotes too, i.e. $('#single-quotes');or $("#double-quotes");You can also drill down by leaving a gap between CSS names. i.e. If you had an ‘a’ tag in a div with...
Adding jQuery to your page
Adding jQuery to your page
To call jQuery you can either download it or use the Google content network… If you download it, you’ll need to call it in the head like: <script type="text/javascript" src="/script/jquery-1.3.2.min.js"></script>and you’ll need to trigger the ‘document ready’ funtion like this: $(...
jQuery Photo Reflections
jQuery Photo Reflections
Like an image to have a reflection beneath it? Don’t want to process all your images, or maybe images are dynamically added to your site and you want the effect done automatically? Visit this site… http://www.digitalia.be/software/reflectionjs-for-jquery
Javascript not validating?
Javascript not validating?
Common problem when trying to get code to validate via W3C, just wrap it in CDATA tags… <script type="text/javascript">     /*<![CDATA[*/                      // place javascript here i.e.           function myFunction () {                  // do something           }     /*]]>*/ </...
window.onresize
window.onresize
Sometimes you need to change something depending on the browser size. Often this means that you’ll need to check for the browser being resized too… To do this you use: window.onresize = nameOfAFunction;For an example, make sure you have a <div> with an id of ‘footer’, with a <p> tag...
 
 
Jon Moore

Search form

Jon Moore

Tips 'n' Snips

 
  • Home
  • General
  • Drupal
    • Drupal 6
    • Drupal 7
    • Module Building
  • HTML & CSS
  • Javascript
  • jQuery
  • PHP
    • CodeIgniter
    • Handy Functions
    • MySQL
  • WordPress
  • About

BBC Technology News

  • Kashmir users kicked off WhatsApp
  • Heavy fine for Chinese firm over unlicensed game
  • Uber had 6,000 US sexual assault reports in two years
  • Electric eel lights up Christmas tree and other news
  • Rory Cellan-Jones: Reporting the news with Parkinson's
More

Sitepoint

  • The Real Future of Remote Work is Asynchronous
  • 7 Ways Developers Can Contribute to Climate Action
  • How to Divert Traffic Using IP2Location in a Next.js Website
  • 10 Zsh Tips & Tricks: Configuration, Customization & Usage
  • Building a Habit Tracker with Prisma, Chakra UI, and React
More

Heart Internet

  • Sponsor Neil Hunter’s amazing Antarctic expedition – for Diabetes UK
  • 15 web design books of 2019 that you should read
  • 12 podcasts for every creative person’s commute
  • Ten TED Talks every designer and web creative should watch before 2019 is over
  • The rise of the robots: Will AI take over graphic design?
More
 

Backend Coders

  • PHP
  • Handy PHP Functions
  • PHP MySQL

Frontend Coders

  • HTML & CSS
  • jQuery
  • Javascript

CMS/CMF Systems

  • Drupal
  • Drupal 6 Specific
  • Drupal 7 Specific
  • Drupal Module Building
  • WordPress

About

  • Home
  • About
 

© Jon Moore 2019

All stock images are from www.istockphoto.com