SitePoint Sponsor

User Tag List

Results 1 to 13 of 13
  1. #1
    Get my greedy down dotJoon's Avatar
    Join Date
    Apr 2003
    Location
    daejeon, South Korea
    Posts
    2,223
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)

    be shown and hidden with a mouse

    Code:
    <script type='text/javascript'>
    window.onload = function()
    {
      displayToggle('trg1', 'tgt1');
    }
    function displayToggle(triggerId, targetId)
    {
      var t = document.getElementById(triggerId);
      t.onmouseover = function() {
        document.getElementById(targetId).style.display = 'block';
      };
      t.onmouseout = function() {
        document.getElementById(targetId).style.display = 'none';
      };
    }
    </script>
    
    
    <style>
    table, th, td { margin: 0; padding: 0; }
    table { border-collapse: collapse; border-spacing: 0; }
    table.main td { position: relative; } table.main table { position: absolute; z-index: 10; color: red; font-weight: bold; }
    </style>
    
    <table class="main">
    <tr>
      <td id='trg1' style="width:100px;background-color:pink">
    
    <table id='tgt1' style='width:100px;background-color:yellow;display:none'>
       <tr>
      <td bgcolor='yellow'>top1</td>
       </tr>
    </table>
    bottom1
      </td>
    </tr>
    </table>
    The code above shows the text "bottom1" in the pink background color.

    If you put your mouse on to the text "bottom1", the text will be changed to another text "top1" in yellow backgound color.

    I can make just one table which can be shown and hidden with he code above.

    How can I make it more than 2 times to be shown and hidden each by mouse on ?

  2. #2
    Non-Member Kalon's Avatar
    Join Date
    Aug 2010
    Location
    At my computer
    Posts
    2,012
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    not sure what you mean by more than 2 times but I think you mean having more than 2 cells with the text toggling.

    perhaps something like this

    Code:
     
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml11/DTD/xht...ansitional.dtd">
    <html xmlns = "http://www.w3.org/1999/xhtml">
        <head>
            <title></title>
            <style type="text/css">
    
                td {
                    background-color: pink;
                    color: black
                }
     
            </style>
            <script type='text/javascript'>
    
                window.onload = function() {
                    var tdO = document.getElementById('main').getElementsByTagName('td');
                    //assign the onmouseover event handler
                    for(var i=0; i < tdO.length; i++) {
                           tdO[i].onmouseover=function() {
                            this.style.backgroundColor = 'yellow';
                            this.style.color = 'red';
                            this.innerHTML = (this.innerHTML == 'bottom')? 'top' : 'bottom';
                        }
                    }
    
                    //assign the onmouseout event handler
                    for(var i=0; i < tdO.length; i++) {
                            tdO[i].onmouseout=function() {
                            this.style.backgroundColor = '';
                            this.style.color = '';
                            this.innerHTML = (this.innerHTML == 'bottom')? 'top' : 'bottom';
                        }
                    }
                }
     
            </script>
        </head>
        <body>
    
            <table id="main" cellspacing="5">
                <tr>
                    <td>bottom</td>
                </tr>
                <tr>
                    <td>bottom</td>
                </tr>
                <tr>
                    <td>bottom</td>
                </tr>
                <tr>
                    <td>bottom</td>
                </tr>
            </table>
    
        </body>
    </html>

  3. #3
    Get my greedy down dotJoon's Avatar
    Join Date
    Apr 2003
    Location
    daejeon, South Korea
    Posts
    2,223
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Kalon View Post
    not sure what you mean by more than 2 times but I think you mean having more than 2 cells with the text toggling.
    Your code works fine.
    But I can't change the contents of each cell.


    An example code for my target would be like the following.
    Code:
            <table id="main" cellspacing="5">
                <tr>
                    <td>bottom1</td>
                </tr>
                <tr>
                    <td>my bottom2</td>
                </tr>
                <tr>
                    <td>bottom text 3</td>
                </tr>
                <tr>
                    <td>bottom contents4</td>
                </tr>
            </table>
    
            <table id="main" cellspacing="5">
                <tr>
                    <td>top1</td>
                </tr>
                <tr>
                    <td>my top2</td>
                </tr>
                <tr>
                    <td>top text 3</td>
                </tr>
                <tr>
                    <td>top contents4</td>
                </tr>
            </table>
    My target result works like the following.

    Code:
    When a user puts his/her mouse on the text "bottom1", 
    the text will be changed to "top1" 
    
    
    When a user puts his/her mouse on the text "my bottom2", 
    the text will be changed to "my top2" 
    
    
    When a user puts his/her mouse on the text "bottom text3", 
    the text will be changed to "top text 3".
    
    
    When a user puts his/her mouse on the text "bottom contents4", 
    the text will be changed to "top contents4".

  4. #4
    Non-Member Kalon's Avatar
    Join Date
    Aug 2010
    Location
    At my computer
    Posts
    2,012
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    this demo changes the text in each cell, but you would need to give more details on the exact criteria you want to use to changr the text.

    eg..if bottom appeared more than once in a cell, do you want just the first, last or all occurrences of bottom to be changed to top.

    Code:
     
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml11/DTD/xht...ansitional.dtd">
    <html xmlns = "http://www.w3.org/1999/xhtml">
        <head>
            <title></title>
            <style type="text/css">
                td {
                    background-color: pink;
                    color: black
                }
            </style>
            <script type='text/javascript'>
                window.onload = function() {
                    var tdO = document.getElementById('main').getElementsByTagName('td');
                    //assign the properties to the td's'
                    for(var i=0; i < tdO.length; i++) {
                        tdO[i].num = i+1;
                        tdO[i].text = 'bottom';
                        tdO[i].innerHTML = tdO[i].text + ' '+tdO[i].num;
                        //assign the onmouseover event handler
                        tdO[i].onmouseover=function() {
                            this.style.backgroundColor = 'yellow';
                            this.style.color = 'red';
                            this.text = (this.text == 'bottom')? 'top' : 'bottom';
                            this.innerHTML = this.text + ' '+this.num;
                        }
                        //assign the onmouseout event handler
                        tdO[i].onmouseout=function() {
                            this.style.backgroundColor = '';
                            this.style.color = '';
                            this.text = (this.text == 'bottom')? 'top' : 'bottom';
                            this.innerHTML = this.text + ' '+this.num;
                        }
                    }            
                }
            </script>
        </head>
        <body>
            <table id="main" cellspacing="5">
                <tr>
                    <td></td>
                </tr>
                <tr>
                    <td></td>
                </tr>
                <tr>
                    <td></td>
                </tr>
                <tr>
                    <td></td>
                </tr>
            </table>
        </body>
    </html>

  5. #5
    Get my greedy down dotJoon's Avatar
    Join Date
    Apr 2003
    Location
    daejeon, South Korea
    Posts
    2,223
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Kalon View Post
    do you want just the first, last or all occurrences of bottom to be changed to top.
    If you mean that putting a mouse of one of 4 bottoms changes all cells to be shown 4 tops, I would say "No".

    I want that putting a mouse on one of 4 bottoms changes the cell to be shown top.

    your code below works fine as I expected except a problem.
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml11/DTD/xht...ansitional.dtd">
    <html xmlns = "http://www.w3.org/1999/xhtml">
        <head>
            <title></title>
            <style type="text/css">
                td {
                    background-color: pink;
                    color: black
                }
            </style>
            <script type='text/javascript'>
                window.onload = function() {
                    var tdO = document.getElementById('main').getElementsByTagName('td');
                    //assign the properties to the td's'
                    for(var i=0; i < tdO.length; i++) {
                        tdO[i].num = i+1;
                        tdO[i].text = 'bottom';
                        tdO[i].innerHTML = tdO[i].text + ' '+tdO[i].num;
                        //assign the onmouseover event handler
                        tdO[i].onmouseover=function() {
                            this.style.backgroundColor = 'yellow';
                            this.style.color = 'red';
                            this.text = (this.text == 'bottom')? 'top' : 'bottom';
                            this.innerHTML = this.text + ' '+this.num;
                        }
                        //assign the onmouseout event handler
                        tdO[i].onmouseout=function() {
                            this.style.backgroundColor = '';
                            this.style.color = '';
                            this.text = (this.text == 'bottom')? 'top' : 'bottom';
                            this.innerHTML = this.text + ' '+this.num;
                        }
                    }            
                }
            </script>
        </head>
        <body>
            <table id="main" cellspacing="5">
                <tr>
                    <td></td>
                </tr>
                <tr>
                    <td></td>
                </tr>
                <tr>
                    <td></td>
                </tr>
                <tr>
                    <td></td>
                </tr>
            </table>
        </body>
    </html>
    Although your code works fine as I expected, I can't change the contents of the each cell dynamically.

    Your code can change like the following.
    It can change only the text from "bottom" to "top".

    (1) bottom1 -> top1
    (2) bottom2 -> top2
    (3) bottom3 -> top3
    (4) bottom4 -> top4

    I want to change like the following.

    (1) Hi, John -> John is from Amefica.

    (2) Hello, Mary -> Mary get up early in the morning

    (3) Jack is coming there -> He is my son.

    (4) Ted is a student. -> He want to be a doctor.

  6. #6
    Non-Member Kalon's Avatar
    Join Date
    Aug 2010
    Location
    At my computer
    Posts
    2,012
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    ok, it's like squeezing blood out of a stone but I think we are getting there

    Code:
     
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml11/DTD/xht...ansitional.dtd">
    <html xmlns = "http://www.w3.org/1999/xhtml">
        <head>
            <title></title>
            <style type="text/css">
                td {
                    background-color: pink;
                    color: black;
                    width: 300px
                }
            </style>
            <script type='text/javascript'>
     
                //set up text array
                var tdText= [
                  ['Hi, John','John is from America'],
                  ['Hello, Mary','Mary get up early in the morning'],
                  ['Jack is coming there','He is my son'],
                  ['Ted is a student','He want to be a doctor']
                ];
     
                window.onload = function() {
                    var tdO = document.getElementById('main').getElementsByTagName('td');
                    //assign the properties to the td's'
                    for(var i=0; i < tdO.length; i++) {
                        tdO[i].num = i;
                        tdO[i].innerHTML = tdText[i][0];
                        //assign the onmouseover event handler
                        tdO[i].onmouseover=function() {
                            this.style.backgroundColor = 'yellow';
                            this.style.color = 'red';
                            this.innerHTML = tdText[this.num][1];
                        }
                        //assign the onmouseout event handler
                        tdO[i].onmouseout=function() {
                            this.style.backgroundColor = '';
                            this.style.color = '';
                            this.innerHTML = tdText[this.num][0];
                        }
                    }            
                }
            </script>
        </head>
        <body>
            <table id="main" cellspacing="5">
                <tr>
                    <td></td>
                </tr>
                <tr>
                    <td></td>
                </tr>
                <tr>
                    <td></td>
                </tr>
                <tr>
                    <td></td>
                </tr>
            </table>
        </body>
    </html>

  7. #7
    Get my greedy down dotJoon's Avatar
    Join Date
    Apr 2003
    Location
    daejeon, South Korea
    Posts
    2,223
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Kalon View Post
    ok, it's like squeezing blood out of a stone but I think we are getting there
    Yes, you(we) are getting there. your code works fine. Thank you very much.

    Although I have one more question related to this issue, I don't ask it now because I am afraid that you sqeeze blood out of a stone.

  8. #8
    Non-Member Kalon's Avatar
    Join Date
    Aug 2010
    Location
    At my computer
    Posts
    2,012
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    you're welcome

    you can ask now if you like

    but I'm also working on something else atm so it might be a couple of hours before I will be able to reply, but in the mean time someone else might be able to help.

    these forums are not a 1 to 1 conversation behind closed doors. anyone can view them or try to help.

  9. #9
    Non-Member Kalon's Avatar
    Join Date
    Aug 2010
    Location
    At my computer
    Posts
    2,012
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    ok, I've tweaked this a bit more so that the table is created dynamically according to the number of rows in the tdText array.

    this way, if you add or delete rows of text from the array, you won't have to touch the table's html.

    Code:
     
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml11/DTD/xht...ansitional.dtd">
    <html xmlns = "http://www.w3.org/1999/xhtml">
        <head>
            <title></title>
            <style type="text/css">
                td {
                    background-color: pink;
                    color: black;
                    width: 300px
                }
            </style>
            <script type='text/javascript'>
                //set up text array
                var tdText= [
                    ['Hi, John','John is from Amefica'],
                    ['Hello, Mary','Mary get up early in the morning'],
                    ['Jack is coming there','He is my son'],
                    ['Ted is a student','He want to be a doctor']
                ];
             
                window.onload = function() {
                    var numTexts = tdText.length;
                    //create the table
                    if(numTexts > 0) {
                        var tblO = document.createElement('table'); //create table
                        document.body.appendChild(tblO);    //append table to <body>
                        for(var i=0; i < numTexts; i++) { //create the tr's and td's'
                            var trO = tblO.insertRow(i);
                            var tdO = trO.insertCell(0);
                            tdO.num = i;
                            tdO.innerHTML = tdText[i][0];
                            //assign the onmouseover event handler
                            tdO.onmouseover=function() {
                                this.style.backgroundColor = 'yellow';
                                this.style.color = 'red';
                                this.innerHTML = tdText[this.num][1];
                            }
                            //assign the onmouseout event handler
                            tdO.onmouseout=function() {
                                this.style.backgroundColor = '';
                                this.style.color = '';
                                this.innerHTML = tdText[this.num][0];
                            }
                        }
                    }
                }
            </script>
        </head>
        <body>
            
        </body>
    </html>

  10. #10
    Get my greedy down dotJoon's Avatar
    Join Date
    Apr 2003
    Location
    daejeon, South Korea
    Posts
    2,223
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Kalon View Post
    these forums are not a 1 to 1 conversation behind closed doors. anyone can view them or try to help.
    Yes, that's true.
    I might be to get a kind of burden from your do hard work.

    I changed your code a little for simplification like the follow.
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml11/DTD/xht...ansitional.dtd">
    <html xmlns = "http://www.w3.org/1999/xhtml">
        <head>
            <title></title>
            <style type="text/css">
                td {
                    background-color: pink;
                    color: black;
                    width: 300px
                }
            </style>
            <script type='text/javascript'>
     
                //set up text array
                var tdText= [
                  ['john','john in America'],
                  ['Mary','Mary in Europe'],
                  ['Jack','Jack in Asia'],
                    ];
     
                window.onload = function() {
                    var tdO = document.getElementById('main').getElementsByTagName('td');
                    //assign the properties to the td's'
                    for(var i=0; i < tdO.length; i++) {
                        tdO[i].num = i;
                        tdO[i].innerHTML = tdText[i][0];
                        //assign the onmouseover event handler
                        tdO[i].onmouseover=function() {
                            this.style.backgroundColor = 'yellow';
                            this.style.color = 'red';
                            this.innerHTML = tdText[this.num][1];
                        }
                        //assign the onmouseout event handler
                        tdO[i].onmouseout=function() {
                            this.style.backgroundColor = '';
                            this.style.color = '';
                            this.innerHTML = tdText[this.num][0];
                        }
                    }            
                }
            </script>
        </head>
        <body>
            <table id="main" cellspacing="5">
                <tr>
                    <td></td>
                </tr>
                <tr>
                    <td></td>
                </tr>
                <tr>
                    <td></td>
                </tr>
            </table>
        </body>
    </html>
    If I put my mouse on the 1st pink cell, the pink cell changes yellow cell and the text "John" will change to "John in America".

    If I put my mouse on the 2nd pink cell, the pink cell changes yellow cell and the text "Mary" will change to "Mary in Europe".

    If I put my mouse on the 2nd pink cell, the pink cell changes yellow cell and the text "Jack" will change to "Jack in Asia".

    I like to make it like the following.


    If I put my mouse on the 1st pink cell, the pink cell changes yellow cell and the text "John" will change to "John in America".
    At the same time, I click the yellow cell area, it move to america.php.

    If I put my mouse on the 2nd pink cell, the pink cell changes yellow cell and the text "Mary" will change to "Mary in Europe".
    At the same time, I click the yellow cell area, it move to MaryHome.php.

    If I put my mouse on the 2nd pink cell, the pink cell changes yellow cell and the text "Jack" will change to "Jack in Asia".
    At the same time, I click the yellow cell area, it move to Jack.php.

    The url of the links (america.php, MaryHome.php, Jack.php) will be dynamic.

  11. #11
    Non-Member Kalon's Avatar
    Join Date
    Aug 2010
    Location
    At my computer
    Posts
    2,012
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I've added the links to the text array and the html for the table is now created dynamically according to how many rows there are in the text array

    Code:
     
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml11/DTD/xht...ansitional.dtd">
    <html xmlns = "http://www.w3.org/1999/xhtml">
        <head>
            <title></title>
            <style type="text/css">
                td {
                    background-color: pink;
                    color: black;
                    width: 300px
                }
            </style>
            <script type='text/javascript'>
                //set up text array
                var tdText= [
                    ['Hi, John','John is from America','url1'],
                    ['Hello, Mary','Mary get up early in the morning','url2'],
                    ['Jack is coming there','He is my son','url4'],
                    ['Ted is a student','He want to be a doctor','url5']
                ];
                window.onload = function() {
                    var numTexts = tdText.length;
                    //create the table
                    if(numTexts > 0) {
                        var tblO = document.createElement('table'); //create table
                        document.body.appendChild(tblO);    //append table to <body>
                        for(var i=0; i < numTexts; i++) { //create the tr's and td's'
                            var trO = tblO.insertRow(i);
                            var tdO = trO.insertCell(0);
                            tdO.num = i;
                            aO = document.createElement('a'); //create a link
                            aO.href = tdText[i][2];
                            aTxtO = document.createTextNode(tdText[i][0]);
                            aO.appendChild(aTxtO);
                            tdO.appendChild(aO);
                            //assign the onmouseover event handler
                            tdO.onmouseover=function() {
                                this.style.backgroundColor = 'yellow';
                                this.style.color = 'red';
                                this.getElementsByTagName('a')[0].innerHTML = tdText[this.num][1];
                            }
                            //assign the onmouseout event handler
                            tdO.onmouseout=function() {
                                this.style.backgroundColor = '';
                                this.style.color = '';
                                this.getElementsByTagName('a')[0].innerHTML = tdText[this.num][0];
                            }
                        }
                    }
                }
            </script>
        </head>
        <body>
    
            <h3>Dynamically Created Table</h3>
    
        </body>
    </html>

  12. #12
    Get my greedy down dotJoon's Avatar
    Join Date
    Apr 2003
    Location
    daejeon, South Korea
    Posts
    2,223
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Kalon View Post
    I've added the links to the text array and the html for the table is now created dynamically according to how many rows there are in the text array
    Yes, it could create the table dynamically.

    The code above works fine when I clicks the text link in the cell instead of the whole cell area itself...

  13. #13
    Non-Member Kalon's Avatar
    Join Date
    Aug 2010
    Location
    At my computer
    Posts
    2,012
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by dotJoon View Post
    The code above works fine when I clicks the text link in the cell instead of the whole cell area itself...
    The whole cell is now a link.

    hint: next time it will be a lot quicker to help you if you state exactly what you want in post #1.

    Code:
     
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml11/DTD/xht...ansitional.dtd">
    <html xmlns = "http://www.w3.org/1999/xhtml">
        <head>
            <title></title>
            <style type="text/css">
                td {
                    background-color: pink;
                    color: black;
                    width: 300px
                }
            </style>
            <script type='text/javascript'>
                //set up text array
                var tdText= [
                    ['Hi, John','John is from Amefica','url1'],
                    ['Hello, Mary','Mary get up early in the morning','url2'],
                    ['Jack is coming there','He is my son','url4'],
                    ['Ted is a student','He want to be a doctor','url5']
                ];
                window.onload = function() {
                    var numTexts = tdText.length;
                    //create the table
                    if(numTexts > 0) {
                        var tblO = document.createElement('table'); //create table
                        document.body.appendChild(tblO);    //append table to <body>
                        for(var i=0; i < numTexts; i++) { //create the tr's and td's'
                            var trO = tblO.insertRow(i);
                            var tdO = trO.insertCell(0);
                            tdO.num = i;
                            aO = document.createElement('a'); //create a link
                            aO.href = tdText[i][2];
                            divO = document.createElement('div'); //create a div to take link across entire cell
                            divO.appendChild(document.createTextNode(tdText[i][0]));
                            aO.appendChild(divO);
                            tdO.appendChild(aO);
                            //assign the onmouseover event handler
                            tdO.onmouseover=function() {
                                this.style.backgroundColor = 'yellow';
                                this.style.color = 'red';
                                this.getElementsByTagName('div')[0].innerHTML = tdText[this.num][1];
                            }
                            //assign the onmouseout event handler
                            tdO.onmouseout=function() {
                                this.style.backgroundColor = '';
                                this.style.color = '';
                                this.getElementsByTagName('div')[0].innerHTML = tdText[this.num][0];
                            }
                        }
                    }
                }
            </script>
        </head>
        <body>
            <h3>Dynamically Created Table</h3>
        </body>
    </html>


Bookmarks

Posting Permissions

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