Ok I found this great web example on forms validation and just had to post it for later reference. That’s what blogs are for, right?
http://www.webcredible.co.uk/user-friendly-resources/dom-scripting/validate-forms-javascript.shtml
I’ve just learend something very cool today. How to use JQuery with other libraries, in my case prototype.js.
The issue is where other libraries are using $ as the same shortcut, for example JQuery uses “$” as a shortcut for “JQuery”.
<html>
<head>
<script src="prototype.js"></script>
<script src="jquery.js"></script>
<script>
jQuery.noConflict();
// Put all your code in your document ready area
jQuery(document).ready(function($){
// Do jQuery stuff using $
$("div").hide();
});
// Use Prototype with $(...), etc.
$('someid').hide();
</script>
</head>
<body></body>
</html>
For a full demo and explanation see: http://docs.jquery.com/Using_jQuery_with_Other_Libraries
Ever wanted to rotate through a bunch of images easily without having to use *cough* Flash? Well now you can by using the few lines of code below and a bit of JS (Javascript) trickery.
First we need to include the javascript files in to our webpage by putting the following 2 lines in to the <head>
<script src=”js/dw_rotator.js” type=”text/javascript”></script>
<script src=”js/dw_event.js” type=”text/javascript”></script>
<script type=”text/javascript”>
// Add rollover events
var rotator1 = {
path: ‘badges/’,
id: ‘rotateImg’,
speed: 3000,
images: ["audi.jpg", "bmw.jpg", "ford.jpg", "logo.gif", "honda.gif", "landrover.jpg", "mazda.jpg", "mercedes.jpg", "logo.gif", "mini.jpg", "peugeot.jpg", "renault.jpg", "saab.jpg", "logo.gif", "skoda.jpg", "vauxhall.jpg", "vw.jpg"],
bTrans: true // ie win filter
}
function initRotator() {
dw_Rotator.setup(rotator1);
}
addLoadEvent(initRotator);
</script>
</head>
dw_event.js – The events to trigger the automatic scroller.
dw_rotator.js – The code which does the js image trickery.
var rotator1 – The image path, id (of the <img> coming next), rotate speed, and lastly the image array.
You can add as many images into the array as you want, just be aware of loading times on slower browsers.
Next we add the image into our web site. I prefer to wrap the image into a <div> to make it easier to move around and manage. As you can see the ID is “rotateImg” as specified in var rotator1. This means you could have for example var rotator2… name the id rotateImg2 and set the id of your next image to rotateImg2, thus giving you another rotating image block without too much hassle.
<div id=”div-1″><img id=”rotateImg” src=”img/logo.gif” alt=”Logo”></div>
Download dw_rotator.js (Thanks to Sharon Paine & Dynamic Drive)
Download dw_event.js
View demo
Over the years the number of spammers has increased tremendously. By using the Javascript below you are able to use the equivelant of “<a href=”mailto:”>email</a>” without the worry of being spammed by the millions of spam bots cruising the inter-tweb.
<script type=”text/javascript”>
<!-
emailE=(’cont’ + ‘act’ + ‘@’ + ‘faith’ + ‘inme’ + ‘.co’ + ‘.uk’)
document.write(’<a href=”mailto:’ + emailE + ‘”>’ + emailE + ‘</a>’)
//->
</script>
Do you know of ways to fight the spam bots? Share it in the comments.
Put this code in the <head> to preload images.
<script language=”text/javascript”>
<!– Begin
loadImage1 = new Image();
loadImage1.src = “north1.gif”;
staticImage1 = new Image();
staticImage1.src = “north.gif”;
loadImage2 = new Image();
loadImage2.src = “east1.gif”;
staticImage2 = new Image();
staticImage2.src = “east.gif”;
loadImage3 = new Image();
loadImage3.src = “south1.gif”;
staticImage3 = new Image();
staticImage3.src = “south.gif”;
loadImage4 = new Image();
loadImage4.src = “west1.gif”;
staticImage4 = new Image();
staticImage4.src = “west.gif”;
// End –>
</script>
Then use this code in the <body> to display the mouseovers.
<span onmouseover=”image1.src=loadImage1.src;” onmouseout=”image1.src=staticImage1.src;”>
<img name=”image1″ src=”north.gif” border=0></span>
<span onmouseover=”image2.src=loadImage2.src;” onmouseout=”image2.src=staticImage2.src;”>
<img name=”image2″ src=”east.gif” border=0></span>
<span onmouseover=”image3.src=loadImage3.src;” onmouseout=”image3.src=staticImage3.src;”>
<img name=”image3″ src=”south.gif” border=0></span>
<span onmouseover=”image4.src=loadImage4.src;” onmouseout=”image4.src=staticImage4.src;”>
<img name=”image4″ src=”west.gif” border=0></span>
0