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 8 of 8
  1. #1
    New Coder
    Join Date
    May 2003
    Location
    England
    Posts
    17
    Thanks
    0
    Thanked 0 Times in 0 Posts

    use generated JS variable in HTML table dimensions

    I would like to set a cell width within a table to a percentage.

    As an example of how I'm generating the figure I want to use:

    var barperc=Math.round(100*(22/30))

    This 'returns' a value of 76.

    Now the question.
    How do I use that in HTML to set the width ? <td width="?????%">

    Or how do I reference it. I don't understand the terminology in tutorials where it says "this returns a value of 76..." If it does, where has it returned it to ?

    Thanks in advance for any help you can give me.

    I searched for help on this first, but even with a detailed search it gave me over 1000 posts and after reading the first 100 I hadn't found anything.

  • #2
    Master Coder
    Join Date
    Feb 2003
    Location
    UmeŚ, Sweden
    Posts
    5,575
    Thanks
    0
    Thanked 83 Times in 74 Posts
    Well, the word "return" is used to describe whatever outcome you have from a JavaScript expression. You see, a function takes input in the form of arguments, processes those arguments or variables otherwise available to it, possibly gives cause to side effects, and sends a return value to the caller. Some examples:

    alert('text') // This function (alert) takes the input (the argument 'text'), gives cause to a side effect (an alert box containing the argument sent to it) and returns without a value.

    var t=parseInt('11',16) // This function (parseInt) takes the input (arguments '11' and 16), causes no side effects, and returns the value 17, which is stored in the variable t.

    var t=17; // This is equivalent to the last statement. since the return value can be said to 'replace' the function in the context it's put in.






    That's as good as I can explain what a return value is without getting deeper into the way custom functions work in JavaScript.

    As for getting the value into the html, you must do this from JavaScript. Thus, you can either use the DOM to change the value, use the DOM to set the CSS, or write the tag from the script. Writing the tag from the script needs to be done while the page is loading, while the DOM needs the document to be already loaded.
    liorean <[lio@wg]>
    Articles: RegEx evolt wsabstract , Named Arguments
    Useful Threads: JavaScript Docs & Refs, FAQ - HTML & CSS Docs, FAQ - XML Doc & Refs
    Moz: JavaScript DOM Interfaces MSDN: JScript DHTML KDE: KJS KHTML Opera: Standards

  • #3
    New Coder
    Join Date
    May 2003
    Location
    England
    Posts
    17
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thanks for the response liorean.

    I used a document.write to test to see if it had done the equation, which it had.
    I'm not too bothered about the 'return' side of it, just that I want to know how I can access it to use it within the HTML.

    Leaving DOM aside (that's something I need to read up on within this site) I see that you said I could use CSS.

    What do I need to write for that ? And would that be within the <style> tags ?

    Would the table cell then be written as <td width="{barperc}%"> ?

  • #4
    Master Coder
    Join Date
    Feb 2003
    Location
    UmeŚ, Sweden
    Posts
    5,575
    Thanks
    0
    Thanked 83 Times in 74 Posts
    No, but you can do like this:

    <td id="yourcell">


    and then in the script:
    document.getElementById('yourcell').style.width=widthvariable+'%'; // set the width style

    However, then you might as well set the width like this:

    document.getElementById('yourcell').width=widthvariable+'%'; // set the width attribute
    liorean <[lio@wg]>
    Articles: RegEx evolt wsabstract , Named Arguments
    Useful Threads: JavaScript Docs & Refs, FAQ - HTML & CSS Docs, FAQ - XML Doc & Refs
    Moz: JavaScript DOM Interfaces MSDN: JScript DHTML KDE: KJS KHTML Opera: Standards

  • #5
    New Coder
    Join Date
    May 2003
    Location
    England
    Posts
    17
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thanks, I've tried it both ways, but I'm not placing the code in the right place I'm sure of it. I don't know the heirachy of what comes first and where.

    "and then in the script", which script ? and where in whatever script ?.

    Does either of the two lines go in the same script as the var barperc line I wrote.

    This is what I tried:

    var widthvariable=Math.round(100*(22/30))
    document.getElementById('yourcell').width=widthvariable+'%'; // set the width attribute

  • #6
    Master Coder
    Join Date
    Feb 2003
    Location
    UmeŚ, Sweden
    Posts
    5,575
    Thanks
    0
    Thanked 83 Times in 74 Posts
    Well, you need to place the script either after the td in the html source, in the onload attribute od the body tag, or wrap it like this:


    window.onload=function(){
    var widthvariable=Math.round(100*(22/30))
    document.getElementById('yourcell').width=widthvariable+'%'; // set the width attribute
    }
    liorean <[lio@wg]>
    Articles: RegEx evolt wsabstract , Named Arguments
    Useful Threads: JavaScript Docs & Refs, FAQ - HTML & CSS Docs, FAQ - XML Doc & Refs
    Moz: JavaScript DOM Interfaces MSDN: JScript DHTML KDE: KJS KHTML Opera: Standards

  • #7
    New Coder
    Join Date
    May 2003
    Location
    England
    Posts
    17
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I knew you'd know where I was coming from, and I don't even know that !

    It works perfectly.

    Thank you very much indeed.

  • #8
    Master Coder
    Join Date
    Feb 2003
    Location
    UmeŚ, Sweden
    Posts
    5,575
    Thanks
    0
    Thanked 83 Times in 74 Posts
    I'm here to help.


  •  

    Posting Permissions

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