jQuery
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...
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...
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...
: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...
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’ 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...
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:
$(...
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
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
}
/*]]>*/
</...
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...