1. Computer problem? Tech Support Guy is completely free -- paid for by advertisers and donations. Click here to join today! If you're new to Tech Support Guy, we highly recommend that you visit our Guide for New Members.

A function working on table, maybe is javascript?

Discussion in 'Software Development' started by willowyang, Sep 23, 2003.

Thread Status:
Not open for further replies.
Advertisement
  1. willowyang

    willowyang Thread Starter

    Joined:
    Apr 28, 2001
    Messages:
    202
    I saw it at some forum, but can't find this anymore. however, here is how it works: in each td of the table only one line of the message was shown. for those messages longer than one line, when you move your mouse to that td, the height of the td will automaticlly increased so you can view the whole messages. the width of the td still keep the same. Can anyone please let me know if this is a javascript and where I can find the example of this? Thanks.
     
  2. Shadow2531

    Shadow2531

    Joined:
    Apr 30, 2001
    Messages:
    2,636
    code deleted

    Hover over td1 and the height will increase. The height of the others will have to increase too of course.

    That should give you enough info on how to do the rest.

    Note: a cell's height will increase to show all the text that is in the cell unless you have it set to nowrap=nowrap, which would cause the width to change.

    It would be better to use a div with an overflow set to "hidden" and onmouseover, set the overflow to "auto" or "scroll".
     
  3. willowyang

    willowyang Thread Starter

    Joined:
    Apr 28, 2001
    Messages:
    202
    Thank you for the code. but this one works for one tr only. It won't work if I have more than one tr need to increase the height to display the whole message. and also, the increased height is settled in this code, it won't increase the properly height by detect the length of the message. so it's really limited to use. see, if i have one tr with 1 line message, another tr with 2 line message, 3rd tr with 3 line message, this code can't work for this suitation.
     
  4. Shadow2531

    Shadow2531

    Joined:
    Apr 30, 2001
    Messages:
    2,636
    You can set it to change height of multiple or all trs or tds.

    You can also get fancy and determine the length of the innerhtml of a td, and set the size accordingly.

    I reread your post, and I think I know what you mean.

    It's probably at dynamicdrive.com, but I see if I can make a better example.
     
  5. Shadow2531

    Shadow2531

    Joined:
    Apr 30, 2001
    Messages:
    2,636
    Here's how I would do it.
    (code deleted)

    That will of course have to be tweaked to your liking.

    You can make the divs go together to look like a table as you can see.
    You can pass the element id through the onmouseover and onmouseout to the functions so it will work for each div.

    You can also have separate functions for each div and have a static height that is set in the script, or you can pass different lengths to the functions.

    If you show us an existing layout, we can make show you a better example.

    Is the content of the cells going to be static or dynamic?

    If you want to set other attributes, you can use this method.
    document.getElementById('fire').setAttribute('style','height:'+ x +'px');

    (IE will display a space between the first 2 divs. Opera and Gecko-based browsers will not.

    Edit: The code in this reply was edited a few times, so recheck it.
     
  6. willowyang

    willowyang Thread Starter

    Joined:
    Apr 28, 2001
    Messages:
    202
    The code doesn't work. Here is the layout I want this work to, the width of the table must be settled, but the height can be increased by detect the line of the message in td:

    <html>

    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
    <meta name="GENERATOR" content="Microsoft FrontPage 4.0">
    <meta name="ProgId" content="FrontPage.Editor.Document">
    <title>New Page 1</title>
    </head>

    <body>

    <table border="0" cellspacing="0" cellpadding="0" width="440" height="100">

    <tr>
    <td width="105" height="27" style="border-top: 1 solid #A59E77; padding-left: 3">
    123 Posters</td>
    <td width="328" height="27" style="border-left: 1 solid #A59E77; border-top: 1 solid #A59E77; solid #A59E77; padding-left: 3">
    Great music and movie posters. bababababababababababaaabaabababababababb
    <p>babababababababababababa</p>
    </td>
    </tr>

    <tr>
    <td width="105" height="27" style="border-top: 1 solid #A59E77; padding-left: 3">
    1st In Fashion</td>

    <td width="328" height="27" style="border-left: 1 solid #A59E77; border-top: 1 solid #A59E77; padding-left: 3">
    Shop discount Christian Dior, Gucci, Fendi and more top designer...bababababababa</td>
    </tr>

    <tr>
    <td width="105" height="27" style="border-top: 1 solid #A59E77; padding-left: 3">
    4 Cool Bags</td>
    <td width="328" height="27" style="border-left: 1 solid #A59E77; border-top: 1 solid #A59E77; padding-left: 3">
    Designer handbags and wallets at discount prices.</td>
    </tr>

    </table>

    </body>

    </html>

    Thank you very much! I searched at dynamicdrive.com and hotscripts.com but didn't find any silmilar code.
     
  7. Shadow2531

    Shadow2531

    Joined:
    Apr 30, 2001
    Messages:
    2,636
    "The code doesn't work"

    What browser are you using?

    Anyways, I'll check out your layout.

    Also you can try help at www.hardforums.com .
     
  8. willowyang

    willowyang Thread Starter

    Joined:
    Apr 28, 2001
    Messages:
    202
    My browser is IE 6.0.
     
  9. Shadow2531

    Shadow2531

    Joined:
    Apr 30, 2001
    Messages:
    2,636
    I can make a new layout to look like yours, but it's going to use the same method of changing the height and if it doesn't work in your browser, then there would be no point.

    I have a few other ideas, but they might only work in IE. Not sure yet.



    The code that I posted above works in IE6sp1, Opera 7.20, Firebird .61, Mozilla 1.5rc1, and Netscape 7.1.
     
  10. Shadow2531

    Shadow2531

    Joined:
    Apr 30, 2001
    Messages:
    2,636
    OK, my fault. I forgot to post the code preformatted.

    one second.
     
  11. Shadow2531

    Shadow2531

    Joined:
    Apr 30, 2001
    Messages:
    2,636
    Ok, the forum was adding spaces to the onmouseover and onmouseout attributes no matter how I posted, so I just attached the code.

    Try it again.
     

    Attached Files:

  12. willowyang

    willowyang Thread Starter

    Joined:
    Apr 28, 2001
    Messages:
    202
    How can I set it to change height of all trs or tds? Thank you.
     
  13. Shadow2531

    Shadow2531

    Joined:
    Apr 30, 2001
    Messages:
    2,636
    I had to rush out. I'll make an example.
     
  14. Shadow2531

    Shadow2531

    Joined:
    Apr 30, 2001
    Messages:
    2,636
    Attached above in post #11 is a newer example that does all three of the divs.

    Look at the onmousover, onmouseout, and id attributes for each.

    Do you see the pattern?

    For each new div, you have, just follow the pattern.

    Same goes with the class attribute and it's corresponding class in the inline style sheet.

    If a div, does not have to be resized, don't set the onmouseover, onmouseout, and id attributes for it.

    If the contents of each div are going to be static/fixed and you want to set a certain height that you see fit, you can add a variable to the function and pass values to it with the onmouseover and onmouseout attributes.

    The function is currently setup so that the height the div changes to, is determined by the length of the content in that div times 1.5

    So I can change the script, so you can set each div to change to whatever height you want.

    That's up to you, just let me know.

    Do you want this to work only in IE6 or in as many browsers as possible?


    I'll try a table example.
     
  15. Shadow2531

    Shadow2531

    Joined:
    Apr 30, 2001
    Messages:
    2,636
    Attached is exactly what you want. It uses your layout.

    I only did the first one. Let me know if you don't know how to do the rest of them.

    The idea is, you know how much of the content will fit on 1 line, so that's all you put in between the td tags. Then you replace it with all of the content with onmouseover, then revert to the original with onmouseout.

    The height of the TDs, will be dertimined by the content, which is how it's supposed to be.

    It's not the most efficient way ever, but it should work for you.
     

    Attached Files:

  16. Sponsor

As Seen On
As Seen On...

Welcome to Tech Support Guy!

Are you looking for the solution to your computer problem? Join our site today to ask your question. This site is completely free -- paid for by advertisers and donations.

If you're not already familiar with forums, watch our Welcome Guide to get started.

Join over 733,556 other people just like you!

Loading...
Thread Status:
Not open for further replies.

Short URL to this thread: https://techguy.org/166952

  1. This site uses cookies to help personalise content, tailor your experience and to keep you logged in if you register.
    By continuing to use this site, you are consenting to our use of cookies.
    Dismiss Notice