I have a PHP script that displays an image(according to the current time) and I want it to flash the image so I tried adding a script to do so but its some what not working. Please have a look. I would be thankful for your help. Thanks in advance.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>
<body onload="startit();">
<?php
$hour = date('H', time()); // Returns the hours of the server time, from 0 to 23.
switch ($hour) {
case '0':
$img = '0.jpg';
break;
case '1':
$img = '0.jpg';
break;
// ... and so on...
default:
$img = '1.jpg';
}
?>
<img src="<?php echo $img; ?>" id="mydiv" />
<script language=javascript>
/*This script written by Chris Stahl*/
/*It may be used and modified by */
/*webmaster's for private use. */
function startit() {
window.setInterval("changecolor()",100);
}
function changecolor() {
var rndred=Math.floor(256*Math.random());
var rndgreen=Math.floor(256*Math.random());
var rndblue=Math.floor(256*Math.random());
var colorarray=[rndred, rndgreen, rndblue];
var hexcolor="#";
for(i=0;i<3;i++) {
hexcolor=hexcolor +""+ converttohex(Math.floor(colorarray[i]/16));
hexcolor=hexcolor +""+ converttohex(colorarray[i]%16);
}
document.getElementById("mydiv").style.color=hexcolor;
}
function converttohex(num) {
switch (num) {
case 10: return "A";
case 11: return "B";
case 12: return "C";
case 13: return "D";
case 14: return "E";
case 15: return "F";
default: return num;
}
}
</script>
</body>
</html>
This will work
http://jsfiddle.net/mplungjan/9Kdh5/
<body>
<div id="myDiv"><img src="http://rd.cas.de/tim/native/image.png" id="myImg" /></div>
</body>
<script type="text/javascript>
/* This script written by Chris Stahl */
/* It may be used and modified by */
/* webmaster's for private use. */
window.onload=function() {
window.setInterval(changecolor,100);
}
function changecolor() {
var rndred=Math.floor(256*Math.random());
var rndgreen=Math.floor(256*Math.random());
var rndblue=Math.floor(256*Math.random());
var colorarray=[rndred, rndgreen, rndblue];
var hexcolor="#";
for(i=0;i<3;i++) {
hexcolor=hexcolor +""+ converttohex(Math.floor(colorarray[i]/16));
hexcolor=hexcolor +""+ converttohex(colorarray[i]%16);
}
document.getElementById("myDiv").style.backgroundColor=hexcolor;
}
function converttohex(num) {
switch (num) {
case 10: return "A";
case 11: return "B";
case 12: return "C";
case 13: return "D";
case 14: return "E";
case 15: return "F";
default: return num;
}
}
</script>
Related
I'm working on being able to refresh a div that contains data from a database.
I have established this code here but when I open the F12 console, this error appears:
Uncaught ReferenceError: $ is not defined
at loadlink (index.php:29:17)
at index.php:34:13
I have two files an index file and a commands file or on the index file I will include a commands.php
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
</head>
<body>
<div class="commandes">
<?php
$sql = "SELECT enc_id, enc_cmd_num, enc_paye, enc_prepared, enc_ext_ref, enc_heure_fab_deb, enc_type, enc_heure_fab_fin, Client.cli_civilite,Client.cli_nom, Client.cli_prenom FROM Client RIGHT JOIN encaissement ON Client.cli_id = encaissement.enc_client WHERE enc_etat<>4 AND enc_date= convert(date,getdate()) AND ((DATEDIFF(n,enc_heure_fab_fin, getDate()) < 3 AND enc_prepared <> 0) OR enc_prepared = 0) AND enc_emporte <> 1 ORDER BY encaissement.enc_heure_fab_deb ASC";
$results = odbc_exec( $conn, $sql );
?>
<table>
<?php
while( $row = odbc_fetch_array( $results ) )
{
printf('<tr>');
if ( $row["enc_ext_ref"] != '')
{
$num_cmd = $row["enc_ext_ref"];
}
else
{
$num_cmd =$row["enc_cmd_num"];
}
if ($row['enc_paye'] = 0)
{
$etat_cmd='<span class="PRETE">ATTENTE REGLEMENT</span>';
}
else
{
switch( $row['enc_prepared'] )
{
case 0: $etat_cmd='<span class="ENPREPA">EN PREPARATION</span>'; break;
case 1:
$etat_cmd='<span class="PRETE">COMMANDE PRETE</span>'; break;break;
}
}
switch( $row['enc_type'] )
{
case 0: $commande='<span class="EMPORTER"></span>'; break;
case 1: $commande='<span class="LIVRAISON"></span>'; break;
case 2: $commande='<span class="SURPLACE"></span>'; break;
}
printf('<td>%s%s%s</td>',$row["enc_cmd_num"],$etat_cmd, $commande);
}
?>
</table>
</div>
<script>
function loadlink(){
$('#commandes').load('commandes.php', function() {
});
}
loadlink();
setInterval(function(){
loadlink()
}, 10000);
</script>
Put
<script src="https://code.jquery.com/jquery-3.6.3.min.js" integrity="sha256-pvPw+upLPUjgMXY0G+8O0xUf+/Im1MZjXxxgOcBQBXU=" crossorigin="anonymous"></script>
before <script>
I don't know how I can do popup with result in my currency converter with API http://api.nbp.pl/. This is my code:
<?php
if (isset($_POST['kwota']) && isset($_POST['waluta']) && is_numeric($_POST['kwota']) && is_numeric($_POST['waluta'] )){
switch ($_POST['waluta']) {
case 1:
$przelicznik = json_decode(file_get_contents('http://api.nbp.pl/api/exchangerates/rates/a/usd/'))->rates[0]->mid;
break;
case 2:
$przelicznik = json_decode(file_get_contents('http://api.nbp.pl/api/exchangerates/rates/a/eur/'))->rates[0]->mid;
break;
case 3:
$przelicznik = json_decode(file_get_contents('http://api.nbp.pl/api/exchangerates/rates/a/jpy/'))->rates[0]->mid;
break;
case 4:
$przelicznik = json_decode(file_get_contents('http://api.nbp.pl/api/exchangerates/rates/a/gbp/'))->rates[0]->mid;
break;
case 5:
$przelicznik = json_decode(file_get_contents('http://api.nbp.pl/api/exchangerates/rates/a/aud/'))->rates[0]->mid;
break;
default:
$przelicznik = 1;
}
$wynik = $_POST['kwota']/$przelicznik;
echo $wynik;
}
?>
The API is public, so you tecnically don't need PHP to do so, you can fetch the exchange rate and show the results using javascript/jQuery directly.
Here's an example on how to do so using jQuery:
<form id="exchange">
<input type="text" name="price" title="price">
<select name="currency" title="currency">
<option value="1">USD</option>
<option value="2">EUR</option>
<option value="3">JPY</option>
<option value="4">GBP</option>
<option value="5">AUD</option>
</select>
<input type="submit" value="calculate">
</form>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$('#exchange').on('submit',function(e){
e.preventDefault();
var value = $(this).find('[name="price"]').val();
if(!value) {
alert("Insert a valid value");
return false;
}
switch ($(this).find('[name="currency"]').val()) {
case "1":
$link = 'http://api.nbp.pl/api/exchangerates/rates/a/usd/';
break;
case "2":
$link = 'http://api.nbp.pl/api/exchangerates/rates/a/eur/';
break;
case "3":
$link = 'http://api.nbp.pl/api/exchangerates/rates/a/jpy/';
break;
case "4":
$link = 'http://api.nbp.pl/api/exchangerates/rates/a/gbp/';
break;
case "5":
$link = 'http://api.nbp.pl/api/exchangerates/rates/a/aud/';
break;
default:
alert('Error');
return false;
}
console.log($link);
$.getJSON($link,function(result){
alert(value/result.rates[0].mid);
});
});
</script>
I am developing a wordpress theme and now I am working on the theme options page. I added an option with "select" method to give the user the option to change the slider's fx. Now... this is the output of a text input that sets the fx duration <?php echo get_option('wis_fx_speed'); ?> and works fine! My problem is that <?php echo $fxSample ?> don't work.
Tried everything I knew and imagined (syntax, order, put the switch inside the jquery script etc) , searched the web but found nothing... Could you help me? Thanks in advance!
<?php
switch (get_option('wis_fx_slider')) {
case "opacity":
$fxSample = "opacity : 'toggle',";
break;
case "width":
$fxSample = "width : 'toggle',";
break;
case "opawidth":
$fxSample = "opacity : 'toggle', width : 'toggle',";
break;
case "blink":
$fxSample = "opacity : 'show',";
break;
}
?>
<script type="text/javascript">
jQuery(document).ready(function($){
$("#photo-rotator").tabs({fx:{<?php echo $fxSample ?>
duration: <?php echo get_option('wis_fx_speed'); ?> }}).tabs("rotate", 2000);
});
</script>
OUTPUT:
<
script type="text/javascript">
jQuery(document).ready(function($){
$("#photo-rotator").tabs({fx:{ duration: 3000 }}).tabs("rotate", 2000);
});
</script>
EDIT
Works if I make it with radio.
When I need to pass some data to JavaScript, I find it helpful to build a PHP array first, then use json_encode to convert it to JavaScript. This avoids a lot of potential issues:
<?php
$tab_options = array(
'duration' => get_option('wis_fx_speed'),
'fx' => array()
);
switch (get_option('wis_fx_slider')) {
case 'opacity':
$tab_options['fx']['opacity'] = 'toggle';
break;
case 'width':
$tab_options['fx']['width'] = 'toggle';
break;
case 'opawidth':
$tab_options['fx']['opacity'] = 'toggle';
$tab_options['fx']['width'] = 'toggle';
break;
case 'blink':
$tab_options['fx']['opacity'] = 'show';
break;
}
?>
<script type="text/javascript">
var tabOptions = <?php echo json_encode($tab_options); ?>;
jQuery(document).ready(function($) {
$('#photo-rotator').tabs(tabOptions).tabs('rotate', 2000);
});
</script>
Benefits:
Much cleaner code (easier to read).
You don't have to worry about getting the commas, quotes, and other syntax right for all the possible cases. For example, as other people have mentioned, you don't have a default case. This approach will at least generate valid JavaScript if an option value is invalid.
To safely output any PHP value into a JavaScript value, use json_encode.
...{fx:<?php echo json_encode($fxSample); ?>, duration: <?php echo json_encode(get_option("wis_fx_speed")); ?>}...
Note also that you are missing a , and have an extra } in your code. Always look at the generated result to look for syntax errors.
You need a semicolon after each php line
...
$("#photo-rotator").tabs({fx:{<?php echo $fxSample; ?>
...
What about a default case value?
Try to debug doing a
var_dump(get_option('wis_fx_slider'));
var_dump($fxSample);
Maybe is it a scope problem? Try defining
$fxSample = "";
at the beggining, before the switch
Is get_option('wis_fx_slider') returning one of the options in the switch case?
You haven't sepcified a "default" so $fxSample will go undefined.
<?php
switch (get_option('wis_fx_slider')) {
case "opacity":
$fxSample = "opacity : 'toggle',";
break;
case "width":
$fxSample = "width : 'toggle',";
break;
case "opawidth":
$fxSample = "opacity : 'toggle', width : 'toggle',";
break;
default: // blink or anything else
$fxSample = "opacity : 'show',";
}
?>
Is your duration a string or number? If it's a string you need quotes like
duration: '<?php echo get_option('wis_fx_speed'); ?>' }}).tabs("rotate", 2000);
What happens when you view source? Is the PHP laying out the dynamically generated javascript correctly? Can you post the output?
Also, formatting
<?php
switch (get_option('wis_fx_slider')) {
case "opacity":
$fxSample = "opacity : 'toggle',";
break;
case "width":
$fxSample = "width : 'toggle',";
break;
case "opawidth":
$fxSample = "opacity : 'toggle', width : 'toggle',";
break;
case "blink":
$fxSample = "opacity : 'show',";
break;
}
?>
<script type="text/javascript">
jQuery(document).ready(function($){
$("#photo-rotator").tabs({
fx: {
<?php echo $fxSample ?>
duration: <?php echo get_option('wis_fx_speed'); ?>
}
}).tabs("rotate", 2000);
});
</script>
I have a problem with dynamic loading of javascript function from Ajax.
I want to update some part of HTML with Ajax. Let's say I want to place a button and to attach a javascript function to that button dynamically.
For example:
...
<head>
<script src="ajax.js" type="text/javascript"></script>
<script type="text/javascript">
function f_OnLoadMain()
{
fParseBrowserInfo();
getJSFromServer();
getHTMLFromServer();
}
</script>
</head>
<body onload="f_OnLoadMain()">
<div id="AjaxArea" width="100%" height="100%" align="left" valign="top" >
<!-- Updated with ajax -->
</div>
</body>
</html>
----- getJSFromServer() - calls to php code:
<?php
$somesource = '
function Clicked(){
alert("Clicked");
}
';
class TestObject{
public $source = "";
function TestObject()
{
$this->source = "";
}
function setSource($source){
$this->source = $source;
}
}
$ti = new TestObject();
$ti->setSource($somesource);
echo(json_encode($ti));
?>
the script is inserted with:
var oHead = document.getElementsByTagName('HEAD').item(0);
if (oScript){
oHead.removeChild(oScript);
}
oScript = document.createElement("SCRIPT");
oScript.type = 'text/javascript';
oScript.text = oScript.source;
oHead.appendChild( oScript);
And getHTMLFromServer() - call php :
<?php
$error = 0;
$someText = '
<input type="button" id="SomeBtn" name="SomeBtn" onclick="Clicked()" value="SomeBtn">
';
class TestObject{
public $src = "";
public $error = 0;
function TestObject()
{
$this->error = 0;
$this->src = "";
}
function setSrcString($sample){
$this->src = $sample;
}
}
$ti = new TestObject();
$ti->error = $error;
$ti->setSrcString($someText);
echo(json_encode($ti));
?>
Then the content is updated with:
var dynamicArea = document.getElementById("AjaxArea");
if(dynamicArea != null)
{
dynamicArea.innerHTML = obj.src;
}
And that works fine!
So, when the page loads the button is displayed ok, BUT pressing button doesn't call function Clicked().
Someone knows how to fix it?
Regards!
i guess you have to escape your apostrophe:
<input type="button" id="SomeBtn" name="SomeBtn" onclick="Clicked()" value="SomeBtn">
you see: onclick="Clicked()"
Together with: function Clicked(){ alert("Clicked"); }
It renders to: onclick="alert("clicked")"
Try to escape your apostrophe :)
Regards
I try to do a simple image slideshow in php (just cycle images, no links, no other effects).
after some googling I found the following in net:
<HTML>
<HEAD>
<TITLE>Php Slideshow</TITLE>
<script language="javascript">
var speed = 4000; // time picture is displayed
var delay = 3; // time it takes to blend to the next picture
x = new Array;
var y = 0;
<?php
$tel=0;
$tst='.jpg';
$p= "./images";
$d = dir($p);
$first = NULL;
while (false !== ($entry = $d->read())) {
if (stristr ($entry, $tst)) {
$entry = $d->path."/".$entry;
print ("x[$tel]='$entry';\n");
if ($first == NULL) {
$first = $entry;
}
$tel++;
}
}
$d->close();
?>
function show() {
document.all.pic.filters.blendTrans.Apply();
document.all.pic.src = x[y++];
document.all.pic.filters.blendTrans.Play(delay);
if (y > x.length - 1)
y = 0;
}
function timeF() {
setTimeout(show, speed);
}
</script>
</HEAD>
<BODY >
<!-- add html code here -->
<?php
print ("<IMG src='$first' id='pic' onload='timeF()' style='filter:blendTrans()' >");
?>
<!-- add html code here -->
</BODY>
</HTML>
but it displays only the first image from the cycle. Do I something wrong?
the resulting HTML page is:
<HTML>
<HEAD>
<TITLE>Php Slideshow</TITLE>
<script language="javascript">
var speed = 4000; // time picture is displayed
var delay = 3; // time it takes to blend to the next picture
x = new Array;
var y = 0;
x[0]='./images/under_construction.jpg';
x[1]='./images/BuildingBanner.jpg';
x[2]='./images/littleLift.jpg';
x[3]='./images/msfp_smbus1_01.jpg';
x[4]='./images/escalator.jpg';
function show() {
document.all.pic.filters.blendTrans.Apply();
document.all.pic.src = x[y++];
document.all.pic.filters.blendTrans.Play(delay);
if (y > x.length - 1)
y = 0;
}
function timeF() {
setTimeout(show, speed);
}
</script>
</HEAD>
<BODY >
<!-- add html code here -->
<IMG src='./images/under_construction.jpg' id='pic' onload='timeF()' style='filter:blendTrans()' ><!-- add html code here -->
</BODY>
</HTML>
I recommend you to use a ready made javascript framework, such as jQuery
As I remember, I used this: jQuery Cycle Plugin
I'm working on a jquery based slideshow plugin. You can add more images to the slideshow as the slideshow progresses.. it is in beta version.
http://smg-solutions.com