The Cache: Technology Expert's Forum
 
*
Welcome, Guest. Please login or register. October 16, 2019, 04:32:43 AM

Login with username, password and session length


Pages: [1]
  Print  
Author Topic: Same exact HTML doesnt work when output by javascript.  (Read 3197 times)
nutballs
Administrator
Lifer
*****
Offline Offline

Posts: 5627


Back in my day we had 9 planets


View Profile
« on: October 26, 2007, 10:48:51 PM »

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>
Logged

I could eat a bowl of Alphabet Soup and shit a better argument than that.
arms
Expert
****
Offline Offline

Posts: 235



View Profile
« Reply #1 on: October 27, 2007, 07:44:02 AM »

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. Huh?
« Last Edit: October 27, 2007, 07:47:30 AM by arms » Logged
arms
Expert
****
Offline Offline

Posts: 235



View Profile
« Reply #2 on: October 27, 2007, 08:06:21 AM »

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>
Logged
nutballs
Administrator
Lifer
*****
Offline Offline

Posts: 5627


Back in my day we had 9 planets


View Profile
« Reply #3 on: October 27, 2007, 09:52:55 AM »

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.
Logged

I could eat a bowl of Alphabet Soup and shit a better argument than that.
perkiset
Olde World Hacker
Administrator
Lifer
*****
Offline Offline

Posts: 10096



View Profile
« Reply #4 on: October 27, 2007, 12:20:07 PM »

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
Logged

It is now believed, that after having lived in one compound with 3 wives and never leaving the house for 5 years, Bin Laden called the U.S. Navy Seals himself.
nutballs
Administrator
Lifer
*****
Offline Offline

Posts: 5627


Back in my day we had 9 planets


View Profile
« Reply #5 on: October 27, 2007, 12:38:50 PM »

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>
Logged

I could eat a bowl of Alphabet Soup and shit a better argument than that.
perkiset
Olde World Hacker
Administrator
Lifer
*****
Offline Offline

Posts: 10096



View Profile
« Reply #6 on: October 27, 2007, 12:47:23 PM »

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


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...
Logged

It is now believed, that after having lived in one compound with 3 wives and never leaving the house for 5 years, Bin Laden called the U.S. Navy Seals himself.
nutballs
Administrator
Lifer
*****
Offline Offline

Posts: 5627


Back in my day we had 9 planets


View Profile
« Reply #7 on: October 27, 2007, 04:24:59 PM »

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

......................//)
....................,/../
.................../..../
.............//'...'/`
........../'/.../..../......./\
........('(.......... ~/'...')
.........\.................'...../
..........''...\.......... _.
............\..............(
..............\.............\...


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

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

I could eat a bowl of Alphabet Soup and shit a better argument than that.
Pages: [1]
  Print  
 
Jump to:  

Perkiset's Place Home   Best of The Cache   phpMyIDE: MySQL Stored Procedures, Functions & Triggers
Politics @ Perkiset's   Pinkhat's Perspective   
cache
mart
coder
programmers
ajax
php
javascript
Powered by MySQL Powered by PHP Powered by SMF 1.1.2 | SMF © 2006-2007, Simple Machines LLC
Seo4Smf v0.2 © Webmaster's Talks


Valid XHTML 1.0! Valid CSS!