Posted: 4/9/2017 5:22 PM
Post subject: HTML5 + JavaScript help
Quote
theenglishman
Active player (348)
Joined: 3/21/2006
Posts: 940
Location: Toronto, Canada
PSX TASer of 2013
Before anyone asks, I have tried to ask similar questions on the Stack Overflow forums, but surprisingly they're not very helpful. I'm actually kind of disappointed. I am currently working on a client's website, and part of my assignment is to recreate a slideshow that was originally written in Flash (gah). I rewrote it in HTML5 with a bit of help from a JavaScript template 
<div class="w3-content w3-section" style="max-width:280px">
	<img class="mySlides w3-animate-fading" src="./images/280-385/banner1.jpg" style="width:100%">
	<img class="mySlides w3-animate-fading" src="./images/280-385/banner2.jpg" style="width:100%">
//etc. etc. all the way down for several dozen photos
</div>

<script>
	var myIndex = 0;
	carousel();
		function carousel()
		{
			var i;
			var x = document.getElementsByClassName("mySlides");
			for (i = 0; i < x.length; i++) 
			{
				x[i].style.display = "none";  
			}
			myIndex++;
			if (myIndex > x.length) {myIndex = 1}    
			x[myIndex-1].style.display = "block";  
			setTimeout(carousel, 9500);    
	}
</script>
This JS code works perfectly for showing the pictures in order, but now the client wants them randomized. They also like the fading transitions, so writing something brand-new is out of the question. I'm clearly not doing very well. My initial attempt at randomizing is to give each photo an id with "pic[number]" e.g. 
<img class="mySlides w3-animate-fading" src="./images/280-385/banner1.jpg" style="width:100%" id="pic1">
and then use a DOM Parser to force the URL to come through as a string 
var parser = new DOMParser();
var doc = parser.parseFromString(html, 'text/html');
var x = doc.getElementsById("pic" + Math.floor(Math.random()));
but all this accomplishes (along with any use of math.random really) is that the slideshow now displays every picture at once. The client specifically wants me to keep using w3-animate-fading, and most of the solutions to randomize photos I've seen online involve completely rewriting the code with JS+jQuery and losing access to the stylesheet. If anyone could help me out, that would be fantastic :)
My current project: Something mysterious (oooooh!) My username is all lower-case letters. Please get it right :(
Posted: 4/9/2017 5:44 PM
Post subject: I should name my firstborn after Masterjun by this point.
Quote
theenglishman
Active player (348)
Joined: 3/21/2006
Posts: 940
Location: Toronto, Canada
PSX TASer of 2013
New version of carousel (huge thanks to Masterjun for the help!) which randomizes, but still has the chance of showing the same picture twice in a row 
				<script>
					var myIndex = 0;
					carousel();

						function carousel()
						{
							// var min = 0,
							// 	max = 48,
							var	i,
								x = document.getElementsByClassName("mySlides");
							
							for (i = 0; i < x.length; i++) 
							{
								x[i].style.display = "none";  
							}
							
							myIndex = Math.floor(Math.random() * x.length);

							// myIndex++;

							// if (myIndex > x.length)
							// 	{
							// 		myIndex = 1;
							// 	}    
							
							x[myIndex].style.display = "block";
							
							setTimeout(carousel, 9500);   
						}
				</script>
My current project: Something mysterious (oooooh!) My username is all lower-case letters. Please get it right :(
Posted: 4/10/2017 2:59 AM
Quote
Patashu
He/Him
Joined: 10/2/2005
Posts: 4045
If you want the same picture to not show twice in a row, what about: 

var myIndex = 0; 
var oldMyIndex = 0; 

while (myIndex == oldMyIndex)
{
    myIndex = Math.floor(Math.random() * x.length); 
}

oldMyIndex = myIndex;
My Chiptune music, made in Famitracker: http://soundcloud.com/patashu My twitch. I stream mostly shmups & rhythm games http://twitch.tv/patashu My youtube, again shmups and rhythm games and misc stuff: http://youtube.com/user/patashu
Posted: 4/10/2017 8:09 PM
Quote
theenglishman
Active player (348)
Joined: 3/21/2006
Posts: 940
Location: Toronto, Canada
PSX TASer of 2013
Patashu wrote:
If you want the same picture to not show twice in a row, what about: 

var myIndex = 0; 
var oldMyIndex = 0; 

while (myIndex == oldMyIndex)
{
    myIndex = Math.floor(Math.random() * x.length); 
}

oldMyIndex = myIndex;
That worked. Thanks!
My current project: Something mysterious (oooooh!) My username is all lower-case letters. Please get it right :(
Posted: 4/13/2017 4:52 AM
Quote
Zanoab
Joined: 12/31/2009
Posts: 174
This is also an option: 
var myIndex = 0; 
myIndex = Math.floor((myIndex + 1 + Math.random() * (x.length - 1)) % x.length);
This also prevents issues from having slideshows with a length of one.
Posted: 4/13/2017 6:57 PM
Quote
theenglishman
Active player (348)
Joined: 3/21/2006
Posts: 940
Location: Toronto, Canada
PSX TASer of 2013
Thank you all so much for your help! I really appreciated everything you guys are doing to help out. The other main issue I'm having now is with screen size (current code for index here). The way the page was designed, it has two "layers" of <div>s, one for creating background colours (background and header_spacer), and a second called container, which acts as a "nest" layer for the menu, JS custom code for the drop-down menu, and body text, structured like this: CONTAINER (left_column (left_column_contact), text_container, footer_spacer, footer (badge, copyright)) The client wants the site to be able to dynamically scale to monitor size like something you'd see on WordPress. On the advice of Fog, I put the "container" div into a broader nest called "scaler" and attempted to write CSS that would scale or pad the divs into submission. My least bad attempt so far has been 
.scaler
{
	width: 100%;
    display: table;
}

.scaler > div
{
	display: table-cell;
}
Bad news is it does nothing, but at least it hasn't broken the formatting like my other attempts. Solutions I've found online, most of which involve position:absolute; etc., only apply to a single div, but I'm juggling ten of them, and I don't want to have to rewrite the site just to implement this feature.
My current project: Something mysterious (oooooh!) My username is all lower-case letters. Please get it right :(