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 Enable Enter Key in jQuery Autocomplete

Posted on
Assuming that your autocomplete element is identified as #search in HTML. Here is the code snippet of enabling Enter key in your customized jQuery file:…$(“#search”).autocomplete().keydown(function(e){    if (e.keyCode === 13){        $(“#search”).trigger(‘submit’);    }});…The above code is independent from original $(“#search”).autocomplete() code block.
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() […]
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 […]
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”, […]
jQuery

How to Add jQuery UI Tooltip Line Breaks

Posted on
jquery tooltip line break I guess you have tried all the possible combinations to add line breaks in jQuery tooltips but failed. Here is my approach to resolve the problem in version 1.10.3 of jQuery UI. In HTML part, to add “\n” to represent the line breaks like this: <a href=’#’ title=’The first line.\nThe second […]
jQuery

jQuery API External Loading Orders

Posted on
We usually arrange external JavaScript sources in an arbitrary order like this:<html> <head> <script type=”text/javascript” src=”../javascripts/08.js”></script> <script type=”text/javascript” src=”../javascripts/03.js”></script> <script type=”text/javascript” src=”../javascripts/01.js”></script> <script type=”text/javascript” src=”../javascripts/05.js”></script> … </head> <body> … </body></html>In general, the web pages are working fine, but this is not the case when involving jQuery API. If you loaded jQuery CDN after local jQuery […]