There are some methods like Server Side Includes which allow us to include other HTML files into a web page on a webserver like
<!-- #include virtual="./common.html" -->
But this technique require server side setting and may be not supported by some web hosting.
Another way to include .html in a web page is using jQuery insertion.
Continue reading HTML – Include .html using jQuery
I have a HTML div which will be shown from hidden to visible by changing the opacity with jQuery animate(). It works fine in normal browser like Chrome and Firefox. But from the abnormal browser like Internet Explorer, the font/text is distorted.
Internet Explorer has problem with opacity and font antialiasing in animate(). A workaround is to remove the opacity after the animation is completed.
$("#my-div").animate({opacity: 1},500, function() {
$(this).css('opacity', '');
});
Continue reading Font/Text distortion on animate() and opacity in Internet Explorer
Recently i have been working on a frontend layout task. The two jQuery plugins, Isotope and Masonry written by David DeSandro, are wonderful for laying your content in neat order. Isotope is an advanced version of Masonry and provides more powerful features. If you are new to both, you could try Masonry first.
Let’s back to the topic today. Both Isotope and Masonry provide the remove() function to withdraw the item from the dynamic layout. If you are using Masonry, the layout does not rearrange the items after the removal. On the other hand, the more powerful Isotope will relayout after the items are deleted. Actually this is a more desirable feature but this time i just want to delete those unwanted items without triggering the relayout.
Continue reading jQuery Isotope – Remove Isotope items without triggering relayout
We could append items on the Masonry container using the appended method.
var $boxes = $('<div class="box"/><div class="box"/><div class="box"/>');
$('#container').append( $boxes ).masonry( 'appended', $boxes );
Please note that in the above example, we have to wrap the new boxes with the jQuery object. This is because the .masonry() call expects an jQuery object in the 2nd parameter.
Done =)
Reference:
You can get the current jQuery version by
jQuery().jquery; // OR jQuery.fn.jquery;
Done =)
Reference: How to check jQuery version?
var currentYear = (new Date).getFullYear();
$(document).ready(function() {
alert(currentYear);
});
Done =)
We know the difference between display: none and visibility: hidden as we talked about it previously.
jQuery – Animation on Visibility
The fadeIn() and fadeOut() jQuery functions are very convenient to use but they does not allow us to add animation during the fadeIn and fadeOut process. So we have to do it with a slightly different way.
Continue reading jQuery – Using animate() with fadeIn() or fadeOut() at the same time
Next: jQuery – Using animate() with fadeIn() or fadeOut() at the same time
We can hide and show any HTML elements by the fadeIn() and fadeOut() jQuery functions. Those elements will be set to display: none in CSS. Unlike setting visibility: hidden which the hidden element will still occupied some spaces in the rendered web page, the faded out element will disappear.
So if you want to have the fadeIn and fadeOut features while keeping the elements in the webpage, here is what you could do.
Continue reading jQuery – Animation on Visibility
When we use jQuery to retrieve the CSS values such as width and height, the unit px is included.
For example, if you have a div which is 100px wide.
<div id="eureka" style="width: 100px;"></div>
Continue reading jQuery – Get the CSS value without the px unit
I found a excellent article about creating a drop down menu using jQuery written by Abhishek Bhardwaj. For simplicity, i merge the .js file and the .html into one file.
Continue reading jQuery – Simple Dropdown Menu
Eureka! 