How to auto-scroll div content vertically continuously - javascript

I need to scroll the div which contains images, vertically. Any help or references will be highly appreciated.

Maybe something like this would help? First and last images are supposed to be the same.
JS:
(function(){
var box=document.getElementById('box');
box.appendChild(box.firstChild.cloneNode());
function infScroll(){
box.scrollTop +=1;
if(box.scrollTop===300){
box.scrollTop=0;
}
window.requestAnimationFrame(infScroll);
}
window.requestAnimationFrame(infScroll);
}());
HTML:
<div id="box" style="width:150px; height:100px; overflow:hidden;">
<img src="http://placekitten.com/150/90" />
<img src="http://placekitten.com/150/120" />
<img src="http://placekitten.com/150/80" />
<img src="http://placekitten.com/150/90" />
</div>

Related

How to execute javascript for each individual nested div displaying images?

I am trying to get a JS script to execute solo within each nested div. I have class conflicts, and I am unable to figure out how to basically iterate the script through each div without conflicts.
I have tried using .each, running different loops, classing the divs, and more. I have tried numerous things unsuccessfully. I wish I had kept track of all the different methods, but I've been at this for hours and have been unsuccessful in finding the correct syntax. It's quite obvious, I need serious work when it comes to programming. I have HTML, CSS, and bootstrap down pretty well, but Javascript and jQuery, I have just begun learning.
<link href="Styles/StyleSheet.css" rel="stylesheet" />
<script src="Scripts/thumbs.js"></script>
<div class="container-fluid maxW opaque padtop">
<!-- Jumbotron -->
<div class="jumbotron container-fluid">
<div>
<img src="jumbo.jpg" alt="" /></a>
</div>
</div>
<!--First Div Thumbnail Photo Block -->
<div class="container text-center">
<h3 class="text-center mt-4 mb-4">Photo Block 1</h3>
<div>
<img id="0" class="preview normal" src="" alt="" /><br />
<img id="1" class="thumb normal" src="sumpic.jpg" alt="" onmouseover="preview(this)" />
<img id="2" class="thumb normal" src="sumotherpic.jpg" alt="" onmouseover="preview(this)" />
</div>
</div>
<!--Second Div Thumbnail Photo Block -->
<div class="container text-center">
<h3 class="text-center mt-4 mb-4">Photo Block 2</h3>
<div>
<img id="0" class="preview normal" src="" alt="" /><br />
<img id="1" class="thumb normal" src="sumotherpic1.jpg" alt="" onmouseover="preview(this)" />
<img id="2" class="thumb normal" src="sumotherpic2.jpg" alt="" onmouseover="preview(this)" />
<img id="3" class="thumb normal" src="sumotherpic3.jpg" alt="" onmouseover="preview(this)" />
</div>
</div>
</div>
Here's the CSS:
.preview {
width: Auto;
max-height: 600px;
}
.thumb {
width: 205px;
margin-right: 3px;
}
.normal {
border: 3px solid #000000;
}
.selected {
border: 3px solid #ff0000;
}
And the JavaScript code:
var lastImg = 1; //Set initial thumbnail and preview
document.getElementById(0).src = document.getElementById(lastImg).src;
document.getElementById(lastImg).className = "thumb selected";
function preview(img) {
document.getElementById(lastImg).className = "thumb normal";
img.className = "thumb selected";
document.getElementById(0).src = img.src;
lastImg = img.id
}
I think that's everything.
So what I'm aiming for is each div block to have the thumbs underneath and the mouse-dover image displayed above as the large displayed image. It works great so long as there is one single div. As soon as I add 2+ I run into what I'm assuming is class conflicts where only the first div displays the large image. It will display the large image that was last moused over in any of the divs. It is empty in all divs, except the first. The thumbs have no issues being displayed in each div. Thank you in advance for any help, and thank you for understanding I'm new to this and trying to learn.
Well, your using pure Javascript, no jQuery. That's ok of course
The obvious error I'm seeing is id = 0 instead of "0"
Another thing is "className" youre using instead of set attribute class
I would recommend in general 2 things:
Using example cases, and F11 and opening the console
As per you code, I made small fixes to get you going, and to understand the next step. I think that you should define object vars for lastimg, "0" and img then make the code more readable and scalable
var lastImg = 1; //Set initial thumbnail and preview
document.getElementById("0").src = document.getElementById(lastImg).src;
document.getElementById(lastImg).setAttribute("class", "thumb selected");
function preview(img) {
document.getElementById(lastImg).setAttribute("class", "thumb normal");
document.getElementById(img).setAttribute("class", "thumb selected");
document.getElementById("0").getAttribute("src") = document.getElementById("img").getAttribute("src");
lastImg = img;
}

Auto image slider that starts from the beginning infinitely

As the sketch above shows, I need a slider gallery where four images slide to left one by one automatically. As the fourth image leaves, the first one follows as if it were the fifth.
How can I achieve this goal, without any plugins, just CSS and a little bit JavaScript?
Please check below code
<script type="text/javascript" src="js/jquery.flexislider.js"></script>
<div id="slider">
<div id="imageloader" style="display: none;">
<img src="images/header-logos_04.jpg" />
</div>
<img src="images/header-logos_04.jpg" />
<img src="images/header-logos_05.jpg" />
<img src="images/header-logos_02.jpg" />
<img src="images/header-logos_03.jpg" />
<img src="images/header-logos_02.jpg " />
<img src="images/header-logos_03.jpg" />
</div>
jquery.flexislider.js
jQuery(window).load(function(){
pic = jQuery("#slider").children("img");
numImgs = pic.length;
arrLeft = new Array(numImgs);
for (i=0;i<numImgs;i++){
totalWidth=0;
for(n=0;n<i;n++){
totalWidth += jQuery(pic[n]).width();
}
arrLeft[i] = totalWidth;
jQuery(pic[i]).css("left",totalWidth);
}
myInterval = setInterval("flexiScroll()",speed);
jQuery('#imageloader').hide();
jQuery(pic).show();
});
function flexiScroll(){
for (i=0;i<numImgs;i++){
arrLeft[i] -= 1;
if (arrLeft[i] == -(jQuery(pic[i]).width())){
totalWidth = 0;
for (n=0;n<numImgs;n++){
if (n!=i){
totalWidth += jQuery(pic[n]).width();
}
}
arrLeft[i] = totalWidth;
}
jQuery(pic[i]).css("left",arrLeft[i]);
}
}
The idea is to insert the images one at a time into HTML and have them take on the banner functionality, the tricky part that we couldn't repeat anything in HTML so keyframe should be used to animate it,
Check that article for the complete solution, and that live demo

Each not encapsulating blocks

I'm building a site that dynamically positions content in the middle of a group of sections.
Div with image background (Full width image - FWI)
Div with image background (of different height)
My problem is even with the each selector the first div is used to dictate the height to any other divs below it, I'm obviously missing something pretty basic
Jquery
jQuery(window).on("resize", function() {
jQuery('.fwi').each(function() {
jQuery('.image-outer').height(jQuery('.fwi-image').height());
});
}).resize();
jQuery(".fwi-image img").load(function() {
jQuery('.fwi').each(function() {
jQuery('.image-outer').height(jQuery('.fwi-image').height());
});
});
HTML
<div class="fwi">
<div class="relative">
<div class="fwi-image full-width">
<img width="1920" height="1080" src="">
</div>
<div class="outer image-outer" style="height: 1080px;">
my content which is dynamically positioned in the center vertically in my div
</div>
</div>
</div>
<div class="fwi">
<div class="relative">
<div class="fwi-image full-width">
<img width="1920" height="1200" src="">
</div>
<div class="outer image-outer" style="height: 1080px;">
will take height from previous image-outer not its parent - it should be 1200
</div>
</div>
</div>
Place this in you document.
function adjustImageOuterHeight () {
var fwiImage = jQuery(this).parent(".fwi-image");
var imageOuter = fwiImage.next(".image-outer");
imageOuter.height(fwiImage.height());
}
jQuery(document).ready(function () {
jQuery(".fwi-image img")
.load(adjustImageOuterHeight)
.each(function () {
if (this.complete) adjustImageOuterHeight.call(this);
});
});
jQuery(window).resize(function () {
jQuery(".fwi-image img").each(adjustImageOuterHeight);
});
Loose any other jQuery stuff related to .fwi-image. And optionally loose your explicit call to .resize() on the window object.

Why the image is not changing when I put mouse over it

Here in the line where the image team.gif is set, I have set events onmouseout and onmouseover, but both are not working. Image is not changing, when I put mouse over it. Please help me.
<div id="about" style="position:absolute;top:1310px;width:1340px;height:655px;background-color:black;opacity:0.9">
<div style="position:absolute;top:140px;left:630px;border:thin solid #03c1cb;width:2px;height:460px " >
</div>
<img src="mission.gif" alt="mission" style="position:absolute;top:1400px;right:430px" />
<img src="vision.gif" alt="vision" style="position:absolute;top:1570px;right:420px" />
<img src="team.gif" alt="team" style="position:absolute;top:1610px;right:360px;z-index:100" onmouseover="lighton(this)" onmouseout="lightof(this)" />
<img src="3.gif" alt="light" id ="light"style="position:absolute;top:1360px;right:15px" />
</div>
my javascript code is here
<script>
lighton(x)
{
x.src="team1.gif";
}
lightof(x)
{
x.src="team.gif";
}
</script>
In your script you need to add the function keyword.
<script>
function lighton(x)
// ^^^^^^^^
{
x.src="team1.gif";
}
function lightof(x)
//^^^^^^^^
{
x.src="team.gif";
}
</script>
<img src="team.gif" alt="team" style="position:absolute;top:1610px;right:360px;z-index:100" onmouseover="this.src='team1.gif'" onmouseout="this.src='team.gif'" />
Fiddle https://jsfiddle.net/8wx8r9za/

Stop simple JavaScript slideshow after one loop

I know very little about JavaScript at all, but I'm looking for a solution to a simple code that I'd like to use. I'm not trying to execute any slides or fades, just a simple slideshow that switches from one image to the next. I want the slideshow to play through just once, and then stop on the last image in the sequence. Any help would be greatly appreciated!
$("#slideshow > div:gt(0)").hide();
setInterval(function() {
$('#slideshow > div:first')
.next()
.end()
.appendTo('#slideshow');
}, 3000);
As I said, it's a very simple code. The first GIF runs only once, the second GIF loops. I would like the slideshow to stop on the looping GIF. I'm wondering if the '3000' (which I know corresponds to the length of each slide) can be changed to accomplish what I'm looking for. Or else adding a stop function... which I don't know how to write.
<div id="slideshow">
<div>
<img src="https://31.media.tumblr.com/e2c4bbaeb781a3b834cd09549595393f/
tumblr_noy3q3l1dy1uwyyx9o2_1280.gif">
</div>
<div>
<img src="https://33.media.tumblr.com/1d6495399687801067d62c83c4218644/
tumblr_noy3q3l1dy1uwyyx9o1_1280.gif">
</div>
</div>
Ok I have made this with the objective of being as clear and simple for you to understand as possible, (since you new to js...)
JS/Jquery:
$(function () {
setTimeout(playSlideShow, 3000);
function playSlideShow() {
var currImgContainer = $('.showImg');
if (!$(currImgContainer).hasClass('lastImg')) {
$('.showImg').removeClass('showImg').next().addClass('showImg');
setTimeout(playSlideShow, 3000);
}
}
});
So here we find the imgContainer(div) with the class "showImg", then using chaining, we remove the class and add it to the next imgContainer(div). Therefore toggling the CSS to show/hide the image until it finds the div that has the class "lastImg".
CSS:
.slideShow > div:not(.showImg) {
display: none;
}
.showImg {
display: block;
width: 400px;
height: 400px;
}
HTML:
<div class="slideShow" id="slideshow">
<div class="showImg">
<img src="Images/img1.png" alt="" />
</div>
<div>
<img src="Images/img2.png" alt="" />
</div>
<div>
<img src="Images/img3.png" alt="" />
</div>
<div class="lastImg">
<img src="Images/img4.png" alt="" />
</div>
</div>
This way you can have as many images as you want, just make sure the last div has class "lastImg" and the first one has the class "showImg".
Here is a fiddle
Hope it helps...
Try this:
var intervalID = null;
var iterator = 0;
var intervalDuration = 3000;
var slideshow = $('#slideshow');
var divs = slideshow.find('div');
//divs.filter(':gt(0)').hide();
divs.eq(iterator).show();
intervalID = setInterval(function(){
divs.eq(iterator).hide();
iterator += 1;
if (iterator === divs.length - 1) { clearInterval(intervalID); }
divs.eq(iterator).show();
}, intervalDuration);
#slideshow > div { display: none; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="slideshow">
<div>
<img src="https://dl.dropboxusercontent.com/u/45891870/Experiments/Codepen/PIXI/0.4/images/JS.jpg" />
</div>
<div>
<img src="https://dl.dropboxusercontent.com/u/45891870/Experiments/Codepen/PIXI/0.4/images/PIXI.jpg" />
</div>
<div>
<img src="https://dl.dropboxusercontent.com/u/45891870/Experiments/Codepen/PIXI/0.4/images/JS.jpg" />
</div>
</div>
The HTML structure is same as yours but the only thing that I have changed are the image sources (tumbler images weren't loading for me). But JavaScript has been changed completely.
Add as many DIVs as you like in your HTML to test it out. Hope it helps.
Update #1:
Added CSS to hide the divs by default.
Increased the intervalDuration to 3000. Just to make sure there is ample time for the images to be loaded.
Commented the filter line of JS.
Added another JS line right below the previous filter line.
This update should also load your GIF only when it is needed to appear, hence will not be running in the background.
Let me if this works.

Categories

Resources