Opening a Jquery UI Modal Dialog shows a scroll bar on parent page

Howdy my dear readers, I hope you must be doing great!

Yes, I’m back here to write a new blog post after so long time. Sorry for not sharing anything with you since so long. But got busy with lot of bits and pieces. But it’s good to be busy, the busier you are the more you have to share!

So, keep visiting – going to share more with you in upcoming days! [Free advice: You can subscribe to this blog via EMAIL SUBSCRIPTION box given in right side – which means that whenever any new post gets posted here, you will get an email!]

Challenge:

I got a chance to use Jquery UI‘s Modal dialog in my application. Now, whenever we used to open a dialog and when we open it, it was showing scroll-bar on parent page.

Solution:

After doing a bit research and finally thought to use following solution, which worked for us:

http://forum.jquery.com/topic/opening-a-modal-dialog-shows-a-horizontal-scroll-bar [Main logic lies in open and close event!]

Basically, above solution sets body’s overflow to hidden in open event and auto in close event. Which works fine for all browsers except IE7.  What’s the solution? Why?

Solution is you need to set overflow hidden of html element as well along with body.

Why so?

Excerpt from http://stackoverflow.com/questions/4443006/body-overflow-hidden-problem-in-internet-explorer-7

Applying overflow-x:hidden or overflow-y:hidden; to the body element of the document will not work. The overflow-x:hidden or overflow-y:hidden must be applied to the html element, not body element.

Happy Coding!

Insert Cell alternative for Firefox

Hi folks Sorry for being invisible since so long. But i really got tied up with my bits.

Anyway today i have something to share with you all so here it is:

Challenge:

I have one JavaScript in which i am creating one table cell and adding it to table. It works fine in IE[As always ] But not in FF[As always ].

var newTable = document.createElement(‘table’);
var newRow = newTable.insertRow( ); 
 var newCell1 = newRow.insertCell( );

Solution:

So, finally my friend Google helped me to find a way:

just pass –1 to insertCell Method and have a good sleep!

var newTable = document.createElement(‘table’);
var newRow = newTable.insertRow( ); 
var newCell1 = newRow.insertCell( -1);

Reason:

I don’t know. If you do please do let me know

Happy Programming!

 

Name Mangling with MasterPages and javaScript+ASP.NET

from last few days we are working with Master Page and Java script and as the all Javascript do it gets the control by ID using “document.getElementByID(<ID OF CONTROL>).value”..That’s it.it looks simple but frankly speaking it has wasted our so much time…..Looks funny na???so let me tell you why??

defn [Name Mangling wikipedia]: In software compiler engineering, name mangling (more properly called name decoration, although this term is less commonly used) is a technique used to solve various problems caused by the need to resolve unique names for programming entities in many modern programming languages.

Problem:

you can do it simply by document.getElementByID..but you will get stuck when your control lies under Master Page…if you keep the same function which you have used for simple page[without Master page] IE Will say “Object required”. Because in your simple page the ID of control will be same…and if you add Master Page than id will be something like ctl00_ContentPlaceHolder1_txtName.. let’s see it by example

Suppose you have one control in simple ASP.NET Page and has ID txtName.

Now if you put it in MasterPage which has ContentPlaceHolder and had ID= ContentPlaceHolder1.

so now your ID= ctl00_ContentPlaceHolder1_txtName So the pattern for generating name i like :

ctl00_<ContainerID>_<CONTROL ID> for example ID = ctl00_ContentPlaceHolder1_txtName

Hope you are clear now.. so how you will find you control by this ID????

Solution:

in old Javascript you will refer control like:

document.getElementById(“txtName”).value

and Now you have to do:

document.getElementById(“<%= txtName.ClientID %>”).value

That’s it.

Looks cool na??

Hope you have enjoyed this article.

Happy Java scripting.

Kiran Patil

UPDATED 19-2-2008 VER 1.1

I have tried this with my page which has .js file located under different folder and i have linked it with page using tag.

But it was not working because Visual studio doesn’t Parse this  file and ClientID will not work.

So, Conclusion is that  you can’t use ClientID with different .js file