How can I make a table move in JavaScript?
- by Michal Skrzypek
My problem is that I was creating a simple website the other day and I needed the content to move according to the button pressed.
I managed to do so in CSS3, but the solution did not work for IE whatsoever. Therefore I would like to ask if there is a simple solution for that in js? I don't know js at all but I heard what I need is much easier in js than in css.
Details:
http://i42.tinypic.com/6yl4ia.png
I need the table in the picture to move according to the buttons (which are labels to be exact).
The visible area is a div.
Here's the relevant code (without animation as I was not satisfied with it):
body {
background-color: #fff;
color: #fff;
padding:0px;
}
#bodywrapperfixed {
width: 1248px;
margin: 0px auto;
position: relative;
overflow: hidden;
height: 730px;
}
#bodywrapper {
display:block;
background-color: #fff;
width: 1248px;
color: #59595B;
padding-top:50px;
font-family: 'Roboto', sans-serif;
position: absolute;
top:0px;
left:0px;
z-index:1;
font-size: 60px;
height:730px;
}
#bodywrapper img {
width:400px;
padding:15px 0px 20px 0px;
}
#texten {
font-family: 'Roboto', sans-serif;
font-size: 35px;
padding:5px;
}
#textpl {
font-family: 'Roboto', sans-serif;
font-size: 25px;
padding:5px;
}
table#linki {
width: 110px;
border: none;
margin-top:15px;
}
label {
display: block;
height: 54px;
width: 54px;
color:#fff;
font-family: 'Roboto', sans-serif;
font-weight: 300;
font-size: 35px;
background-color: #117D10;
text-align: center;
padding:23px;
}
label:hover {
background-color: #004F00;
cursor: pointer;
}
input#pl {
position: absolute;
top: -9999px;
left: -9999px;
}
input#en {
position: absolute;
top: -9999px;
left: -9999px;
}
and the relevant HTML:
<div id="bodywrapperfixed">
<div id="bodywrapperfloat">
<table id="ramka">
<tr>
<td>random text</td>
<td><div id="bodywrapper">
<center>
<div id="texten"><div style="font-weight:300; display:inline-block;">Introducing the all-in-one entertainment system.</div><div style="font-weight:500; display:inline-block;"> For everyone.</div></div>
<div id="textpl"><div style="font-weight:300; display:inline-block;">Przedstawiamy zintegrowany system rozrywki.</div><div style="font-weight:500; display:inline-block;"> Dla wszystkich.</div></div>
<img src="imgs/xboxone.png">
<div id="texten"><div style="font-weight:300; display:inline-block;">Choose your version of the story:</div></div>
<div id="textpl"><div style="font-weight:300; display:inline-block;">Wybierz swoja wersja opowiesci:</div></div>
<table id="linki">
<tr>
<td><label for="en">en</label><input id="en" type="checkbox"></td>
<td><label for="pl">pl</label><input id="pl" type="checkbox"></td>
</tr></table>
</center>
</div></td>
<td>random text</td>
</tr>
</table>
</div>
</div>
Here's what it looks like:
http://ingame.lh.pl/thinkone/
Please help me.
