Posts tagged js

Using JQuery Validation plugin with tooltips

2
447 days
by in javascript

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

DEMO

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 !

Share

Related Posts:

How to disable context menu on right click with jQuery

1
559 days
by in javascript, tips

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 !

Share

Related Posts:

Animated scroll to anchor/id function with jQuery

82
853 days
by in javascript

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

Share

Related Posts:

How to add image tagging the facebook way !

34
888 days
by in javascript, PHP

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.

(more…)

Share

Related Posts:

A simple div slide down JS script

29
1079 days
by in javascript

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

(more…)

Share

Related Posts:

Go to Top