I've been trying to add multiple slideshows on one page using HTML 5, CSS and JS to my Django app from this example.
I get that this piece of code was not meant for multiple slideshows on one page, however, I can't seem to find out how to get it to work.
More specifically when I add a second slideshow It doesn't change the proper image gallery.
That script wasn't written to support multiple slideshows on the same page however if you create an object and pass the wrapping div's id you can make it work.
function SlideShow(id) {
this.container = document.getElementById(id);
this.leftBtn = this.container.querySelector('.w3-display-left');
this.rightBtn = this.container.querySelector('.w3-display-right');
this.slideIndex = 1;
var that = this;
this.init = function() {
this.showDivs(this.slideIndex);
};
this.plusDivs = function(n) {
this.showDivs(this.slideIndex += n);
};
this.showDivs = function(n) {
var x = this.container.getElementsByClassName("mySlides");
if (n > x.length) {this.slideIndex = 1}
if (n < 1) {this.slideIndex = x.length}
for (var i = 0; i < x.length; i++) {
x[i].style.display = "none";
}
x[this.slideIndex-1].style.display = "block";
};
this.leftBtn.addEventListener('click', function() {
that.plusDivs(-1);
});
this.rightBtn.addEventListener('click', function() {
that.plusDivs(1);
});
}
var foo = new SlideShow('foo');
foo.init();
var bar = new SlideShow('bar');
bar.init();
HTML
<div id="foo" class="w3-content w3-display-container">...</div>
<div id="bar" class="w3-content w3-display-container">...</div>
Demo: http://jsfiddle.net/zwsmcn3q/31/
Note: the slideshow code can be improved but that's out of scope for this answer.
Note: you can also write this as a class with ES6: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes
Related
I have a slideshow all put together but I'm having trouble using an onClick to insert an additional image. What am I missing?
function newDivs(n) {
var i;
var x = document.getElementsById("photo");
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";
}
<input type="text" name="photo" id="photo" value="http://static.boredpanda.com/blog/wp-content/uuuploads/cute-baby-animals/cute-baby-animals-23.jpg" />
<button id="addPicture" onclick="newDivs(+1)">Add New Image</button>
You have many mistakes to begin with:
wrong:
var x = document.getElementsById("photo");
right:
var x = document.getElementById("photo").val;
There a few things you need to understand.
When you want to perform action on multiple element never try id. (ID always return only single element. and it can not be run with multiple element.
Your Javascript function is wrong getElementsById. correct is getElementById. just because of as i said ID return single element ( getElementById - just remove (s) from the function.
try to use query selector. like i have used in your example.(querySelectorAll)
Query selector function will help you a lot !. and if you are new in javascript. if you can try jQuery it will be really easy for you.
If you want to display image you need to play with img tag. right now you are getting URL from input tag and trying to hide them doesn't make sense ;
Here is the your solution
var i= 0;
var slideIndex = 0;
function newDivs(n) {
var i;
var x = document.querySelectorAll(".photo");
console.log(x);
if (n > x.length) {
slideIndex = 1
}
if (n < 1) {
slideIndex = x.length
};
for (var index = 0; index < x.length; index++) {
console.log(x[index].style);
x[index].style.display = 'none';
}
console.log(slideIndex);
x[slideIndex].style.display = "block";
}
<input type="text" class="photo" name="photo" id="photo" value="http://static.boredpanda.com/blog/wp-content/uuuploads/cute-baby-animals/cute-baby-animals-23.jpg" />
<button id="addPicture" onclick="newDivs(+1)">Add New Image</button>
I have an history feature for a particular,div on my website. Everything worked fine up to now, I was inserting HTML as strings from javascript and re-display them with .innerHTML. Now I try to clean up the javascript from all HTML strings and I have this problem: history browsing of the div works in FF, Chrome and some other, but not IE (8 to 11), can't understand why. Is it a cloneNode() or a reference issue I don't see ?
Below is a small script to reproduce the behaviour, you can play with here: http://jsfiddle.net/yvecai/7e8tksm3/
My code works as follow: each time I display something in Mydiv, I clone it and append it in an array.
The function prev() or next() append the corresponding nodes from the array for display.
The script first create 5 contents '1' ... '5' that the user can display with the functions prev() and next(). In IE, when you go prev(), then next(), only the first and last records are shown. In other browsers, no problem.
var cache = [];
var i = 0;
function next() {
var hist = document.getElementById('history');
i += 1;
if (i > 4) {
i = 4
};
hist.innerHTML = '';
hist.appendChild(cache[i]);
}
function prev() {
var hist = document.getElementById('history');
i -= 1;
if (i < 0) {
i = 0
};
hist.innerHTML = '';
hist.appendChild(cache[i]);
}
function cacheInHistory(div) {
cache.push(div.cloneNode(true));
}
function populate() {
for (i = 0; i < 5; i++) {
var hist = document.getElementById('history');
hist.innerHTML = '';
var Mydiv = document.createElement('div');
Mydiv.innerHTML = i;
hist.appendChild(Mydiv);
cacheInHistory(Mydiv);
}
i = 4
}
I tried to simplify your code:
In the function populate (onload) create and populate the array cache. As last operation append your child.
In your next or previous function use replaceChild instead of append and remove innerHTML.
var cache=[];
var i = 0;
function next(){
var hist = document.getElementById('history');
i = (++i > 4) ? 4 : i;
hist.replaceChild(cache[i], hist.children[0]);
}
function prev(){
var hist = document.getElementById('history');
i = (--i < 0) ? 0 : i;
hist.replaceChild(cache[i], hist.children[0]);
}
function cacheInHistory(div){
cache.push(div.cloneNode(true));
}
function populate(){
var hist = document.getElementById('history');
for (i=0 ; i<5 ; i++){
hist.innerHTML='';
var Mydiv = document.createElement('div');
Mydiv.innerHTML = i;
cacheInHistory(Mydiv);
}
i = 4
hist.appendChild(cache[i]);
}
<body onload="populate();">
<div id="prev" onclick="prev()">
prev
</div>
<div id="next" onclick="next()">
next
</div>
<hr/>
<div id="history">
</div>
</body>
I am attempting to code a checkers game in JavaScript and I am having trouble with stopping images after one swap. In the current implementation (below) the images swap on click and then when you click on another part of the board (a table in this case) another 'piece' is placed. But then when you click again another is placed and another etc. I am trying to not have a piece be placed when you click again.
var imageSwaped = false;
function clickOnBlankSpace(object)
{
this.src="Directory/BlackPiece.png";
imageSwaped = true;
this.removeEventListener("click", clickOnBlankSpace);
return;
}
var BlackPieces = document.getElementsByClassName("BlackPiece");
var RedPieces = document.getElementsByClassName("RedPiece");
var BlankSpaces = document.getElementsByClassName("BlankSpace");
for(var j = 0; j<BlackPieces.length;j++)
{
var BlackPiece = BlackPieces[j];
BlackPiece.addEventListener("click", function()
{
this.src="Directory/BlackPieceH.png";
this.className ="BlackPieceH";
for(var j = 0; j<BlankSpaces.length;j++)
{
var BlankSpace = BlankSpaces[j];
if (!imageSwaped) BlankSpace.addEventListener("click", clickOnBlankSpace);
}
})
}
I amd working with hiding and showing divs, which have different contents. When i click on a link, i want a div to be shown. But when i click on another link, i want the new content to replace the previous one. Right now, it falls under it instead of replacing it. Any solution?
Javascript
function show(){
var links = {
link1: "content1",
link2: "content2",
link3: "content3",
link4: "content4"
};
var id = event.target.id;
var a = document.getElementsByTagName("a");
document.getElementById(links[id]).style.visibility = 'visible';
}
function init(){
var divs = document.getElementsByTagName("div");
for (i = 0; i < divs.length; i++) {
if (divs[i].className == "div") {
divs[i].style.visibility = 'hidden';
}
}
var a = document.getElementsByTagName("a");
for(i = 0; i < a.length; i++){
a[i].onclick = show;
}
}
window.onload = init;
You need to run the block of code that hides them all before showing the one you want, every time.
Make this:
function hideAll() {
var divs = document.getElementsByTagName("div");
for (i = 0; i < divs.length; i++) {
if (divs[i].className == "div") {
divs[i].style.visibility = 'hidden';
}
}
Remove this code from init() and replace it with a call to hideAll() and add a call to hideAll() at the beginning of show().
I am working with a very outdated templated site that does not let me change anything in the top portion of the site. The Flash slideshow no longer works properly, so I was wondering if there was any way Javascript/JQuery can be added to the accessable part of the site that will dynamically replace the existing flash slideshow with a Javascript slideshow I have made?
The site is: http://www.familymattersteam.com/
Thanks in advance!
I added the following code to the "script footer" portion of the site's back end. I just started learning Javascript about a week ago, and I borrowed this code from another out of date site, so I'm sure its painful to look at. It works though!
Essentially all I did was used the innHTML command to replace the contents in the "SlideShow" ID with code for a Javascript slideshow.
var t;
var slideShowSpeed = 5000;
var crossFadeDuration = 2;
var PicA = new Array();
PicA[0] = '/Repository/1/4/1/0/7/9/141079/template_files/slide1.jpg';
PicA[01] = '/Repository/1/4/1/0/7/9/141079/template_files/slide2.jpg';
PicA[02] = '/Repository/1/4/1/0/7/9/141079/template_files/slide3.jpg';
PicA[03] = '/Repository/1/4/1/0/7/9/141079/template_files/slide4.jpg';
PicA[04] = '/Repository/1/4/1/0/7/9/141079/template_files/slide5.jpg';
var j = 0;
var p = PicA.length;
var preLoadA = new Array();
for (i = 0; i < p; i++) {
preLoadA[i] = new Image();
preLoadA[i].src = PicA[i];
};
function runSlideShowA() {
if (document.all) {
document.images.SlideShowA.style.filter='blendTrans(duration=2)';
document.images.SlideShowA.style.filter='blendTrans(duration=crossFadeDuration)';
document.images.SlideShowA.filters.blendTrans.Apply();
};
document.images.SlideShowA.src = preLoadA[j].src;
if (document.all) {
document.images.SlideShowA.filters.blendTrans.Play();
};
j = j + 1;
if (j > (p - 1)) j = 0;
t = setTimeout('runSlideShowA()', slideShowSpeed);
};
newSlide = document.getElementById('SlideShow');
newSlide.innerHTML = '<img src="/Repository/1/4/1/0/7/9/141079/template_files/slide1.jpg" name="SlideShowA" width="874" height="206">';
runSlideShowA();