Preview panel different from F12 view

TopStyle has been discontinued and support is no longer available. The forum is read-only. NOTE: TopStyle was not developed by the makers of CSS HTML Validator.
Locked
click22
Rank 0 - Newcomer
Posts: 1
Joined: Fri Oct 03, 2014 7:05 am

Preview panel different from F12 view

Post by click22 »

I have been exploring how to scroll the body of a table to a defined position with a button, using Jquery and javascript. Although the attached html file works as I expect when viewed using F12, it does not seem to work in the preview panel at the bottom of the main screen.

Code: Select all

<html lang="en">
<head>
  <meta charset="utf-8">
  <title>scrollTop demo</title>
  <style>
  table.demo {
      display: table;
   }
  table.demo thead, table.demo tbody {
      float: left;
      width: 100%;
   }
  table.demo tbody {
      overflow: auto;
      height: 200px;
   }
  </style>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
  <script>
  	$(document).ready(function(){
		$("#scroll").click(function(){
			var index = 15;
			var ht = 22;
			var offset = ht*(index-1);
    		$('#table1 > tbody').scrollTop(offset);
    	});
    	function jsfunction() { $('#table1 > tbody').scrollTop(6); } ;
    });
   </script>
</head>
<body>
<div align="center"><button id="scroll">Scroll</button>
<table id="table1" class="demo" width="200" border="1">
	<thead><tr><td>Column Heading</td></tr></thead>
	<tbody><tr><td>line 1</td></tr><tr><td>line 2</td></tr><tr><td>line 3</td></tr><tr><td>line 4</td></tr><tr><td>line 5</td></tr>
	<tr><td>line 6</td></tr><tr><td>line 7</td></tr><tr><td>line 8</td></tr><tr><td>line 9</td></tr><tr><td>line 10</td></tr>
	<tr><td>line 11</td></tr><tr><td>line 12</td></tr><tr><td>line 13</td></tr><tr><td>line 14</td></tr><tr><td>line 15</td></tr>
	<tr><td>line 16</td></tr><tr><td>line 17</td></tr><tr><td>line 18</td></tr><tr><td>line 19</td></tr><tr><td>line 20</td></tr>
	<tr><td>line 21</td></tr><tr><td>line 22</td></tr><tr><td>line 23</td></tr><tr><td>line 24</td></tr><tr><td>line 25</td></tr>
	</tbody>
</table>
</div>
</body>
</html>

Am I missing something? I’m using the latest version of TopStyle (5.0.0.104) with Windows 8.1 64 bit.
Locked