A do-it yourself blog
Posts tagged javascript
Using JQuery Validation plugin with tooltips
2550 days
Today I’ll share with you a little tweak that took me a while to figure out.
I wanted to tweak the excelent jQuery Validation plugin to display errors in tooltips.
Here is my solution using Qtip
So first off you got to setup Qtip and the validation plugin on your website.
then you have to use the *undocumented* errorPlacement option on the validation plugin
jQuery.validator.setDefaults({
errorPlacement: function(error, placement) {
$(placement).qtip({
content: error.text(),
show: { when: { event: 'none'}, ready: true },
hide: { when: { event: 'keydown' } },
position: {
corner: {
target: 'topRight',
tooltip: 'bottomLeft'
}
},
style: {
border: {
width: 1,
radius: 10
},
tip: true,
name: 'red'
}
});
}
});
Of course you can modify this to use another tooltip system…
Have fun !
Related Posts:
How to disable context menu on right click with jQuery
1662 days
Today I had to make a simple script that changed the class of an element when you “right clicked” on it but I struggled for hours trying to disable the right click contect menu from showing.
Finally I found a simple solution so I decided to share 
I tested it on FF 3.6 & IE7
the magical line is
$(el)[0].oncontextmenu = function() {
return false;
}
For a concrete example here is my code
$(".besoin").bind('mousedown',function(event){
switch (event.which) {
case 3:
if($(this).hasClass("mild")){
$(this).removeClass("mild");
$(this).addClass("hot");
} else if($(this).hasClass("hot")){
$(this).removeClass("hot");
$(this).addClass("superhot");
} else if($(this).hasClass("superhot")){
$(this).removeClass("superhot");
} else {
$(this).addClass("mild");
}
break;
}
$(this)[0].oncontextmenu = function() {
return false;
}
});
Have fun !
Related Posts:
Animated scroll to anchor/id function with jQuery
87955 days
Update : Post update here
Today I had to make a function for a client of mine so I decided to share it with you.
It’s a oneliner but can add a really nice effect to your website.
This function requires jQuery
function goToByScroll(id){
$('html,body').animate({scrollTop: $("#"+id).offset().top},'slow');
}
Of course you can change slow to normal or fast or even a int in milliseconds.
And to call it
<script>
goToByScroll("theIdIWantToGoTo");
</script>
Enjoy
Related Posts:
How to add image tagging the facebook way !
34990 days
Updated post here
Today I want to show you how to make a image tagging function on your website.
It works about the same way than facebook does (or a least the way it worked some times ago because I deleted my facebook account)
Basicly you take an image and you “tag” people or stuff in it by marking what you want to tag with a rectangle.
This example is just a proof of concept and will give you a good idea on how to make it better for your website.
This script requires jquery and jquery-ui with draggable and resizable function(it’s included in the source).
note : I didnt have time to test it on IE so let me know if it works for you…
Here is the Demo and the Source.
Related Posts:
form submit via Hidden iframe (A.K.A Fake Ajax)
01091 days
Today, I wanna share with you a way to submit forms using a ajax look & feel altought it’s not really ajax.
The question you might ask is :
why should I use this method instead of real ajax ?
Well they’re is numereous answer to that but one good reason it that is doesnt require any type of ajax libs and you can start using it even if you never used ajax before.
Related Posts:
A simple div slide down JS script
291182 days
Hello all,
I always wonder why people get there website loaded with 70kbs JS libs for only a couple of Effects !
So here is my script to slide down a div made only of a few lines of Javascript.
If you are looking for a tutorial on how to use jQuery sliding function click here
Last comments