Solved

jQuery slideUp jumps lines when setInterval timer hits

Posted on 2014-07-18
3
267 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 52

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

3 Use Cases for Connected Systems

Our Dev teams are like yours. They’re continually cranking out code for new features/bugs fixes, testing, deploying, testing some more, responding to production monitoring events and more. It’s complex. So, we thought you’d like to see what’s working for us.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
JavaScript waiting 14 68
window.setInterval not firing 7 29
Angular - "nest" service calls? 18 22
Scope of $_SESSION 17 27
Introduction A frequently asked question goes something like this:  "I am running a long process in the background and I want to alert my client when the process finishes.  How can I send a message to the browser?"  Unfortunately, the short answer …
Introduction If you're like most people, you have occasionally made a typographical error when you're entering information into an online form.  And to your consternation, the browser remembers the error, and offers to autocomplete your future entr…
The viewer will learn how to look for a specific file type in a local or remote server directory using PHP.
This tutorial will teach you the core code needed to finalize the addition of a watermark to your image. The viewer will use a small PHP class to learn and create a watermark.

919 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

Need Help in Real-Time?

Connect with top rated Experts

17 Experts available now in Live!

Get 1:1 Help Now