jQuery

How to Make jQuery Tooltip Accept HTML Codes

Posted on
The default way to populate string in jQuery Tooltip is to treat all strings in title as plain text. If you want it accept HTML tags, here is an code snippet to do it. $(document).tooltip({ position : { my : “center bottom-20”, at : “center top”, using : function(position, feedback) { $(this).css(position); $(“<div>”).addClass(“arrow”).addClass(feedback.vertical).addClass(feedback.horizontal).appendTo(this); } }, […]
jQuery

How to Hide an HTML Element after a Few Seconds

Posted on
If you don’t want an element to bother your visitors anymore after few seconds, you can do it in the document ready block.$(document).ready(function() { … setTimeout(function(){  $(“#hide-div”).slideUp(2000); }, 3000);});In the above example, jQuery will take the element #hide-div to the background after 3 seconds with a 2 second slow motion (the default sliding time of slideUp() […]
Blogger

How to Open Links in New Windows for Bloggers

Posted on
If you would like to make every link in post opened in new windows, you don’t have to add target=”_blank” in every <a> tag, you can just add a jQuery script code snippet under <head> tag. Here are the steps:Edit the blog template.Edit the blog templateFind <head>, and add a block of jQuery codes under <head>, […]
jQuery

How to Display jQuery Autocomplete Images in Results

Posted on
To show each image with each row in search results, jQuery Autocomplete needs to know more information about the images. For example, a returned JSON array of source, either local or remote, should contain not only value , but also image like this:[{ “value” : “Dove”, “image” : “/images/dove.jpg” }, { “value” : “Robin”, “image” : “/images/robin.jpg”}]The value […]
jQuery

How to Link Pages in jQuery Autocomplete on Click or Select

Posted on
I assume that your codes will return a JSON array, either local or remote, which contains additional element url like this:[{ “value” : “Dove”, “url” : “/birds/dove.html”}, { “value” : “Robin”, “url” : “/birds/robin.html”}]You must have select event in your Autocomplete function, in which, you assign the value of ui.item.url to window.location.href (like the red paragraph […]
Javascript

How to Refresh Google Charts After Every Ajax

Posted on
I found my Google Charts are missing after reloading charts via Ajax, and I found one solution very easy to solve the problems.Just add an option (marked as red) into your code like this:Code snippet BEFORE change:google.load(“visualization”, “1”, { packages : [‘corechart’]});Code snippet AFTER change:google.load(‘visualization’, ‘1’, { packages : [‘corechart’], ‘callback’: drawChart});It works fine after […]
jQuery

How to Change CSS Style of Elements Dynamically Triggered by Events

Posted on
You might want to change the style of elements after some events, you could leverage jQuery to fulfill. For example, if you have an element like this:<button style=’color: white; background-color: blue;’>Post it</button>We’d like to change the background color of the button once been clicked, we can do it like this:<script src=”http://code.jquery.com/jquery-1.10.2.js”></script><script>$(function() { $(“#btn1”).click(function() { $(“#btn1”).attr(“style”, […]
PHP

How to Escape Single Quotes in Parameters of JavaScript Functions

Posted on
For example, if you have a button in PHP code like this:…return “<button onclick=’get_name(“$id”, “$title”)’>Post</button>”;…It will work well except the following case containing a single quote:…$title = “You don’t have to do that.”;return “<button onclick=’get_name(“$id”, “$title”)’>Post</button>”;…The above code snippet will be interpreted as: <button onclick=’get_name(“32”, “You don’t have to do that.”)’>Post</button>This does NOT trigger JavaScript function […]