ITORIAN BLOG

Introduction This post shows how to handle or target controls attribute using jQuery. We already talked how to modify the appearance of controls on web page when user, hover the mouse or click the mouse. For this we used .addClass(),.removeClass(),.css(), .toggleClass() etc. I'm going to cover some cool stuffs using problem to solution approach. So, let's start and look at first problem. Problem 1 If you simply want to open all URLs on new tab, a quick jQuery code can do this using .attr() method. Note: For more read this . .attr() Method .attr() gets the value of an attribute for the first element in the set of matched elements. Problem 2 If you have a website that uses huge list of images there and forgot to place alt (alternative) text (when image not found, that will be displayed), how to fix this. I mean how you will add a brand new attribute to existing list of controls? Don't worry, here it the fix. Look at result in b

Introduction Assume I have a blog/website and I want all external URLs to open on new browser tab. For example when you click on any external URL on Facebook, it opens URL on new tag. No meaning you have mentioned "target" attribute with URL or not, I always want external URLs to open on new tab. In addition with this, I also want to add an external icon with all external URLs. How to do this? Let's read all one by one. If you simply want to open all URLs on new tab, a quick jQuery code can do this. Here you go. jQuery Code     < script src ="Scripts/jquery-1.4.1.js" type ="text/javascript"></ script >     < script type ="text/javascript">         $(document).ready( function () {             $( 'div.MyURLs a' ).attr({ target: '_blank' });         });     </ script > Using above jQuery, just adding a new attribute 'target' to '_blank' to all URL

Introduction Download In this quick post, you will learn how to apply slide in DIV tag using jQuery. We will first look at the animated image (working example) and then will see the code. Now look at the codes. jQuery Code     < script src ="Scripts/jquery-1.4.1.js" type ="text/javascript"></ script >     < script type ="text/javascript">         $(document).ready( function () {             var $VarAbout = $( '#About' );             $( '#Title' ).click( function () {                 $VarAbout.slideToggle( 'slow' );             });         });     </ script > We already talked on the concepts used above in earlier posts, read previous posts if you are not getting. ASPX Code (Body) < body >     < div style =" width : 300px ; text-align : justify ; padding : 1px ; border : 1px solid #CCCCCC ; font-family : Verdana ; font-size : 1

Introduction Download In short, jQuery .animate Method used to perform a custom animation of a set of CSS properties. .animate() Method comes in two  flavor . First takes four arguments and second takes two arguments. First Flavor .animate( properties [, duration] [, easing] [, complete] ) Properties and values : A map of CSS properties that the animation will move toward. Duration or Speed : A string or number determining how long the animation will run. Easing : A string indicating which easing function to use for the transition. Complete : A function to call once the animation is complete. Second Flavor .animate( properties, options ) Properties and values : A map of CSS properties that the animation will move toward. Options : A map of additional options to pass to the method. The .animate() method allows us to create animation effects on any numeric CSS property. The only required parameter is a map of CSS properties.

Preface Download This post shows how to create a Fancy and Animated Hide and Show of Paragraph Tag in ASP.NET using jQuery. Please assume this post as addition to my last post titled "Animated Hide and Show of Paragraph Tag using jQuery". If you review my last post, you will notice that I have used two different <a> tags that is <a href="#" class="show"> and <a href="#" class="hide">, and by using jQuery .hide() and .show() methods I switched both one by one. But it is not the right way, if jQuery has compound effects. If we use Compound Effects, only a single <a> tag will do all this, even rest coding will become short and quick. Setup Demonstration Page Let's setup the demonstration page, find the code below: Steup jQuery Methods Let's setup the jQuery methods, find the code below: This toggling can be achieved by first checking the visibility of the matched el

Preface Download In the last post, I already described how to use .hide and .show jQuery methods. In this post I am just going to add jQuery animations to existing code. So, please go through my last post to understand this post better. Here is the one (source: from my last post) screen having NO ANIMATION: Introduction Animated actions speak louder than simple text. jQuery let us add impact to our actions through a set of simple visual effects, even craft out own more sophisticated animations. To setup the demonstration page, please read this post "Simple Hide and Show of Paragraph tag using jQuery". I wish you setup your demonstration page, if so, here you go. Speeding Animations As in last post, when you click on <a href="#" class="show">Show More</a>, calls the following method $('a.show').click(function () {    $('p').eq(1).show();    $('a.show').hide();    $(&#

First of all I will talk on hide and show methods and then will setup the demonstration page. Introduction Download .hide() and .show() methods, without any parameters can be as smart shorthand methods for .css('display', 'string'), where 'string' is the appropriate display value. The effect, as might be expected, is that the matched set of elements will be immediately hidden or shown without animation. .hide() method sets the inline style attribute of the matched set of elements to display: none. Even smart part here is that it remembers the value of the display property typically blocks or inline before it was changed to none. And .show() method restores display properties of the matched set of elements to whatever they initially were before display: none was applied. Setup the Demonstration Page Let's setup the demonstration page, find the code below. Using jQuery I will hide the second <p>. In above image you

Introduction Download We web developers sometimes need to apply styles that have not been defined in a stylesheet or inline. For this jQuery offers .css() method for such occations. .css method acts as getter and setter. To get the style property, we simply pass the name of the property as a string like .css('fontSize') and to set the style property, .css() method provides two different ways: Way 1: Single Property .css('fontSize','14px') Way 2: Multiple Properties .css({   'property1': 'value1',   'property-2': 'value2' }) Let's have a HTML Content that will consume this service. < body >     < h1 > Font Size Controller </ h1 >     < div id ="fontController">       < button id ="fontController-large"> Bigger </ button >       < button id ="fontController-small"> Smaller </ button >     </