DOM property comparison for different browsers: What Works Where?

Today, I was working on a UI enhancement task where I had to do some DOM manipulation. Basically task was changing color of some SPAN elements in DOM depending on their value like if it’s value is XXX then show in RED color and so on. As always I was using IE to test my Java script code written to do the job. In JS code, I used “innerText” property of SPAN element to get the text of that element and then did the comparison to change the color and It worked fine. When I ran same JS code on Mozilla, it didn’t run (I mean it got executed but didn’t changed color of SPAN elements to RED L) . On debugging the script, I was surprised to see value of innerText property being returned null. When googled around it and found that only Mozilla doesn’t support this property L. Mozilla has another property “textContent” which has same value as innerText in other browsers.

Solution was simple, use an ORing of both the values instead of putting if-else block in code to use textContent if the user is running Mozilla or innerText for any other browser.

var txtName = clientNameElement.innerText || clientNameElement.textContent;

I picked up this solution from here. This link provides a good comparison of various DOM properties on different browsers that is what works and what not J.

Hope it helps some of you while writing code to cater to multiple browsers J

Fixing “This page contains secure and nonsecure items” warning in IE

Ever encountered “This page contains both secure and nonsecure items. Do you want to display the nonsecure items? ” in IE. Well I do and this pesky popup keeps bugging me now n then. Till today, I never bothered about it. I used to click “Yes” no matter what :D. I know it’s not always safe to do it but who cares 😀

Today I was assigned a bug, in the application I am working on, which says that users are seeing this popup so many times and they are not happy about it. That got me thinking people do care about these pop ups as well :P.

Ne way, I had to find a solution to get rid of this warning. So after little Binging and Googling I found the solution. So thought about writing my findings though they are available in top 10 search results 🙂

The reason for this warning is that you are visiting a secure site (HTTPS site) and somewhere behind the scenes that site or page is trying to access a non secure resource be it a complete page or some image. That makes the browser assume that since you are inside a secure site, you should not be getting anything that’s not secure. Like many a times https pages have some images whose source is http for example http://mmyserver/myimages .

There are two ways you can get rid of this warning

1. Change all reference of http to https in the page.
2. Lower your guard in IE: IE has a setting which decide what the browser behavior in case of a non secure content coming while browsing a secure page. This setting is in “IE ==> Tools ==> Internet Options ==> Security Tab ==> Click Custom Level button” this will open up a list of options for various security settings for IE. Scroll this list to search for “Display Mixed Content” option. The “Prompt” radio option is selected by default. Change it to “Enable” option and click OK. and you are done. The change will take effect immediately.

Following are some of the links which helped me to solved me the issue:

1. http://ask-leo.com/can_i_get_rid_of_the_this_page_contains_both_secure_and_nonsecure_items_warning.html

2. http://www.sslshopper.com/article-stop-the-page-contains-secure-and-nonsecure-items-warning.html?jn948e2cf0=2#jotnav948e2cf0db15fcce0a996d225ead01c0

3. http://www.velocityreviews.com/forums/t152692-this-page-contains-both-secure-and-nonsecure-items.html

4. http://blogs.msdn.com/jorman/archive/2006/02/06/526087.aspx

5. http://www.wallpaperama.com/forums/windows-disable-this-page-contains-both-secure-and-nonsecure-items-t274.html

6. http://www.aspdeveloper.net/tiki-index.php?page=HTMLTipsSSLNonSecureWarning