Develop Reference

Problems adding new sliders with javascript in the same page

I'm trying to add a new slider to a site (and 3º one... I already have 2), but when I try to add another, it doesn't work. I'm using javascript, but I don't know how to put the numbers (1,0) (1,1) etc. I have tried several options, but I can't get the correct one.
HTML:
1º slider
<div class="slideshow-container" onclick="plusSlides(1, 0)">
<div class="mySlides1">
<div class="numbertext">1/11</div>
<img src="IMG/Femeni-no/femenino-00.jpg" style="width:100%">
<div class="text-femenino">Femeni-NO</div>
</div>
2º slider
<div class="slideshow-container" onclick="plusSlides(1, 1)">
<div class="mySlides2">
<div class="numbertext">1/6</div>
<img src="IMG/Parasito/01.jpg" style="width:100%">
<div class="text-parasito">Parásito</div>
</div>
JS:
var slideIndex = [1,1];
/* Class the members of each slideshow group with different CSS classes */
var slideId = ["mySlides1", "mySlides2"]
showSlides(1, 0);
showSlides(1, 1);
function plusSlides(n, no) {
showSlides(slideIndex[no] += n, no);
}
function showSlides(n, no) {
var i;
var x = document.getElementsByClassName(slideId[no]);
if (n > x.length) {slideIndex[no] = 1}
if (n < 1) {slideIndex[no] = x.length}
for (i = 0; i < x.length; i++) {
x[i].style.display = "none";
}
x[slideIndex[no]-1].style.display = "block";
}// JavaScript Document
//disclaimer// I'm a begginer in coding and web design, willing to learn!

be aware of that
var slideIndex = [1,1]; !
in a glance i think array size limit could cause trouble.

How to solve "slider's all images display "in Angularjs But in HTML slider works properly

When I am using HTML, then image slider works properly but when I am using AngularJS then my image slider displays all image. After display all images when I clicking next button then my slider work properly. I was checking slider length then it shows me one slider but I have 4 images, and when I click the next button then it shows 4 slider length. Please help me!!! thanks in advance
HTML code
<div class="container" ng-init="image()">
<div class="row">
<div class="col-md-12" ng-repeat="img in images">
<div class="mySlides">
<div class="numbertext">{{img.id}}</div>
<img class="size-i" ng-src="{{img.oe_images}}" style="width:100%;">
</div>
</div>
<div class="row">
<div class="col-md-12">
<a class="prev" style="font-size:36px;" onclick="plusSlides(-1)">❮</a>
<a class="next" style="font-size:36px;" onclick="plusSlides(1)">❯</a>
<div class="row paddi">
<div class="column" ng-repeat="img in images">
<img class="demo cursor border-demo" ng-src="{{img.oe_images}}" style="width:100%;" data="{{img.id}}" ng-click="currentSlide(img.id)" alt="{{img.oe_images}}">
</div>
</div>
</div>
</div>
</div>
</div>
//Javascript code for image slider
<script>
var slideIndex = 1;
showSlides(slideIndex);
function plusSlides(n) {
showSlides(slideIndex += n);
}
function currentSlide(n) {
showSlides(slideIndex = n);
}
function showSlides(n) {
console.log(n);
var i;
var slides = document.getElementsByClassName("mySlides");
var dots = document.getElementsByClassName("demo");
if (n > slides.length) {
slideIndex = 1
}
if (n < 1) {
slideIndex = slides.length
}
console.log(slides.length);
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
for (i = 0; i < dots.length; i++) {
dots[i].className = dots[i].className.replace(" active", "");
}
slides[slideIndex - 1].style.display = "block";
dots[slideIndex - 1].className += " active";
}
</script>
//Controller.js file 'use strict'; var app = angular.module('myApp', []); app.controller('indexCtrl', function($scope,$http) { $scope.image = function(){ $http.get(baseURL+'pptAllImages').then(successCallback, errorCallback); function successCallback(response){
$scope.images=response.data; console.log($scope.images); } function errorCallback(error){ console.log(error); } }; });
[In the picture showing all images display after click next button it works properly][1]
[1]: https://i.stack.imgur.com/6zz7k.png
Everything is good in HTML code but this problem comes when I am using AngularJS. I am using automatic slider then it's work properly in AngularJS but I want to onclick slider. I also used other onclick slider but in every onclick slider comes same problem. All data I am fetching from database but problem comes only in AngularJS. Please help me.

You would need to move the javascript functions into the controller and bind them to the scope.
$scope.showSlides(){}
Also make sure you bootstrap the app with
ng-app="myApp"
Example of working angular image slider...
http://jsfiddle.net/HoffZ/t8BaZ/

add div using appendChild

This code is supposed to be looping and adding multiple divs, but it isn't working. When I click it, only one div appears. If I click again, nothing happens.
<body>
<div class="start" >
<div id = "coba">
</div>
<div id = "cobi">
</div>
</div>
<script>
var divs = document.getElementById("coba").addEventListener("click", function () {
for (var i = 1; i < 100; i++) {
var di = document.createElement('div');
document.getElementById('coba').appendChild(di);
}
});
</script>
</body>
Thanks for your help

Your code does not work because you did not do anything with the variable "i" in the for statement. If you look at the fiddles of user2181397 & meghan Armes you will see how they added a line in the script to put it to work.
I tested the below in my IDE and it works just fine:
<body>
<div class="start" style="margin-top:50px; color:black;">
<div id = "coba">
<p>Click Me</p>
</div>
<div id = "cobi">
</div>
</div>
<script>
var divs = document.getElementById("coba").addEventListener("click", function() {
for (var i = 1; i < 100; i++) {
var di = document.createElement('div');
di.innerHTML=i;
document.getElementById('coba').appendChild(di);
}
});
</script>
</body>

Image change on currently hovered image based on class name - JavaScript

I'm trying to build a function with pure JavaScript to change an image source of currently hovered over image from a set of images with the same class. Nothing happens with the following code:
<section id="imgs">
<div class="boundary">
<img class="cage" src="cage.png" height="150px" />
</div>
<div class="boundary">
<img class="cage" src="cage.png" height="150px" />
</div>
<div class="boundary">
<img class="cage" src="cage.png" height="150px" />
</div>
<div class="boundary">
<img class="cage" src="cage.png" height="150px" />
</div>
</section>
And my JavaScript function:
<script language="JavaScript">
var x = document.getElementsByClassName("cage");
for (var i = 0; i < x.length; i++) {
x[i].onMouseOver = function () {
this.src = "cageF.png";
}
}
</script>

you need to take care of case sensitivity, use onmouseover instead of onMouseOver
var x = document.getElementsByClassName("cage");
for (var i = 0; i < x.length; i++) {
x[i].onmouseover = function () {
this.src = "cageF.png";
}
}
Demo

I understand you have answer to your question. Have a look on below links to understand JavaScript better.
JavaScript case-sensitive
JavaScript is case-sensitive and uses the Unicode character set.
JavaScript mouseover event

Infinite looping slideshow of HTML pages with jQuery

I'm trying to make a slideshow of HTML pages outputting to a screen 24/7. What I have works, but different slides need different intervals. How can I achieve this?
The output is fullscreen with a fixed footer which displays logo, some messages and the time.
jQuery
$(document).ready(function () {
var div = $('#content'); // Target iFrame
var slides = ['welcome','movie']; // Which slides
var time = 5000; // Default interval
var folder = 'slides'; // Folder where the HTML slides are
var extension = 'html';
var index = 1; // Skip first (0), already loaded by default SRC from iframe
$.ajaxSetup({
cache: false // Maybe not neccesary any more, before I used a div and $.load() instead of iframe
});
function loop() {
if (index === slides.length) { // If at end
index = 0; // Start again
}
div.attr('src', folder + '/' + slides[index] + '.' + extension); // Load next one
index++;
}
setInterval(function () {
loop();
}, time);
});
HTML
<iframe id="content" src="slides/welcome.html" width="100%" height="100%" frameborder="0"></iframe>
<div id="bar">
<div class="row">
<div class="col-lg-3">
<img src="img/logo.png" alt="" id="logo">
</div>
<div class="col-lg-6">
<div id="welcome">
Welcome <span>visitor</span>!
</div>
</div>
<div class="col-lg-3">
<div id="time"></div>
</div>
</div>
</div>

Using setTimeout and buttons to start and stop the loop.
http://jsfiddle.net/nirmaljpatel/75tmnmbq/

<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
</head>
<body>
<div id="bar">
<div class="row">
<div class="col-lg-3">
<img src="img/logo.png" alt="" id="logo">
</div>
<div class="col-lg-6">
<div id="welcome">
Welcome <span>visitor</span>!
</div>
</div>
<div class="col-lg-3">
<div id="time"></div>
</div>
</div>
</div>
<div id="content"></div>
</body>
<script>
$(document).ready(function () {
var div = $('#content'); // Target iFrame
var slides = [{"ImageName":"Welcome", "Time":200},{"ImageName":"Image1", "Time":5000},{"ImageName":"Image3", "Time":1000},{"ImageName":"Image4", "Time":500},]; // Which slides
//var slideObj = JSON.parse(slides);
//alert(slides);
var time = 5000; // Default interval
var folder = 'slides'; // Folder where the HTML slides are
var extension = 'html';
var index = 0; // Skip first (0), already loaded by default SRC from iframe
$.ajaxSetup({
cache: false // Maybe not neccesary any more, before I used a div and $.load() instead of iframe
});
function loop() {
if (index == slides.length) { // If at end
index = 0; // Start again
}
div.html("ImageName: "+slides[index].ImageName + "; Image Time Interval: "+slides[index].Time); // Load next one
index++;
}
if(index==0)
loop();
setInterval(loop, slides[index].Time);
});
</script>
</html>