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
Related
I can create a new php project but i want to create i created html5 project and inside i want to use also php code.
Beside download and using netbeans i also downloaded and using xampp.
After running xampp i clicked start on apache.
So now to browse to my testing site i'm going to:
http://localhost:8383/HTML5Application1/index.html
It's a free template i downloaded just for the testing.
And the page in my site that i'm trying to use php in html file is:
http://localhost:8383/HTML5Application1/images%20slideshow.html
The slideshow.html file content looks like:
<?php
$pattern="(\.jpg$)|(\.png$)|(\.jpeg$)|(\.gif$) |(\.Gif$)"; //valid image extensions
$files = array();
$curimage=0;
if($handle = opendir($"http://newsxpressmedia.com/files/radar-simulation-files")) {
while(false !== ($file = readdir($handle))){
if(eregi($pattern, $file)){ //if this file is a valid image
//Output it as a JavaScript array element
$files[] = $file;
$curimage++;
}
}
closedir($handle);
}
?>
<!DOCTYPE html>
<html>
<head>
<title>change picture</title>
<link rel="stylesheet" type="text/css" href="/css/result-light.css">
<style type='text/css'>
#Timer_Countdown{
background:black;
color:yellow;
font-weight:bold;
text-align:center;
}
</style>
<script type = "text/javascript">
function displayNextImage() {
x = (x === images.length - 1) ? 0 : x + 1;
document.getElementById("img").src = images[x];
}
function displayPreviousImage() {
x = (x <= 0) ? images.length - 1 : x - 1;
document.getElementById("img").src = images[x];
}
//$json = json_encode($files);
//json = <?php echo $json; ?>
//var images = JSON.parse(json);
//var images = <?=json_encode($files)?>;
var images = [];
var x = -1;
var swap_hours = 0;
var swap_minutes = 0;
var swap_seconds = 5;
var down_counter_hours;
var down_counter_minutes;
var down_counter_seconds;
function initTimer() {
down_counter_hours = swap_hours;
down_counter_minutes = swap_minutes;
down_counter_seconds = swap_seconds;
counter = setInterval(switcher, 1000);
}
function restartCounter() {
down_counter_hours = swap_hours;
down_counter_minutes = swap_minutes;
down_counter_seconds = swap_seconds;
}
function switcher() {
down_counter_seconds--;
if (down_counter_hours <= 0 && down_counter_minutes <= 0 && down_counter_seconds <= 0) {
swapColor();
restartCounter();
}
if (down_counter_seconds <= 0 && down_counter_minutes > 0) {
down_counter_seconds = 60;
down_counter_minutes--;
}
if (down_counter_minutes <= 0 && down_counter_hours > 0) {
down_counter_minutes = 60;
down_counter_hours--;
}
document.getElementById("Timer_Countdown").innerText = down_counter_hours+":"+down_counter_minutes+":"+down_counter_seconds;
}
function swapColor() {
displayNextImage();
}
</script>
<div id="div_hours" class="div_box"></div>
<div id="div_minutes" class="div_box"></div>
<div id="div_seconds" class="div_box"></div>
<div id="div_switcher" class="div_box"></div>
</head>
<body onload = "initTimer()">
<div id="Timer_Countdown"> </div>
<img id="img" src="http://newsxpressmedia.com/files/theme/radar000005.Gif">
<button onclick="displayPreviousImage(); restartCounter()">Previous</button>
<button onclick="displayNextImage(); restartCounter()">Next</button>
</body>
</html>
At the top i have a php code starting with <?php and ending with ?>
But netbeans display near the line on the left: <?php the error:
Probable cause: Attempt to use an XML processing instruction in HTML.
(XML processing instructions are not supported in HTML.)
I don't want to create php project but using html5 project and using php code also.
So now i think the xampp should come in place and the netbeans should use it's .htaccess that was created automatic once i installed xampp.
Is there any way to use PHP code inside HTML5 project in netbeans 8.0.1 ?
And i'm doing it all local for now for the testing.
Here are the files. Right now I keep getting a message from the alert that the track variable is undefined. It seems like the PHP works because if i go straight to the php link, and manually type in the GET variable, i get the song returned. Also, I am looking for a way to get a random 10 second clip of a song (like how my music teacher tests us). The way I thought of is to divide the duration by 10 and multiply it by a random number, and then use a setineterval to see if the currenttime() is 10 seconds more that the initial audio time.
//index.php
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Music Final Quiz</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<audio src="" id="player"></audio>
<button id="change_track">Play A Different Track</button>
<script src="jquery.js"></script>
<script src="script.js"></script>
</body>
</html>
//script.js
var player = document.getElementById("player");
var changeTrack = document.getElementById("change_track");
var previousNumber = null;
var timeStart = null;
function loadTrack(){
var randomNumber = Math.floor(Math.random()*11);
if(randomNumber != 0 && randomNumber != previousNumber){
previousNumber = randomNumber;
}else{
randomNumber = 1;
}
var track = $().get("generate_song.php?track_number=" + randomNumber);
player.src = track;
player.load();
// player.currentTime() = (player.duration/10) * Math.floor(Math.random()*11);
player.play();
alert(track);
}
window.addEventListener("load", loadTrack);
changeTrack.addEventListener("click",loadTrack);
//generate_song.php
$directory = "Audio_Files";
$files = scandir($directory);
$requested_song = $_GET["track_number"];
echo $files[$requested_song + 1]."<br/>";
player.currentTime is property, not a function so it should be:
player.currentTime = (player.duration/10) * Math.floor(Math.random()*11);
For interval part I would add interval and check if song is paused:
function loadTrack(){
var randomNumber = Math.floor(Math.random()*11);
if(randomNumber != 0 && randomNumber != previousNumber){
previousNumber = randomNumber;
}else{
randomNumber = 1;
}
var track = $().get("generate_song.php?track_number=" + randomNumber);
player.src = track;
player.load();
player.currentTime = (player.duration/10) * Math.floor(Math.random()*11);
player.play();
playTenSeconds = setInterval(function(){
if(player.paused === false){
player.pause();
alert(track);
clearInterval(playTenSeconds);
}else{
player.play();
}
}, 10);
}
I am trying to create my own method of receiving texts which are alerts from a website. In this script I am using php, I get the html of a site on another domain, then paste its html into the current page, then use jquery to extract information from it, then use its click() button to submit a form with the data in a textarea tag, which then gets passed to a php code. There I send a text with the info to me. This works so far. But now I am trying to automate this in putty terminal using cron. But using the command nohup php myscript.php, it seems to run the php file, but I am not recieving any texts. I think it has something to do with the submit button.
Does anyone know a technique that I can use to solve this problem so that the putty code above will work?
Thanks.
<html>
<head>
<title>
Test
</title>
<script type="text/javascript" src="Includes/jquery-1.8.1.min.js">
</script>
</head>
<body>
<?php
$Fname = $_POST["new_movies"];
if (isset($Fname)) {
$formatted_number = "4163958750#msg.telus.com";
$pieces = explode("\n", $Fname);
$count = 0;
$build = "";
foreach ($pieces as &$value) {
$build = $build.$value."\n";
$count = $count + 1;
if ($count==2) {
$count = 0;
mail("$formatted_number", "", "$build");
$build = "";
}
}
}
else {
$contents = file_get_contents( "http://extratorrent.com/" );
echo "$contents";
}
?>
<form method="post" action="<?php echo $PHP_SELF;?>" style="display:none">
<textarea rows="5" cols="20" id="my_text_field" name="new_movies" wrap="physical"></textarea>
<br />
<input id="my_submit_button" type="submit" value="submit" name="submit"></input>
</form>
<script type="text/javascript">
var build = "";
var g = $('.tl').eq(0);
g = $('.tlr, .tlz', $(g));
for (var i=0; i<g.length; i+=1) {
val = $ ( 'a', $ ('td', g[i]) ).attr('title');
val = val.substr(9);
val = val.substring(0, val.length-8);
build += val;
if (i < g.length-1) {
build += '\n';
}
}
$('#my_text_field').val(build);
if ($('#my_text_field').val().trim() != "") {
$('#my_submit_button').click();
}
</script>
</body>
</html>
I've been scratching my head about this for a few days now, hope you guys can help.
I need to find out the size of the browser when a page is loaded.
I am writing a PHP page with PHP and javascript. The page starts with this code:
if ( empty($_GET['w']) ) {
echo '<!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">
<body>
<script type="text/javascript">
var winW = 630, winH = 460;
if (document.body && document.body.offsetWidth) {
winW = document.body.offsetWidth;
winH = document.body.offsetHeight;
}
if (document.compatMode=="CSS1Compat" &&
document.documentElement &&
document.documentElement.offsetWidth ) {
winW = document.documentElement.offsetWidth;
winH = document.documentElement.offsetHeight;
}
if (window.innerWidth && window.innerHeight) {
winW = window.innerWidth;
winH = window.innerHeight;
}
location.replace("'.$_SERVER['PHP_SELF'].'?w=" + winW + "&h=" + winH );
</script>
</body>
</html>';
} else {
$w = $_GET['w'];
$h = $_GET['h'];
// my main page goes here
}
This code basically gets the resolution and then reloads the page with the width and height sent in the url's query so that PHP can then use those values.
The problem is: when the user resizes his/her window and then reloads the page, the values sent are the old values (because they are still in the URL query).
How can I find new values of width and height every time a page is loaded or reloaded?
Thanks
I am not 100% sure, but you can't stop page from begin reloaded by user interaction. But you can listen to page unload events so that you can do what you need to do.
The problem with this code of yours is that it does absolutely nothing if w and h exist as url parameters. If you look at the source, it'll be blank.
What you should do is to check if the url parameters match with the actual values that the window currently has and then proceed to do whatever it is you plan on doing.
<?php
$w = 0;
$h = 0;
if (isset($_GET['w'])) {
$w = $_GET['w'];
}
if (isset($_GET['h'])) {
$h = $_GET['h'];
}
echo '<!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">
<body>
<script type="text/javascript">
window.onload = function(event) {
var winW = 630, winH = 460;
if (document.body && document.body.offsetWidth) {
winW = document.body.offsetWidth;
winH = document.body.offsetHeight;
}
if (document.compatMode=="CSS1Compat" &&
document.documentElement &&
document.documentElement.offsetWidth ) {
winW = document.documentElement.offsetWidth;
winH = document.documentElement.offsetHeight;
}
if (window.innerWidth && window.innerHeight) {
winW = window.innerWidth;
winH = window.innerHeight;
}
if (winW=='.$w.' && winH=='.$h.') {
document.write("Yay, victory!");
} else {
location.replace("'.$_SERVER['PHP_SELF'].'?w=" + winW + "&h=" + winH );
}
}
</script>
</body>
</html>';
// my main page goes here
?>
How about using jQuery, with polling to a script that will return the value received via GET as json. It will update to any value as the screen is resized with no user interaction!
In my example it just updates the paragraph but you could also do something with the values. (Write less do more ;p)
<?php
if(isset($_GET['width']) && $_GET['height']){
$size = array('width'=>intval($_GET['width']),'height'=>intval($_GET['height']));
echo json_encode($size);
die;
}
?>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script>
function poll(){
setTimeout(function(){
$.ajax({ url: "http://localhost/screensize.php?width="+ $(window).width() +"&height="+ $(window).height() +"",cache: false,
success: function(data){
//Do something with returned json
$("#screensize").replaceWith("<p id=\"screensize\">Width:"+ data.width +"px Height:"+ data.height +"px</p>");
//Next poll
poll();
}, dataType: "json"});
// 1/2 a sec
}, 500);
}
$(document).ready(function(){
poll();
});
</script>
<p id="screensize">Updating...</p>
Use Jquery. Roughly something like this should work. Attach a .resize handler to the window.
$(document).ready(function(){
echoWindowDimensions();
$(window).resize(function(){
echoWindowDimensions();
});
});
function echoWindowDimensions {
var h = $(window).height();
var w = $(window).width();
alert('height'+h+' width'+w);
}
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