A do-it yourself blog
javascript
jTag : A jQuery plugin to tag pictures & more !
49388 days
Howdy,
A little while ago I published an article on how to create a facebook like tagging system.
Even thought It worked fine it was a bit messy and kinda hard to impletement.
I then started to work on a jQuery plugin that make that feature a lot easier to integrate on your solutions.
What does it look like ?
Click on the picture to start tagging
I made more demos to explain all the options of the script.
Where do I get it ?
You can get the source code on github or git clone git://github.com/djpate/jTag.git
Related Posts:
Animated scrollto effect jQuery plugin
41401 days
Howdy,
Since my post about this effect has a lot of succes I decided to make a little plugin to simplify it even more.
First of all go check out the Demo.
Related Posts:
Using JQuery Validation plugin with tooltips
2447 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
1559 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
82853 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 !
34888 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)
0988 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
291079 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