What did I do wrong with this slide show code? - javascript

I've coded a very simple slide show, that shows a new slide every 5 seconds. The slide show image names are: 1.png, 2.png, 3.png, etc. There is a total of 5 slides. When I refresh my browser, the slide show doesn't work. For the record, I coded this with the help of w3schools.com and other tutorials, and I literaly copied the code from the sites(of course I changed the variables). Even though I did that, it still doesn't work. Pls help.
JS code(in ):
<script type="javascript">
var number=0;
function change_slide() {
number++;
if(number>5) {
number=1;
}
document.getElementById( "slider" ).style.backgroundImage="url(number + '.png')";
setInterval(change_slide, 5000);
}
</script>
in body tag:
<body onload="change_slide()">
slide show div
<div id="slider"></div>
slide show css
#slider {
float:left;
width:505px;
height:330px;
margin-right: 50px;
margin-left: 25px;
margin-top: 25px;
border:2px solid black;
border-radius: 15px;
}
Sorry for no code snippet, but the code of the site is to long.
PS.all slide show images all have dimentions of: 505x330 pixels.

The issue is in this line here:
document.getElementById( "slider" ).style.backgroundImage="url(number + '.png')";
You put the var number inside of double quotes, which treats it as a string and not a variable. Change it to this:
document.getElementById( "slider" ).style.backgroundImage="url(" + number + ".png)";

you could consider changing your function to:
<script>
var number = 0;
function change_slide() {
number = ++number % 5;
document.getElementById("slider").style.backgroundImage = ["url('", number, "'.png')"].join("");
setTimeout(change_slide, 5000);
}
</script>
This culprit line should be as pointed out by #Matt L.

Related

Creating a button on slide image

So, what i want to do is to create a buttons in a specified place of my image, also these buttons will be another images. I complicated it all a lot and I just have no idea what to do next and how to.
Main concept is:
I have that slider with image 1 and image 2, when it gets pressed the image will be changed to image 3 and slider will be paused. After image 3 is displayed, there will be image buttons to appear on that image 3.
I dont know if i can use position: absolute; and position: relative; or if i am just doing it wrong. My problem is that i cant use css to give that <div id="slider"> the relative effect because i want to put in there images with absolute effect.
Sorry for complicating it all so much but i don't really know how to explain it simplier, also english is not my main language.
All the code in short
So here is my JS
<script>
var numer = Math.floor(Math.random()*2)+1;
function schowaj()
{
$("#slider").fadeOut(500);
}
function zmienslajd()
{
numer++; if (numer>2) numer=1;
var plik = "<img src=\"drzewo" + numer + ".png\" />";
document.getElementById("slider").innerHTML = plik;
$("#slider").fadeIn(500);
setTimeout("zmienslajd()", 5000);
setTimeout("schowaj()", 4500);
}
</script>
And here is HTML
<body onload="zmienslajd()">
<div id="slider">
</div>
</body>
Also CSS
#slider
{
background-color: #b3ffb3;
width: 90%;
height: 800px;
float: left;
}
Thanks for any help in advance.

cant understand how each method works here

I'm trying a simple thing with each & setTimeout function. I want the letters of a name will appear distinctively & at separate(gradual) time. Suppose, letters of NAZ should appear this way, first N second A last Z. but, here I can see output is AZN then ZNA then NAZ. What I feel, I've a wrong comprehension of how 'each' works actually. but, the output in console is shown exactly as I intended. Have a look at this.
$('div.promise').each(function(index, promise){
setTimeout(function()
{
$('.showPromise').append(promise);
console.log($(promise).text());
$('.promise').css({"display":"block"})},1000*(index+2));
});}
https://jsfiddle.net/sanje/425konu3/17/
How can I show the output as shown in console? & why all the divs appear altogether at certain time? Please help me find out the mistake. Thanks!
The problem is following statement inside your setTimeout:
$('.promise').css({"display":"block"})
It makes all div's with class promise visible together. You should use this instead:
$(promise).css({"display":"block"})
var showAnimation=function(){
$('div.promise').each(function(index, promise){
setTimeout(function(){
// $('.showPromise').append(promise);
console.log($(promise).text());
$(promise).css({"display":"block"})
},1000*(index+2));
});//each()
}//showAnimation()
$('button').on('click', showAnimation);
.promise {
display: none;
padding: 10px;
}
.showPromise {
background-color: red;
margin: 10px;
display: flex;
height: 100px;
width: auto;
}
.as-console-wrapper{display: none !important;}
<script
src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<button>call</button>
<div class="showPromise">
<div class="promise">N</div>
<div class="promise">A</div>
<div class="promise">Z</div>
</div>
You are setting display on the whole class each time. You need to only show each instance in the loop. you can simplify and do that using show().
The append() part doesn't really make much sense either so I removed it
var showAnimation = function() {
$('div.promise').each(function(index, promise) {
setTimeout(function() {
$(promise).show();
}, 1000 * (index + 2));
});
}
$('button').on('click', showAnimation);
.promise {
display: none;
padding: 10px;
}
.showPromise {
background-color: red;
margin: 10px;
display: flex;
height: 100px;
width: auto;
}
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<button>call</button>
<div class="showPromise">
<div class="promise">N</div>
<div class="promise">A</div>
<div class="promise">Z</div>
</div>
#charlietfl Perhaps, I could figure out what's happened here. Please have a look at the existing code
$('.showPromise').append(promise);
$('.promise').show();},1000*(index+2));
https://jsfiddle.net/425konu3/20/
output:
AZN (shows then hides)
ZNA (shows then hides)
NAZ (persists)
I asked what’s hack here, why not NAZ NAZ NAZ. It turns out that as append moves the selected element as the last child & all the divs are available to display right at the moment by virtue of $('.promise').show(), they are shown up altogether in a manner that the first div is appended as last while the next adjacent div sits at 0 index & the rest sits next to it.
First time, N appends(last index), A(index 0), Z(index 1), so AZN appears.
Second time, A appends(last index), Z(index 0), N(index 1), so ZNA appears.
Last time, Z appends(last index), N(index 0), A(index 1), so NAZ appears.

Gallery. Display divs corresponding to clicked <li> item. Javascript

I'm trying to build a basic gallery which displays a large image [div] depending on which image is clicked. The thumbnail images are stored in a basic unordered list.
I'm a javascript noob, I could use getElementById to change display class etc but I'd prefer not to have a separate function for each image, of which they're may be 100 or so.
Is there a way to call the same function to display a different div depending on which image is clicked [a larger version of that image]?
So:
If img1 is clicked display divA,
If img2 is clicked display divB,
If img3 is clicked display divC...
Many thanks.
The event passed to the onclick method has a target parameter, which refers to the element that was clicked.
Please post your code, preferably in a working JsFiddle, to get a more targeted answer.
Here is a general example of what you want to achieve:
document.onclick = function(e) {
// e.target is the img that was clicked, display the corresponding div
// Get the image number from the id
var number = e.target.id.substr(3)
// Display the corresponding div
document.getElementById('div' + number).style.visibility = 'visible';
}
Please note that the last line will most likely be different in your implementation - I don't know how you are displaying these divs.
You could try as follows
Assign id to all images in such a manner when they will be clicked we
could generate the corresponding div's id with some logical
manipulation.
Such as
images would have id like img_divA,img_divB and when they will be clicked , get there id and do some stuff like substring and you will get divA , divB and so on .. Finally show that by javascript ..
You could do something like this. Here actually a function is created per clickable dom element, but they are programmatically created. I use the num attribute to make the correspondence between the images to show and the images to click but there is many other (good) ways to do it.
// retrieve the divs to be clicked
var toClicks = document.querySelectorAll(".img-to-click");
[].forEach.call(toClicks, function(node){
// retrieve the target image
var num = node.getAttribute("num");
var target = document.querySelector(".img-to-show[num=\"" + num + "\"]");
// create the click listener on this particular dom element
// (one of the image to click)
node.addEventListener('click', function(){
// hide any currently displayed image
var current = document.querySelector(".img-to-show.shown");
if(current) current.classList.remove("shown");
// set the new current
target.classList.add("shown");
});
});
#to-display {
position: relative;
width: 100%;
height: 50px;
}
#to-click {
position: relative;
margin-top: 20px;
}
.img-to-show {
position: absolute;
width: 100%;
height: 100%;
display: none;
}
.img-to-show.shown {
display: block;
}
.img-to-click{
display: inline-block;
background-color: gray;
width: 50px;
color:white;
text-align: center;
line-height: 50px;
vertical-align: middle;
height: 50px;
cursor:pointer;
}
<div id="to-display">
<div class="img-to-show" num="1" style="background-color:blue;"></div>
<div class="img-to-show" num="2" style="background-color:red;"></div>
</div>
<div id="to-click">
<div class="img-to-click" num="1">1</div>
<div class="img-to-click" num="2">2</div>
</div>

jQuery .width() on previously created Element returns 0

I am rendering a series of images on the fly into a container. At the end I want a single image centered and the other images to the left and right of it.
My problem is with centering the image. I made a full fiddle with my entire code which is ironically working as I expect it to be. However when testing it I find that
centered.width()
Returns 0 instead of returning the width of the image that should be centered.
Here centered is an image-tag I previously created on the fly.
What confuses me most is how it works in the fiddle but not when I test it opening the website locally, having exactly the same code in there as in the fiddle.
Here goes the entire page I currently have.
var ashe = JSON.parse('{"id":22,"key":"Ashe","name":"Ashe","title":"the Frost Archer","skins":[{"id":22000,"name":"default","num":0},{"id":22001,"name":"Freljord Ashe","num":1},{"id":22002,"name":"Sherwood Forest Ashe","num":2},{"id":22003,"name":"Woad Ashe","num":3},{"id":22004,"name":"Queen Ashe","num":4},{"id":22005,"name":"Amethyst Ashe","num":5},{"id":22006,"name":"Heartseeker Ashe","num":6},{"id":22007,"name":"Marauder Ashe","num":7}]}');
var currentCha = ashe;
function displaySkins(cha) {
//Clear the display.
var $skinDisplay = $('#skinDisplay');
var $skinSpinner = $('#skinSpinner');
$skinDisplay.html('');
$skinSpinner.html('');
currentCha = cha;
//Add small perviews to spinner
cha.skins.forEach(function(skin) {
var img = $('<img class="small-preview" src="http://ddragon.leagueoflegends.com/cdn/img/champion/loading/' + cha.key + '_' + skin.num + '.jpg">');
$skinSpinner.append(img);
skin.img = img;
})
spinTo(0);
}
function spinTo(index) {
centered = currentCha.skins[index].img;
var left = $('#skinSpinner').width() / 2 - centered.width();
console.log(centered.width());
centered.css('left', left);
}
displaySkins(ashe);
#skinDisplay {
width: 100%;
height: 100%;
}
#skinSpinner {
width: 500px;
height: 200px;
border: 1px solid black;
perspective: 500px;
}
#skinSpinner .small-preview {
position: absolute;
display: block;
height: 100%;
width: auto;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="overlay">
<div id="skinDisplay">
</div>
<div id="skinSpinner">
</div>
</div>
bind a load checker to spinTo function:
function spinTo(index) {
centered = currentCha.skins[index].img;
$(centered).bind('load', function(){
var left = $('#skinSpinner').width() / 2 - centered.width();
console.log(centered.width());
centered.css('left', left);
});
}
Seems like you are accessing your DOM before loading it.
$( document ).ready(function(){ displaySkins(ashe); });
This will defer execution of your script until the DOM is loaded.
It works in the fiddle as they put include the script in the end of the DOM. So DOM is loaded first and the script is included and finally executed. You do it the other way round (which is also fine) which obviously does not work

.toggle() on figcaption not working

I made my caption overlay my image and I wanted to add a display on hover functionality to it. But I can't get it to work
CSS
figure
{
margin: 0;
position: relative;
float: left;
figcaption
{
z-index: 2;
background-color: #ccc;
position: absolute;
left: 0;
bottom: 0;
width: 100%;
}
}
HTML
<figure>
<img src = "http://someimage.com/image.png">
<figcaption id="caption" style = "display: none">
<p> Some caption text </p>
<a href = '#'>link to author's bio</a>
</figcaption>
</figure>
And finally my very simplistic javascript. I know the hover functionality is working correctly because my console has a "hello" when I enter the figure and a "goodbye" when I leave. There is no "complete" message.
JQUERY
<script type = "text/javascript">
$('figure').hover(function ()
{
console.log('hello');
$('figcaption').toggle(slow,function(){ console.log("complete");} );
},
function ()
{
console.log('goodbye');
$('figcaption').toggle(slow,function(){ console.log("complete");});
});
</script>
Put slow in quotation marks since it's a string and it will work:
$('figcaption').toggle("slow",function(){ console.log("complete");} );
Fiddle
You should have an error in the console. Change slow to "slow".
It's a string.
From the documentation :
duration (default: 400) Type: Number or String A string or number
determining how long the animation will run.
You have multiple errors on your page
Check out the fiddle for a working demo
slow should be "slow"
you did not close the image tag
you have one css class nested inside the other
For future reference. Browsers have JavaScript consoles that print debug information. You must know this as you are using console.log(). If your current browser does not print information like:
Uncaught ReferenceError: slow is not defined
I would recommend you tweak your console settings or install a thrird party one. There are many excellent choices out there
Slow is a string:
$('figure').hover(
function(){
console.log('hello');
$('figcaption').toggle("slow",function(){ console.log("complete");} );
},function(){
console.log('goodbye');
$('figcaption').toggle("slow",function(){ console.log("complete");});
});
http://jsfiddle.net/RX5QA/1/

Categories