I am using this which loads images depending on day of the week, but I also would like to show text and load it from a file, too. I like to use it as todays menu, so the cook uploads text files, like monday.txt tuesday.txt, and does not need to mess up with coding.
<html>
<head><meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<META HTTP-EQUIV="refresh" CONTENT="60">
<title>LOUNAS</title>
<style type="text/css">
body {
overflow:hidden;
}
</style>
<script type="text/javascript"><!--
var imlocation = "";
function ImageArray (n) {
this.length = n;
for (var i =1; i <= n; i++) {
this[i] = ' '
}
}
image = new ImageArray(7);
image[0] = 'sunday.jpg';
image[1] = 'monday.jpg';
image[2] = 'tuesday.jpg';
image[3] = 'wednsday.jpg';
image[4] = 'thursday.jpg';
image[5] = 'friday.jpg';
image[6] = 'saturday.jpg';
var currentdate = new Date();
var imagenumber = currentdate.getDay();
document.write('<img src="' + imlocation + image[imagenumber] + '"> style="width:100%;height:100%;" border="0" /');
//--></script></head>
<body bgcolor="#000000">
</body>
</html>
You need to use AJAX request in order to read files from the server.
(If your intention is to display the data to client and not self-display site)
You'll need a server and back-end language like PHP, and then you'll need to make an AJAX request to server depend on the day of the week (meaning which url?) and then display the data.
Second, about what you did, using document.write it's not best way, becuase it clear the page after using and all the data that you had will gone (meaning HTML), and also create element this way dosen't work good in all browsers , you should use createElement instead.
Also, you can use CSS to give style to that element instead of doing it via JavaScript
Related
I currently have a sitation where I can click on an image and it will return a new image, and in the previous grid-item, it will return the day and time I clicked it.
What I want is to have this BUT where I also can see the updated image and clicked time after closing and re-opening the browser. - What is the easiest / quickest way to achieve this?
I feel like adding to my database would be a way forward, but if that is what I would need to do, how would I go about storing and out-putting the time based on the time I click?
(This is not intended to be a live site, or for others to see or use, so local quick-fixes are viable).
foreach ($flavours as $key => $flavour) {
echo "<div class='grid-container'>";
echo "<div class='item7'><p id='p3'>Sylus: </p></div>";
echo "<div class='item8'><img src='htts://i.i.com/k.jpg' onclick='cS(this)' /></div>";
echo "</div>";
}
function cS(element) {
if (element.src == "htts://i.i.com/k.jpg")
{
element.src = "http://i.i.com/v.jpg";
var d = moment().format('dddd HH:mm');
element.parentElement.previousElementSibling.firstChild.innerHTML = "Sylus: " + d;
}
else
{
element.src = "htts://i.i.com/k.jpg";
element.parentElement.previousElementSibling.firstChild.innerHTML = "Sylus: ";
}
}
Try this example using localStorage. This will find the <p> tag elements within the body, and then uses each element to get the id for reference.
I tried using a fiddle here, but the site has a security complaint with the localStorage.
Copy/paste this code to a file to give it a try. Note that you will likely need to update the moment.js reference in this code to match your file path.
<!doctype html>
<html>
<head>
<title>localStorage example</title>
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="moment.js"></script>
</head>
<body>
<div class='grid-container'>
<div class='item7'><p id='p0'>Sylus: </p></div>
<div class='item8'><img src='htts://i.i.com/k.jpg' onclick='cS(this)' /></div>
</div>
<div class='grid-container'>
<div class='item7'><p id='p1'>Sylus: </p></div>
<div class='item8'><img src='htts://i.i.com/k.jpg' onclick='cS(this)' /></div>
</div>
<script>
function cS(element) {
var pTag = element.parentElement.previousElementSibling.firstChild;
if (element.src == "htts://i.i.com/k.jpg")
{
element.src = "http://i.i.com/v.jpg";
var d = moment().format('dddd HH:mm');
var pText = 'Sylus: ' + d;
pTag.innertHTML = pText;
// Set (save) a reference to browser localStorage
localStorage.setItem(pTag.id, pText);
}
else
{
element.src = "htts://i.i.com/k.jpg";
pTag.innerHTML = "Sylus: ";
// Remove the stored reference. (delete this if not needed)
localStorage.removeItem(pTag.id);
}
}
$(document).ready(function() {
pElements = $('body').find('p').each(function(index, element) {
// Get the localStorage items. The retrieved <p> elements,
// we use their id value to reference the key in storage.
storageItem = localStorage.getItem(element.id);
if (storageItem) {
$('#' + element.id).text(storageItem);
}
});
});
</script>
</body>
</html>
After clicking an image (will need to replace with something real), open the browser's web inspector interface, click the Storage tab, and then expand the Local Storage in the list (see image below), and choose the file being tested.
There will be key/value pairs displayed. The keys are references to the <p> tag id's, and the value will have a label-date strings such as Sylus: Wednesday 22:28.
Once you see an entry, or two, being set to the storage, close and then reopen the browser tab. The <p> elements that had dates should be reloaded with their values from the storage.
The browser's Local Storage area should be similar to the image below:
save it to local storage, or a cookie with the exp. date too far in the future
I hope I'm not asking a "duhish" question with what I'm asking but I do need some clarification on what's going on in the "background". I created a simple clock exercise for myself this weekend. It works, it shows up on my browser and shows the current time just like I want it to. That said, when I try to create it again with a different HTML file and Javascript file.... it doesn't work again. It shows up in the original file I created but on the same file that has the same code... It doesn't show the timer.
Here's the HTML I wrote down in the original
<html>
<head>
<title>Kenneth's clock</title>
<meta charset="UTF-8">
<link rel='stylesheet' type='text/css' href=''>
<script src='clock.js'></script>
</head>
<body>
<p id ='clock'></p>
</body>
</html>
Then the Javascript.
function getTime() {
var now = new Date();
var h = now.getHours();
var m = now.getMinutes();
var s = now.getSeconds();
m = checkTime(m);
s = checkTime(s);
document.getElementById('clock').innerHTML = h + ":" + m + ":" + s;
setTimeout('getTime()', 1000);
function checkTime(time) {
if(time<10) {
time = "0" + time;
}
return time;
}
}
window.onload = function() {
getTime();
}
Imagine if I recreated that entire thing again and I changed the id on the new HTML file to digitalclock. I make the new code in javascript to getElementById('digitalclock') and viola.. new exercise to learn basic javascript....
For some reason, it doesn't work. What's going on in the backend to make it so that I can't get it to work?
I'm trying to get a webpage to open up a random image and text to go along with it. I will be using this to have different events posted on our library's front page. Pulling from different examples on the web I've gotten the basics to work fine with this.
var total_images = 2;
var random_number = Math.floor((Math.random()*total_images));
var random_img = new Array();
var random_text = [];
random_img[0] = "<a href = 'www.webpage.com'><img src='image_1.jpg' alt='Image'></a>";
random_text[0] = "<p>Here is some text</p>";
random_img[1] = "<a href = 'www.webpage2.com'><img src='image_2.jpg' alt='Image2'></a>";
random_text[1] = "<p>Here is some text2</p>";
document.write(random_img[random_number] + ' <br/><p id="myP">' + random_text[random_number] + 'dfsadf</p>');
function myFunction() {
document.getElementById("myP").style.font = "italic bold 20px arial,serif";
}
It works as hoped and on a refresh will display a new event picture and text. What I am having trouble with is I cannot get it to match the styles from the rest of our webpage. I've tried using functions to create a new id, regular html tags and just about anything I can pull from the web. Any time I add anything more to the random_text[] = "<p>codehere</p>"; than the usual <b> or <i> it breaks the page.
If I can change the fonts to match it would be perfect.
It will probably break the page because a <p> tag should not be put inside of another <p> tag. Try this for the document write:
document.write('<div id="myP">' + random_img[random_number] + ' <br/>' + random_text[random_number] + 'dfsadf</div>');
And the fonts could be modified using CSS in your HTML page:
<style type="text/css">
#myP p { font:20px arial,sans-serif; }
</style>
I am currently working for a library that would like to have a webpage designed digital signage. Most of it has been designed with widgets and through a program called Xcite Pro. I was unable to find any widgets that will allow me to do a slideshow from a directory that will cycle through. I do know the foundations to JavaScript and php.
I do not know how to take a directory and have JavaScript run through an entire directory into a array with picture values. I would like to use the setInterval() command but I seem to only know how to search through a directory by php. I did find a explanation on this site that tells me how to use php to search through and then pull all pictures to be shown. If i can get that to all go into an array that could be used with JavaScript on the site that would actually work fine. The link for that explanation is LINK.
Currently I am just using a folder called pics in my main file. So my directory is "pics" nothing to special. I have seen some things being talked about html5 using a new file search function but that sounds more like for finding particular files rather then taking the entire components of a folder into an array.
Edited 12/23/2013 Per PHPGlue Request and help.
So far the code that I have played with are:
Test html (Main Page)
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>Basic XHTML Document</title>
</head>
<body>
<p>President Obama is from Hawaii</p>
<p><img id="scroller" alt="" src="pics/test.jpg" width="600" height="400"/></p>
<script type='text/javascript' src='common.js'></script>
<script type='text/javascript' src='pics\imagefun.php'></script>
</body>
</html>
Common js File in main directory with main page
// common.js
//<![CDATA[
var doc = document, bod = doc.body, IE = parseFloat(navigator.appVersion.split('MSIE')[1]);
function gteIE(version, className){
if(IE >= version){
bod.className = className;
}
}
function E(e){
return doc.getElementById(e);
}
//]]>
Finally I have 2 pictures in a picture folder along with a imagefun php file.
// imagefun.php
<?php
$imgs = implode(array_merge(glob('*.png'), glob('*.jpg')), "', '");
echo "//<![CDATA[
var imgs = ['$imgs'], ni, iA = [];
for(var i in imgs){
ni = new Image; ni.src = imgs[i]; iA[i] = ni;
}
var pre = onload, iN = 0, iL = imgs.length-1, imgElementId = E('scroller');
imgElementId.src = imgs[0];
onload = function(){
if(pre)pre();
imgElementId.src = iA[0];
setInterval(function(){
if(iN >= iL)iN = 0;
imgElementId.src = iA[++iN];
}, 2000);
}
//]]>";
?>
PHPGlue-- Thank you for all the time that you have put into this. Really not trying to be a pain at all and I really do appreciate all of your patience. I have made sure to swap names based on my file structures. Based on what I see for the basic ideas of the code I would think it should work. As I said though when I load to test it, it will only show the picture I defaulted on the load and then never change. One thing that I have noticed is that if you take the code of the image fun php code and run just that, all it returns is an output of //=IL)iN = 0; imgElement.src = iA[++iN]; }, 2000; } //]]> If I am right then that string of output should be similar to the whole thing rather then just a fragment of a line like it is. I do believe if I am understanding the goal of this code we are having it spit out some code into the src location of the picture location?
Ultimately if possible I would like to have a cloud based file location that I could use to have an individual who works here store pictures in that file and then have the website pull all files in that location to be loaded to the page one at a time at an interval of about 15000ms. I would appreciated any comments or recommendations.
I ended up resolving this myself. Thank you for all the help.
This was a multi parter either way.
I created a php cycler code
Note** This code will actually run through all that was needed just in php. Sadly though as I wanted this to show up on a web page that would cycle on a timer I needed to use some javascript coding. This caused me to change parts of what was used. If you want to do the same thing you drop all code after you have created the pics array or you can even keep up to the point of the forwards and backwards array to be passed into javascript.
<?php
// create a variable to hold the directory location
$Dir = "..\Directory\pics";
// Variable to directory
$dirOpen = opendir($Dir);
// Need to start with a main array
$pics = array();
// Need two arrays for going forward and back
$forwards = array();
$backwards = array();
// Need variables for the program
$c = 0;
$d = 0;
$e = 0;
$i = 0;
$f = 0;
// Need to run through all files in folder and store into an array
while ($curFile = readdir($dirOpen))
{
if(strpos($curFile,'.jpg') !== false)
{
$pics[$i] = $curFile;
++$i;
}
}
closedir($dirOpen);
// declare variables to count previous opening of file
$a = count($pics); // number of pics in the folder
$b = count($pics) - 1; // need to account for starting at 0
// run through pics array fowards
while($f < $a)
{
$forwards[$f] = $pics[$f];
++$f;
}
// run through the pics array backwards
while($b > -1)
{
$backwards[$c] = $pics[$b];
--$b;
++$c;
}
// variables for the functions us
// use function for forward pics
/*function forward($array, $a)
{
$d = 0;
if($d == $a)
{
$d = 0;
return "pics/".$array[$d];
++$d;
}
else
{
return "pics/".$array[$d];
++$d;
}
}
function backward($backwards, $b)
{
if ($e == $b) // going to have a conflict with B becuase right now it should be at -1 or 0. need to compare to the value of -1 and have it reset to the max when reached.
{
}
}
*/
/*// Test the output of each array
foreach($pics as $imgs)
echo $imgs . "<br />";
foreach($forwards as $fors)
echo $fors . "<br />";
foreach($backwards as $backs)
echo $backs . "<br />";
*/
// $forwards and $backwards are the arrays to use for pics cycling
?>
To pass onto the java script I had to use the following code on another php page created to work with all html design of the main page.
<!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 content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>Untitled 1</title>
</head>
<body>
<form name="myForm">
<p> </p>
<p> </p>
<p class="auto-style1"><img alt="" src="" id="pics" height="400" width="300"/></p>
<?php include 'imgCycler.php'; ?>
<script type='text/javascript'>
/* <![CDATA [ */
var forwards = <?php echo json_encode($forwards); ?>;
var backwards= <?php echo json_encode($backwards); ?>;
var max = <?php echo $a ?>;
var count = 0;
function changePic()
{
document.myForm.pics.src='pics/' +forwards[count];
//document.myForm.pics2.src='pics/'+backwards[count];
++count;
if (count == max)
{
count = 0;
}
}
var start = setInterval('changePic()',5000);
</script>
</body>
</html>
Again PHPGlue thank you for all the help you offered. Hope this is useful for anyone else that wishes to do something similar. Please let me know if there are any questions on the code.
Let's start by making a common.js file:
// common.js
//<![CDATA[
var doc = document, bod = doc.body, IE = parseFloat(navigator.appVersion.split('MSIE')[1]);
function gteIE(version, className){
if(IE >= version){
bod.className = className;
}
}
function E(e){
return doc.getElementById(e);
}
//]]>
Now put the script below in the same folder you keep your images in:
// imagefun.php
<?php
$imgs = implode(array_merge(glob('*.png'), glob('*.jpg')), "', '");
echo "//<![CDATA[
var imgs = ['$imgs'];
for(var i in imgs){
new Image().src = imgs[i];
}
var pre = onload, iN = 0, iL = imgs.length-1, imgElement = E('imgElementId');
imgElement.src = imgs[0];
onload = function(){
if(pre)pre();
imgElement.src = imgs[0];
setInterval(function(){
if(iN > iL)iN = 0;
imgElement.src = imgs[iN++];
}, 2000);
}
//]]>";
?>
Change the imgElementId to yours inside E('imgElementId'). E('imgElementId') must refer to an <img id='imgElementId' /> tag.
Now on your HTML page, refer to this JavaScript page as PHP, at the bottom of your body:
<script type='text/javascript' src='common.js'></script>
<script type='text/javascript' src='path/imagefun.php'></script>
</body>
</html>
Also, change src='path/ to your image folder path, and add or subtract the correct , glob('*.jpg')s and the like, to suit your needs.
Notes:
E(id) gets your Element by id. bod.className changes to the <body class='njs'> to <body class='js'>, assuming you have the class attribute njs in your HTML body tag, for CSS without JavaScript (progressive enhancement). gteIE(version, className) is for Internet Explorer versions greater than or equal to a number passed as version, changing that version or greater's body class attribute to the className argument, because IE10+ won't accept HTML IE comments for CSS changes. imgfun.php caches the images into your Browser memory based on globs found in the folder the script resides in. Then, once these images are loaded into your Browser cache, they are cycled through using setInterval.
On my website (http://daaamnthisisfunny.blogspot.com/) I have set up an image slide show that every time the user clicks the right arrow it will take him/her to the next picture, and do the opposite when clicks the previous arrow. The problem is when the user refresh the page it will reset the slide to the first image. What I want to make is a website like (http://9gag.com/gag/1672046) that every time the user click on the next arrow the Url of the site will change accordingly. Do you have any ideas how I can accomplish that ?
This is what i am using for my website:
<!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>
<script language="JavaScript">
var NumberOfImages = 10
var img = new Array(NumberOfImages)
img[0] = "http://damnthisfunny.site40.net/1.jpg"
img[1] = "http://damnthisfunny.site40.net/2.jpg"
img[2] = "http://damnthisfunny.site40.net/3.jpg"
img[3] = "http://damnthisfunny.site40.net/4.jpg"
img[4] = "http://damnthisfunny.site40.net/5.jpg"
img[5] = "http://damnthisfunny.site40.net/6.jpg"
img[6] = "http://damnthisfunny.site40.net/7.jpg"
img[7] = "http://damnthisfunny.site40.net/8.jpg"
img[8] = "http://damnthisfunny.site40.net/9.jpg"
img[9] = "http://damnthisfunny.site40.net/10.jpg"
var imgNumber = 0
function NextImage()
{
imgNumber++
if (imgNumber == NumberOfImages)
imgNumber = 0
document.images["VCRImage"].src = img[imgNumber]
}
function PreviousImage()
{
imgNumber--
if (imgNumber < 0)
imgNumber = NumberOfImages - 1
document.images["VCRImage"].src = img[imgNumber]
}
</script>
<body>
<center>
<img name="VCRImage" src="http://damnthisfunny.site40.net/1.jpg" /></dr>
<br />
<a href="javascript:PreviousImage()">
<img border="0" src="left1.jpg" /></a>
<a href="javascript:NextImage()">
<img border="0" src="right1.jpg" /></a>
</center>
</body>
</html>
Just an idea, how about on page unload set a cookie value? May work but I'd have to test
I'd recommend using jquery for events:
http://api.jquery.com/unload/
Then for cookie parsing use
http://archive.plugins.jquery.com/project/Cookie
I'm not positive this will work
Yes you can save the current image number in the cookie. so as soon as the page loads you check for the presence of a cookie first. If there is one then you set the current image to the number in the cookie.
By the way this is all done in javascript.
Example.
var imgNumber = getCookie("lastImage") || 0;
// where getCookie is a function to retrieve cookie value
Update:
here are 2 hand functions:
// get Cookie
function getCookie(szName){
var szValue = null,
cookie = document.cookie,
arr.arr2;
if (cookie){ // only if cookie exists
arr = cookie.split((escape(szName) + '='));
if(2 <= arr.length){
arr2 = arr[1].split(';');
szValue = unescape(arr2[0]);
}
}
return szValue;
}
// set Cookie
function setCookie(szName, szValue, szExpires, szPath, szDomain, bSecure) {
var szCookieText = escape(szName) + '=' + escape(szValue),
date;
if(!szExpires) // default expiration date : 1 year
{
date = new Date();
date.setTime(date.getTime()+(365*24*60*60*1000));
szExpires = date.toGMTString();
}
szCookieText += (szExpires ? '; EXPIRES=' + szExpires : '');
szCookieText += (szPath ? '; PATH=' + szPath : '');
szCookieText += (szDomain ? '; DOMAIN=' + szDomain : '');
szCookieText += (bSecure ? '; SECURE' : '');
document.cookie = szCookieText;
}
One way is to use HTML5's replaceState method. This allows you to change the URL that is used to reload the page. This depends on the server sending the correct image in the slideshow for the given URL. Although the next and previous links would appear to link to those same URLs, you would actually call replaceState behind the scenes to avoid reloading the page.
For browsers that don't support replaceState you can still change the anchor of the URL. For browsers that support the :target CSS pseudoclass the slideshow can be written entirely in CSS. Otherwise you will need to show the correct image depending on the anchor. Some browsers provide the hashchange event which allows you to detect the user changing the anchor (e.g. by clicking back).