Welcome to WebmasterWorld Guest from 54.146.248.111

Forum Moderators: open

Message Too Old, No Replies

IE issue changing div content

     

andrewsmd

8:41 pm on Dec 19, 2012 (gmt 0)

WebmasterWorld Senior Member 5+ Year Member



I have a selector where you pick an item and it changes the innerHTML of a div. This selector works using an image map. Esentially, I have 3 areas you can click within the map. Depending on the area you click, the HTML get's changed inside of a div. This is working fine in most browsers. Even some IE browsers it works completely fine. However, in some IE 9 browsers, it doesn't work. I get a weird error and the strange thing is, if you refresh the page, it works just fine. Any ideas? Heres the error I get from IE's console.
SCRIPT438: Object doesn't support this property or method
Social-Advertising-And-Viral-Campaigns.html, line 1 character 1
And I should note line 1 of my document is my doctype.
Here's the relevant JS and html

first I create some hidden divs with the content
<div id="services1" style="display: none;">
content 1
</div>
<div id="services2" style="display: none;">
content 2
</div>
<div id="services3" style="display: none;">
content 3
</div>

Then I have the div where the content is shown
<div id="selectorDiv">
</div>

Now, in my image map, depending on where they click, I call my function in an external JS file to fade in the text
<map name="Map">
<area shape="rect" coords="10,28,269,81" href="javascript:selectorClick('servicesFirstBorder.png', 'services1');">
<area shape="rect" coords="10,81,269,135" href="javascript:selectorClick('servicesSecondBorder.png', 'services2');">
<area shape="rect" coords="10,134,269,187" href="javascript:selectorClick('servicesThirdBorder.png', 'services3');">
</map>

This function changes the background image of my container div (imageRotator) and then calls the function to fade in the text
function selectorClick(id, idText) {
$("#imageRotator").stop(true, true);
$("#imageRotator").attr("src", "../images/" + id);
$("#imageRotator").blur();
fadeInSelectorText(idText);

}//selectorClick
function fadeInSelectorText(id) {
var obj = document.getElementById(id);
var html = "";
html = obj.innerHTML;
$('#selectorText').fadeOut("fast", function () { $(this).html(html).fadeIn(1000); });
}//fadeInSelectorText

I can provide a link to this actual page, if anyone wants

lucy24

1:20 am on Dec 20, 2012 (gmt 0)

WebmasterWorld Senior Member lucy24 is a WebmasterWorld Top Contributor of All Time Top Contributors Of The Month



Do you ever read the html or css forums? There's a standard bit of advice that fits in really well here.

Strip your code down to the absolute minimum. Then start adding one thing at a time so you can pinpoint exactly where it breaks. Here you've got several different things that the browser might object to-- image maps, the "href = 'javascript:blahblah'" construction, the change of style from no-display to display, the innerHTML format ... et cetera. That's just picking things at random. I don't mean things that a browser should object to. They're simply things that a browser might decide it didn't like, and who are we to argue.

Are the three selectively-visible divs all in the same place? Can more than one be visible at the same time?

Are the two lower parts of the map intended to overlap by one px or was that a typo?

Oh, and it never hurts to stop by caniuse dot com and make sure everything you've got is supported.

Fotiman

3:06 pm on Dec 20, 2012 (gmt 0)

WebmasterWorld Senior Member fotiman is a WebmasterWorld Top Contributor of All Time 5+ Year Member Top Contributors Of The Month



In IE go to Tools > Internet Options, select the Advanced tab and in Settings make sure "Disable script debugging (Internet Explorer)" is not checked. Now when you get an error, you should get a dialog asking if you want to debug this page and you can use the built-in script debugger in Internet Explorer which should show you the exact line of code that caused the problem and you can examine local variables and add a Watch to a variable. That should help you find where the problem is.

[edited by: whoisgregg at 5:04 pm (utc) on Dec 28, 2012]
[edit reason] fixed filter error [/edit]

 

Featured Threads

Hot Threads This Week

Hot Threads This Month