Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 10 of 10
  1. #1
    New to the CF scene
    Join Date
    Dec 2006
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Stylesheet problem with generated nodes

    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.

    Code:
    <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>

  • #2
    Banned
    Join Date
    Oct 2005
    Location
    I'm in GMT -5
    Posts
    314
    Thanks
    0
    Thanked 1 Time in 1 Post
    jesdynf :

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

    Code:
    a.onclick = function(){actionlink;return false}
    a.setAttribute("className", "historylinks");
    You could use this too:
    Code:
    a.className = "histroylinks";

  • #3
    New to the CF scene
    Join Date
    Dec 2006
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Ancora View Post
    jesdynf :

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

    Code:
    a.onclick = function(){actionlink;return false}
    a.setAttribute("className", "historylinks");
    You could use this too:
    Code:
    a.className = "histroylinks";
    Huh. I just figured... well, I just figured wrong. Thank you!

  • #4
    Banned
    Join Date
    Oct 2005
    Location
    I'm in GMT -5
    Posts
    314
    Thanks
    0
    Thanked 1 Time in 1 Post
    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:

    Code:
    a.onclick = function(){window.open(actionlink);return false}
    actionlink is some URL.

  • #5
    New to the CF scene
    Join Date
    Dec 2006
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Ancora:
    Quote Originally Posted by Ancora View Post
    And I just realized that THIS might be what you're trying to do:

    Code:
    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!

  • #6
    New to the CF scene
    Join Date
    Dec 2006
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Ancora:
    Quote Originally Posted by Ancora View Post
    Code:
    a.onclick = function(){actionlink;return false}
    a.setAttribute("className", "historylinks");
    You could use this too:
    Code:
    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...

    Code:
    <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>

  • #7
    New to the CF scene
    Join Date
    Dec 2006
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Click the link a couple times, and when I peek in on the JavaScript currently on the page, I get (after reformatting)...

    Code:
    <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.

  • #8
    Banned
    Join Date
    Oct 2005
    Location
    I'm in GMT -5
    Posts
    314
    Thanks
    0
    Thanked 1 Time in 1 Post
    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:

    Code:
    <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>

  • #9
    New to the CF scene
    Join Date
    Dec 2006
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Ancora:
    Quote Originally Posted by Ancora View Post
    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!

  • #10
    Banned
    Join Date
    Oct 2005
    Location
    I'm in GMT -5
    Posts
    314
    Thanks
    0
    Thanked 1 Time in 1 Post
    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:

    Code:
    <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:

    Code:
    <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>
    Last edited by Ancora; 12-15-2006 at 08:58 PM.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •