Jordan
Elite Poster
[M:5000]
Posts: 286
|
Post by Jordan on Aug 15, 2011 19:13:30 GMT
I don't think this is exactly what you want so just tell me what needs to be changed. Right now it shows only certain pictures for each hour, but it randomizes their order on each refresh. <div id="randomImages"></div> <script type="text/javascript"> <!--
(function() { var images = { twentyToSix: [ "http://i1093.photobucket.com/albums/i433/dyruse/dog.png", "http://i1093.photobucket.com/albums/i433/dyruse/avatar.png", "http://i52.tinypic.com/2ylvj91.jpg", "http://img29.imageshack.us/img29/2854/caithnessav2.jpg" ], sixteen: [ "http://s2.images.proboards.com/menu/home.gif", "http://s2.images.proboards.com/menu/topics.png", "http://s2.images.proboards.com/menu/help.gif", "http://s2.images.proboards.com/menu/members.gif" ], fourteen: [ "http://s2.images.proboards.com/menu/home.gif", "http://s2.images.proboards.com/menu/topics.png", "http://s2.images.proboards.com/menu/help.gif", "http://s2.images.proboards.com/menu/members.gif" ], six: [ "http://s2.images.proboards.com/menu/home.gif", "http://s2.images.proboards.com/menu/topics.png", "http://s2.images.proboards.com/menu/help.gif", "http://s2.images.proboards.com/menu/members.gif" ], extra: [ "http://s2.images.proboards.com/menu/home.gif", "http://s2.images.proboards.com/menu/topics.png", "http://s2.images.proboards.com/menu/help.gif", "http://s2.images.proboards.com/menu/members.gif" ] };
function shuffleAndDisplayImages(_images) {
// Shuffle the order of the array of images _images.sort(function() { return 0.5 - Math.random(); });
// Create all the images, and then append them to the div var div = document.createElement("div"); for(var a = 0; a < _images.length; a++) { var img = new Image(); img.src = _images; img.border = 0; div.appendChild(img); } document.getElementById("randomImages").appendChild(div); }
var date = new Date(); var hour = date.getHours();
if(hour >= 20 || hour <= 6) { shuffleAndDisplayImages(images.twentyToSix); } else if(hour >= 16) { shuffleAndDisplayImages(images.sixteen); } else if(hour >= 14) { shuffleAndDisplayImages(images.fourteen); } else if(hour >= 6) { shuffleAndDisplayImages(images.six); } else { shuffleAndDisplayImages(images.extra); } })();
//--> </script>
|
|
Dyr
Junior Poster
Posts: 36
|
Post by Dyr on Aug 15, 2011 19:41:16 GMT
Thanks so much for the help!
I'd like images to not randomize with each refresh. In a perfect world, I'd like it where there is a list of image urls (at least 10+) and each hour a random set of 5 are picked from that list and displayed for that hour. I'm willing to compensate if this isn't possible though!
|
|
Jordan
Elite Poster
[M:5000]
Posts: 286
|
Post by Jordan on Aug 15, 2011 20:41:32 GMT
Ah, got it. This is possible, but there is one more thing I need to know. I can write a code to do this in pure Javascript, but the random images would be different for each person. However, if you are wanting the images to be the same for everyone, you'll need to use some server-side code as well which means you'll need to get a host to host your files. There are free ones out there like 000webhost.com so this isn't really an issue, but it would require more work. Below is the pure Javascript solution. I haven't thoroughly tested it, but it appears to work correctly. <div id="randomImages"></div> <script type="text/javascript"> <!--
(function() {
// How many random images to generate var randomImageCount = 5;
var images = [ "http://i1093.photobucket.com/albums/i433/dyruse/dog.png", "http://i1093.photobucket.com/albums/i433/dyruse/avatar.png", "http://i52.tinypic.com/2ylvj91.jpg", "http://img29.imageshack.us/img29/2854/caithnessav2.jpg", "http://s2.images.proboards.com/menu/help.gif", "http://s2.images.proboards.com/menu/members.gif", "http://s2.images.proboards.com/menu/home.gif", "http://s2.images.proboards.com/menu/topics.png" ];
var date = new Date(); var hour = date.getHours();
var getShuffledArrayIndices = function() {
// Create an array containing all the indices in the images array var arrayIndices = new Array(images.length);
for(var a = 0; a < arrayIndices.length; a++) { arrayIndices = a; }
// Shuffle the array arrayIndices.sort(function() { return 0.5 - Math.random(); });
// Return an array of the first 5 elements of the array return arrayIndices.slice(0, randomImageCount); }
var displayImages = function(_indices) { var div = document.createElement("div"); for(var a = 0; a < randomImageCount; a++) { var img = new Image(); img.src = images[_indices]; img.border = 0; div.appendChild(img); } document.getElementById("randomImages").appendChild(div); }
var parseData = function(_data) { var data = {}; var str = _data.split(/;/i);
if(str.length >= 2) { data["time"] = parseInt(str[0]); data["images"] = [];
var strIndices = str[1].split(/,/i); if(strIndices.length >= randomImageCount) { for(var a = 0; a < randomImageCount; a++) { data["images"].push(parseInt(strIndices)); } } else { data = false; } } else { data = false; }
return data; }
var isInSameRange = function(_hour) { var result = false;
if((hour >= 20 || hour <= 6) && (_hour >= 20 || _hour <= 6)) { result = true; } else if(hour < 20 && hour >= 16 && _hour < 20 && _hour >= 16) { result = true; } else if(hour < 16 && hour >= 14 && _hour < 16 && _hour >= 14) { result = true; } else if(hour < 14 && hour >= 6 && _hour < 14 && _hour >= 6) { result = true; }
return result; }
var storeData = function(_indices) {
// Format of storage string: hour;indices // xx;x,x,x,x,x var data = hour + ";"; for(var a = 0; a < randomImageCount; a++) { data += _indices; if(a + 1 < randomImageCount) data += ","; }
// Save the data on the user's computer localStorage.setItem("randomImages", encodeURI(data)); }
// If there is stored data on this user's computer var imageData = localStorage.getItem("randomImages"); if(!!imageData) { var parsedData = parseData(imageData); if(parsedData) { // If we are not in the same time range, // then we need to update the images if(!isInSameRange(parsedData["time"])) { var indices = getShuffledArrayIndices(); displayImages(indices); storeData(indices); } else { displayImages(parsedData["images"]); } } } else { var indices = getShuffledArrayIndices(); displayImages(indices); storeData(indices); } })();
//--> </script>
|
|
Dyr
Junior Poster
Posts: 36
|
Post by Dyr on Aug 16, 2011 1:19:19 GMT
Tested it out and it works nice, except when I refresh the page a different set of 5 images comes up. What I was looking for was something so that the set of 5 images would only change each hour (according to user's clock). So like if someone came at 10:58 the images would still change at 11:00. I think that's what you intended but there's an error in the coding? Gah darn my n00bness to javascript, wish I was more knowledgeable.
Also I tried cell spacing/cell padding the div so the images would be cell spaced/cell padded and it doesn't seem to work. I also tried making an html table with this properties inside and outside of the div. Would I need to code cell spacing in via javascript?
|
|
Jordan
Elite Poster
[M:5000]
Posts: 286
|
Post by Jordan on Aug 16, 2011 2:21:15 GMT
Tested it out and it works nice, except when I refresh the page a different set of 5 images comes up. What I was looking for was something so that the set of 5 images would only change each hour (according to user's clock). So like if someone came at 10:58 the images would still change at 11:00. I think that's what you intended but there's an error in the coding? Gah darn my n00bness to javascript, wish I was more knowledgeable. They shouldn't change and they aren't for me, even on your site. My guess is you are using an outdated browser. Do you know which browser you are using and its version? I'm using a HTML5 feature to store data about the images on the user's computer so the Javascript code knows whether an hour has passed or not. Also I tried cell spacing/cell padding the div so the images would be cell spaced/cell padded and it doesn't seem to work. I also tried making an html table with this properties inside and outside of the div. Would I need to code cell spacing in via javascript? I can change the code to use the innerHTML property so it's easier to modify. I'm using pure DOM right now which is harder to use, especially if you aren't familiar with Javascript. I'll do this once I figure out what error you are currently experiencing.
|
|
Dyr
Junior Poster
Posts: 36
|
Post by Dyr on Aug 16, 2011 18:14:56 GMT
I'm using Safari Version 5.0.5.
Maybe would changing it so it just followed the user's clock would be easier? So at 11:00 it would change, at 12:00 it would change, etc? I'm more than willing to do that if it means simpler coding and lower versions could handle it.
Sorry for all the edits and flip-flops with this!
|
|
Jordan
Elite Poster
[M:5000]
Posts: 286
|
Post by Jordan on Aug 16, 2011 18:23:49 GMT
It's working for me on your website in Safari 5.1. The images do not change when I refresh, and I am using the user's local time. I just have to store which images were chosen for the hour on the user's local machine so the Javascript can display the same ones each time.
Paste the code below into your browser's address bar (the same place you'd type http://google.com), and tell me what it says.
javascript:alert(localStorage)
|
|
Dyr
Junior Poster
Posts: 36
|
Post by Dyr on Aug 16, 2011 18:50:40 GMT
[object Storage]
|
|
Jordan
Elite Poster
[M:5000]
Posts: 286
|
Post by Jordan on Aug 16, 2011 19:36:30 GMT
Well that means your browser supports the localStorage object so it should be working. Put this in your browser while viewing your Proboard forum and let me know what is says as well.
javascript:alert(localStorage.getItem("randomImages"))
|
|
Dyr
Junior Poster
Posts: 36
|
Post by Dyr on Aug 16, 2011 19:38:52 GMT
null
In the form of an alert message.
|
|
Jordan
Elite Poster
[M:5000]
Posts: 286
|
Post by Jordan on Aug 16, 2011 22:44:06 GMT
Do you have Skype (mine is xtriad)? I'm going to need to know a lot more to determine the error you are getting. I would recommend you wipe all your browser history, then go to your test site (http://simtrade.proboards.com/), then refresh the page a few times. It should work, but there may be differences in the Safari web browser for the Mac OS (assuming you are on a Mac which I believe is a safe assumption considering the fact that almost nobody uses the Safari web browser unless they are on a Mac since it is the default web browser on that operating system).
|
|
Dyr
Junior Poster
Posts: 36
|
Post by Dyr on Aug 16, 2011 22:59:40 GMT
I do not, but I have msn or aim? I also have a join.me account too (screensharing). Maybe that would work best so you could see the exact problem?
|
|
Jordan
Elite Poster
[M:5000]
Posts: 286
|
Post by Jordan on Aug 17, 2011 15:11:19 GMT
Screensharing would be perfect. Let me know when you are available.
|
|
Dyr
Junior Poster
Posts: 36
|
Post by Dyr on Aug 17, 2011 18:44:49 GMT
Alright, messaged you some possible times.
|
|
Jordan
Elite Poster
[M:5000]
Posts: 286
|
Post by Jordan on Aug 18, 2011 23:43:31 GMT
|
|