How to change timeout in javascript dynamically - javascript

Good morning everyone!
I've got a question, I am not sure which language I should really be using. I'm assuming javascript since the slideshow is javascript.
I need to create a slideshow where a user can change the time in between slides. There are about 100 slides and they want to be able to set the timing in between each individually.
I've put all the pics on the server and created a db with the links to them and the slideshow works just fine, except I can't seem to figure out a way to make the timeout have different values. Any help is greatly appreciated.
Here's the code:
<?php include_once 'includes/db_connect.php';
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Weather Show</title>
<meta name="viewport" content="width=device-width,initial-scale=1">
<link rel="stylesheet" href="responsiveslides.css">
<link rel="stylesheet" href="demo.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="responsiveslides.min.js"></script>
<script type="text/javascript">
function display_c(){
var refresh=1000; // Refresh rate in milli seconds
mytime=setTimeout('display_ct()',refresh)
}
function display_ct() {
var strcount
var x = new Date()
document.getElementById('ct').innerHTML = x;
tt=display_c();
}
</script>
<?php
echo "<script>
$(function () {
$('#slider1').responsiveSlides({
maxwidth: 1080,
speed: 1000,
timeout: 5000
});
});
</script>";
echo "</head>
<body style='background-color: #000;' onload=display_ct();>
<div id='wrapper'>";
$result = mysqli_query($mysqli,"SELECT * FROM weather WHERE status = '1'");
?>
<!-- Slideshow 1 -->
<ul class="rslides" id="slider1">
<?php while($row = mysqli_fetch_array($result))
{
echo "<li><img src='"; echo $row['link']; echo "' alt='"; echo $row['link']; echo "'></li>";
}
?>
</ul>
</div><!-- end wrapper -->
<div style=" margin-top:-30px; ">
<span id='ct' style="font-weight:bold; font-size:36px; color:#FFF; margin-left:30px;"></span>
</div>
</body>
</html>
I was going to use PHP variables for the time, that's why I'm just echo(ing) the javascript. That did not work too well for me. So if anyone knows how to do this and wants to let me know, it would be amazing! Thank you!

You can do all of this at the javascript side if you put the refresh and mytime variable more global.
Keep track of your mytime-variable (from display_c()). Add your edit box and whatever event you need to track that a new interval was specified.
As soon as that event is triggered you call clearTimeout(mytime); to stop the time, update the refresh variable with the new value and call display_c() again to start the process anew:
<?php
$refresh = 1000; // Current value from database
echo <<<JAVAVSCRIPT
<script>
$(function () {
$('#slider1').responsiveSlides({
maxwidth: 1080,
speed: $refresh,
timeout: 5000
});
});
$('#speed-input-id').change(function(e) {
refresh = parseInt($(this).val());
$.ajax('/updateTheDatbaseTimeoutValueUrl', {data: {refresh: refresh}});
// I can't help you on reconfiguring the plugin, too little information
updateTheResponsiveSlidesTimeout(refresh);
e.preventDefault();
});
});

Related

Can't overwrite bootstraps column width limit

I am trying to make a table that will display information on a page. I DO NOT want the text to wrap. I've done so much searching and I can't seem to fix it! I'm using bootstrap and I have no idea how to override whatever type of limit is happening here. Please help!
Image of webpage
HTML/PHP for webpage
<?php
function createTable(){
$maxDays=date('t'); //gets the number of days in a month
$currentDayOfMonth=date('j'); //gets the current day
$rows = 14; // define number of rows
$cols = $maxDays;// define number of columns
// loops through and creates the table
for($tr=1;$tr<=$rows;$tr++){
echo "<tr>";
for($td=1;$td<=$cols;$td++){
echo "<td class='tableCells'>654 kwh</td>";
}
echo "</tr>";
}
}
function writeDays(){
$lastDayUTS = mktime (0, 0, 0, date("m"), date('t'), date("Y"));
$lastDay = date("d", $lastDayUTS);
$monthName = date("M", $lastDayUTS);
//writes the days above the table
for($n=1;$n <= $lastDay;$n++){
echo "<th>$monthName $n</th>";
}
}
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous">
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="col-lg-9">
<table class='table table-hover'>
<thead>
<!-- writes the days above the table -->
<?php writeDays(); ?>
</thead>
<tbody>
<?php
// loops through and puts values into the table
createTable();
?>
</tbody>
</table>
</div>
</div>
</div>
</body>
</html>
The end goal is to have this embedded in a page and overflow the x axis so you can scroll horizontally. I want the text to all be on one line (not wrapped). Any help is greatly appreciated!!!

Update PHP variable retrieved from MSSQL SELECT every second

I have been searching around for a solution to this problem for a few days and finally decided to ask you lovely people as there seem to be multiple ways to skin this proverbial cat.
I have a php page (index.php) that currently displays results from a SQL select query using the following external php script (script.php):
<?php
{
include('database.php');
// Microsoft SQL Server using the SQL Native Client 11.0 ODBC Driver
$conn = odbc_connect($server,$Username,$Password);
// Query
$qry = $Query; <-- this var is set in the included database.php above
$nextbreach = odbc_exec($conn,$qry);
odbc_close();
}
$nextbreachvalue = odbc_result($nextbreach,"Breached Time");
$nextbreachref = odbc_result($nextbreach,"Reference");
?>
$nextbreachvalue and $nextbreachref are then echo'd in my index.php using
<?php echo ($nextbreachref); ?>
<?php echo ($nextbreachvalue); ?>
I'm able to do this as i have used {include('script.php');}
Whilst this works on loading index.php in the browser I would like to update the variables $nextbreachref and $nextbreachvalue every second without having to refresh the page.
I have seen many articles suggesting ajax, json and js can achieve this however i'm somewhat confused on how this is achieved in my circumstance especially as many of the online examples use mysql and not mssql.
Index.php below:
<!DOCTYPE HTML>
<html>
<head>
<link rel="stylesheet" href="assets/css/style.css">
<?php
{include('script.php');}
?>
</head>
<body>
<div id="container">
<div id="countdowncontainer">
<div id="countdownclock">
<p id="ref" ><?php echo ($nextbreachref); ?></p>
</div>
</div>
</div>
A basic structure for what you are trying to do is:
<!DOCTYPE HTML>
<html>
<head>
<link rel="stylesheet" href="assets/css/style.css">
<script
src="https://code.jquery.com/jquery-3.2.1.min.js"
integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
crossorigin="anonymous"></script>
<script>
$(function() {
setInterval(function(){
$.get("data.php", function( data ) { //receiving the echo from the php data file
$("#ref").html(data); //putting the echoed value directly into the p tag
});
}, 1000); //setting the requests to 1 second each
);
</script>
</head>
<body>
<div id="container">
<div id="countdowncontainer">
<div id="countdownclock">
<p id="ref" ></p>
</div>
</div>
</div>
And your data.php would be similar to the code you have that fecthes data from the database. The difference is that it now echoes the result you want to retrieve in the main page, and does not include any html:
<?php
{
include('database.php');
// Microsoft SQL Server using the SQL Native Client 11.0 ODBC Driver
$conn = odbc_connect($server,$Username,$Password);
// Query
$qry = $Query; <-- this var is set in the included database.php above
$nextbreach = odbc_exec($conn,$qry);
odbc_close();
}
$nextbreachvalue = odbc_result($nextbreach,"Breached Time");
$nextbreachref = odbc_result($nextbreach,"Reference");
echo($nextbreachref);
?>

Increase URI length limit or change the code for transferring big text

I installed Apache2 server on linux Mint system to do some web development. I have a code where there is a text in <pre> tag. The php code makes a link to edit the text by transferring all text into edit page <textarea>.
The text transfers in URI. Well, as Apache has a URI length limit, I don't know how to transfer large amount of text.
I searched and found out that there is a way to change this limit, but I couldn't find out where it is set. Also I read that it is not good to use long URIs.
So, I have to either increase the URI length limit or change my code. I haven't figured out how, though. This is the piece of page where text is (story.php, stored in $s variable):
<!DOCTYPE html>
<?php session_start() ?>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="main.css">
<title>The story</title>
<style>
#story{border: darkolivegreen; border-style: solid ;border-width: 3px; padding: 10px }
pre{white-space: pre-wrap}
span{padding-right: 8px}
</style>
</head>
<body>
<?php
include "navigation.php";
$id=$_GET['id'];
//ar_dump($id);
$mysql=new mysqli("",databaseuser,databasepassword,database);
$set=$mysql->query("select title,story,creator,dateCreated,identifier from Stories where identifier='$id'");
if( $set==false) echo $mysql->error;
$record=$set->fetch_array();
//var_dump($record);
if($record)
{
$t=$record['title'];
//check
$s=htmlspecialchars_decode($record['story']);
$c=$record['creator'];
$time=$record['dateCreated'];
$storyid=$record['identifier'];
echo "<h1 id='heading'>$t</h1>";
echo "<h2>By $c on $time</h2>";
echo "<pre id='story' on>$s</pre>";
if(isset($_SESSION[username]))
$user=$_SESSION[username];
$q="SELECT class FROM Accounts WHERE identifier='$user'";
$result=$mysql->query($q);
$group;
if($res)
{
$group=$result->fetch_array()[0];
}
if(($user==$c && $group==users2) or $group==admins or $group==overseers)
{
$s=urlencode($s);
$link='editstory.php?sid='.$storyid.'&text='.$s;
echo "<a href='$link'>Edit</a>";
//echo "<button data-storyid='$storyid' data-story='$s' onclick=''>Edit</button> ";
echo "<button data-storyid='$storyid' onclick='deleteStory(this)'>Delete</button>";
}
This is the page where text transfers into (editstory.php):
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Editing</title>
<link rel="stylesheet" href="main.css"
</head>
<body>
<?php
$storyid=$_GET['sid'];
$text=$_GET['text'];
$text=urldecode($text);
echo "<textarea id='text' rows='33' cols='200'>$text</textarea>
<button data-sid='$storyid' onclick='updatestory(this)'>Save</button>
"
?>
<script>
function updatestory(button) {
var sid=button.getAttribute('data-sid')
var text=document.getElementById('text')
var value=text.value;
console.log(text.value)
var request=new XMLHttpRequest()
request.onreadystatechange=function () {
if(request.readyState==4)
{
window.location='story.php?id='+sid;
console.log(request.responseText)
}
}
request.open('POST','updatestory.php',true)
request.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
request.send('sid='+sid+'&text='+value)
}
</script>
</body>
</html>
There should be no reason to tamper with URI length.
You should instead send the story text data as HTTP POST message body, and the submission could be inside HTML form element.
See W3 PHP5 Form Handling
I couldn't figure out how to change my code, so I've increased URI length for now.

PHP echoing a table, appending it to a specific element in the DOM?

I have this code, which checks a database and returns some rows to my PHP code containing 4 values (id, playerA, playerB, turn, all INT).
I would like to use that array to build up a table and then append the table to a specific location in the DOM, but i dont know how i could do that.
I could do it another way (get the rows via JS Ajax and then use JS to build and append the table), which i know how, but i dont want to do that.
Is it possible to create a table and append it to a div using php/html/css ?
thanks
<?php
if (isset($_SESSION["userid"])){
$dbManager = DBManager::app();
$manager = new Manager($_SESSION["userid"]);
$gameList = $manager->getGames();
if ($gameList) {
Debug::log("got active games: ".sizeof($gameList);
}
else {
Debug::log("no games");
}
}
else {
Debug::log("no user id");
}
?>
<!DOCTYPE html>
<html>
<head>
<link rel='stylesheet' href='style.css'/>
<script src="jquery-2.1.1.min.js"></script>
<script src='script.js'></script>
<script src='ajax.js'></script>
</head>
<body>
<input type="button" value="createGame" onclick="createGame()">
<divid="gameListDiv">
<div>LOGOUT</div>
</body>
</html>
EDIT
<?php
$table = "";
if ($gameList) {
foreach ($gameList as $game){
$table += "<tr>";
$table += "<td>";
$table += $game["name"];
$table += "</td>";
$table += "</tr>";
}
$table += "</table>";
}
?>
<body>
<input type="form" id="gameName" placeholder="Enter Game Name here"></input>
<input type="button" value="createGame" onclick="createGame()"></input>
<div>
<span>Active Games</span>
<?php echo $table; ?>
</div>
<div>LOGOUT</div>
</body>
You need to understand that the DOM does not yet exist - it is created by the browser, and the browser builds it based on the output of your combined PHP & HTML.
There are many ways to solve this problem without resorting to Ajax calls etc.
<!DOCTYPE html>
<html>
<head>
<link rel='stylesheet' href='style.css'/>
<script src="jquery-2.1.1.min.js"></script>
<script src='script.js'></script>
<script src='ajax.js'></script>
</head>
<body>
<input type="button" value="createGame" onclick="createGame()">
<div id="gameListDiv">
<?php
if (isset($_SESSION["userid"])){
$dbManager = DBManager::app();
$manager = new Manager($_SESSION["userid"]);
$gameList = $manager->getGames();
if ($gameList) {
Debug::log("got active games: ".sizeof($gameList);
echo '<table style="width:100%">';
//assuming we can iterate over the $gameList value
foreach($gameList as &$game)
{
//here i assume that the result returned is an object with these properties - it might be the case that you need to do something like $game['playerA'] or $game->getData('playerA') - i am not sure what database lib you are using.
echo '<tr>
<td>'.$game->playerA.'</td>
<td>'.$game->playerB.'</td>
<td>'.$game->turn.'</td>
</tr>';
}
echo '</table>';
}
else {
Debug::log("no games");
}
}
else {
Debug::log("no user id");
}
?>
</div>
<div>LOGOUT</div>
</body>
</html>
In this example we are just running the PHP in-line with the HTML.
You could also do something like this if you wanted to keep all of your database logic at the top of the page and not in-line with the HTML:
<?php
/* Database logic here */
$variable = '<span>this variable could contain any old html that came from the database logic</span>';
?>
<html>
<head>
</head>
<body>
<php echo $variable; ?>
</body>
</html>
If you want to build the list before page load, you can just insert something like this where you want the table to go:
<table>
<?php foreach($gamelist as $game){ ?>
<tr>
<td><?=$game.id></td>
<td><?=$game.playerA></td>
<td><?=$game.playerB></td>
<td><?=$game.turn></td>
</tr>
<? } ?>
</table>
This will work because with PHP, the page hasn't been built and displayed to the user yet when you've got your data in $gamelist. All of your PHP code will be run before the page is actually sent to the user--which means you don't need to "update" the page later, you can just build it now.
If you're looking to collect or update your data after page load (it's unclear from your comments), this is impossible with only PHP as it's a server-side language. You would need to either reload the page or use AJAX for that.

JavaScript link click counter

i need a script to count link clicks on my website and count report to a flatfile/excel.
The use of a Javascript framework like jQuery would be wise in this case.
Note that you cannot save data into a file on the client's computer. Instead, you can do an AJAX to the server, and save it via your SSI on the server into database/excel/file whatever data storage there is.
My demo will be using jQuery, jQuery Cookie Plugin and PHP:
countdetect.js
jQuery(function(){
$("a").click(function{
var cookiename = 'linkcounter';
if($.cookie(cookiename) == null){
$.cookie(cookiename, 0);
}
$.cookie(cookiename, $.cookie(cookiename)+1);
});
});
index.php
<?php
session_start();
$counter_file = 'counter';
if(!file_exists($counter_file)){
file_put_contents($counter_file, 0);
}
$counts = (int)file_get_contents($counter_file);
file_put_contents($counter_file, $counts++);
// you can use $counts if you want to display it on the page.
?><!DOCTYPE html>
<html>
<head>
<title>Link Click Counter Test</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="jquery.cookie.js"></script>
<script type="text/javascript" src="countdetect.js"></script>
</head>
<body>
<br />
<br />
Link clicks: <?php echo $counts; ?>
</body>
</html>

Categories

Resources