Jquery .scrollTop() and .scrollLeft() on $(document).ready() not working
I'm having a problem with scrollTop() and scrollLeft() on $(document).ready() I want to to move to centre square on load. I wrote this code, but its not working.
Here is my code:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<script>
$(document).ready(function () {
cur_window_height = $(window).height();
cur_window_width = $(window).width();
full_width = cur_window_width * 3;
full_height = cur_window_height * 3;
$('body').css({ 'width': full_width, 'heigth': full_height });
$('#view_table').css({ 'width': full_width, 'height': full_height });
$('#cur').scrollTop(cur_window_height);
$('#cur').scrollLeft(cur_window_width);
});
</script>
<style>
#current_active {
background-color: #CCC;
}
#view_table {
overflow: hidden;
height: 800px;
}
</style>
</head>
<body>
<table border="1px" id="view_table">
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td id="cur">here is center</td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
</body>
</html>
This code not working. What I did wrong?
Thanks a lot.
Answer
consider this jsfiddle
you can set html, body, table with CSS % width and heights
then as @PalashMondal pointed out set scrollTop and scrollLeft on the html/body elements
|<html> 100% W&H ------------|
|<body> 300% W&H -------------------------------------------------------------|
|<table id="view_table"> 100% W&H---------------------------------------------|
| cell 1/3 W&H | cell 1/3 W&H | cell 1/3 W&H |
|----------------------------|------------------------|-----------------------|
| cell 1/3 W&H | cell 1/3 W&H | cell 1/3 W&H |
|----------------------------|------------------------|-----------------------|
| cell 1/3 W&H | cell 1/3 W&H | cell 1/3 W&H |
|----------------------------|------------------------|-----------------------|
html, body, #view_table {
overflow:hidden;
margin:0;
padding:0;
}
html, #view_table {
width:100%;
height:100%;
}
body {
width:300%;
height:300%;
}
#view_table td {
width:33.333%;
height:33.333%;
}
$(document).ready(function () {
cur_window_height = $(window).height();
cur_window_width = $(window).width();
$('html, body').scrollTop(cur_window_height);
$('html, body').scrollLeft(cur_window_width);
});