The Design of Software (CLOSED)

A public forum for discussing the design of software, from the user interface to the code architecture. Now closed.

The "Design of Software" discussion group has been merged with the main Joel on Software discussion group.

The archives will remain online indefinitely.

The innerHTML problem

I try to add a div using innerHTML which has the background image defined in it's style attribute, but that image doesn't render.
It does in IE and Opera, and even Safari, but not in Firefox.
Anyone have a clue as to why not?

I'd prefer to add it all using the standard DOM, in which case I suspect it will work, but it's really messy to take a downloaded snippet of xml containing html segments and insert the lot in a target node in a webpage when using IE.
The replaceChild(), etc, keeps refusing to execute, since it wont interface the xml/pageDOM.
mikael bergkvist Send private email
Monday, May 08, 2006
 
 
"It does in IE and Opera, and even Safari, but not in Firefox."

If it was not working on Opera, you would have said "let's ditch Opera support and move on". Why not doing the same with Firefox? It does not seem that popular if you check the statistics from various sources.
GinG
Monday, May 08, 2006
 
 
Hmm. Works for me (FF 1.0.3)

--------------------------------
<html>
    <head>
        <script type="text/javascript">
            function testBg()
            {
                var node = document.getElementById('myDiv');
                node.innerHTML = '<div style="background-image: url(bg.jpg);">Hello Background</div>';
            }
        </script>
    </head>
    <body>
        <div id="myDiv">Foo</div>
        <input type="button" value="test" onclick="testBg();"/>
    </body>
</html>
-------------------------------
Java GUI Programmer
Tuesday, May 09, 2006
 
 
"It does not seem that popular if you check the statistics from various sources."

34% of traffic to my site is via FireFox, I'd say that was popular.

What happens when he fixes this problem and gets another in I.E. does he ditch that too?
Andy.. Send private email
Tuesday, May 09, 2006
 
 
I suspect it might be something local, and not at all related to FF per se.
On other machines, it just works using FF.
I kinda like Firefox by the way.. ;-)
I'm thinking there's some settings I've missed maybe, or a buggy plugin among those I've added, and I just wondered if anyone else had the same problem?
(If) some of my users encounter this problem, it would be nice to have an answer as to what is going on.
Mikael Bergkvist Send private email
Tuesday, May 09, 2006
 
 
What do you mean by "it doesn't work"? Do you get javascript errors (check the console)? Does the browser crash? Do demons fly out of your nose?

Please post details and an example URL. innerHTML is supported in FF, so if it doesn't work there is a bug in your code somewhere.
clcr
Tuesday, May 09, 2006
 
 
I vaguely remember some issues with innerHTML not drawing correctly if there were some dependencies in the new HTML that depended on CSS.

We did something where I added graphical elements as divs with attached images.  And, allowed the user to move them around, change them, and merge them.  Here's the code I ripped out where I added divs. It basically creates a new element and adds it to the DOM.  I used a container div as the parent and just added to that.  It may not have been the best code, since it was written in my last couple weeks on that job.  YMMV. 

function add_div( id, hidden )
{
    var container = document.getElementById("Container");
    var newdiv = document.createElement('div');

    newdiv.setAttribute("id", id);
    newdiv.setAttribute("style","visibility:"+(hidden?"hidden":"visible")+"; width: 46px; height: 20px;position: absolute;top: 0; left: 0;");
    newdiv.setAttribute("onclick","click(this)");
    newdiv.setAttribute("onmousemove","mousemove()");
    newdiv.setAttribute("onmouseout","mouseout()");
    newdiv.innerHTML = "<img src=images/blank.gif  id='"+id+"_Image' width=46 height=20>";
    container.appendChild(newdiv);

    if(isIE){
        eval("document.getElementById('"+id+"').style.visibility='"+(hidden?"hidden":"visible")+"'");
      eval("document.getElementById('"+id+"').style.position='absolute'");
      eval("document.getElementById('"+id+"').style.top='0px'");
      eval("document.getElementById('"+id+"').style.left='0px'");
      eval("document.getElementById('"+id+"').style.width='46px'");
      eval("document.getElementById('"+id+"').style.height='20px'");
      document.getElementById(id).onclick=click;
      document.getElementById(id).onmouseover="mousemove()";
      document.getElementById(id).onmouseoout="mouseout()";
    }
}

Wednesday, May 10, 2006
 
 
Why all the eval?
clcr
Wednesday, May 10, 2006
 
 
Thanks.
That was exactly the issue and you solved it.
mikael bergkvist Send private email
Sunday, May 14, 2006
 
 

This topic is archived. No further replies will be accepted.

Other recent topics Other recent topics
 
Powered by FogBugz