We Keep Coding

Viewport - jQuery selectors for finding elements in viewport

In my project every div has a video so I'm trying to check if a div is in viewport, so if it is that video to start playing and if it's not to pause or to stop. I'm jusing jekyll.
For example my html code for only one div looks like this :
<div class="container">
<div class="row">
<input type="button" id="play" value="Play"></input>
<input type="button" id="pause" value="Pause"></input>
<br/><br/>
<div class="col-lg-5 col-lg-offset-1 col-sm-push-6 col-sm-6">
<hr class="section-heading-spacer">
<div class="clearfix"></div>
<h2 class="section-heading">Vjetersia</h2>
<div class="lead"><p class="justify"> Vjetersia</p></div>
</div>
<div class="col-lg-5 col-sm-pull-6 col-sm-6">
<div class="gifv-player" id="">
<video preload="none" loop="loop">
<source type="video/webm" src="all_files/1.webm" />
</video>
<img src="example.png" alt="Animated Gif" />
</div>
</div>
<div class="col-lg-3 col-sm-pull-2 col-sm-2"></div>
</div>
</div>
I tried to do it on button click and it works:
$( document ).ready(function() {
player = new GifvPlayer();
$("#play").click(function() {
$('.gifv-player').find('video').show();
$('.gifv-player').find('video')[0].play();
});
$("#pause").click(function() {
$('.gifv-player').find('video')[0].pause();
});
});
but how can i modify it so it can work on stroll if a div is visible to start to play its video ? Any help?

easy quick and dirty example how you could implement it. play/pause like changing colors of the divs ... http://jsfiddle.net/7mkdj4ak/1/
var scrollPosition = $(window).scrollTop();
var windowViewHeight = $(window).height();
var videoWrapHeight = $('.container').outerHeight();
$(window).on('scroll', function(){
scrollPosition = $(window).scrollTop();
playVideos(scrollPosition);
});
$(window).on('resize', function(){
windowViewHeight = $(window).height();
});
var playVideos = function(scrollPosition) {
$('.container').each(function(i){
var thisContainerTopPosition = $(this).offset().top;
var thisContainerBottomPosition = thisContainerTopPosition + videoWrapHeight;
if(
thisContainerTopPosition >= scrollPosition &&
thisContainerBottomPosition <= (scrollPosition + windowViewHeight )
) {
/* div is in view PLaY */
$(this).css('background-color','orange');
} else {
/* div is out of view PausE */
$(this).css('background-color','#afafaf');
}
});
};
playVideos(scrollPosition);
.container {
width: 100%;
height: 100px;
background-color: #afafaf;
margin: 20px 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<h1>my Video 1</h1>
</div>
<div class="container">
<h1>my Video 2</h1>
</div>
<div class="container">
<h1>my Video 3</h1>
</div>
<div class="container">
<h1>my Video 4</h1>
</div>

You can refer this demo
.growme {
background-color: #990000;
height: 0;
width: 0;
position: absolute;
filter: alpha(opacity=0);
opacity: 0;
top:0;
left:0;
bottom:0;
right:0;
margin:auto;
}
DEMO HERE

onload setInterval for carousel

I was messing around and making a simple carousel from scratch. At first I used onclick="function()" to toggle through the images, then I wanted to switch it out for an onload="setInterval(function, 4000)", but that seems to have broken something...
Here is the html:
<div id="carousel">
<div class="carousel-image" onload="setInterval(newImage(this), 4000)"><img src="http://placehold.it/350x150">1</div>
<div class="carousel-image-off" onload="setInterval(newImage(this), 4000)"><img src="http://placehold.it/350x150">2</div>
<div class="carousel-image-off" onload="setInterval(newImage(this), 4000)"><img src="http://placehold.it/350x150">3</div>
<div class="carousel-image-off" onload="setInterval(newImage(this), 4000)"><img src="http://placehold.it/350x150">4</div>
<div class="carousel-image-off" onload="setInterval(newImage(this), 4000)"><img src="http://placehold.it/350x150">5</div>
<div class="carousel-image-off" onload="setInterval(newImage(this), 4000)"><img src="http://placehold.it/350x150">6</div>
</div>
And here is the script:
<script>
var arr = 0;
function newImage(el){
var images = document.getElementById('carousel').children;
for (var i = 0; i < images.length; i++ ){
images[i].className = "carousel-image-off";
} if (arr < images.length-1){
arr++;
images[arr].className = "carousel-image";
} else {
arr = 0;
images[arr].className = "carousel-image";
}
}
</script>

I've simplified a little bit, changed a few things.
HTML
<div id="carousel">
<div class="carousel-image active"><img src="http://placehold.it/350x150">1</div>
<div class="carousel-image"><img src="http://placehold.it/350x150">2</div>
<div class="carousel-image"><img src="http://placehold.it/350x150">3</div>
<div class="carousel-image"><img src="http://placehold.it/350x150">4</div>
<div class="carousel-image"><img src="http://placehold.it/350x150">5</div>
<div class="carousel-image"><img src="http://placehold.it/350x150">6</div>
</div>
CSS
.carousel-image {
display:none;
}
.carousel-image.active {
display:inline;
}
JavaScript
function newImage() {
var images = document.getElementsByClassName('carousel-image');
for(var i = 0; i < images.length; i++ ) {
if(images[i].className.match('active'))
{
images[i].classList.remove('active');
if(i >= images.length-1)
{
images[0].classList.add('active');
}
else
{
images[i+1].classList.add('active');
}
break;
}
}
}
setInterval(
newImage,
1000
);
JSFiddle
http://jsfiddle.net/nasd0ska/2/
Note
If I were you, I'd use jQuery. So easy and handy for manipulating DOM!

How to show div multiple step using javascript?

How to show div multiple step using javascript ?
i want to create code for
click on CLICK HERE first time it's will show one
click on CLICK HERE second time it's will show two
click on CLICK HERE third time it's will show three
click on CLICK HERE fourth time it's will show four
click on CLICK HERE fifth time it's will show five
http://jsfiddle.net/x53eh96o/
<style type="text/css">
div{
display: none;
}
</style>
<div id="1">one</div>
<div id="2">two</div>
<div id="3">three</div>
<div id="4">four</div>
<div id="5">five</div>
<div onclick="myFunction()" style="display: block;">CLICK HERE</div>
<script>
function myFunction() {
document.getElementById("1").style.display = "block";
}
</script>
how can i do that ?
THANK YOU

First of all, it would be better to add a common class to your divs, in order to make the selection easier. Then you should select all of needed divs by class name, and pass through each of them, setting needed visibility.
http://jsfiddle.net/x53eh96o/7/
<div class="some_class" id="1">one</div>
<div class="some_class" id="2">two</div>
<div class="some_class" id="3">three</div>
<div class="some_class" id="4">four</div>
<div class="some_class" id="5">five</div>
<div onclick="myFunction()" style="display: block;">CLICK HERE</div>
<script>
var i = 0;
function myFunction() {
var divs = document.getElementsByClassName("some_class");
var divsLength = divs.length;
for(var j = divsLength; j--;) {
var div = divs[j];
div.style.display = (i == j ? "block" : "none");
}
i++;
if(i > divsLength) {
i = 0; // for a cycle
}
}
</script>
UPDATE
And here is jquery example: http://jsfiddle.net/x53eh96o/8/
<div class="some_class" id="1">one</div>
<div class="some_class" id="2">two</div>
<div class="some_class" id="3">three</div>
<div class="some_class" id="4">four</div>
<div class="some_class" id="5">five</div>
<div onclick="myFunction()" style="display: block;">CLICK HERE</div>
<script>
var i = 0;
function myFunction() {
var divs = $(".some_class");
divs.hide().eq(i).css({display: 'block'});
i++;
if(i > divs.length) {
i = 0;
}
}
</script>

id values should not start with a number.
div {
display: none;
}
<div id="show_1">one</div>
<div id="show_2">two</div>
<div id="show_3">three</div>
<div id="show_4">four</div>
<div id="show_5">five</div>
<div onclick="myFunction()" style="display: block;">CLICK HERE</div>
<script>
var show = 0;
function myFunction() {
try {
document.getElementById('show_' + ++show).style.display = "block";
} catch (err) {
show--
for (i = show; i > 0; i--) {
document.getElementById('show_' + i).style.display = "none";
show--;
}
}
}
</script>

Javascript - How can i return the sum of variables based on clicked objects

I am still very new to javascript (so please forgive me for being dull). I'm currently working on a segment of script that will display a sum of integers based on which images are clicked. Moreover, there are three groups of two images that represent housing features, the user can choose one (of two) from each group. Each option corresponds to a different numerical price value, then based on which three features the user selects, a p-tag will return the sum of prices.
Can someone please give me suggestions or demonstrate how this can be achieved?
My HTML:
<div id="wrapper">
<div id="kitchen" align="left">
<img id="pricetile2" src="../Images/french.png">
<img id="pricetile3" src="../Images/german.png">
</div>
<div id="floor" align="left">
<img id="pricetile4" src="../Images/mixed.png">
<img id="pricetile5" src="../Images/allwood.png">
</div>
<div id="energy" align="left">
<img id="pricetile6" src="../Images/green.png">
<img id="pricetile7" src="../Images/standard.png">
</div>
</div>
<div id="price"> <p id="calc">total$here</div>
My Script:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript" src="js/script.js"></script>
<script>
var x = calculate();
var a
var b
var c
$('#pricetile2').click(function(){
a = 2;
});
$('#pricetile3').click(function(){
a = 3;
});
$('#pricetile4').click(function(){
b = 4;
});
$('#pricetile5').click(function(){
b = 5;
});
$('#pricetile6').click(function(){
c = 6;
});
$('#pricetile7').click(function(){
c = 7;
});
function calculate(a, b, c){
return a + b + c;
}
document.getElementById("calc").innerHTML = x;
</script>

What this script does: on click check to see what was clicked, if it was an image inside the container, then find the currently selected item if there is one and set it to inactive. Then set the clicked element to active. After changing the selection, loop through all of the lines to find the selected item for each line and add the value of the data-price="" attribute together, then post that value inside <span id="total"></span>
(function () {
"use strict";
var wrap = document.getElementById('wrapper'),
total = document.getElementById('total'),
lines = wrap.children, line;
wrap.addEventListener('click', function (e) {
if (e.target.className.indexOf('pricetile') >= 0) {
var selected = e.target.parentElement.getElementsByClassName('selected')[0];
if(selected) selected.className = selected.className.replace(' selected', '');
e.target.className += ' selected';
var sum = 0;
for (var i = 0; line = lines[i]; i++) {
var selected = line.getElementsByClassName('selected')[0];
if (selected) sum = sum + Number(selected.dataset.price);
}
total.innerHTML = Number(sum).toFixed(2);
}
}, false);
})();
<div id="wrapper">
<div id="kitchen">
<img src="http://lorempixel.com/50/50/" class="pricetile" data-price="100">
<img src="http://lorempixel.com/50/50/" class="pricetile" data-price="200">
</div>
<div id="floor">
<img src="http://lorempixel.com/50/50/" class="pricetile" data-price="300">
<img src="http://lorempixel.com/50/50/" class="pricetile" data-price="400">
</div>
<div id="energy">
<img src="http://lorempixel.com/50/50/" class="pricetile" data-price="500">
<img src="http://lorempixel.com/50/50/" class="pricetile" data-price="600">
</div>
</div>
<div id="price">total: $<span id="total">0.00</span></div>

Try using data attribute and re-compute total on click:
$(function() {
$('img.select').on('click', function() {
$(this).toggleClass('pick').siblings().removeClass('pick'); //remove previous selection
var sum = 0.0;
$('img.pick').each(function() { //loop all chosen
sum += +($(this).data('price')); //note its parsing
});
$('#total').text(sum.toFixed(2));
});
});
img.select {
/* to select */
cursor: pointer;
padding: 5px;
border: 1px solid #bbb;
width: 35px;
height: 35px;
margin-bottom: 5px;
}
img.pick {
/* chosen */
border-color: black;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div id="wrapper">
<div id="kitchen">
<img src="" data-price="1" class='select'>
<img src="" data-price="2" class='select'>
</div>
<div id="floor">
<img src="" data-price="3" class='select'>
<img src="" data-price="4" class='select'>
</div>
<div id="energy">
<img src="" data-price="5" class='select'>
<img src="" data-price="6" class='select'>
</div>
</div>
<div id="price">Total: $<span id="total">0.00</span>
</div>

Animation gets fail

i have a script here that animate 3 divs containing product came from the database. It animate well when the page load in the first time but my problem is its not animate well after a min and everytime i refresh the page.
<html>
<script src='jquery.js'></script>
<script>
$(document).ready(function(){
$("#Slide2").hide();
$("#Slide3").hide();
});
var h = 1;
var x = setTimeout(show2, 3000);
function show1()
{
h = 1;
$("#Slide1").show();
$("#Slide2").hide();
$("#Slide3").hide();
$("#Slide1").css("left", "-400px");
$("#Slide1").animate({left:'-1px'});
clearTimeout(x);
x = setTimeout(show2, 3000);
}
function show2()
{
if(h <= 2)
{
h = 2;
$("#Slide2").show();
$("#Slide1").hide();
$("#Slide3").hide();
$("#Slide2").css("right", "-400px");
$("#Slide2").animate({right:'-1px'});
clearTimeout(x);
x = setTimeout(show3, 3000);
}
else
{
h = 2;
$("#Slide2").show();
$("#Slide1").hide();
$("#Slide3").hide();
$("#Slide2").css("left", "-400px");
$("#Slide2").animate({left:'-1px'});
clearTimeout(x);
x = setTimeout(show3, 3000);
}
}
function show3()
{
h = 3;
$("#Slide3").show();
$("#Slide2").hide();
$("#Slide1").hide();
$("#Slide3").css("right", "-400px");
$("#Slide3").animate({right:'-1px'});
clearTimeout(x);
x = setTimeout(show1, 3000);
}
</script>
<style>
#Slide1 , #Slide2, #Slide3
{
width:530px;
height:100px;
position:relative;
background:blue;
}
#container
{
width:500px;
margin:auto;
border:1pt solid black;
overflow:hidden;
height:auto;
}
</style>
<body>
<div id='container'>
<button onclick="check1()">1</button>
<button onclick="check2()">2</button>
<button onclick="check3()">3</button>
<br></br>
<div style='width:530px;margin:auto'>
<div id='Slide1'>
<div style='width:120px;height:100px;float:left;margin-left:10px;background:#ff0'></div>
<div style='width:120px;height:100px;float:left;margin-left:10px;background:#ff0'></div>
<div style='width:120px;height:100px;float:left;margin-left:10px;background:#ff0'></div>
<div style='width:120px;height:100px;float:left;margin-left:10px;margin-right:10px;background:#ff0'></div>
</div>
<div id='Slide2' >
<div style='width:120px;height:100px;float:left;margin-left:10px;background:green'></div>
<div style='width:120px;height:100px;float:left;margin-left:10px;background:green'></div>
<div style='width:120px;height:100px;float:left;margin-left:10px;background:green'></div>
<div style='width:120px;height:100px;float:left;margin-left:10px;margin-right:10px;background:green'></div>
</div>
<div id='Slide3' >
<div style='width:120px;height:100px;float:left;margin-left:10px;background:red'></div>
<div style='width:120px;height:100px;float:left;margin-left:10px;background:red'></div>
<div style='width:120px;height:100px;float:left;margin-left:10px;background:red'></div>
<div style='width:120px;height:100px;float:left;margin-left:10px;margin-right:10px;background:red'></div>
</div>
</div>
</div>
</body>
</html>

You are not clearing your previous setInterval before starting new setInterval. Use clearInterval(x) before every setInterval in your show1(), show2() and show3() . hope it ll help.
You have redundant if else loop in your show2() . check it here (http://jsfiddle.net/cJ9FK/)
Hope it'll help, Thank you