Solved

jQuery slideUp jumps lines when setInterval timer hits

Posted on 2014-07-18
3
277 Views
Last Modified: 2014-07-29
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

0
Comment
Question by:Sean Ohlrich
  • 2
3 Comments
 
LVL 56

Expert Comment

by:Julian Hansen
ID: 40206139
Without being able to see the code in action it is going to be difficult to diagnose this one.
0
 

Accepted Solution

by:
Sean Ohlrich earned 0 total points
ID: 40217640
Fixed the problem by rearranging the timing of the code calls.
0
 

Author Closing Comment

by:Sean Ohlrich
ID: 40226179
I figured out the solution to the problem.
0

Featured Post

Free Tool: Site Down Detector

Helpful to verify reports of your own downtime, or to double check a downed website you are trying to access.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

PROBLEM: The other day I was working on adding an ajax request to a webpage that already had a dialog box on the page.  The dialog box was using relative positioning to be positioned next to a form field I had on the page.  Everything was working…
Since pre-biblical times, humans have sought ways to keep secrets, and share the secrets selectively.  This article explores the ways PHP can be used to hide and encrypt information.
Explain concepts important to validation of email addresses with regular expressions. Applies to most languages/tools that uses regular expressions. Consider email address RFCs: Look at HTML5 form input element (with type=email) regex pattern: T…
The viewer will learn how to dynamically set the form action using jQuery.

679 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question