How to generate an animated scrolling image effect - javascript

I am using The following snippet in order to create a scrolling textbox:
<html>
<head>
<style type="text/css">
#scroll {
position: absolute;
white-space: nowrap;
top: 0px;
left: 200px;
}
#oScroll {
margin: 0px;
padding: 0px;
position: relative;
width: 200px;
height: 20px;
overflow: hidden;
}
</style>
<script type="text/javascript">
function scroll(oid, iid) {
this.oCont = document.getElementById(oid)
this.ele = document.getElementById(iid)
this.width = this.ele.clientWidth;
this.n = this.oCont.clientWidth;
this.move = function() {
this.ele.style.left = this.n + "px"
this.n--
if (this.n < (-this.width)) {
this.n = this.oCont.clientWidth
}
}
}
var vScroll
function setup() {
vScroll = new scroll("oScroll", "scroll");
setInterval("vScroll.move()", 20)
}
onload = function() {
setup()
}
</script>
</head>
<body>
<div id="oScroll">
<div id="scroll">This is the scrolling text</div>
</div>
</body>
</html>
however, I am looking to create a 'scrolling' image, and whenever I try to create an <img> tag within the 'This is the scrolling text' div, it doesn't show up on the page (at all).
I'm pretty new to javascript (ok, a complete novice) and would appreciate if anyone could inform me of a way of adding this image to this effect:
I have been unable to find a way of creating something like this, other than creating my own gif image in photoshop/etc.
EDIT
I tried using a marqee, however:

If you want to add an image that is 128px high into your div, you also need to change the height of the containing element from 20px to 128px.
Here's your code working:
<html>
<head>
<style type="text/css">
#scroll {
position: absolute;
white-space: nowrap;
top: 0px;
left: 200px;
}
#oScroll {
margin: 0px;
padding: 0px;
position: relative;
width: 200px;
height: 128px;
overflow: hidden;
}
</style>
<script type="text/javascript">
function scroll(oid, iid) {
this.oCont = document.getElementById(oid)
this.ele = document.getElementById(iid)
this.width = this.ele.clientWidth;
this.n = this.oCont.clientWidth;
this.move = function() {
this.ele.style.left = this.n + "px"
this.n--
if (this.n < (-this.width)) {
this.n = this.oCont.clientWidth
}
}
}
var vScroll
function setup() {
vScroll = new scroll("oScroll", "scroll");
setInterval("vScroll.move()", 20)
}
onload = function() {
setup()
}
</script>
</head>
<body>
<div id="oScroll">
<img id="scroll" src='http://i.stack.imgur.com/P8i8o.png' />
</div>
</body>
</html>

If you want to use your existing code just alter the height of #oScroll in the CSS
<html>
<head>
<style type="text/css">
#scroll {
position: absolute;
white-space: nowrap;
top: 0px;
left: 200px;
}
#oScroll {
margin: 0px;
padding: 0px;
position: relative;
width: 200px;
height: 200px;
overflow: hidden;
}
</style>
<script type="text/javascript">
function scroll(oid, iid) {
this.oCont = document.getElementById(oid)
this.ele = document.getElementById(iid)
this.width = this.ele.clientWidth;
this.n = this.oCont.clientWidth;
this.move = function() {
this.ele.style.left = this.n + "px"
this.n--
if (this.n < (-this.width)) {
this.n = this.oCont.clientWidth
}
}
}
var vScroll
function setup() {
vScroll = new scroll("oScroll", "scroll");
setInterval("vScroll.move()", 20)
}
onload = function() {
setup()
}
</script>
</head>
<body>
<div id="oScroll">
<div id="scroll"><img src="http://i.stack.imgur.com/P8i8o.png" /></div>
</div>
</body>
</html>

Related

How do I stop resize bar from being so glitchy?

Basically, I want to make the resize bar move as I move the cursor across as long as I'm focusing on it. I did that but the thing is that it's being glitchy. It returns to the original state one time and the other time follows the cursor. I don't want it to do that.
let slider = document.querySelector(".Slider");
let container = document.querySelector(".Container")
let contone = document.querySelector(".contone");
let conttwo = document.querySelector(".conttwo");
let clicked = false;
slider.addEventListener("mousedown", function(e) {
clicked = true;
slider.style.left += e.offsetX + "px";
})
container.addEventListener("mousemove", function(e) {
if(clicked) {
slider.style.left = e.offsetX + "px"
console.log("Cursor is " + e.offsetX)
console.log("Element is" + slider.style.left)
}
})
container.addEventListener("mouseup", function() {
clicked = false;
})
.Container {
position: relative;
width: 500px;
height: 300px;
overflow: hidden;
}
.contone {
position: absolute;
width: 100%;
height: 100%;
z-index: -11;
overflow: hidden;
}
.contone img {
position: relative;
}
.conttwo {
position: absolute;
width: 100%;
height: 100%;
z-index: -11111;
overflow: hidden;
}
img {
width: 100%;
height: 100%;
}
.Slider {
cursor: ew-resize;
background-color: black;
opacity: 0.5;
width: 1%;
z-index: 9999;
height: 100%;
position: relative;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<link rel="stylesheet" href="Style.css" />
<script src="Script.js" async></script>
</head>
<body>
<div class="Container">
<div class="contone">
<img
class="Pic1"
src="https://aluminumwheelsguide.com/wp-content/uploads/2020/04/Best-All-Wheel-Drive-Cars-2020-700x300.jpg"
alt=""
/>
</div>
<div class="Slider"></div>
<div class="conttwo">
<img
class="Pic2"
src="https://signatureautoworld.com/wp-content/uploads/2020/06/SONATA-hero-option2-764A4983-640x354.jpg"
alt=""
/>
</div>
</div>
</body>
</html>
As you can see, as you drag the element, it works but it isn't smooth. It returns to its original coordinates sometimes and then follows the cursor the other time.
.offsetX is the mouse position relative to the element, so that makes the slider jump. .clientX is the mouse position relative to the document.
In order to use clientX, however, you need to subtract the original x position of the slider. I'm going to assume that .Container will always be the container for the slider. By using getBoundingClientRect() (which is a operation that takes time), I can get the x position (.left) from said container.
let slider = document.querySelector(".Slider");
let container = document.querySelector(".Container")
let contone = document.querySelector(".contone");
let conttwo = document.querySelector(".conttwo");
let clicked = false;
slider.addEventListener("mousedown", function(e) {
clicked = true;
})
container.addEventListener("mousemove", function(e) {
if(clicked) {
updateSliderPosition(e.clientX);
console.clear();
console.log("Cursor is " + e.clientX);
console.log("Element is" + slider.style.left);
}
})
function updateSliderPosition(value) {
let box = container.getBoundingClientRect();
slider.style.left = value - box.left + "px";
}
container.addEventListener("mouseup", function() {
clicked = false;
})
.Container {
position: relative;
width: 500px;
height: 300px;
overflow: hidden;
}
.contone {
position: absolute;
width: 100%;
height: 100%;
z-index: -11;
overflow: hidden;
}
.contone img {
position: relative;
}
.conttwo {
position: absolute;
width: 100%;
height: 100%;
z-index: -11111;
overflow: hidden;
}
img {
width: 100%;
height: 100%;
}
.Slider {
cursor: ew-resize;
background-color: black;
opacity: 0.5;
width: 1%;
z-index: 9999;
height: 100%;
position: relative;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<link rel="stylesheet" href="Style.css" />
<script src="Script.js" async></script>
</head>
<body>
<div class="Container">
<div class="contone">
<img
class="Pic1"
src="https://aluminumwheelsguide.com/wp-content/uploads/2020/04/Best-All-Wheel-Drive-Cars-2020-700x300.jpg"
alt=""
/>
</div>
<div class="Slider"></div>
<div class="conttwo">
<img
class="Pic2"
src="https://signatureautoworld.com/wp-content/uploads/2020/06/SONATA-hero-option2-764A4983-640x354.jpg"
alt=""
/>
</div>
</div>
</body>
</html>
My approach is to use a translation, which are generally considered better for animations than absolute positioning, for moving the slider.
I'm also using pointer events over mouse events. These work the same as mouse events but also will work for touch devices. They also allow the use of setPointerCapture, which means that once we have clicked on the slider, it will receive all events until we release it (which we do in the mouseUpHandler). You can see in the demo that even if the pointer goes outside the image, you can still move the slider around.
let slider = document.querySelector("#slider");
let container = document.querySelector('#container');
let sliderWidth = container.offsetWidth * (1 / 100);
let maxWidth = container.offsetWidth - sliderWidth;
let lastX = 0;
let thisX = 0;
let leftEdge = 0;
function mouseDownHandler(e) {
lastX = e.clientX;
slider.addEventListener('pointermove', mouseMoveHandler);
slider.setPointerCapture(e.pointerId);
}
function mouseMoveHandler(e) {
thisX = e.clientX;
xDiff = thisX - lastX;
leftEdge = Math.min(maxWidth, Math.max(0, leftEdge + xDiff));
slider.style.transform = `translate(${leftEdge}px)`;
lastX = thisX;
}
function mouseUpHandler(e) {
slider.removeEventListener('pointermove', mouseMoveHandler);
slider.releasePointerCapture(e.pointerId);
}
slider.addEventListener("pointerdown", mouseDownHandler);
slider.addEventListener("pointerup", mouseUpHandler)
.Container {
position: relative;
width: 500px;
height: 300px;
overflow: hidden;
}
.contone,
.conttwo {
position: absolute;
width: 100%;
height: 100%;
overflow: hidden;
}
.contone {
z-index: -11;
}
.conttwo {
z-index: -11111;
}
img {
width: 100%;
height: 100%;
}
.Slider {
cursor: ew-resize;
background-color: red;
opacity: 0.5;
width: 1%;
z-index: 9999;
height: 100%;
position: relative;
}
<div id="container" class="Container">
<div class="contone">
<img class="Pic1" src="https://aluminumwheelsguide.com/wp-content/uploads/2020/04/Best-All-Wheel-Drive-Cars-2020-700x300.jpg" />
</div>
<div id="slider" class="Slider"></div>
<div class="conttwo">
<img class="Pic2" src="https://signatureautoworld.com/wp-content/uploads/2020/06/SONATA-hero-option2-764A4983-640x354.jpg" />
</div>
</div>

Why does this javascript code work on stackoverflow, but in my html file it doesn't? [duplicate]

This question already has answers here:
Why does jQuery or a DOM method such as getElementById not find the element?
(6 answers)
Closed 2 years ago.
javascript noob here, I have the following pickle.
I'm trying to make a resizable div and I found this code:
var m_pos;
function resize(event) {
var parent = resize_el.parentNode;
var dx = m_pos - event.x;
m_pos = event.x;
parent.style.width = (parseInt(getComputedStyle(parent, '').width) + dx) + "px";
}
var resize_el = document.getElementById("resize");
if (resize_el) {
resize_el.addEventListener("mousedown", function(event) {
m_pos = event.x;
document.addEventListener("mousemove", resize, false);
}, false);
}
document.addEventListener("mouseup", function() {
document.removeEventListener("mousemove", resize, false);
}, false);
#update_panel {
position: fixed;
min-width: 420px;
padding-left: 4px;
height: 100%;
top: 0%;
right: 0;
background-color: #f0f0f0;
}
#resize {
background-color: #ccc;
position: absolute;
left: 0;
width: 4px;
height: 100%;
cursor: w-resize;
}
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div id="update_panel">
<div id="resize"></div>
</div>
</body>
</html>
My file looks like this:
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
var m_pos;
function resize(event) {
var parent = resize_el.parentNode;
var dx = m_pos - event.x;
m_pos = event.x;
parent.style.width = (parseInt(getComputedStyle(parent, '').width) + dx) + "px";
}
var resize_el = document.getElementById("resize");
if (resize_el) {
resize_el.addEventListener("mousedown", function(event) {
m_pos = event.x;
document.addEventListener("mousemove", resize, false);
}, false);
}
document.addEventListener("mouseup", function() {
document.removeEventListener("mousemove", resize, false);
}, false);
</script>
<style>
#update_panel {
position: fixed;
min-width: 420px;
padding-left: 4px;
height: 100%;
top: 0%;
right: 0;
background-color: #f0f0f0;
}
#resize {
background-color: #ccc;
position: absolute;
left: 0;
width: 4px;
height: 100%;
cursor: w-resize;
}
</style>
</head>
<body>
<div id="update_panel">
<div id="resize"></div>
</div>
</body>
</html>
I'm using XAMPP localhost with Chrome. Please help me!
Move <script>....</script> block code to the end of <body>. Like this:
<body>
<div>
...
</div>
<script>
...
</script>
</body>
it should work
For an explanation of why this works see here:
Where should I put <script> tags in HTML markup?

Javascript fullscreen image on load, vanish after 2 seconds (screensaver after idle-time)

I wanted to combine this function of showing a picture (our logo) on my Shopify frontage website fullscreen and make it fade away or vanish after seconds automatically so people can access to the website after the Image or our logo is gone (2 Sec).
Now I have these two parts of HTML, but they don't work together somehow.
Can someone help?
Thank you
<div id="makethisvanish"><img src="image"></div>
<div class="fixed-background">
<img src="image" class="myimg">
</div>
<script type="text/javascript">
window.onload = function () {
window.setTimeout( vanishText, 2000 ); // 2000 is 2 seconds
}
function vanishText() {
document.getElementById( 'makethisvanish' ).style.visibility = 'hidden';
}
</script>
<style>
body {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
}
.fixed-background {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
overflow: hidden;
}
.myimg {
height: inherit;
}
</style>
Try the code below:
<head>
<script>
window.onload = function () {
window.setTimeout(vanishText,2000); // 2000 is 2 seconds
}
function vanishText() {
document.getElementById('makethisvanish').style.opacity = '0';
}
</script>
<style>
body {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
}
#makethisvanish {
display: block;
position: fixed;
top: 0;
left: 0;
width: 100%;
min-height: 100%;
height: auto;
opacity: 1;
z-index:1000;
margin: 0 auto;
transition: opacity .5s linear;
}
#makethisvanish img {
width: 100%;
height: auto;
}
.fixed-background {
position: relative;
top: 0;
left: 0;
height: 100%;
overflow: hidden;
}
.grid__item {
height: 50px;
}
.myimg {
height: 100%;
width: auto;
}
</style>
</head>
<body>
<div id="makethisvanish">
<img src="http://i65.tinypic.com/5nn1va.jpg">
</div>
<div class="grid__item">
<div class="fixed-background">
<img src="http://i65.tinypic.com/5nn1va.jpg" class="myimg">
</div>
</div>
</body>
I believe this should do?
Report back if you have a problem. I'll try to help you solve it ;)
EDIT
For only the full-screen picture you'll need even less:
<head>
<script>
window.onload = function () {
window.setTimeout(vanishText,2000); // 2000 is 2 seconds
}
function vanishText() {
document.getElementById('makethisvanish').style.opacity = '0';
}
</script>
<style>
#makethisvanish {
display: block;
position: fixed;
top: 0;
left: 0;
width: 100%;
min-height: 100%;
height: auto;
opacity: 1;
z-index:1000;
margin: 0 auto;
transition: opacity .5s linear;
}
#makethisvanish img {
width: 100%;
height: auto;
}
</style>
</head>
<body>
<div id="makethisvanish">
<img src="http://i65.tinypic.com/5nn1va.jpg">
</div>
</body>
Maybe you'll need another line in vanishText():
document.getElementById('makethisvanish').style.zIndex = "0";
But try with the code above first.
EDIT_2
replace the script in the head with the following:
window.onload = function () {
window.setTimeout(vanishText,2000); // 2000 is 2 seconds
}
var IDLE_TIMEOUT = 60; //seconds
var _idleSecondsCounter = 0;
window.setInterval(CheckIdleTime, 1000);
function CheckIdleTime() {
_idleSecondsCounter++;
if (_idleSecondsCounter >= IDLE_TIMEOUT) {
screensaver();
}
}
function vanishText() {
document.getElementById('makethisvanish').style.opacity = '0';
document.getElementById('makethisvanish').style.zIndex = '-1';
}
function screensaver() {
document.getElementById('makethisvanish').style.zIndex = "1000";
document.getElementById('makethisvanish').style.opacity = "1";
}
function resetTimer() {
if(_idleSecondsCounter >= IDLE_TIMEOUT) {
vanishText();
}
_idleSecondsCounter = 0;
}
document.onclick = function() {
resetTimer();
};
document.onmousemove = function() {
resetTimer();
};
document.onkeypress = function() {
resetTimer();
};
You'll probably have to adapt the IDLE_TIMEOUT. It's set to 5 seconds for testing. I would probably set it to one minute, maybe a bit more. The "screensaver" should dissappear if the mouse is moved, a mouseclick is done or a key on the keyboard is pressed.

Setting a div to display none when window scroll position is greater

I need to hide the div when the window scroll position is greater than the bottom position of the div. I tried to do it myself but I'm doing something wrong. Also got another question since I need a better code to text ratio to submit this question. Why when I alert(); img_top does it say object object?
$(document).ready(function(){
var img_height = $("#head").outerHeight();
var img_top = $("#head").offset();
var img_bot = img_height + img_top;
$(window).scroll(function(){
var wind_pos = $(window).scrollTop();
$("p").html(wind_pos);
if(wind_pos > img_bot){
$("#head").addClass("hide");
}
});
});
*{
margin: 0;
padding: 0;
}
body{
height: 4000px;
}
#head{
height: 600px;
background-color: blue;
}
.hide{
display: none;
}
p{
background-color: yellow;
width: 100%;
height: 50px;
}
<div id="head">
</div>
<p>
</p>
<script
src="https://code.jquery.com/jquery-3.2.1.min.js"
integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
crossorigin="anonymous"></script>
jQuery.offset() return object representing position of the matched element, you are suppose to read top property of it.
$(document).ready(function() {
var img_height = $("#head").outerHeight();
var img_top = $("#head").offset().top;
var img_bot = img_height + img_top;
$(window).scroll(function() {
var wind_pos = $(window).scrollTop();
$("p").html(wind_pos);
if (wind_pos > img_bot) {
$("#head").addClass("hide");
}
});
});
* {
margin: 0;
padding: 0;
}
body {
height: 4000px;
}
#head {
height: 600px;
background-color: blue;
}
.hide {
display: none;
}
p {
background-color: yellow;
width: 100%;
height: 50px;
}
<div id="head">
</div>
<p>
</p>
<script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>
img_top
is an object because
$("#head").offset();
returns an object with top and left offsets,
you have to use
$("#head").offset().top
in your calculation

Javascript to get images from Json file and button next and previous functionality

enter image description here I am trying to get images from json file. when i click on the next button next image must come and when i press previous button previous image must come.I am getting image path but it is not showing image inside div. Please help me.
function main() {
var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
myObj = JSON.parse(this.responseText);
var x =document.getElementById("guitarimg");
var y =myObj.allProducts[0].image_path;
x.innerHTML = "<img src='y'>"
}
};
xmlhttp.open("GET", "guitardata1.json.txt", true);
xmlhttp.send();
}
main();
#div1
{
border: 1px solid black;
height: 700px;
width:800px;
float: left;
position: relative;
left: 250px;
top: 50px;
}
#demo
{
position: relative;
top: 30px;
}
div.navbar
{
border:1px solid black;
height:40px;
width:600px;
position: relative;
left: 80px;
top: 15px;
}
#guitarimg
{
border: 1px solid;
position: relative;
height:300px;
width: 500px;
top: 30px;
left: 120px;
}
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="guitar.js"></script>
<link rel="stylesheet" type="text/css" href="guitar.css">
</head>
<body>
<div id="div1">
<div class="navbar"></div>
<div id="demo">
</div>
<div id="guitarimg"></div>
</div>
</body>
</html>
basic string concatenation. y in your image tag is a string, not a variable.
var y =myObj.allProducts[0].image_path;
x.innerHTML = "<img src='y'>"
^ Not a variable
What you need to do is
var y =myObj.allProducts[0].image_path;
x.innerHTML = "<img src='" + y + "'>"
Another problem is you call the script in the head. It is possible for it to run BEFORE the element is rendered to the page. You should either set the script after the element OR call the method on document ready or window onload to ensure the div element is rendered.
I would move it to before the closing body tag.
<script type="text/javascript" src="guitar.js"></script>
</body>
var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
myObj = JSON.parse(this.responseText);
var x =document.getElementById("guitarimg");
// var y =myObj.allProducts[0].image_path;
// x.innerHTML = "<img id='img' src='" + y + "'>"
}
};
xmlhttp.open("GET", "guitardata1.json.txt", true);
xmlhttp.send();
var total =7;
var a = 0;
function next() {
// var y = myObj.allProducts.image_path;
var temp = document.getElementById("img");
//temp.innerHTML = "<img id='img' src='" + y + "'>"
if (a <= total - 1) {
//alert(x);
temp.src = myObj.allProducts[a].image_path;
a++;
}
}
function previous()
{
var temp= document.getElementById("img");
if(a >= 1)
{
temp.src = myObj.allProducts[a-1].image_path;
a--;
}
}
#div1
{
border: 1px solid black;
height: 700px;
width:800px;
float: left;
position: relative;
left: 250px;
top: 50px;
}
div.navbar
{
border:1px solid black;
height:40px;
width:600px;
position: relative;
left: 80px;
top: 15px;
}
#guitarimg
{
position: relative;
height:300px;
width: 500px;
top: 30px;
left: 120px;
}
#img
{
position: relative;
height: 300px;
width: 500px;
top: 30px;
left: 120px;
}
.button1
{
position: relative;
left: 100px;
}
.button2
{
position: relative;
left: 500px;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="guitar.css">
<script type="text/javascript" src="guitar.js"></script>
</head>
<body>
<div id="div1">
<div class="navbar"></div><br><br><br>
<img id="img" src="guitarImages/main.jpg"> <br><br><br>
<button type="button" onclick="previous()" class="button1">Previous</button>
<button type="button" onclick="next()" class="button2">Next</button>
</div>
</body>
</html>
Got it thanks epascarello

Categories