Refresh divů v cyklu php – JavaScript, AJAX, jQuery – Fórum – Programujte.com

Mám problém, refreshuji podle následujícího scriptu a stránka se mi duplikuje a to tak, že padá doprava dolů přes původní stránku. Co s tím ?
 

Index.php

<div class="wrapper">   
<?php


$countQ = mysql_query("SELECT COUNT(*) as max FROM clanky");

if(mysql_num_rows($countQ) > 0) { 
   $count = mysql_fetch_object($countQ);  
   $max = $count->max;                                 
}

define ("ON_PAGE", 6);

function right_int($arg) {
  $arg = (int) $arg;

  if (is_numeric($arg)) {
    return $arg;
  }
  // v případě, že $arg neprojde kontrolou, bude naše $page 1 => začátek
  return 1;
}

if(!isset($_GET["page"]))
  $page = 1;
else
  $page = right_int($_GET["page"]);
  

$by = (ON_PAGE * ($page - 1));

$articles = mysql_query("SELECT clanek FROM clanky ORDER BY clanek ASC LIMIT ".ON_PAGE." OFFSET " . $by);

if(mysql_num_rows($articles) > 0) {
  while($article = mysql_fetch_object($articles)){
  echo "<div id='refresh'>$article->clanek</div>";
 
 
  }
}

// NA ZAČÁTEK
// pokud nejsme na začátku, udělat odkaz na začátek...
if($page > 1) {
  echo "<a href='http://localhost/strankovani/index.php/?page=1'>&lt;&lt;</a>";
}

// PŘEDCHOZÍ
// pokud  nejsme na začátku, zobrazit odkaz na předchozí a cyklus na předchozí
if($page > 1) { 
  echo "<a href='http://localhost/strankovani/index.php/?page=".($page-1)."'>&lt;</a>";
                     
  // PŘEDCHOZÍ - CYKLUS
  // vypíše 3 předchozí stránky
  for($i = 4; $i > 0; $i--) {
    if(($page - $i) >= 1){
      echo "<a href='http://localhost/strankovani/index.php/?page=".($page-$i)."'>".($page-$i)."</a>";
    }
  }
}

echo "<a href='#' style='color:grey;'>$page</a>";

// DALŠÍ
// když nejsme na konci, tzn. je aktuální menší než maximální počet / na stránce.
// Např. pokud bude max 10 a na stránce bude po 2, tak pokud je aktuální ($page) menší než 5.
if($page < ($max / ON_PAGE)) {
  // DALŠÍ - CYKLUS
  // vypíše 3 následující stránky
  for($i = 1; $i < 4; $i++) { 
    if(($page + $i) <= ceil($max / ON_PAGE)) {
      echo "<a href='http://localhost/strankovani/index.php/?page=".($page+$i)."'>".($page+$i)."</a>";
    }
  }
                     
  // další
  echo "<a href='http://localhost/strankovani/index.php/?page=".($page+1)."'>&gt;</a>";
}

if(($page + $i) <= ceil($max / ON_PAGE))

if($page < ceil($max / ON_PAGE)) {
  echo "<a href='http://localhost/strankovani/index.php/?page=".ceil($max / ON_PAGE)."'>&gt;&gt;</a>";
}
?>



    

</div>   

refresh.js
 

var seconds = 1;

	var divid = "refresh";

	var url = "index.php";

	  

	////////////////////////////////

	//

	// Refreshing the DIV

	//

	////////////////////////////////

	 

	function refreshdiv(){

	  

	// The XMLHttpRequest object

	  

	var xmlHttp;

	try{

	xmlHttp=new XMLHttpRequest(); // Firefox, Opera 8.0+, Safari

	}

	catch (e){

	try{

	xmlHttp=new ActiveXObject("Msxml2.XMLHTTP"); // Internet Explorer

	}

	catch (e){

	try{

	xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");

	}

	catch (e){

	alert("Your browser does not support AJAX.");

	return false;

	}

	}

	}

	  

	// Timestamp for preventing IE caching the GET request

	  

	fetch_unix_timestamp = function()

	{

	return parseInt(new Date().getTime().toString().substring(0, 10))

	}

	  

	var timestamp = fetch_unix_timestamp();

	var nocacheurl = url+"?t="+timestamp;

	  

	// The code...

	  
	xmlHttp.onreadystatechange=function(){

	if(xmlHttp.readyState==4){

	document.getElementById(divid).innerHTML=xmlHttp.responseText;

	setTimeout('refreshdiv()',seconds*1000);

	}

	}

	xmlHttp.open("GET",nocacheurl,true);

	xmlHttp.send(null);

	}

	  

	// Start the refreshing process

	  

	var seconds;

	window.onload = function startrefresh(){

	setTimeout('refreshdiv()',seconds*1000);

	}

CSS

 

#refresh{
width:181.333px;
margin-left: 5px;
margin-right: 5px; 
margin-top:5px;
margin-bottom:5px;
 height:100px; 
 float:left;
 background-color:white;
 color:black;
border:1px solid black;   
    
    
}