i made slider that changes images every 1 sec, but i cant figure how to make the if statement loop, the images just stays on the first slide i tried to loop with while and for but i cant make it work. Can you please help me :)
const images = [
"https://www.travelercar.com/wp-content/uploads/2016/04/4a36e314016aa914f203ea6b7d579dc6_large.jpeg",
"https://lemag.nikonclub.fr/wp-content/uploads/2017/07/08.jpg",
"https://www.yourvalleynews.co.uk/wp-content/uploads/2018/03/pic-outside-1080x675.jpg",
];
var counter = 0;
setInterval (function() {
if (counter >= 2 ){
document.getElementById("currentImage").src = images[counter-2];
}
else if (images[0]){
document.getElementById("currentImage").src = images[++counter];
};
}, 1000);
<head>
<meta charset="utf-8">
<title>Intitulé de ma page</title>
<link href="https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300|Sonsie+One" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="style.css">
<style>
</style>
</head>
<body>
<div style="width: 60%; margin: auto;">
<div id="exemple1" name="slide" style="display: flex;">
<!-- image container -->
<img src="https://www.travelercar.com/wp-content/uploads/2016/04/4a36e314016aa914f203ea6b7d579dc6_large.jpeg" id="currentImage" height="300" />
</div>
</div>
<script src="script.js"></script>
</body>
When counter>=2 condition, you are not changing the counter variable.
const images = [
"https://www.travelercar.com/wp-content/uploads/2016/04/4a36e314016aa914f203ea6b7d579dc6_large.jpeg",
"https://lemag.nikonclub.fr/wp-content/uploads/2017/07/08.jpg",
"https://www.yourvalleynews.co.uk/wp-content/uploads/2018/03/pic-outside-1080x675.jpg",
];
var counter = 0;
setInterval (function() {
if (counter >= 2 ){
counter -= 1; // modify the counter variable
document.getElementById("currentImage").src = images[counter];
}
else if (images[0]){
document.getElementById("currentImage").src = images[++counter];
};
}, 1000);
<head>
<meta charset="utf-8">
<title>Intitulé de ma page</title>
<link href="https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300|Sonsie+One" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="style.css">
<style>
</style>
</head>
<body>
<div style="width: 60%; margin: auto;">
<div id="exemple1" name="slide" style="display: flex;">
<!-- image container -->
<img src="https://www.travelercar.com/wp-content/uploads/2016/04/4a36e314016aa914f203ea6b7d579dc6_large.jpeg" id="currentImage" height="300" />
</div>
</div>
</body>
I have created this snippet so you can have as many images as you want in the array.
const images = [
"https://www.travelercar.com/wp-content/uploads/2016/04/4a36e314016aa914f203ea6b7d579dc6_large.jpeg",
"https://lemag.nikonclub.fr/wp-content/uploads/2017/07/08.jpg",
"https://www.yourvalleynews.co.uk/wp-content/uploads/2018/03/pic-outside-1080x675.jpg"];
let count = 0;
const displayImage = () => {
document.getElementById("currentImage").src = images[count];
if( count >= (images.length-1)) count = 0;
else count++;
}
setInterval( displayImage, 1000 );
<img src="" id="currentImage" />
This is a working example, using recursion.
const images = [
"https://www.travelercar.com/wp-content/uploads/2016/04/4a36e314016aa914f203ea6b7d579dc6_large.jpeg",
"https://lemag.nikonclub.fr/wp-content/uploads/2017/07/08.jpg",
"https://www.yourvalleynews.co.uk/wp-content/uploads/2018/03/pic-outside-1080x675.jpg",
];
var sliderElement = document.getElementById("currentImage");
(function slider(counter, len){
sliderElement.src = images[counter];
counter ++;
if(len === counter){
counter = 0;
}
setTimeout(slider, 1000, counter, len);
})(0, images.length);
<head>
<meta charset="utf-8">
<title>Intitulé de ma page</title>
<link href="https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300|Sonsie+One" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="style.css">
<style>
</style>
</head>
<body>
<div style="width: 60%; margin: auto;">
<div id="exemple1" name="slide" style="display: flex;">
<!-- image container -->
<img src="https://www.travelercar.com/wp-content/uploads/2016/04/4a36e314016aa914f203ea6b7d579dc6_large.jpeg" id="currentImage" height="300" />
</div>
</div>
</body>
Related
As you can see from the snippet below i have this two images.. by dragging the <input type="range"> i want the right one to get bigger and the left one to get smaller, and the opposite.. This is what i have done so far on my own.. it works only for the right one and i can't think a way to do it for the left one in the same time.. For example when the left image will be width = 100% the right must be 40%
Any suggestions ? Thank you
let left = document.getElementById('left');
let right = document.getElementById('right');
let slider = document.getElementById('range-slider');
slider.oninput = function(){
document.getElementById("leftDemo").innerHTML = this.value + "%";
left.style.width = this.value + "%";
//document.getElementById("rightDemo").innerHTML = this.value + "%";
//right.style.width = this.value + "%";
}
* {
box-sizing: border-box;
}
.img-container {
float: left;
width: 40%;
padding: 5px;
}
.clearfix::after {
content: "";
clear: both;
display: table;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6" crossorigin="anonymous">
<link rel='stylesheet' type='text/css' media='screen' href='style.css'>
</head>
<body>
<div class="clearfix pt-5">
<div class="img-container">
<img src="https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885__340.jpg" alt="Italy" style="width:40%;" id="left">
<h3 id="leftDemo"></h3>
</div>
<div class="img-container">
<img src="https://thumbs.dreamstime.com/b/environment-earth-day-hands-trees-growing-seedlings-bokeh-green-background-female-hand-holding-tree-nature-field-gra-130247647.jpg" alt="Mountains" style="width:100%;" id="right">
<h3 id="rightDemo"></h3>
</div>
</div>
<div class="container text-center">
<input id="range-slider" type="range" min="40" max="100" >
</div>
<script src="main.js"></script>
</body>
</html>
This works for me.
One is at 100% and the other at 40%.
let left = document.getElementById('left');
let right = document.getElementById('right');
let slider = document.getElementById('range-slider');
slider.oninput = function(){
document.getElementById("leftDemo").innerHTML = this.value + "%";
left.style.width = this.value + "%";
let newVal = (40 + (100 - parseInt(this.value))).toString();
document.getElementById("rightDemo").innerHTML = newVal + "%";
right.style.width = newVal + "%";
}
* {
box-sizing: border-box;
}
.img-container {
float: left;
width: 40%;
padding: 5px;
}
.clearfix::after {
content: "";
clear: both;
display: table;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6" crossorigin="anonymous">
<link rel='stylesheet' type='text/css' media='screen' href='style.css'>
</head>
<body>
<div class="clearfix pt-5">
<div class="img-container">
<img src="https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885__340.jpg" alt="Italy" style="width:40%;" id="left">
<h3 id="leftDemo"></h3>
</div>
<div class="img-container">
<img src="https://thumbs.dreamstime.com/b/environment-earth-day-hands-trees-growing-seedlings-bokeh-green-background-female-hand-holding-tree-nature-field-gra-130247647.jpg" alt="Mountains" style="width:100%;" id="right">
<h3 id="rightDemo"></h3>
</div>
</div>
<div class="container text-center">
<input id="range-slider" type="range" min="40" max="100" >
</div>
<script src="main.js"></script>
</body>
</html>
You will need to subtract the value from the max (100) and add the min (40) to the opposite image's new width.
const
left = document.getElementById('left'),
right = document.getElementById('right'),
slider = document.getElementById('range-slider');
const calSizes = (slider) => {
const
value = parseInt(slider.value, 10),
min = parseInt(slider.getAttribute('min'), 10),
max = parseInt(slider.getAttribute('max'), 10);
return [ value, min + max - value ];
};
const resizeImages = (e) => {
const [ value, inverted ] = calSizes(e.target);
left.querySelector('img').style.width = `${value}%`;
right.querySelector('img').style.width = `${inverted}%`;
left.querySelector('h3.scale').textContent = `${value}%`;
right.querySelector('h3.scale').textContent = `${inverted}%`;
};
slider.addEventListener('input', resizeImages);
resizeImages({ target: slider });
.images {
display: flex;
flex-direction: row;
}
.img-container {
flex: 1;
}
.container {
border: thin solid grey;
}
.text-center {
text-align: center;
}
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6" crossorigin="anonymous">
<div class="images">
<div class="img-container" id="left">
<img src="https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885__340.jpg" alt="Italy" />
<h3 class="scale"></h3>
</div>
<div class="img-container" id="right">
<img src="https://thumbs.dreamstime.com/b/environment-earth-day-hands-trees-growing-seedlings-bokeh-green-background-female-hand-holding-tree-nature-field-gra-130247647.jpg" alt="Mountains" />
<h3 class="scale"></h3>
</div>
</div>
<div class="container text-center">
<input id="range-slider" type="range" min="40" max="100" value="50">
</div>
I want the border to increase, every time I press a button.
When the button is pressed, its 'value' is increased by 1. I want the value of the pixel-height of the border of the container to increase as well.
var i = 0;
var heightOfBorder = document.getElementById('test').style;
function buttonClick() {
document.getElementById('incrementValue').value = i++
heightOfBorder = "height: 500px";;
}
// document.getElementById("test").style.height = document.getElementById('incrementValue').value;
#test {
margin-top: 200px;
border: solid black;
width: 200px;
}
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Container size change</title>
<link rel="stylesheet" href="style.css">
<script src="https://code.jquery.com/jquery-3.5.0.js" integrity="sha256-r/AaFHrszJtwpe+tHyNi/XCfMxYpbsRg2Uqn0x3s2zc=" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
</head>
<body>
<div id="main" class="container">
<div id="test" class="container" style="height: 50px;">
</div>
<button onclick="buttonClick()" id="incrementButton" type="button" class="btn btn-success">Success</button>
<input id="incrementValue" type="text" name="button" value="0">
</div>
<script src="script.js" charset="utf-8"></script>
</body>
</html>
What am I doing wrong? I am learning to code. Also, side question, does anyone know of a good mentorship program?
Greetings!
You can get current height of the box using offsetHeight and on click add the input value to the box's style.height and remember to add the unit at the end - in your case 'px'.
Here is an example:
var i = 0;
var myEl = document.querySelector('#test');
var initialHeight = myEl.offsetHeight;
function buttonClick() {
document.getElementById('incrementValue').value = i++;
myEl.style.height = initialHeight + i + 'px';
}
<script>
var i = 0;
var heightOfBorder = document.getElementById('test').style;
function buttonClick() {
document.getElementById('incrementValue').value = i++;
let currHgt = heightOfBorder.getPropertyValue('height');
currHgt = +currHgt.slice(0, currHgt.length - 2);
heightOfBorder.setProperty('height', currHgt + i + 'px');
}
</script>
If you want to change height by i value.
just change var
heightOfBorder = document.getElementById('test').style;
to
var heightOfBorder = document.getElementById('test');
and
eightOfBorder = "height: 500px";
to
eightOfBorder.style = "height: 500px";
var i = 0;
var heightOfBorder = document.getElementById('test');
function buttonClick() {
document.getElementById('incrementValue').value = i++
heightOfBorder.style = "height: 500px";
}
// document.getElementById("test").style.height = document.getElementById('incrementValue').value;
#test {
margin-top: 200px;
border: solid black;
width: 200px;
}
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Container size change</title>
<link rel="stylesheet" href="style.css">
<script src="https://code.jquery.com/jquery-3.5.0.js" integrity="sha256-r/AaFHrszJtwpe+tHyNi/XCfMxYpbsRg2Uqn0x3s2zc=" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
</head>
<body>
<div id="main" class="container">
<div id="test" class="container" style="height: 50px;">
</div>
<button onclick="buttonClick()" id="incrementButton" type="button" class="btn btn-success">Success</button>
<input id="incrementValue" type="text" name="button" value="0">
</div>
<script src="script.js" charset="utf-8"></script>
</body>
</html>
Basically i have made a slider in which a user see the image revoving aroound the three Divs. But the schema for this in code is , i have made 3 sliders which changes their images after a particular time . The only problem in this is i am not able to set the proper timing for iterations. Like i have added the fade in and out effects, but after some time the timing collapse, Could you please tell me the proper way to do it?
This is the sample of my code:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Image</title>
<meta charset="UTF-8" />
<meta name="description" content="Rotating Image Slider with jQuery & CSS3" />
<meta name="keywords" content="jquery, rotation, slider, images, slideshow, autoplay, play, pause, css3"/>
<meta name="author" content="Codrops" />
<link rel="stylesheet" type="text/css" href="css/style.css" />
<link href='http://fonts.googleapis.com/css?family=PT+Sans+Narrow' rel='stylesheet' type='text/css' />
<style>
.quotes{
display:none;
float:left;
}
.quotes1{
display:none;
float:left;
}
.quotes2{
display:none;
float:left;
}
</style>
</head>
<body>
<div class="content">
<img src = "images/3.jpg" class="quotes2">
<img src = "images/1.jpg" class="quotes2">
<img src = "images/2.jpg" class="quotes2">
</div>
<div class="content">
<img src = "images/2.jpg" class="quotes1">
<img src = "images/3.jpg" class="quotes1">
<img src = "images/1.jpg" class="quotes1">
</div>
<div class="content">
<img src = "images/1.jpg" class="quotes">
<img src = "images/2.jpg" class="quotes">
<img src = "images/3.jpg" class="quotes">
</div>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
<script>
//js and 3 functions start here
(function() {
var quotes = $(".quotes");
var quoteIndex = -1;
function showNextQuote() {
++quoteIndex;
quotes.eq(quoteIndex % quotes.length)
.fadeIn(2700)
.delay(2000)
.fadeOut(2000, showNextQuote);
}
showNextQuote();
})();
(function() {
var quotes = $(".quotes1");
var quoteIndex = -1;
function showNextQuote() {
++quoteIndex;
quotes.eq(quoteIndex % quotes.length)
.fadeIn(2500)
.delay(2000)
.fadeOut(2000, showNextQuote);
}
showNextQuote();
})();
(function() {
var quotes = $(".quotes2");
var quoteIndex = -1;
function showNextQuote() {
++quoteIndex;
quotes.eq(quoteIndex % quotes.length)
.fadeIn(2200)
.delay(2000)
.fadeOut(2000, showNextQuote);
}
showNextQuote();
})();
</script>
</body>
</html>
I am trying to display one of two images using a click button using random number generator by assigning each image to an if and else statement. I'm not sure where the problem is. Here is what I have:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Assignment 9</title>
<link href="images/avatar.png" rel="shortcut icon" type="image/png">
<link href="css/stylesheet.css" rel="stylesheet" type="text/css">
<script src="js/javascript.js" type="text/javascript"></script>
<style type="text/css">
.auto-style1 {
text-align: center;
}
</style>
<script type="text/javascript">
</script>
</head>
<body>
<header>
</header>
<aside>
</aside>
<div id="main">
<h1> Arrays and Coditional Statements</h1>
<h2 class="auto-style1">Flip a coin </h2>
<script>
function myFunction1() {
var result = doucment.getElementById("pic");
var x = Math.floor(Math.random() * 2);
console.log(x);
if (x == 0) {
document.getElementById("Coin").innerHTML = "Heads"
result.innerHTML="<img alt=\"the frontside of a coin\" src=\"images/heads.jpg\" />"; }
else {
document.getElementById("Coin").innerHTML = "Tails";
result.innerHTML= "<img alt=\"the backside of a coin\" src=\"images/tails.jpg\" />";
}
}
myFunction1();
</script>
<button type="button" onclick="myFunction1()" id="Coin">CLick ME</button>
<p id="pic"> </p>
</div>
<footer>
</footer>
</body>
</html>
You have a very simple typo. You wrote:
var result = doucment.getElementById("pic");
document is spelled wrong
I am making a jQuery carousel that is populated using JSON. I need it to stop at the end. I calculate the width of the list by multiplying the number of list items by the width of the list item, so new items can be added without changing the width in the CSS. Here is my code
slider.js
$(document).ready(function() {
var w = $("#carouselList").css("width");
var slider = $("#carouselList");
var leftProperty, newLeftProperty;
$("#rightButton").click(function(){
leftProperty = parseInt(slider.css("left"));
if (leftProperty - 991 <= -w) {
newLeftProperty = 0;
}
else {
newLeftProperty = leftProperty - 304;
}
slider.animate({left: newLeftProperty}, 500);
});
$("#leftButton").click(function(){
leftProperty = parseInt(slider.css("left"));
if (leftProperty < 0){
newLeftProperty = leftProperty + 304;
}
else {
newLeftProperty = 0;
}
slider.animate({left: newLeftProperty}, 500);
});
});
the HTML
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Untitled Document</title>
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script src="slider.js"></script>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
<div id="carousel">
<h2>Recommended for You</h2>
<div id="leftButton" class="buttonPanel"></div>
<div id="display">
<ul id="carouselList">
</ul>
</div><!--display-->
<div id="rightButton" class="buttonPanel"></div>
<div class="clear"></div>
</div><!--carousel-->
<script>
$.getJSON('jsonData.json', function(data){
var items=[];
$.each(data, function(key, val){
items.push(val);
$("#carouselList").append(items[2]);
var c =$("#carouselList li").size();
$("#carouselList").css("width", c*250);
});
});
</script>
</body>
</html>