Link to home
Start Free TrialLog in
Avatar of Sean Ohlrich
Sean Ohlrich

asked on

jQuery slideUp jumps lines when setInterval timer hits

The web page this problem is on is an unattended display board with no user or mouse interaction. I have a timed event repeating on a page.  The event calls database results to be scrolled up the page.  The first time around, everything scrolls just fine.  When the setInterval timer for the scrolling event hits, the scrolling starts jumping two lines at a time.  The next reload of the timed event, it is now scrolling three lines at a time.  I cannot figure out how to make the repeating scrolling event not speed up.  The page it resides in is reloaded every minute so the process starts over again when the main page reloads.

<?php // index.php
echo "<!DOCTYPE html PUBLIC \"-//W3C//DTD XHTML 1.0 Transitional//EN\" \"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd\">";
echo "<html xmlns=\"http://www.w3.org/1999/xhtml\">";
echo "<head>";
echo "<meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\" />";
echo "<meta http-equiv=\"Content-Type\" content=\"text/html; charset=iso-8859-1\" />";
echo "<meta http-equiv=\"pragma\" content=\"no-cache\">";
echo "<meta http-equiv=\"expires\" content=\"Mon, 22 Jul 2002 11:12:01 GMT\">";
echo "<meta http-equiv=\"refresh\" content=\"3600\">";
echo "<title>Display Panel - TEST</title>";
echo "<link href=\"includes/style.css\" rel=\"stylesheet\" type=\"text/css\" />";
echo "<script type=\"text/javascript\" src=\"js/rsspausescroller.js\"></script>";
echo "<script type=\"text/javascript\" src=\"js/jquery-latest.min.js\"></script>";
echo "<script type=\"text/javascript\" src=\"js/jquery.jgfeed.js\"></script>";
echo "<script type=\"text/javascript\" src=\"js/jRollingNews.js\"></script>";
/*echo "<script type=\"text/javascript\" src=\"js/jquery-latest.min.js\"></script>"; // Ray's solution for scrolling status page */
?>
<script type="text/javascript">
$(document).ready(function() {
$('#statusDiv').load('includes/status.php');
$.ajaxSetup({cache: false});});
</script>
<script type="text/javascript">
var auto_refresh = setInterval(
function ()
{
$('#statusDiv').load('includes/status.php');
$.ajaxSetup({cache: false});
}, 60000); // refresh every 10000 milliseconds
</script>
<?PHP
echo "</head>";
echo "<body>";
echo "<div id=\"bar_1\"></div>";
echo "<div id=\"siteContainer\">";
echo "<div id=\"leftContainer\">";
echo "<div align=\"center\" id=\"headerDiv\">";
echo "<img src=\"images/trisupply550x210_bigger.png\"/>";
echo "</div>";  // End header div
echo "<div id=\"statusDiv\">";
include('includes/status.php');
echo "</div>"; // End status div
echo "</div>"; // End left container div
echo "<div id=\"rightContainer\">";
echo "<div id=\"weatherDiv\">";
include('includes/weather.php');
echo "</div>"; // End weather div
echo "<div id=\"advertiseDiv\">";
include('index_ads.php');
// include('includes/advertise.php');
echo "</div>"; // End advertise div
echo "</div>"; // End right container
echo "</div>"; // End site container
echo "<script>$('#bar_1').jRollingNews({'feed':'http://news.yahoo.com/rss/business','background_color':'#000000','text_color':'#ffffff','line_height':'65','scroll_rss_content':'true','hide_title_for_scrolled_content':'true'});</script>";
echo "</body>";
echo "</html>";
?>

Open in new window


<?PHP  // includes/status.php ?>

<script>
// ABORT PRE-EXISTING TICKER - Contributed by Sean
clearInterval(ticker_scroll);
clearInterval(ticker_loader);

// JQUERY ON PAGE LOAD / DOCUMENT READY LOAD THE TICKER - Contributed by Ray
$(document).ready(function(){
    ticker_loader();
});

// FUNCTION TO LOAD THE TICKER - Contributed by Ray
function ticker_loader(){
	/*$("#ticker_02").empty();*/
	$("#ticker_02").load("includes/temp_ohlrich_server.php");
}

// FUNCTION TO SCROLL THE TICKER - Contributed by Ray
function ticker_scroll(){
	$('#ticker_02 li:first').slideUp(function(){
		$(this).appendTo($('#ticker_02')).slideDown();
	});
}

// SET INTERVALS TO REPEAT THE FUNCTIONS - Contributed by Ray
setInterval(function(){ ticker_scroll() }, 3500);
setInterval(function(){ ticker_loader(); ticker_scroll() }, 75000);
</script>
<?PHP
include('display_config.php');
$result11 = 0;
$link = mysql_connect(DB_HOST, DB_USER, DB_PASSWORD);
if(!$link) {
die('Failed to connect to server: ' . mysql_error());
}
$db = mysql_select_db(DB_DATABASE);
if(!$db) {
die("Unable to select database");
}
date_default_timezone_set('America/Chicago');
/* START STATUS CONTENT */
echo "<table align=\"center\" style=\"color:#000000\" width=\"100%\" border=\"2\" cellspacing=\"0\" cellpadding=\"5\" bordercolor=\"#000000\" bgcolor=\"#ffffff\">";
echo "<tr class=\"statusheading\" bordercolor=\"#ffffff\" bgcolor=\"#ffffff\">";
echo "<td width=\"400px\">Name</td>";
echo "<td width=\"200px\" align=\"center\">Order #</td>";
echo "<td width=\"220px\" align=\"center\">Wait Time</td>";
echo "<td width=\"200px\" align=\"center\">Status</td>";
echo "<td width=\"235px\" align=\"center\">Pickup Area</td>";
echo "</tr>";
echo "</table>";
echo "<table align=\"center\" style=\"color:#000000\" width=\"100%\" border=\"0\" cellspacing=\"0\" cellpadding=\"5\" bordercolor=\"#ffffff\" bgcolor=\"#ffffff\">";
// START CUSTOMER DATA AREA HERE
$result11=mysql_query("select Location, Shipto_Name, Order_Num, Created_Time, Status, Pickup_Location from csv_import WHERE Location=101 AND Status < 2");
$num_rows=mysql_num_rows($result11);
if (($num_rows > 0) && ($num_rows < 12)){
// BEGIN DISPLAY RESULTS IF NUMBER OF PENDING AND READY ROWS EQUALS OR IS LESS THEN 11
$result1=mysql_query("select Location, Shipto_Name, Order_Num, Created_Time, Status, Pickup_Location from csv_import WHERE Location=101 AND Status < 2 ORDER BY order_num ASC");
while($row=mysql_fetch_assoc($result1)){
echo "<tr class=\"statusdata\" bordercolor=\"#ffffff\" bgcolor=\"#ffffff\">";
echo "<td width=\"400px\">";echo substr("$row[Shipto_Name]", 0, 16);echo"</td>";  //  RETURNS JUST ENOUGH SHIPTO NAME TO PROPERLY FIT ON THE LINE WITHOUT WRAPPING
echo "<td width=\"200px\" align=\"center\">$row[Order_Num]</td>";
$to_time = strtotime($row[Created_Time]);
$from_time  = strtotime("now");
echo "<td width=\"220px\" align=\"center\">"; if($row['Status']==0) { echo round(abs($to_time - $from_time) / 60). " minutes"; } else { echo "&nbsp;"; } echo "</td>";
echo "<td width=\"200px\" align=\"center\""; if($row['Status']==0) { echo "style=\"color:red\"><b>Pending</b>"; } else { echo "style=\"color:green\"><b>Ready</b>"; } echo "</td>";
echo "<td width=\"235px\" align=\"center\">$row[Pickup_Location]</td>";
echo "</tr>";
}
// END DISPLAY RESULTS IF NUMBER OF PENDING AND READY ROWS EQUALS OR IS LESS THEN 11
} else {
// BEGIN DISPLAY RESULTS IF NUMBER OF PENDING AND READY ROWS IS GREATER THAN 11
echo "<ul id=\"ticker_02\" class=\"ticker\">";
echo "</ul>";
// END DISPLAY RESULTS IF NUMBER OF PENDING AND READY ROWS IS GREATER THAN 11
}
echo "</div>";
// END CUSTOMER DATA AREA HERE
echo "</table>";
/* END STATUS SCREEN */
?>

Open in new window


<?php // includes/temp_ohlrich_server.php
error_reporting(E_ALL);
date_default_timezone_set('America/Chicago');

// CONNECT AND SELECT THE DATA BASE OR FAIL ON ERROR
include('display_config.php');
$link = mysql_connect(DB_HOST, DB_USER, DB_PASSWORD);
if(!$link) {
    trigger_error('Failed to connect to server: ' . mysql_error(), E_USER_WARNING);
}
$db = mysql_select_db(DB_DATABASE);
if(!$db) {
    trigger_error("Unable to select " . DB_DATABASE, E_USER_ERROR);
}
/* START STATUS CONTENT */
$top = NULL;
$out = NULL;
// START CUSTOMER DATA AREA HERE
$sql = "SELECT Location, Shipto_Name, Order_Num, Created_Time, Status, Pickup_Location FROM csv_import WHERE Location=101 AND Status < 2 ORDER BY order_num ASC";
$res = mysql_query($sql) or trigger_error("FAIL $sql BECAUSE " . mysql_error(), E_USER_ERROR);
$num = mysql_num_rows($res);

// TEMPORARY FOR DEBUGGING
// var_dump($num);

// USE QUERY RESULTS TO CREATE ONE ROW PER ORDER NUMBER
while ($row = mysql_fetch_object($res))
{
    // TRUNCATE TO FIT IN DISPLAY
    $my_ship = substr($row->Shipto_Name, 0, 16);

    // IF STATUS IS PENDING
    if ($row->Status == 0)
    {
        $to_time = strtotime($row->Created_Time);
        $fr_time = time();
        $my_time = round(abs($to_time - $fr_time) / 60). " minutes";
        $my_stat = '<span style="color:red;"><b>Pending</b></span>';
    }
    // IF STATUS IS READY
    else
    {
        $my_time = '&nbsp;';
        $my_stat = '<span style="color:green;"><b>Ready</b></span>';
    }

    // CREATE THE LIST ITEM
    $out = <<<EOD
  <li>
    <span class="cname">$my_ship</span>
    <span class="conum">$row->Order_Num</span>
    <span class="ctime">$my_time</span>
    <span class="cstat">$my_stat</span>
    <span class="cpick">$row->Pickup_Location</span>
  </li>
EOD;
    // APPEND LIST ITEM
    $top .= $out . PHP_EOL;
}

// ECHO TO THE BROWSER
echo $top;

Open in new window

Avatar of Julian Hansen
Julian Hansen
Flag of South Africa image
Without being able to see the code in action it is going to be difficult to diagnose this one.
ASKER CERTIFIED SOLUTION
Avatar of Sean Ohlrich
Sean Ohlrich
Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Avatar of Sean Ohlrich
Sean Ohlrich

ASKER

I figured out the solution to the problem.