document.getElementById() returns null on IE9 - javascript

I'm working on a popup and i'm having some hard time with Internet Explorer 9. This is the piece of code that gives me trouble:
var popUp= document.getElementById('projectInfo');
popUp.style.left=(tempX-310)+'px';
popUp.style.top=(tempY-110)+'px';
In IE9 (haven't tested in prior versions), popup is null. In adition, i've tried including my .js file just before the body closing tag and wrapping my function in a "document.ready()" function but none of this worked. The same code though works perfectly in Opera, Chrome and Firefox.
Does anyone know what's going on?
Note: The function is called in the body's onLoad atribute of my html.

Without using function it can't work
window.onload = function() {
var popUp= document.getElementById('projectInfo');
popUp.style.left=(tempX-310)+'px';
popUp.style.top=(tempY-110)+'px';
}

IE is having some known issues with getElementById.This post may help .
http://webbugtrack.blogspot.com/2007/08/bug-152-getelementbyid-returns.html
http://www.impressivewebs.com/avoiding-problems-with-javascript-getelementbyid-method-in-internet-explorer-7/

In previous versions of IE (and apparently Chrome and Firefox), getElementById would check for an object with the given id and if it didn't find it, it would take an element with that name.
IE9 doesn't do this, so you need to make sure you have an element with id = projectInfo, not just name=projectInfo. We just discovered this throughout one of our applications. Not great.

Related

Chome iframes location undefined no longer working

Chrome v. 35.0.1916.114 m seems to have changed the way that it handles or implements iframe in the DOM. This has had the effect that some previously working code has become broken. For example:
frames['SomeFrame'].location.href = "SomePage.html";
No longer works because location is undefined. How should this be handled moving forward? It's likely that this old code improperly used the DOM, and until now Chrome had supported it.
Replace that with frames['SomeFrame'].src

parent.navigate only works in IE. What alternative do I have to make it work with other browsers?

I have an anchor tag that works perfectly fine in IE. Here is an example (less some additional parameters I've omitted for clarity)
Add
Unfortunately it would appear that parent.navigate does not work in other browsers such as chrome. The error I receive is: Uncaught TypeError: Object [object global] has no method 'navigate'
I've searched online for an alternative cross-browser solution but haven't been able to successfully make anything else work. I've tried window.location, window.location.href but nothing seems to be working.
Any ideas? Thanks!
UPDATE: This anchor tag resides in an iframe (which is also part of wizard.aspx). What the link ultimately does is updates something within the frame. But regardless, all I'm looking for is an alternative to parent.navigate so it will work in other browsers besides IE. And I've already researched window.location and window.location.href found in other stack overflow articles but they obviously don't work hence why I posted a question.
FINAL UPDATE: Working code.
Add
window.location.href = 'URL';
is the standard implementation for changing the current window's location.
.navigate does not work in all browsers.
Try
Add

Onclick event in anchor tag not working in IE10

I've an anchor in an Asp.Net user control. I've wired some code to the onclick event. For some reason in Internet Explorer 10, the event is not firing. The markup is structured as
where myFunction is a simple JavaScript function. For those who want to see the page in action, here is the link:
http://alt.thedominion.ca/TheBrokerAdvantage/LocateABroker.aspx
Any help is greatly appreciated!
The problem is with your server side code, not the browser or JavaScript.
If you check the JavaScript console in IE10 you will see the following error when clicking the link:
SCRIPT5009: 'ValidatorValidate' is undefined
Which points to the second line in the function:
function doSearch() {
var regExValidate = document.getElementById("ctl00_BrokerSearchMiddle_ctl00_ValidPostalCode");
ValidatorValidate(regExValidate);
var postalCode = $find("ctl00_BrokerSearchMiddle_ctl00_PostalCode").get_value();
if (regExValidate.isvalid && postalCode.indexOf("e.g") == -1) {
document.location.href = "?postalCode=" + postalCode;
}
}
This means the onclick is working just fine, you simply have JS error.
Now the question is why ValidatorValidate exists in other browsers (even IE9) but not in IE10. Well, in IE10 the script where it's being defined is not included, meaning the server never put the line <script src="..."> with that URL as part of the output to the browser.
I can only guess that the server side code is checking the browser version and according to that include certain scripts. Check that code and get rid of such things as it's never a good idea.
After some research I found what's going on. You are using Sitefinity version 3.7 to build your site (according to this question of yours) and as officially stated here:
I want to inform you that unfortunately Sitefinity 3.7 does not support Internet Explorer 10 and your Sitefinity 3.7 might not work properly with this browser version. Apologies for the inconvenience
You will have to upgrade your Sitefinity if you want IE10 support.
The below code works on every major browser (I just tested it on IE10, IE9, Chrome 26.0.1410.64, and the latest firefox release).
click me
<script type="text/javascript">
function myFunction(){
alert("Anchor was clicked");
}
</script>
In other words, your syntax is fine, but the anchor tag simply will not appear without inner text unless you use CSS to force a width and height.
CSS option:
a{
display: block;
width: 100px;
height: 20px;
}
Working CSS Example

Can't get MozTransform to work with Javascript

I'm trying to get the zoom function for Firefox to work using javascript but no luck, what am I doing wrong?
function zoomIn() {
document.getElementById('increaseWrapper').style['MozTransform'] = 'scale(1.5)';
}
Thanks in advance.
Your code seems to work perfectly find in this jsFiddle in Firefox 6.
Remember, 'MozTransform' only applies to Mozilla derived browsers. Safari and Opera and others have their own name for that attribute until it becomes an endorsed standard.
If you're trying your code in mozilla 4+ browser, then there must be something else wrong with your code because what you have disclosed in your question works fine in the right browser with the right HTML.
Have you checked your browser's error console or debugger console to see if you're experiencing an javascript errors that might be keeping your code from executing?

Window.open not working in IE8?

This is the JavaScript I'm currently using:
window.open('/modules/mod_oneononechat/chatwindow.php?key='+key+'&color=blue','x'+winName+'x','location=0,status=0,toolbar=0,menubar=0,resizable=0,scrollbars=0,height=375,width=420');
This doesn't seem to be working in IE8.
It's a chat window that works fine on all other browsers (including IE7). Any ideas as to why it's not working on IE8?
IE8 doesn't like spaces in the window name.
Removing the space from the window name solved the problem.
In IE8, the below function was not opening a new window pop up whereas it was working perfectly in Mozilla and Chrome.
function openReports(reportUrl){
window.open(reportUrl,'Report Information','height=800,width=1000,left=200,top=200,toolbars=no,resizable=no,scrollbars=auto,location=no');
}
Removing the space (Report Information)from the window name solved the problem for me too.
This works for me:
javascript:window.open('http://google.com', 'x'+'winName'+'x', 'location=0', 'status=0', 'toolbar=0', 'menubar=0', 'resizable=0', 'scrollbars=0', 'height=375', 'width=420');
I too had a problem with this issue. I had written a function like
function newPopup(url) {
popupWindow=window.open(url,'Detailed Informations','height=700,width=1000,left=10,top=10,resizable=yes,scrollbars=yes,toolbar=yes,menubar=no,location=no,directories=no,status=yes')
}
where there was a space in the window name i.e "Detailed Information" and due to this the popup was not working. Just dont put any spaces in the window name.
window.open has three parameters: url, windowname, otherfeatures.
For FF, if the second parameter (windowname) is not passed, it still works :)
But in IE 7,8 which we tested, we have to pass the second parameter
var newWin = window.open('', '', 'width=400, height=400, top=100, left=100');
In IE8 Use This first two arguments has to be blank then it works on IE8.
Can you check whether it throws any javascript error?
You can use IE8 built in javascript debugger
The support article titled Q281679 by Microsoft was released for MSIE 5.5/6.0. But it could be applicable for MSIE 8.
Alternatively, you could use the X-UA-Compatible meta tag or header, and see if this can be resolved by resorting to the compatibility mode (I would personally use this as a last resort, and would instead attempt to write JavaScript that does not cause IE8 to behave as described).
PS: To avoid IE8 from requiring the compatibility mode, use the services of the W3C page validator, and have the page tested in another standards compliant browser like Firefox 3 (don't forget to use Firebug and the Web Development Toolbar extensions if you use FF3).
If you use spaces or dashes in the window name, IE won't work (at least some versions that I used).
IN IE if you open one window with window.open() - again if you want to open new window with window.open(),It will not open new window.
For this the solutions is - IN Window.open parameters pass this parameter "copyhistory=no".
e.g:
WindowName = window.open('','Name','height=320,width=428,toolbar=no,
menubar=no,scrollbars=no, resizable=no,location=no, directories=no,
status=no,copyhistory=no');
Hope this will be helpful for you.

Categories