A do-it yourself blog
Posts tagged jquery
How to make cross-domain ajax request using jsonp & jquery
1346 days
As you may know AJAX request cant be done across domain (even across subdomain). This is a security feature but sometimes It can pretty usefull to make call between domains.
Luckily for us AJAX allows us to make cross domain request for javascript contents. That is how JSONP works, basicly instead of passing plain json you pass json inside a javascript function.
I’m going to show you how you can do this very easily using jQuery.
first of all make the call using jquery.
$.getJSON("http://someurl/somepage.php?jsoncallback=?",function(data){
alert(data.msg);
});
As you can see we have to set jsoncallback=? in the url for this to work.
Now In your php file.
<?php
$array = array("msg"=>"hello"); //some bogus data
echo $_REQUEST['jsoncallback']."(".json_encode($array).")";
?>
The output will be something like :
jquery65456456456({“msg”:”hello”})
As you can see It now looks like a javascript function.
That’s all there is too it !
Related Posts:
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:
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:
Ajax notification messages MSN style
14918 days
by Christophe Verbinnen
in PHP
Hello everyone,
today i will discribe a simple way to do notification messages the same way that msn shows that you have a new message.
The CSS is not meant to be beautiful but just enought for you to understand and tweak it as you wish.
Note : This script uses jquery
You can see a demo here
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