Go Premium for a chance to win a PS4. Enter to Win

x
?
Solved

jQuery slideUp jumps lines when setInterval timer hits

Posted on 2014-07-18
3
Medium Priority
?
296 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 60

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: Subnet Calculator

The subnet calculator helps you design networks by taking an IP address and network mask and returning information such as network, broadcast address, and host range.

One of a set of tools we're offering 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

I found this questions asking how to do this in many different forums, so I will describe here how to implement a solution using PHP and AJAX. The logical flow for the problem should be: Write an event handler for the first drop down box to get …
This article discusses four methods for overlaying images in a container on a web page
The viewer will learn how to look for a specific file type in a local or remote server directory using PHP.
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…
Suggested Courses

877 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