next »

[nutballs]

Simple little thing, and it no worky. WTF.
I don't get it. I must have some typo in there for Quote Escaping or something. But I just dont see it. I have been spending the past 2 hours trying to figure this out and I now give up. This has been over simplified by me, but even with this really simple code chunk I have the problem.

Basically the div with the AAAAAA should be hidden to begin with, and appear when you roll over the img, disappear when you roll off. Easy right? 

Paste both of these into an HTML document, inside the body area. if you want to see them how they are supposed to work.

plain old HTML

Code:

<style>
#flyout div{display:none;position:relative;top:-10px;}
#flyout:hover div{display:block;}
</style>
<a href="#" id="flyout">
<img src="http://www.bookerbox.com/images/favorites.gif">
<div>AAAAAA</div>
</a>

Javascript version of same exact HTML

Code:

<script>
document.write("<style>");
document.write("#flyout div{display:none;position:relative;top:-40px;}");
document.write("#flyout:hover div{display:block;}");
document.write("</style>");
document.write("<a href=\"#\" id=\"flyout\">");
document.write("<img src=\"http://www.bookerbox.com/images/favorites.gif\">");
document.write("<div>AAAAAA</div>");
document.write("</a>");
</script>

[arms]

that's weird. ff error console doesn't show any errors.
it's like the browser isn't seeing the style info. it might have something to do with writing the style tag in the body.
or maybe the indirect reference via the parent id.

edit

i tried moving the style in the head, and the js write the rest - same thing.

[arms]

this works almost the same. the div position looks off. i just added the style to the head. i assume it would work if you add the style tag the same way.

Code:

<script>
var newa = document.createElement('a');
newa.setAttribute('href', '#');
newa.setAttribute('id','flyout');

var newimg = document.createElement('img');
newimg.setAttribute('src', 'http://www.bookerbox.com/images/favorites.gif');

var newdiv = document.createElement('div');
newdiv.innerHTML = 'AAAAAA';

newa.appendChild(newimg);
newa.appendChild(newdiv);
document.body.appendChild(newa);
</script>

[nutballs]

thanks arms. I will try that if i cant figure out whats going on with the document.write way. since I do this with a bunch of other things in my app, i am surprised this is not working.

style block in page, I thought wouldnt work, but it does, just not in this case it seems.

I have tried even just simple color styles and it doesnt work.

i really feel like i have a typo, but just am not seeing it.

[perkiset]

I've not used this syntax:

Code:

<style>
#flyout div{display:none;position:relative;top:-10px;}
#flyout:hover div{display:block;}
</style>

... you're saying you want a node with the ID of flyout to be styled only if its a div ... if you're stying for DIVs then you don't need the #name and if you're doing a specific ID then you don't need DIV, at least as far as I know. This may be just confusing enough for the JS addition of the style to fish up on you, IDK. Also, I'd not doc.write in pieces like that - I'd make a single string of the style and dump it in one shot. Have no idea if that's the problem, but those things immediately stood out to me

[nutballs]

OMFG I HATE JS.

....................../´¯/)
....................,/¯../
.................../..../
............./´¯/'...'/´¯¯`·¸
........../'/.../..../......./¨¯\
........('(...´...´.... ¯~/'...')
.........\.................'...../
..........''...\.......... _.·´
............\..............(
..............\.............\...



Put the entire string of shit into a var, then document.write the var. DUMB. it works now. (though I changed the CSS, i confirmed that had nothing to do with it.

Code:

<script>
var stuff = "<style>#theflyoutdivjs{display:none;position:relative;top:-40px;}#flyout:hover #theflyoutdivjs{display:block;}</style>";
stuff = stuff + "<a href=\"#\" id=\"flyout\"><img src=\"http://www.bookerbox.com/images/favorites.gif\"><div id=\"theflyoutdivjs\">AAAAAA</div></a>";
document.write(stuff);
</script>

[perkiset]

 _      ____  _        _   _ _             ____             
| |    / __ \| |      | \ | (_)           / __ \            
| |   | |  | | |      |  \| |_  ___ ___  | |  | |_ __   ___ 
| |   | |  | | |      | . ` | |/ __/ _ \ | |  | | '_ \ / _ \
| |___| |__| | |____  | |\  | | (_|  __/ | |__| | | | |  __/
|______\____/|______| |_| \_|_|\___\___|  \____/|_| |_|\___|

Re. JS, it's not actually a JS problem you see, its a DOM one.

The problem is that you're asking JS to add a node to the browser DOM tree, but it's incomplete - you can't write to the DOM half of a descriptor - you need the whole thing. So since it doesn't </style> it is incomplete and the DOM will toss it. I'd be surprised if I ran that in Safari and I didn't get ePuke all over my shoes. So although JS is agreeably funkadelic, your anger is misplaced I'm afraid...

[nutballs]

fine then.
------------------
OMFG I HATE DOM.

....................../´¯/)
....................,/¯../
.................../..../
............./´¯/'...'/´¯¯`·¸
........../'/.../..../......./¨¯\
........('(...´...´.... ¯~/'...')
.........\.................'...../
..........''...\.......... _.·´
............\..............(
..............\.............\...


--------------

actually i knew that. And now that you said it, I realize the error of my ways.