asked on

Slide in Javascript

Hi,

I wanted to move the table based on the input given in left and top columns. But not able to accomplish it.
Can u please help me with this.

Thanks,
Sana

function move(){
    		var x=this.document.getElementsByTagName('tbody')[0].style;
    		if(parseInt(x.left)<600){
    			x.left=parseInt(x.left)+5+'px';
    			setTimeout('move()',20);
    		}
    	}
function changeAll(whichProp,toWhat){
    		eval("this.document.getElementsByTagName('table')[0].style."+whichProp+"=toWhat");
    	}	
		
	<hr/>
	Move<br/>
	Left: <input type="text"  onchange="changeAll('left',this.value)"/><br/>
	Top: <input type="text"  onchange="changeAll('top',this.value)"/><br/>
	<input type="button" value="move it!" onclick="move()"/>
	<hr/>

<table border="3" style="position:absolute; top:30px; left:310px;">
        <tr> 
                <td>text</td><td>text</td> 
        </tr> 
        <tr> 
                <td>text</td><td>text</td> 
        </tr> 
</table>

Open in new window

ASKER CERTIFIED SOLUTION

Amandeep Singh Bhullar

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

sana2009fall

ASKER

Hi,

It works when I am working individually. how do I integrate it with this code ??
The table should move based on the inputs specified in left , top only when the move it button is clicked,

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
	<meta http-equiv="content-type" content="text/html; charset=utf-8" />
	
<!--feel free to add any attributes you wish. You aren't allowed to add 
any tags... Remember you need to get this to work in FireFox (don't worry about IE)--> 

	<title>practical-JS</title>
<script>
function $$$(input) {
        _ele = document.getElementsByName(input);
        if(_ele.length==1) {
                return _ele[0];
        } else {
                return _ele;
        }
}

function tdOnClick(that) {
        _text = $$$("textInput").value;
        
        _radioColors = $$$("radio1");
        for(i=0; i<_radioColors.length; i++) {
                if(_radioColors[i].checked) {
                        _color = _radioColors[i].value;
                        break;
                }
        }
        
        that.firstChild.nodeValue = _text;
        that.style.color = _color;
}
</script>
<form> 
        <input name="textInput" type="text" value="Something"/><br/> 
        <br/> 
        Color:<br/> 
        Red<input type="radio" name="radio1" value="Red" checked/><br/> 
        Blue<input type="radio" name="radio1" value="Blue"/><br/> 
        Green<input type="radio" name="radio1" value="Green"/><br/> 
</form> 
<table border="3" style="position:absolute; top:30px; left:310px;">
        <tr> 
                <td onclick="tdOnClick(this);">text</td><td onclick="tdOnClick(this);">text</td> 
        </tr> 
        <tr> 
                <td onclick="tdOnClick(this);">text</td><td onclick="tdOnClick(this);">text</td> 
        </tr> 
</table>
</body>
</html>

Open in new window