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(…
: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…
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’…
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…