PDA

View Full Version : [RESOLVED] DOM creation of <a href

tonyB
04-14-2007, 06:30 PM
Brainjar.com has a very simple script.....
<div id="sample1">This text is in a DIV element.</div>

<script type="text/javascript">

function addParagraph() {
var paraEl, boldEl;
paraEl = document.createElement("p");
boldEl = document.createElement("b");
paraEl.appendChild(document.createTextNode("This is a new paragraph with "));
boldEl.appendChild(document.createTextNode("bold"));
paraEl.appendChild(boldEl);
paraEl.appendChild(document.createTextNode(" text, added to the DIV"));

document.getElementById("sample1").appendChild(paraEl);
return false;
}
</script>
<p>
<a href="" onclick="return addParagraph();">Add Paragraph</a>
</p>

...that adds "This is a new paragraph with bold text, added to the DIV"....each time "add paragraph" is clicked.. The interpolated bold tags are of no concern....Question, how do I adapt the above function "addParagraph" so that it instead adds another of the same nodetype, ie...
click...
<a href="" onclick="return addParagraph();">Add Paragraph</a>
get..
<a href="" onclick="return someOtherFunction();">Add another function</a>

..which I would then have the choice of clicking for another unrelated operation.??
thanks
BonRouge
04-14-2007, 08:42 PM
Do you mean like this? http://bonrouge.com/demos/addA.htm

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>add 'a' element</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<style type="text/css">
* {
margin:0;
padding:0;
}
body {
background-color:white;
}
#box {
margin:1em;
border:1px solid gray;
width:8em;
padding:1em;
text-align:center;
font-size:3em;
}
#box a {
display:block;
cursor:pointer;
border:1px solid navy;
margin:1em;
}
</style>
<script type="text/javascript">
function go() {
window.open("http://bonrouge.com");
}
function addA(p) {
var aEl = document.createElement("a");
aEl.appendChild(document.createTextNode("go"));
aEl.onclick=go;
document.getElementById(p).appendChild(aEl);
}
window.onload=function() {
document.getElementById('addA').onclick=function() {addA('box');}
}
</script>
</head>
<body>
<p id="box"><a id="addA">add 'a' element</a></p>
</body>
</html>
tonyB
04-15-2007, 12:50 AM
Yes..thanks, this is very elegant but over-complicated; I'm interested in a simple javascript that will add/remove consecutive nodes onclick....

First string Second string Third string Fourth string Fiifth string

Clicking First string will toggle remove/restore all t he other strings downstream of it...

First string (removed) (removed) (removed) (removed)
Click again for First string Second string (restored) Third string (restored) Fourth string (restored) Fiifth string (restored)

Clicking Second string will toggle remove/restore Third string, Fourth string and Fifth string unless it is already removed by First string


and so on for Third Fourth and Fifth

I have a mimic of this task on excel which I can email (can't attach .xls files to this forum)
BonRouge
04-15-2007, 03:24 AM
You're saying you don't actually want to create elements? You just want to hide/show them?

Like this? http://bonrouge.com/demos/toggle_list.htm

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>toggle list</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<style type="text/css">
* {
margin:0;
padding:0;
}
body {
background:#fff;
}
.hidden {
display:none;
}
#list {
list-style:none;
}
#list li {
float:left;
padding:1em;
cursor:pointer;
}

</style>
<script type="text/javascript">
function toggle(el,items) {
for (i=0; i<items.length; i++) {
if (tgl) {
var rE = new RegExp("(^|\\s)hidden(\\s|$)");
items[i].className=items[i].className.replace(new RegExp("hidden\\b"), "");
if (tgl=='h') {
items[i].className+=" hidden";
}
}
if (el==items[i] && i+1!=items.length) {
var rE = new RegExp("(^|\\s)hidden(\\s|$)");
if (rE.test(items[i+1].className)) {
var tgl='s';
}
else {
var tgl='h';
}
}
}
}

function init(list) {
var items=document.getElementById('list').getElementsByTagName('li');
for (i=0; i<items.length; i++) {
items[i].onclick=function() {toggle(this,items);}
}
}
window.onload=function(){init('list');}
</script>
</head>
<body>
<ul id="list">
<li>one</li>
<li>two</li>
<li>three</li>
<li>four</li>
<li>five</li>
</ul>
</body>
</html>

I've been wondering... What is this for? I can't think why this would be useful.
tonyB
04-15-2007, 01:51 PM
Very impressive; you've approached the problem in a way I had no notion of; I was scheming on something like this...where each of the 5 strings call to a function that evaluates whether to toggle show/hide the other strings downstream of it....I may be approaching the matter all wrong, don't know...

<a id="1stString" href="" onclick="return first();">First string </a><a id="2ndString" href="" onclick="return second();">Second string </a><a id="3rdString" href="" onclick="return third();">Third string </a><a id="4thString" href="" onclick="return fourth();">Fourth string </a><a id="5thString" href="" onclick="return fifth();">Fifth string </a>

For the actual task, which is to manage a long bibliography that rolls out from calling to a mySQL database...

while ($lineH = mysql_fetch_array($resultH, MYSQL_ASSOC)){

?><a id="1stString" href="" onclick="return first();"><?php echo $authorDate; ?></a><a id="2ndString" href="" onclick="return second();"><?php echo $title; ?> </a><a id="3rdString" href="" onclick="return third();"><?php echo $publisher; ?> </a><a id="4thString" href="" onclick="return fourth();"><?php echo $abstract; ?> </a><a id="5thString" href="" onclick="return fifth();"><?php echo $comments; ?> </a>
<?php }?>

which, with everything in the right place, will yield...

Darwin, C 1859 The Origin of Species.London-John Murray. 400pp Summary.Notes.

Linnaeus, C 1758 Systema Naturae. Halae. 500pp Summary. Notes.

what's the best on which way to go?
BonRouge
04-16-2007, 12:52 PM
Funnily enough, I've tried to do this kind of thing before... (http://bonrouge.com/biblio.htm)
Trying it again now, I can see that my script was just too big.
There are probably still problems with this one, but I think it'll do the job: http://bonrouge.com/demos/biblio_xi.htm

I hope that helps.
tonyB
04-18-2007, 12:43 AM
Thanks Bonrouge...I'll e- you directly...Tony