How can I make a table move in JavaScript?

Posted by Michal Skrzypek on Stack Overflow See other posts from Stack Overflow or by Michal Skrzypek
Published on 2013-06-28T07:43:07Z Indexed on 2013/06/29 4:21 UTC
Read the original article Hit count: 128

Filed under:
|
|

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;">&nbsp;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;">&nbsp;&nbsp;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.

© Stack Overflow or respective owner

Related posts about JavaScript

Related posts about html