Manish Pansiniya's Blog

.NET, C#, Javascript, ASP.NET and lots more…:)

Archive for the ‘JavaScript’ Category

Cursor:hand not working with mozilla/firefox

with 2 comments

 

Use , Cursor: pointer 🙂

Advertisements

Written by Manish

July 8, 2010 at 1:49 pm

Posted in JavaScript

Tagged with

Could not click on link which uses javascript – document.location to redirect

leave a comment »

When we have enhanced security configuration is ON on the machine in Internet Explorer, there are problems while using javascript to redirect the pages. Specifically I found when link uses document.location=URL then it blocks them to redirect.

To resolve the same, you just need to add that to

Internet Options > Security > Trusted Sites.

Once this is done, it will work fine. 🙂

Written by Manish

June 7, 2010 at 4:37 pm

Resolved : Multiple controls with the same ID were found. FindControl requires that controls have unique IDs.

with 5 comments

One of the reason to get the above error is logical implementation of dynamic control naming. Sometimes, we could not think of the future while writing the code. And might be that creates this error.

Following is the code where I get the error:

Label lblShoppingCartItem = new Label()
lblShoppingCartItem.ID = "lblShoppingCartItem” + CategoryID + ItemID;

Now, in above example following case will create problem

CategoryID ItemID ID of control
1 19 lblShoppingCartItem119
11 9 lblShoppingCartItem119

Whenever this two row will be in list to display, it throws this exception. So to resolve this we should try to put delimiter between two IDs.

So, it would be resolved once you put

lblShoppingCartItem.ID = "lblShoppingCartItem” + CategoryID + “_” + ItemID;

Written by Manish

May 31, 2010 at 2:34 pm

Cross Domain Javascript for IFrame

with 2 comments

We require to put IFrame in our one of the project and need to access parent page from IFrame. Both parent page and IFrame are from different domain and so no direct way to do it. There are lot of example of accessing IFrame across cross domain.

But I think following is the better one. It work in IE, Mozilla and Google Chrome.

http://shouldersofgiants.co.uk/Blog/post/2009/08/17/Another-Cross-Domain-iFrame-Communication-Technique.aspx

Written by Manish

May 26, 2010 at 6:53 pm

Posted in .NET, JavaScript

Tagged with ,

Google Lab’s Javascript Closure

leave a comment »

Look at the Javascript library and Optimizer. If you are not willing to use the library,just look at the how Optimizer compresses and optimize your javascript.

http://code.google.com/closure/

Written by Manish

November 14, 2009 at 11:26 am

Learning jQuery is Fun : jQuery Quick Tutorial – Part 2-Attributes

with one comment

We have seen Selectors in first part of the tutorial which is referenced at Learning jQuery is Fun – jQuery Quick Tutorial – Part 1 – Selectors. Now we are moving on with second part and that is Attributes.

Attributes section consist of functions which are used to do actions on attributes of the HTML Tag. for example, if you wanted to get the href of the link tag which has ‘Manish’ as id. You can do it like $(“a[id=’Manish’]”).attr("href") and you get href of the anchor tag. Let’s look at Attribute in bit/byte detail.

Attributes Related Functions

There are around 5 function ( in next version if it increases, don’t write comment about that as i already has low disk-space in wordpress account :)). All function somehow do interact with element’s attributes.

  • attr(name) returns the attribute passed to the function for first element selected by selectors. That means var title = $("em").attr("title"); returns title of first matched em tag into the title variable. all parameters are in string value in jQuery so please please don’t forget quotes unless specified. I have said this in first part also. Isn’t it ? Ahhh… Memento effect :).
  • attr(key,value) sets the value to the attribute passed by key. So $("button:gt(1)").attr("disabled","disabled"); will disable buttons which are greater than 1.
  • Sometimes we don’t have direct value to set in some attributes. And we need to use functions to set the value. Wow!!! you are genius. Let me tell jQuery guys. And yes, they have implemented within the second. They added function attr(key, fn) for the same as you thought of. Thanks for your contribution :P. This is used to set function value to set specific key’s attribute. Following example will clear it out. $("div").attr("id", function (arr) { return "div-id" + arr; }). Here function always get the element position in the jQuery object. So if page has 3 div, above line will result their id into div-id0,div-id1,div-id2.
  • One more complex but useful function is attr(properties).  It will set the propertie(s) passed into the function to selector’s elements. e.g. $("img").attr({ src: "/images/hat.gif", title: "jQuery", alt: "jQuery Logo" }); This will set src,title and alt tag for each img tag in the page. Power of one line.
  • Last is simple one and that doesn’t need any description removeAttr(name)

CSS Class Releated Functions

There are simple yet helpful routines for working with class attribute of the page elements. Following are 5 functions and their description. They are really easy to understand 🙂

addClass (class) add provided class to selected elements. $("p:last").addClass("selected"); last paragraph will be assigned selected style.
hasClass( class) Whether selected element has the class or not. return bool value. $("p:first").hasClass("selected").toString() Return ‘true’ or ‘false’ according to first para contain selected class or not.
removeClass(class) remove class from the selected elements Don’t wait everytime for example. Use your mind too sometimes
toggleClass(class) & toggleClass(class,switch) toggle the class into selected elements. That means if present then remove it and if it’s not there then add it to the element http://docs.jquery.com/Attributes/toggleClass
see this for example. I am not explaining it as it’s bit late and i need to get dinner fast man!!!.

 

HTML/Text/Value Releated Functions

Now, last functions are related to working with HTML or Text or value of particular element. The working of all are almost similar.

html()
text()
val()
Get the html (innerHTML), text, value respectively. The point to remember with text is that it will return combined text of all selected elements. While html and val only returns data for first selected elements. var htmlStr = $(this).html();
var str = $("p:
first").text();
var singleValues = $("#single").
val();
html(val)
text(val)
val(val)
Set passed value to the innerthml, text or val as per called function. Here once again with text the difference is it escapes the ‘<’ and ‘>’.  So if you pass ‘<b>manish</b>’ as text, it wont show bold manish. Instead of it shows the same passed text. $("div").html("<span class=’red’>Hello <b>Again</b></span>");
$("p").
text("<b>Some</b> new text.");
$("input").val(‘Icangohomenow’);

 

Huh!!!. Attribute finished. We have learned here ( me too has learned :P. seriously ) how to work with attributes with selectors. It was great experience to work with such a library.

$(“Person[ name= ‘Manish’]).val(‘Go to home’).attr(‘timepass’,’Counter-strike game’).

Bye guys!!!

Written by Manish

March 21, 2009 at 3:59 pm

Learning jQuery is Fun : jQuery Quick Tutorial – Part 1 : Selectors

with 4 comments

 

Recently i have seen too much hype about jQuery. I looked into the same and on first sight, i am impressed really with the framework and functionality. Some of the functionality which i had taken 3 to 4 days can be completed even in half day without need of testing in each browser. Quite useful.

jQuery is JavaScript Library which aids developer to play with JavaScript quickly. There are many features covered in the library which are tested on IE 6.0+, FF 2+, Safari 3.0+, Opera 9.0+, Chrome. It has around 19KB of footprint.

Not really useful comparison but you can still look into the http://javascriptant.com/articles/24/javascript-libraries-by-comparison (Comparison of various JavaScript libraries). You cannot dig into this to choose which library you should use. It is depend on what kind of features you require what way.

If you wanted to started with jQuery, you can jump into the http://docs.jquery.com/Main_Page after reading this article. This document is great help to start with and to understand the concepts.

Lets start with jQuery basics. Once you gone through this, you can refer any jQuery book or the above tutorial for complete understanding.

Before starting, let me explain the most fundamental sign (not movie) of jQuery. Let me present you guys the sign of master library jQuery and it is : $ ( Prototype Framework Guys: Huh!! we have searched it 😀 ) 

In JavaScript, we are using document.getElementById to get the element which we want. And then we operate upon it. The same functionality is used by $. But if getElementById is DROP then $ is full RIVER. In every statement of jQuery, you will see $ sign. From now on, don’t just think that $ is money, it can be jQuery too. (poor joke, isn’t it 🙂

There are many parts of learning jQuery. Let us take overview of one by one quickly.

1. Selectors: Help you to select the element(s) from the page. It could be one element or array of elements

$( expression, context ) will be used to select element(s). There are many type of expression supported by jQuery to easily select what we want. expression will be string with quotes.

Following are the type of selection we can make with the jQuery. For more, you can visit the jQuery docs.

Basic Selectors
  • Suppose you want to select all the div present in the page, you will write $(“div”), same way for td, its $(“td”)
  • If you want element with some ID, remember the CSS stuff. In CSS when you make class with # sign, it will apply to element contain that ID. Concept is similar here. jQuery uses CSS selector the same way. So you can write $(“#ManishPansiniya”) and it will return element with id=”ManishPansiniya”. (Sry for my marketing :P)
  • Same way, remember CSS for class. You put . (dot) before class and apply that class to any element to enable the style written in class. Here if you want to find elements which has some class value, you must use .(dot) before that. Suppose you wanted to find elements with “red” class style throughout page, use $(“.red”). Please don’t forget to put quotes as i miss it every time. Why the hell Quote is there, can’t they make this without quote :).
  • You can mix two or more selector and make your own selector. Wonderful, isn’t it. Let me think, why can’t we do it with Hollywood Actresses (LOL just kidding). So you can write like $(“div ,p, span”) and it will return array of all div+p+span tag elements. You can also specify the id/class with the tag. e.g. $(“p.manish”). It will return all <p> tag with “manish” class. Interesting!!!. For more selector, goto Selectors
Index Filters

With index filters, you can select the tags with specified index or indexing function. And index filter will be specified by : (Colon) sign. Actually all the filters will be specified by : (Colon)

  • If you need to select first element from the array for certain tag, you can query like $(“tr:first”). This will return first <tr> from the page. Same way $(“tr:last”), $(“tr:even”), $(“tr:odd”) work. You are pretty smart to understand these. Huh!!!.
  • There are some function index also, which provides array of elements for criteria known as eq,lt,gt. For example $(“tr:eq(2)”) gives second tr from the page. $(“tr:lt(4)”) provides tr less than 4. Similar way gt works.
Content Filters

With this filter you can query page using content in query. There are four type of content selector. Now, you are more smart ( I am not saying that you are over smart. again poor joke 😐 ) to understand the same from name. it is :Contains(text), :empty, :has(selector), :parent.  example of each is in order.. $(“div:contains(‘Manish’)”), $(“div:empty”), $(“div:has(p)”, $(“div:parent”) returns all div contains manish, all div which are empty, all div which has p tag, and last all div which are parents, accordingly.

Visibility Filters

Simplest filters of all. I am not going in detail. Filters are $(“div:hidden”) and $(“div:visible”)

Attribute Filters

With attribute filters, you can query html page with the tags with provided attribute criteria. Attribute criteria is provided in [ ] (Square brackets. Please note that in function filters or in attribute filters, you are using “ (Quotes) anywhere. You can query for input tag which has text attribute equal to Manish. At some places, you can see @ sign for attribute but it is deprecated from version 1.2 and removed from 1.3. Sometime I think that my mind is also deprecated and will be removed soon :P.

  • $(“div[id]”) returns all div on the page with id attribute.
  • $(“div[id=’Manish’]”) returns div with id=Manish. Here you need to provide quotes. same way $(“div[id!=’Manish’]”)
  • There are 3 more attribute filter which has blood relation 🙂 with regular expression. If you are aware of ^, $ and * sign, it would be easy to understand. If you are not aware, then i will make it easy for you :P. If i write ^Manish, then it will return all the words started with Manish. If I write $Manish, it will return words end with Manish. and * is for contains. That means *Manish can find words which cotains Manish, no matter at which position. Same funda will be used in $(“input[name^=’btn’]”), $(“input[name$=’btn’]”),$(“input[name*=’btn’]”)

Above are important filters and notes to understand how selector works. Generally selectors are used to select elements from the page and then manipulate the appearance of that element. There are still some selector left. I have specifically not included that here. To understand those is homework for you. For more selectors, you know already, go to Selectors

For example, $(“p”).css(“color”,”red”) when executed, change the color of all paragraph to red. Single line, big impact. Powerful concept!!!

Hope, you like the article and i am awaiting your feedback (only positive feedback is allowed :)) to get motivation for the next part. lol.

Written by Manish

March 20, 2009 at 9:57 pm