PDA

Click to See Complete Forum and Search --> : navbar generator script

starrwriter
03-25-2003, 04:35 PM
I'm a novice and I've been working on this for weeks. It's a generator for navbars with table cell bgcolor change onmouseover. So far it only produces the word "Link" in each table cell, requiring the user to insert the actual link name and URL manually. I want the user to be able to enter the linkname and URL on the form and have this data inserted into the proper <td> line of generated code. I know this requires function addlink(), but I can't figure out how to write one that works. Here's my script so far:

// Start Generator Function
function process() {

// Set Variables
var rows = document.form.rows.value * 1
var cols = document.form.cols.value * 1
var width = document.form.width.value * 1
var border = document.form.border.value * 1
var bordercolor = document.form.bordercolor.value
var cellpadding = document.form.cellpadding.value * 1
var align = document.form.align.value
var tdalign = document.form.tdalign.value
var onMouseOver = document.form.onMouseOver.value
var onMouseOut = document.form.onMouseOut.value
var url = document.form.url.value
var textcolor = document.form.textcolor.value
var bgcolor = document.form.bgcolor.value


// Table tag creation
var table = "<table width=\"" + width + "\"\n"
table += " border=\"" + border + "\"\n"
table += " bordercolor=\"" + bordercolor + "\"\n"
table += " cellpadding=\"" + cellpadding + "\"\n"
table += " cellspacing=\"0" + "\"\n"
table += " align=\"" + align + "\"\n"
table += " bgColor=\"" + bgcolor + "\"\n"

// Calculate the width for <TD>
var tdwidth = width / cols

// Start Main Loop
for (i = 1; i <= rows; i++) {
table += "<tr>\n"

// TD Loop
for (t = 1; t <= cols; t++) {
table += "<td width=\"" + tdwidth + "\" align=\"" + tdalign + "\" onMouseOver=\"" + onMouseOver + "\" onMouseOut=\"" + onMouseOut + "\"><a href=\"" + url + "\">\n"
table += "<font color=\"" + textcolor + "\">\n"
table += " Link " + i +" \n"
table += "</td>\n"
}

table += "</tr>\n\n"
}
Jona
03-25-2003, 04:36 PM
document.form is not acceptible. Change the name of your form to something else. Or use document.forms[0] if you only have one form on the page.
starrwriter
03-25-2003, 06:09 PM
Originally posted by Jona
document.form is not acceptible. Change the name of your form to something else. Or use document.forms[0] if you only have one form on the page.

document.form works fine with the existing navbar generator. I was asking how to write a function addlink() to improve the generator.
Jona
03-25-2003, 07:30 PM
Here you go. I got it all figured out. :)

<html><head>
<script>
function process() {
var rows = parseInt(document.form.rows.value)
var cols = parseInt(document.form.cols.value)
var width = parseInt(document.form.width.value)
var border = parseInt(document.form.border.value)
var bordercolor = document.form.bordercolor.value
var cellpadding = parseInt(document.form.cellpadding.value)
var align = document.form.align.value
var tdalign = document.form.tdalign.value
var MouseOver = document.form.MouseOver.value
var MouseOut = document.form.MouseOut.value
var url = document.form.url.value
var textcolor = document.form.textcolor.value
var bgcolor = document.form.bgcolor.value

var table = "<table width='"+width+"'\n"
table += " border='"+border+"'\n"
table += " bordercolor='"+bordercolor+"'\n"
table += " cellpadding='"+cellpadding+"'\n"
table += " cellspacing=0\n"
table += " align='"+align+"'\n"
table += " bgColor='"+bgcolor+"'>\n"
var tdwidth = width * cols
for (i = 1; i <= rows; i++) {
table += "<tr>\n"
for (t = 1; t <= cols; t++) {
table += "<td width='"+tdwidth+"' align='"+tdalign+"' onMouseOver=\"this.style.backgroundColor=\'"+MouseOver+"\'\" onMouseOut=\"this.style.backgroundColor=\'"+MouseOut+"\'\"><a href='"+url+"'>\n"
table += "<font color='"+textcolor+"'>\n"
table += "Link"+i+"\n"
table += "</font></a></td>\n"
}
table += "</tr>\n\n"
}
table += "</table>"
divy.innerHTML=table
}
</script></head>
<body>
<form name="form">
<input type=text name=rows value="rows">
<input type=text name=cols value="cols">
<input type=text name=width value="width">
<input type=text name=border value="border">
<input type=text name=bordercolor value="bordercolor">
<input type=text name=cellpadding value="cellpadding">
<input type=text name=align value="align">
<input type=text name=tdalign value="tdalign">
<input type=text name=MouseOver value="MouseOver">
<input type=text name=MouseOut value="MouseOut">
<input type=text name=url value="url">
<input type=text name=textcolor value="textcolor">
<input type=text name=bgcolor value="bgcolor">
<input type=button onClick="process();alert(divy.innerHTML)" value="Process"><br><br>
<div id="divy"></div>
starrwriter
03-25-2003, 08:18 PM
[QUOTE]Originally posted by Jona
[B]Here you go. I got it all figured out. :)

Jona,
Thanks for trying. Your script is simpler and more elegant than mine, but it produces exactly the same result:
Link 1
Link 2
Link 3 (all with the same URL)

I want the form user to input separate link names and link URLs for each table cell. As I see it, I have to write some sort of function addlink () to replace these lines of the script:
table +=<a href='"+url+"'>\n"
table += "Link"+i+"\n"
But I don't know how to do it.
Jona
03-25-2003, 09:56 PM
You do not necessarily have to create another function to do this. The thing is, you're going to have to have a lot of text fields for them to put the URLs and names of the links in... You can try using the eval() method.