I want to reuse recipes_number1 in '.btn-random' after I click the button, but my code is not work...
I have checked, I found that recipes_number1 can't bring out...
can anyone save me ? :(
var recipes_number1 ;
$('.btn-random').click(function(){
recipes_number1 = Math.floor(Math.random() * 3);
var photo_url = Appetizer_photos[ recipes_number1 ];
var splitText = Appetizer[ recipes_number1 ];
$('#random-photo').attr('src',photo_url);
document.getElementById("list1").innerHTML= splitText;
;
});
var Appertizer_slide = Appertizer_name[recipes_number1];
var slideIndex = 1;
showDivs(slideIndex);
function plusDivs(n) {
showDivs(slideIndex += n);
}
function showDivs(n) {
var i;
var x = document.getElementsByClassName(Appertizer_slide);
if (n > x.length) {slideIndex = 1}
if (n < 1) {slideIndex = x.length}
for (i = 0; i < x.length; i++) {
x[i].style.display = "none";
}
x[slideIndex-1].style.display = "block";
}
I think you're asking how to get Main_Dish_slide the updated value after the click takes place:
var recipes_number1 ;
var Main_Dish_slide;
$('.btn-random').click(function(){
recipes_number1 = Math.floor(Math.random() * 3);
var photo_url = Appetizer_photos[ recipes_number1 ];
var splitText = Appetizer[ recipes_number1 ];
$('#random-photo').attr('src',photo_url);
document.getElementById("list1").innerHTML= splitText;
Main_Dish_slide = Main_Dish_name[recipes_number1];
});
function showDivs(n) {
var i;
var x = document.getElementsByClassName(Main_Dish_slide);
if (n > x.length) {slideIndex = 1}
if (n < 1) {slideIndex = x.length}
for (i = 0; i < x.length; i++) {
x[i].style.display = "none";
}
x[slideIndex-1].style.display = "block";
}
Same concept, you need to re-assign what Appertizer_slide is referencing - one main difference between this and the code you first provided is you will need to give Appertizer_slide a starting value if you plan on calling showDivs right away:
var recipes_number1 ;
var Appertizer_slide = Appertizer_name[Math.floor(Math.random() * 3)];
$('.btn-random').click(function(){
recipes_number1 = Math.floor(Math.random() * 3);
var photo_url = Appetizer_photos[ recipes_number1 ];
var splitText = Appetizer[ recipes_number1 ];
$('#random-photo').attr('src',photo_url);
document.getElementById("list1").innerHTML= splitText;
Appertizer_slide = Appertizer_name[recipes_number1];
});
var slideIndex = 1;
showDivs(slideIndex);
function plusDivs(n) {
showDivs(slideIndex += n);
}
function showDivs(n) {
var i;
var x = document.getElementsByClassName(Appertizer_slide);
if (n > x.length) {slideIndex = 1}
if (n < 1) {slideIndex = x.length}
for (i = 0; i < x.length; i++) {
x[i].style.display = "none";
}
x[slideIndex-1].style.display = "block";
}
Try this:
var recipes_number1, Main_Dish_slide;
$('.btn-random').click(function(){
recipes_number1 = Math.floor(Math.random() * 3);
var photo_url = Appetizer_photos[ recipes_number1 ];
var splitText = Appetizer[ recipes_number1 ];
$('#random-photo').attr('src',photo_url);
document.getElementById("list1").innerHTML= splitText;
Main_Dish_slide = Main_Dish_name[recipes_number1];
});
function showDivs(n) {
var i;
var x = document.getElementsByClassName(Main_Dish_slide);
if (n > x.length) {slideIndex = 1}
if (n < 1) {slideIndex = x.length}
for (i = 0; i < x.length; i++) {
x[i].style.display = "none";
}
x[slideIndex-1].style.display = "block";
}
Related
I have a local website with .html file and I want my slideshow to automatically display pictures from a folder and display them without the need to add it manually one by one.
Right now I have to add for every new image I want.
Here is my code:
<img class="mySlides myImg" src="Images/Image_01.jpeg" alt="01" width="620" height="340">
<img class="mySlides myImg" src="Images/Image_02.jpeg" alt="02" width="620" height="340">
<!-- Slider Image Script -->
<script>
var slideIndex = 1;
showDivs(slideIndex);
function plusDivs(n) {
showDivs(slideIndex += n);
}
function currentDiv(n) {
showDivs(slideIndex = n);
}
function showDivs(n) {
var i;
var x = document.getElementsByClassName("mySlides");
var dots = document.getElementsByClassName("demo");
if (n > x.length) {slideIndex = 1}
if (n < 1) {slideIndex = x.length}
for (i = 0; i < x.length; i++) {
x[i].style.display = "none";
}
for (i = 0; i < dots.length; i++) {
dots[i].className = dots[i].className.replace(" w3-white", "");
}
x[slideIndex-1].style.display = "block";
dots[slideIndex-1].className += " w3-white";
}
</script>
Hi I would like to display one javascript slider but if the size is less that 825px the fonction to be disable I created one code but they don't work. I search here but i dont found any answer about that.
here my code
$(window).ready(function() {
var wi = $(window).width();
$(window).resize(function() {
var wi = $(window).width();
if (wi < 825){
} else {
// Slide function
var slideIndex = 1;
showDivs(slideIndex);
function plusDivs(n) {
showDivs(slideIndex += n);
}
function showDivs(n) {
var i;
var x = document.getElementsByClassName("mySlides");
if (n > x.length) {slideIndex = 1}
if (n < 1) {slideIndex = x.length}
for (i = 0; i < x.length; i++) {
x[i].style.display = "none";
}
x[slideIndex-1].style.display = "block";
}
}
});
});
thank you for any help the slide function work perfect but i dont arrive to detect the windows size.
Define a function to do the slide, add a condition to return
function doSlide() {
if (window.innerWidth < 825) {
return
}
// Slide function
...your code
}
As people suggested, call it directly. Attach resize event if you want.
$(window).ready(function() {
doSlide()
window.addEventListener('resize', doSlide)
}
I wanna add 2 slideshow in one single webpages so this is the code for 1 slide show
<script>
var slideIndex = 0;
var slides = document.getElementsByClassName("mySlides1");
showSlides();
function showSlides() {
var i;
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
slideIndex++;
if (slideIndex> slides.length) {slideIndex = 1}
slides[slideIndex-1].style.display = "block";
setTimeout(showSlides, 3000); // Change image every 5 seconds
}
function currentSlide(no) {
var i;
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
slideIndex = no;
slides[no-1].style.display = "block";
function plusSlides(n) {
var newslideIndex = slideIndex + n;
if(newslideIndex < 6 && newslideIndex > 0){
currentSlide(newslideIndex);
}
}
</script>
then I wanted to add another slideshow so I add mySlides2
var slides = document.getElementsByClassName("mySlides1", "mySlides2");
but it's not working .
Get your slide elements into two HTMLCollections then combine them into one array.
var slide1 = document.getElementsByClassName("mySlides1");
var slide2 = document.getElementsByClassName("mySlides1");
var slides = [];
for(var i = 0; i < slide1.length; i++){
slides[i] = slide1[i];
}
for(var length = slide1.length, i = length; i < slide2.length+length; i++ ){
slides[i] = slide2[i - length];
}
//showSlides();
to start things of I want to mention that I am very new at this and probably very bad and I have tried for weeks now, searched answers and so on and just couldn't implement something proper in my code. I want to simply pause / resume a slide animation. I managed to make most of it work, but the problem is the setInterval. mine is set to 10s. I have a fading-in-out animation that lasts also 10 secs. If i pause lets say after 5 secs and then resume, the animation will have 10 extra seconds adding up to 15, after which it will change the slide abruptly and I want a smooth transition.
What I could think of is to save the elapsed time from the interval at the moment of pausing and then subtract that value from the total time of the interval and set it for the remaining part. Problem is i don't know how to put that into code. :/
var slideIndex = 1;
var myIndex = 0;
var myVar;
var playing = true;
var pauseButton = document.getElementById("pause");
var y = document.getElementsByClassName("mySlides");
var k;
var div = document.getElementsByClassName("stuff");
var globaltime = 10000;
var slideInterval = setInterval(carousel, globaltime);
var milisec;
function plusDivs(n) {
showDivs(slideIndex += n);
}
function currentDiv(n) {
showDivs(slideIndex = n);
}
function showDivs(n) {
var i;
var x = document.getElementsByClassName("mySlides");
var dots = document.getElementsByClassName("demo");
if (n > x.length) {slideIndex = 1}
if (n < 1) {slideIndex = x.length}
for (i = 0; i < x.length; i++) {
x[i].style.display = "none";
}
for (i = 0; i < dots.length; i++) {
dots[i].className = dots[i].className.replace(" white", "");
}
x[slideIndex-1].style.display = "block";
dots[slideIndex-1].className += " white";
}
function carousel() {
var i;
var x = document.getElementsByClassName("mySlides");
var dots = document.getElementsByClassName("demo");
for (i = 0; i < x.length; i++) {
x[i].style.display = "none";
}
myIndex++;
if (myIndex > x.length) {myIndex = 1}
for (i = 0; i < dots.length; i++) {
dots[i].className = dots[i].className.replace(" white", "");
}
x[myIndex-1].style.display = "block";
dots[myIndex-1].className += " white";
}
function pauseSlideshow(){
pauseButton.innerHTML = '►';
playing = false;
t = slideInterval;
clearInterval(slideInterval);
for (k = 0; k < div.length; k++) {
div[k].className = div[k].className.replace(" running", " paused");
}
}
function playSlideshow(){
pauseButton.innerHTML = '❙❙';
playing = true;
slideInterval = setInterval(carousel, globaltime);
for (k = 0; k < div.length; k++) {
div[k].className = div[k].className.replace(" paused", " running");
}
}
function stop(){
if(playing){
pauseSlideshow();
}
else {
playSlideshow();
}
}
carousel();
timer();
showDivs(slideIndex);
Thank you very much in advance for your time, patience and understanding.
I made a puzzle game in javascript. I have made objects to keep some attributes relevant to the each pazzle squares. I want to get the object id which is relevant to the onclick.(not the div id). How to get the specific object id relevant to the clicked div?
window.onload = function() {
createDivs();
objects();
random();
onclickeventHanlder(event);
};
var getId;
var x = 3;
var counting = 0;
var tileSize = 600 / x;
var array2 = [];
var object = [];
function createDivs() {
var count = 0;
for (var i = 0; i < x; i++) {
for (var j = 0; j < x; j++) {
var id = i + "" + j;
var element = document.createElement('div');
element.setAttribute("class", "pieces");
element.setAttribute("id", id);
element.style.width = 600 / x + "px";
element.style.height = 600 / x + "px";
element.style.margin = "0px auto";
element.style.overflow = "hidden";
element.setAttribute("onclick", "onclickeventHanlder(this)");
if (count > 0) { // to break row-wise
if (i == count && j == 0) {
element.style.clear = "both";
}
}
element.style.float = "left";
document.getElementById('puzzle-body').appendChild(element);
}
count++;
}
}
function objects(){
var count = 0;
for (var i = 0; i < x; i++) {
for (var j = 0; j < x; j++) {
var objName = new Object();
objName.position = -(j * tileSize) + "px" + " " + -(i * tileSize) + "px";
objName.divID = document.getElementById(i + "" + j);
objName.id = count;
if(count<x*x-1){
objName.state = true; // if image is there
}else{
objName.state = false; // if image isn't there
}
object[count] = objName;
count++;
}
}
}
function reset(){
var looping = 0;
for (var i = 0; i < x; i++) {
for (var j = 0; j < x; j++) {
var obj = object[looping];
if(obj.id<8){
var urlString = 'url("../images/Golden.jpg")';
obj.divID.style.backgroundImage = urlString;
obj.divID.style.backgroundPosition = obj.position;
}
looping++;
}
}
}
function random(){
var array = [];
while (array.length < ((x * x) - 1)) {
var randomnumber = Math.floor(Math.random() * ((x * x) - 1));
var found = false;
for (var i = 0; i < array.length; i++) {
if (array[i] == randomnumber) {
found = true;
break;
}
}
if (!found) {
array[array.length] = randomnumber;
}
}
var looping = 0;
for (var i = 0; i < x; i++) {
for (var j = 0; j < x; j++) {
if (looping < x * x-1) {
var random = array[looping];
var obj = object[random];
var obj2 = object[looping];
if(obj.id<8){
var urlString = 'url("../images/Golden.jpg")';
obj.divID.style.backgroundImage = urlString;
obj.divID.style.backgroundPosition = obj2.position;
}
}
looping++;
}
}
}
function onclickeventHanlder(event) {
var pos = event;
}