www.webdeveloper.com
Results 1 to 6 of 6

Thread: navbar generator script

  1. #1
    Join Date
    Feb 2003
    Location
    Honolulu, Hawaii
    Posts
    200

    navbar generator script

    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"
    }

  2. #2
    Join Date
    Jan 2003
    Location
    Texas
    Posts
    10,413
    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.
    Visit Slightly Remarkable to see my portfolio, resumé, and consulting rates.

  3. #3
    Join Date
    Feb 2003
    Location
    Honolulu, Hawaii
    Posts
    200
    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.

  4. #4
    Join Date
    Jan 2003
    Location
    Texas
    Posts
    10,413
    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>
    Visit Slightly Remarkable to see my portfolio, resumé, and consulting rates.

  5. #5
    Join Date
    Feb 2003
    Location
    Honolulu, Hawaii
    Posts
    200
    [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.

  6. #6
    Join Date
    Jan 2003
    Location
    Texas
    Posts
    10,413
    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.
    Visit Slightly Remarkable to see my portfolio, resumé, and consulting rates.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles