Why is it omitting the last slide? How can I fix it to show the first image just after the side loads, without waiting? I've tried everything and cant fix it out, always were some problems (displaying two images at the same time etc) and now this.
<!DOCTYPE html>
<html lang="pl">
<html>
<head>
<meta charset="utf-8" />
<link rel="stylesheet" type="text/css" href="style.css">
<script src="https://use.fontawesome.com/19445204e2.js"></script>
<script src="http://code.jquery.com/jquery-1.11.2.min.js"></script>
<script type="text/javascript">
// Startowy slajd
var numer = 0;
function changeslide()
{
var imagesnumber=document.getElementById("slider").getElementsByTagName("img");
for(var i = 0; i < imagesnumber.length; i++)
{
imagesnumber[i].style.display = "none";
}
// Wyswietlam aktualny index
$("#slide"+numer).fadeIn(500).css('display','block');
if(numer >= imagesnumber.length-1)
numer = 0;
else
numer++;
timer1 = setTimeout("changeslide()", 3000);
}
</script>
</head>
<body onload="changeslide()">
<div id="slider">
<img src="slides/img1.jpg" id="slide1">
<img src="slides/img2.jpg" id="slide2">
<img src="slides/img3.jpg" id="slide3">
<img src="slides/img4.jpg" id="slide4">
<img src="slides/img5.jpg" id="slide5">
</div>
</body>
</html>
var numer = 0;
function changeslide(){
var timeout=0;
if(numer!==0){
timeout=3000;
}
var imagesnumber=document.getElementById("slider").getElementsByTagName("img");
for(var i = 0; i < imagesnumber.length; i++)
{
imagesnumber[i].style.display = "none";
}
// Wyświetlam aktualny index
$("#slide"+numer).fadeIn(500).css('display','block');
if(numer >= imagesnumber.length-1)
numer = 0;
else
numer++;
timer1 = setTimeout("changeslide()", timeout);
}
PEN
function changeslide() {
if (typeof this.numer === "undefined") this.numer = 1;
var imagesnumber = document.getElementById("slider").getElementsByTagName("img");
$("#slider img").css("display", "none");
$("#slide" + numer).fadeIn(500).css('display', 'block');
if (this.numer >= imagesnumber.length)
this.numer = 1;
else
this.numer++;
timer1 = setTimeout(changeslide, 3000);
}
I moved the counter to the function so you don't mess up your variables outside.
The counter restarted too early and I replaced your for loop with a jquery solution.
Related
For performance improvemnt, in my application we are using charts as carousel. So it is takeing more time to rendering qlik charts. I want to load only the first image(chart) and need to stop loading the remaining all.
I have only 3 charts in the carousel. It is always 3 only.
For first time while loading page, it must be in the first image. So the first image only should load. Remaining 2nd and 3rd images should not get load.
After click on the next button only, i need to load the second image. At that time do not load on the third image.
Again after click on third image, the third image only should get load.
These three charts datas I am getting from API. How can I achieve this.
Please look at the follwing plunkr for sample with all datas loading.
Plunkr
angular.module('ui.bootstrap.demo', ['ngAnimate', 'ngSanitize', 'ui.bootstrap']);
angular.module('ui.bootstrap.demo').controller('CarouselDemoCtrl', function ($scope) {
$scope.myInterval = 5000;
$scope.noWrapSlides = false;
$scope.active = 0;
var slides = $scope.slides = [];
var currIndex = 0;
$scope.addSlide = function() {
var newWidth = 600 + slides.length + 1;
slides.push({
image: '//unsplash.it/' + newWidth + '/300',
text: ['Nice image','Awesome photograph','That is so cool','I love that'][slides.length % 4],
id: currIndex++
});
};
$scope.randomize = function() {
var indexes = generateIndexesArray();
assignNewIndexesToSlides(indexes);
};
for (var i = 0; i < 4; i++) {
$scope.addSlide();
}
// Randomize logic below
function assignNewIndexesToSlides(indexes) {
for (var i = 0, l = slides.length; i < l; i++) {
slides[i].id = indexes.pop();
}
}
function generateIndexesArray() {
var indexes = [];
for (var i = 0; i < currIndex; ++i) {
indexes[i] = i;
}
return shuffle(indexes);
}
// http://stackoverflow.com/questions/962802#962890
function shuffle(array) {
var tmp, current, top = array.length;
if (top) {
while (--top) {
current = Math.floor(Math.random() * (top + 1));
tmp = array[current];
array[current] = array[top];
array[top] = tmp;
}
}
return array;
}
});
<!doctype html>
<html ng-app="ui.bootstrap.demo">
<head>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular-animate.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular-sanitize.js"></script>
<script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-2.5.0.js"></script>
<script src="example.js"></script>
<link href="//netdna.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div ng-controller="CarouselDemoCtrl">
<div style="height: 305px">
<div uib-carousel active="active" no-wrap="noWrapSlides">
<div uib-slide ng-repeat="slide in slides track by slide.id" index="slide.id">
<img ng-src="{{slide.image}}" style="margin:auto;">
<div class="carousel-caption">
<h4>Slide {{slide.id}}</h4>
<p>{{slide.text}}</p>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
Can anyone help me how can I do this using angularjs.
I'm trying to have an image that changes when clicked: when image 1 is clicked, change to image 2, when image 2 is clicked change to image 3 and when image 3 is clicked it changes to image 1.
<p>
<img alt="" src="assets/img1.png"
style="height: 85px; width: 198px" id="imgClickAndChange" onclick="changeImage()" />
<script language="javascript">
function changeImage() {
if (document.getElementById("imgClickAndChange").src == "assets/img1.png")
{
document.getElementById("imgClickAndChange").src = "assets/img2.png";
}
else if (document.getElementById("imgClickAndChange").src == "assets/img2.png")
{
document.getElementById("imgClickAndChange").src = "assets/img3.png";
}
else if(document.getElementById("imgClickAndChange").src == "assets/img3.png"){
document.getElementById("imgClickAndChange").src = "assets/img1.png"
}
Clean and optimal solution in my opinion. As the users before said. It is good to use array to held the images paths.
var images = ["https://images.pexels.com/photos/67636/rose-blue-flower-rose-blooms-67636.jpeg?auto=compress&cs=tinysrgb&h=350", "https://i2.wp.com/beebom.com/wp-content/uploads/2016/01/Reverse-Image-Search-Engines-Apps-And-Its-Uses-2016.jpg?resize=640%2C426", "https://images.pexels.com/photos/248797/pexels-photo-248797.jpeg?auto=compress&cs=tinysrgb&h=350"]
var imgState = 0;
var imgTag = document.getElementById("imgClickAndChange");
imgTag.addEventListener("click", function (event) {
imgState = (++imgState % images.length);
event.target.src = images[imgState];
});
Solution
There were a lot of syntax errors in your code. I cleaned them up in a codepen here where you can see that your basic logic was correct. Though, as other users pointed out, there are more elegant ways to solve this problem.
https://codepen.io/anon/pen/MPYgxM
HTML:
<p>
<img alt="" src="https://r1.ilikewallpaper.net/ipad-wallpapers/download/26516/Natural-Grove-Green-Trees-Path-ipad-wallpaper-ilikewallpaper_com.jpg"
style="height: 85px; width: 198px" id="imgClickAndChange" onclick="changeImage()" />
</p>
JS:
function changeImage() {
if (document.getElementById("imgClickAndChange").src == "https://r1.ilikewallpaper.net/ipad-wallpapers/download/26516/Natural-Grove-Green-Trees-Path-ipad-wallpaper-ilikewallpaper_com.jpg")
{
document.getElementById("imgClickAndChange").src = "https://st2.depositphotos.com/1000438/6182/i/950/depositphotos_61826015-stockafbeelding-cascades-in-nationaal-park-plitvice.jpg";
}
else if (document.getElementById("imgClickAndChange").src == "https://st2.depositphotos.com/1000438/6182/i/950/depositphotos_61826015-stockafbeelding-cascades-in-nationaal-park-plitvice.jpg")
{
document.getElementById("imgClickAndChange").src = "https://orig00.deviantart.net/6787/f/2016/104/5/6/aria_maleki___natural_view_of_waterfall_by_aria_maleki-d9yytu8.jpg";
}
else if(document.getElementById("imgClickAndChange").src == "https://orig00.deviantart.net/6787/f/2016/104/5/6/aria_maleki___natural_view_of_waterfall_by_aria_maleki-d9yytu8.jpg"){
document.getElementById("imgClickAndChange").src = "https://r1.ilikewallpaper.net/ipad-wallpapers/download/26516/Natural-Grove-Green-Trees-Path-ipad-wallpaper-ilikewallpaper_com.jpg"
}
}
you can increment value on each click and update img. on base of incremented value
<img alt="" src="assets/img1.png" style="height: 85px; width: 198px" id="imgClickAndChange" onclick="changeImage()" />
<script language="javascript">
var counter = 1;
function changeImage() {
counter > 3 ? counter = 1 : counter++;
document.getElementById("imgClickAndChange").src = "assets/img"+counter+".png";
}
</script>
Hi this is different approach.
new ClickListener() is the class used to handle your logic & dom logic
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Image click</title>
</head>
<body>
<div id="player">
</div>
<script>
class ClickListener {
constructor() {
this.rootElement = document.querySelector( "#player" );
this.element = document.createElement("img");
this.rootElement.appendChild(this.element);
this.images = ['./1.jpg', './2.jpg', './3.jpg']
this.idx = 0
this.init()
}
init() {
this.element.src = this.images[this.idx]
this.element.style.width = `400px`;
this.element.style.height = `400px`;
this.element.onclick = this.nextImage.bind(this)
}
nextImage() {
this.idx++;
if(this.idx >= this.images.length) {
this.idx = 0;
}
this.element.src = this.images[this.idx]
}
}
new ClickListener()
</script>
</body>
</html>
this intro slideshow works so far, it starts automatically when you load the webpage and cycles through the 4 photos. But I want the slideshow to disappear (to reveal the website homepage underneath) after it has cycled through the 4 photos only once, but need some help how to proceed forward.
<!DOCTYPE html>
<head>
</head>
<body>
<div id="slideshow">
<img id="pic" width="100%" height="auto" alt="Icon" src="one.jpg">
</div>
<script>
var i, imgs, pic;
function rotate() {
pic.src = imgs[i];
(i === (imgs.length - 1)) ? (i = 0) : (i++);
setTimeout(rotate, 1000);
}
function init() {
pic = document.getElementById("pic");
imgs = ["one.jpg", "two.jpg", "three.jpg", "four.jpg"];
var preload = new Array();
for (i = 0; i < imgs.length; i++) {
preload[i] = new Image();
preload[i].src = imgs[i];
}
i = 0;
rotate();
}
document.addEventListener("DOMContentLoaded", init, false);
</script>
</body>
</html>
var count = 0
function rotate() {
pic.src = imgs[i];
(i === (imgs.length - 1)) ? (i = 0) : (i++);
if (count < imgs.length) {
count++;
setTimeout(rotate, 1000);
} else {
document.getElementById("slideshow").style.display = 'none';
}
}
Hi,
you have to count your number of slides. Afterwards just check if you already finished.
greetings
<!DOCTYPE html>
<head>
</head>
<body>
<div id="slideshow">
<img id="pic" width="100%" height="auto" alt="Icon" src="one.jpg">
</div>
<script>
var i, imgs, pic;
function rotate() {
pic.src = imgs[i];
if(i<(imgs.length - 1)){
i++;
setTimeout(rotate, 1000);
}
}
function init() {
pic = document.getElementById("pic");
imgs = ["one.jpg", "two.jpg", "three.jpg", "four.jpg"];
var preload = new Array();
for (i = 0; i < imgs.length; i++) {
preload[i] = new Image();
preload[i].src = imgs[i];
}
i = 0;
rotate();
}
document.addEventListener("DOMContentLoaded", init, false);
</script>
</body>
</html>
if(i<(imgs.length - 1)){
i++;
setTimeout(rotate, 1000);
}
You need to check for how many time the rotate() method need to call.
I am trying to open a link at a specific counter value. For example if the counter value is multiple of 10 then http://www.google.com link opens up automatically in new tab and that counter increases only on button click. I am doing this in JavaScript.
Any help will be highly appreciated. Thank you so much in advance.
My code is -
$('button.counter').click(function myFunction() {
var count = 1;
while (count <= 60) {
if (count == 10) {
window.open("http://www.facebook.com/shawnikraghav");
}
count = count + 1;
}
});
body {
background-color: #e8e8e8;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<head>
<title>Test Code</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<script src="javascript.js"></script>
<button class="counter" onClick="myFunction()">Click</button>
</body>
</html>
You should define the counter variable outside the function call by click event. In you code, the counter will be initial to 1 each time you click.
And incase you want to check the counter value is multiple of 10, you should change the condition (count%10) == 0
var count = 1;
$('button.counter').click(function myFunction()
{
if((count%10 == 0) && (count < 60)) {
window.open("http://www.facebook.com/shawnikraghav");
} else {
document.getElementById("text").innerHTML = count;
}
count = count + 1;
});
try by this way
$(document).ready(function() {
var count = 1;
$('button.counter').click(function myFunction() {
while(count <=60) {
if(count%10 == 0) {
window.open("http://www.facebook.com/shawnikraghav");
}
count = count + 1;
}
});
});
is it possible to detect our mouse when down(pressed), and start counting from zero for a few seconds...and after 5 seconds mousedown, it redirect.
I have found a script that does it, but I am confuse on how to show the second when the mouse is being pressed.
Here it is.
<script type="text/javascript">
/*<![CDATA[*/
document.getElementsByClassName=function(classname){
var pattern=new RegExp("(^|\s)"+classname+"(\s|$)");
var results=new Array();
var d=document.getElementsByTagName('*'), l=d.length;
for (var k=0; k<l; k++) if (pattern.test(d[k].className)) results.push(d[k]);
return results;
}
var timer;
function startStuff(el,ii)
{
var temp=el.innerHTML;
timer=window.setTimeout('doStuff("'+temp+'");',3000);
}
function stopStuff(el)
{
window.clearTimeout(timer);
}
function doStuff(l)
{
<?php echo"<html>"; header( 'Location: http://www.google.com' ) ; echo"</html>";?>
}
window.onload=function() {
var links=document.getElementsByClassName('clicker');
for (var i=0; i<links.length; i++)
{
links[i].onmousedown=function() {startStuff(this)};
links[i].onmouseup =function() {stopStuff(this)};
}
}
/*]]>*/
</script>
</head>
<body>
Link1
Link2
Link3
</body>
</html>
If possible, I want the second is displayed with images....
I would not use images. Try something like this:
link = document.getElementById('redirect');
counter = document.getElementById('counter');
timeRemaining = 5000;
link.onclick = function(e) {
e.preventDefault();
setInterval(function(){
if (timeRemaining > 0) {
timeRemaining -= 1000;
counter.innerHTML = timeRemaining/1000;
} else {
window.location = link.href;
}
},1000);
};
Full working example:
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>Redirect to Google</title>
</head>
<body>
<a href="http://www.google.com" id="redirect">
Go to google in <span id="counter">5</span> seconds
</a>
<script type="text/javascript">
link = document.getElementById('redirect');
counter = document.getElementById('counter');
timeRemaining = 5000;
link.onclick = function(e) {
e.preventDefault();
setInterval(function(){
if (timeRemaining > 0) {
timeRemaining -= 1000;
counter.innerHTML = timeRemaining/1000;
} else {
window.location = link.href;
}
},1000);
};
</script>
</body>
</html>