...

View Full Version : Stylesheet problem with generated nodes



jesdynf
12-15-2006, 04:43 PM
I'm having a problem applying styles to generated objects. Distilling it down to a test case fixed some of my problems, but not all of them.

What you see below will add an entry to the top of a list when the button is clicked. This item should be a link enjoying the historylinks style and an onClick that, in this case, pops up an alert box.

In Firefox, the prepend works and the alert works, but it looks like unstyled text. The console reports "unknown property 'a': declaration dropped" whenever the page loads.

In IE6, the prepend works, but it's unstyled text and -- frustratingly -- the onClick doesn't work EITHER.

Any help you can give will be greatly appreciated.



<html>
<head>
<title>CSS/DOM Problem Example</title>
<style type="text/css">
.historylinks {
a:link { color: blue; text-decoration: none }
a:active { color: red; text-decoration: none }
a:visited { color: blue; text-decoration: none }
a:hover { color: green; text-decoration: underline }
}
</style>
<script type="text/javascript">
function writeToHistory () {
var hlist = document.getElementById("historyList");
var li = document.createElement('li');
var a = document.createElement('a');
var actionlink = "alert(\"Alert!\");";
a.appendChild(document.createTextNode('Test!'));
a.setAttribute("onClick", actionlink);
a.setAttribute("class", "historylinks");
li.appendChild(a);
hlist.insertBefore(li,hlist.firstChild);
}
</script>
</head>
<body>
<p>When you click this button, a new link appears at the top of the history list.
Click on one of these links to perform an action.</p>
<button onClick="writeToHistory();">Test</button>
<ul id="historyList">
<li>End of History</li>
</ul>
</body>
</html>

Ancora
12-15-2006, 04:53 PM
jesdynf :

It's className and onclick is set to a function. That funciton calls your actionlink URL;



a.onclick = function(){actionlink;return false}
a.setAttribute("className", "historylinks");


You could use this too:


a.className = "histroylinks";

jesdynf
12-15-2006, 05:03 PM
jesdynf :

It's className and onclick is set to a function. That funciton calls your actionlink URL;



a.onclick = function(){actionlink;return false}
a.setAttribute("className", "historylinks");


You could use this too:


a.className = "histroylinks";


Huh. I just figured... well, I just figured wrong. Thank you!

Ancora
12-15-2006, 05:10 PM
jesdynf :

You're welcome. I'd appreciate being addressed by my name.

And I just realized that THIS might be what you're trying to do:



a.onclick = function(){window.open(actionlink);return false}


actionlink is some URL.

jesdynf
12-15-2006, 05:30 PM
Ancora:


And I just realized that THIS might be what you're trying to do:



a.onclick = function(){window.open(actionlink);return false}


actionlink is some URL.

Nah, it's an AJAX thingie I stripped out for the simplified test case. It really does need to be an arbitrary function I was constructing elsewhere, but being able to set it as an anonymous function and not an Enormous Pile Of Hand-Escaped Javascript is really what I needed. Thanks again!

jesdynf
12-15-2006, 05:44 PM
Ancora:




a.onclick = function(){actionlink;return false}
a.setAttribute("className", "historylinks");


You could use this too:


a.className = "histroylinks";


Wait, now it's worse... clicking on the links no longer pops up the alert box, and it's still complaining about dropped declarations... but it's saying the dropped declaration is on line 140? This testcase isn't 140 lines long...



<html>
<head>
<title>CSS/DOM Problem Example</title>
<style type="text/css">
.historylinks {
a:link { color: blue; text-decoration: none }
a:active { color: red; text-decoration: none }
a:visited { color: blue; text-decoration: none }
a:hover { color: green; text-decoration: underline }
}
</style>
<script type="text/javascript">
function writeToHistory () {
var hlist = document.getElementById("historyList");
var li = document.createElement('li');
var a = document.createElement('a');
a.appendChild(document.createTextNode('Test!'));
a.onClick = function(){ alert("Alert!"); return false}
a.className = "historylinks";
li.appendChild(a);
hlist.insertBefore(li,hlist.firstChild);
}
</script>
</head>
<body>
<p>When you click this button, a new link appears at the top of the history list.
Click on one of these links to perform an action.</p>
<button onClick="writeToHistory();">Test</button>
<ul id="historyList">
<li>End of History</li>
</ul>
</body>
</html>

jesdynf
12-15-2006, 06:07 PM
Click the link a couple times, and when I peek in on the JavaScript currently on the page, I get (after reformatting)...



<button onclick="writeToHistory();">Test</button>
<ul id="historyList">
<li><a class="historylinks">Test!</a></li>
<li><a class="historylinks">Test!</a></li>
<li><a class="historylinks">Test!</a></li>
<li><a class="historylinks">Test!</a></li>
<li>End of History</li>
</ul>


So the class is being applied, but it doesn't seem to link to the style. Probably has to do with the message I don't understand about declarations being dropped. And the function isn't making it through at all.

Ancora
12-15-2006, 06:43 PM
jesdynf :

When you create an anchor element you have to assign the href property to something, usually "#", because you have assigned the onclick to do the work.

And the style declaration was a bit incorrect.

This works for me:



<html>
<head>
<title>CSS/DOM Problem Example</title>
<script type="text/javascript">

function writeToHistory(){

var hlist = document.getElementById("historyList");
var li = document.createElement('li');
var a = document.createElement('a');
a.href = "#";
a.appendChild(document.createTextNode('Test!'));
a.onclick = function(){alert("Alert!"); return false}
a.className = "historylinks";
li.appendChild(a);
hlist.insertBefore(li,hlist.firstChild);
}

</script>
<style type="text/css">

.historylinks: a:link { color: blue; text-decoration: none }
a:active { color: red; text-decoration: none }
a:visited { color: blue; text-decoration: none }
a:hover { color: green; text-decoration: underline }

</style>
</head>

<body>
<p>When you click this button, a new link appears at the top of the history list.
Click on one of these links to perform an action.</p>
<button onClick="writeToHistory();">Test</button>
<ul id="historyList">
<li>End of History</li>
</ul>
</body>
</html>

jesdynf
12-15-2006, 07:17 PM
Ancora:

When you create an anchor element you have to assign the href property to something, usually "#", because you have assigned the onclick to do the work.

And the style declaration was a bit incorrect.

This works for me:

And it does here too. Thanks!

Ancora
12-15-2006, 07:22 PM
jesdynf:

You're welcome.

Something else I noticed... Because of the return false in the onclick, the visited links won't hold their color. And you know, you really don't need a:link. a is a link. But without the return false, clicking the link will make it jump to the top of the page. So, instead try it like this:



<html>
<head>
<title>CSS/DOM Problem Example</title>
<script type="text/javascript">

function writeToHistory(){

var hlist = document.getElementById("historyList");
var li = document.createElement('li');
var a = document.createElement('a');
a.href = "#";
a.appendChild(document.createTextNode('Test!'));
a.onclick = function(){alert("Alert!")}
a.className = "historylinks";
li.appendChild(a);
hlist.insertBefore(li,hlist.firstChild);
}


</script>
<style type="text/css">

.historylinks:
a:active { color: blue; text-decoration: none }
a:visited { color: red; text-decoration: none }
a:hover { color: green; text-decoration: underline }

</style>
</head>

<body>
<p>When you click this button, a new link appears at the top of the history list.
Click on one of these links to perform an action.</p>
<button onClick="writeToHistory();">Test</button>
<ul id="historyList">
<li>End of History</li>
</ul>
</body>
</html>


And if you need to put that ul far enough down the page so that the window scrolls, clicking those links and having it jump to the top of the page can be very annoying. Here's a way around that, using another class, onclick:



<html>
<head>
<title>CSS/DOM Problem Example</title>
<script type="text/javascript">

function writeToHistory(){

var hlist = document.getElementById("historyList");
var li = document.createElement('li');
var a = document.createElement('a');
a.href = "#";
a.appendChild(document.createTextNode('Test!'));
a.onclick = function(){alert("Alert!");this.className = 'visitedHistory'; return false}
a.className = "historylinks";
li.appendChild(a);
hlist.insertBefore(li,hlist.firstChild);
}


</script>
<style type="text/css">

.visitedHistory {color:red}
.historylinks:
a:active {color: blue; text-decoration: none}
a:hover {color: green; text-decoration: underline}

</style>
</head>

<body>
<p>When you click this button, a new link appears at the top of the history list.
Click on one of these links to perform an action.</p>
<button onclick="writeToHistory();">Test</button>
<ul id="historyList">
<li>End of History</li>
</ul>
</body>
</html>



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum