Trying to use jquery to make content fade in when scrolling

Trying to use jquery to make content fade in when scrolling - javascript

I want the contents of the page to fade in when scrolling down and out when scrolling up, I used a websites instructions (https://www.superhi.com/blog/how-to-add-web-design-elements-that-fade-in-and-out-on-scroll) and tried to change it a bit to fit my project but it isn't working. I'm using Dreamweaver.
<script src="jquery-3.4.1.min.js"></script>
<script src="fadein.js"></script>
<script>
$(document).on("scroll", function () {
var pageTop = $(document).scrollTop()
var pageBottom = pageTop + $(window).height()
var tags = $(".fade")
for (var i = 0; i < tags.length; i++) {
var tag = tags[i]
if ($(tag).position().top < pageBottom) {
$(tag).addClass("visible")
} else {
$(tag).removeClass("visible")
}
}
})
</script>
<div id="content" style="margin:-8px;">
<img src="images/n intro.jpg" style="width: 100%; margin-top:110px;" alt="intro image">
<img class="fade" src="images/border.png" style="width:490px; margin:40px; margin-left: 35%" alt="border line">
<div id="mid">
<h1 class="fade">Whether youre in it for...</h1>
<img class="fade" src="images/photos/food&drink2.jpg" alt="picture of artistic coffee being made">
<p class="fade">The food and drink,</p>
<img class="fade" src="images/photos/work2.jpg" alt="picture of laptop at a coffee table">
<p class="fade">Getting some work done,</p>
<img class="fade" src="images/photos/people2.jpg" alt="picture of a couples hands holding coffee">
<p class="fade">The people,</p>
<img class="fade" src="images/photos/book2.jpg" alt="picture of a book and coffee">
<p class="fade">Or a good book,</p>
<h2 class="fade">We got you covered!</h2>
</div>
<img class="fade" src="images/awards.png" style="display: block; margin-left:auto; margin-right: auto; width: 460px;" alt="three award icons">
<ul>
<li class="fade">Sustainable high quality coffee</li>
<li class="fade">Comfortable seating</li>
<li class="fade">A variety of table layouts to suit your needs</li>
<li class="fade">High speed internet </li>
<li class="fade">Charging ports provided</li>
</ul>
</div>
.fade {
opacity: 0;
}
.fade.visible {
opacity: 1;
}
When I use this the page just displays everything normally, nothing fades or is invisible.

There are a few issues with the code:
Your link to jQuery isn't pointing to actual jQuery. I looked at the tutorial, and yes that's what they use, but you need to use the CDN link:
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
fade.js is just the name they used for where they put the script that you included. you don't necessarily need that.
You need to add a transition property to the .fade class, other wise, you won't see it fade in or out, it will simply switch from 0 opacity to 1 (or full).
$(document).on("scroll", function () {
var pageTop = $(document).scrollTop()
var pageBottom = pageTop + $(window).height() - 20
var tags = $(".fade")
for (var i = 0; i < tags.length; i++) {
var tag = tags[i]
if ($(tag).position().top < pageBottom) {
$(tag).addClass("visible")
} else {
$(tag).removeClass("visible")
}
}
});
.fade {
opacity: 0;
transition: all .3s ease;
}
.fade.visible {
opacity: 1;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="content" style="margin:-8px;">
<img src="images/n intro.jpg" style="width: 100%; margin-top:110px;" alt="intro image">
<img class="fade" src="images/border.png" style="width:490px; margin:40px; margin-left: 35%" alt="border line">
<div id="mid">
<h1 class="fade">Whether youre in it for...</h1>
<img class="fade" src="images/photos/food&drink2.jpg" alt="picture of artistic coffee being made">
<p class="fade">The food and drink,</p>
<img class="fade" src="images/photos/work2.jpg" alt="picture of laptop at a coffee table">
<p class="fade">Getting some work done,</p>
<img class="fade" src="images/photos/people2.jpg" alt="picture of a couples hands holding coffee">
<p class="fade">The people,</p>
<img class="fade" src="images/photos/book2.jpg" alt="picture of a book and coffee">
<p class="fade">Or a good book,</p>
<h2 class="fade">We got you covered!</h2>
</div>
<img class="fade" src="images/awards.png" style="display: block; margin-left:auto; margin-right: auto; width: 460px;" alt="three award icons">
<ul>
<li class="fade">Sustainable high quality coffee</li>
<li class="fade">Comfortable seating</li>
<li class="fade">A variety of table layouts to suit your needs</li>
<li class="fade">High speed internet </li>
<li class="fade">Charging ports provided</li>
</ul>
</div>
Here's a fiddle to play with:
https://jsfiddle.net/t4Ljnk7v/1/
I updated the pageBottom variable so you can see the bottom elements fade in when you get to the bottom.

Related

On sliding the details of particular position should store in local storage?

I am replicating this webpage https://www.modsy.com/project/furniture and I wrote the code On every slide there will be changing of image and phrase like that there are three phrases and images now I want to store the image and phrase in the local storage what the user has finalized My html code is:
window.addEventListener('load', function() {
var rangeslider = document.getElementById("sliderRange");
var output = document.getElementById("sliderOutput");
var images = document.getElementById("sliderImages");
rangeslider.addEventListener('input', function() {
for (var i = 0; i < output.children.length; i++) {
output.children[i].style.display = 'none';
images.children[i].style.display = 'none';
}
i = Number(this.value) - 1;
output.children[i].style.display = 'block';
images.children[i].style.display = 'block';
});
});
.rangeslider {
width: 50%;
margin: 0 auto;
position: absolute;
}
.myslider {
-webkit-appearance: none;
background: white;
width: 100%;
height: 20px;
opacity: 0.8;
margin-top: 180px;
}
.myslider::-webkit-slider-thumb {
-webkit-appearance: none;
cursor: pointer;
background: #000080;
width: 33%;
height: 20px;
}
.col-4 {
text-align: center;
}
.myslider:hover {
opacity: 1;
}
.image {
position: relative;
width: 400px;
margin: 0 auto;
}
.image>img {
position: absolute;
display: none;
}
.image>img.visible,
.image>img:first-child {
display: block;
}
#sliderOutput>div {
display: none;
}
#sliderOutput>div.visible,
#sliderOutput>div:first-child {
display: block;
}
#p1{
height: 10px;
}
<div class="image mt-3 mb-3" id="sliderImages">
<img src="../static/images/1.jpg" width="400" height="180">
<img src="../static/images/2.jpg" width="400" height="180">
<img src="../static/images/3.jpg" width="400" height="180">
</div><br>
<div class="rangeslider">
<input type="range" min="1" max="3" value="1" class="myslider" id="sliderRange">
<div id="sliderOutput">
<div class="container">
<div class="row mt-4">
<div class="col-4">
<h6 class="display-6">Starting From Scratch</h6>
<p> I'm designing the room </p>
</div>
<div class="col-4">
<h6 class="display-6">Somewhere in Between</h6>
<p>I'm designing around a few pieces I already own</p>
</div>
<div class="col-4">
<h6 class="display-6">Mostly Furnished</h6>
<p>I want to put the finishing touches on my room</p>
</div>
</div>
</div>
<div class="container">
<div class="row mt-4">
<div class="col-4">
<h6 class="display-6">Starting From Scratch</h6>
<p> I'm designing the room </p>
</div>
<div class="col-4">
<h6 class="display-6">Somewhere in Between</h6>
<p>I'm designing around a few pieces I already own</p>
</div>
<div class="col-4">
<h6 class="display-6">Mostly Furnished</h6>
<p>I want to put the finishing touches on my room</p>
</div>
</div>
</div>
<div class="container">
<div class="row mt-4">
<div class="col-4">
<h6 class="display-6">Starting From Scratch</h6>
<p> I'm designing the room </p>
</div>
<div class="col-4">
<h6 class="display-6">Somewhere in Between</h6>
<p>I'm designing around a few pieces I already own</p>
</div>
<div class="col-4">
<h6 class="display-6">Mostly Furnished</h6>
<p>I want to put the finishing touches on my room</p>
</div>
</div>
</div>
</div>
My main requirement if the slider is in the first that phrase and image should be stored in local storage like that if it is in second that details should store.

Are you just trying to remember what the last slide the user viewed is? If so just use the localStorage.setItem() method and utilise the dataset feature to set a flag of each slide.
If I am right in my presumption your on load function would include the following line to default to the first slide:
localStorage.setItem('currentSlide', '1')
Your HTML slides would each have a dataset tag which could be something like:
data-index="1"
Then, in your change slide function you would get the dataset value and update the localStorage parameter:
function changeSlide() {
// ... Whatever code you have...
localStorage.setItem('currentSlide', this.dataset.index);
}
You could also use the sessionStorage instead, if you do not wish for the website to remember the user's last position after they leave the page: https://developer.mozilla.org/en-US/docs/Web/API/Storage

you can save your image using savImage function
html
<img src="../static/images/1.jpg" id="bannerImg" />
js
function saveImage() {
var bannerImage = document.getElementById('bannerImg');
var canvas = document.createElement("canvas");
canvas.width = bannerImage.width;
canvas.height = bannerImage.height;
var ctx = canvas.getContext("2d");
ctx.drawImage(bannerImage, 0, 0);
var dataURL = canvas.toDataURL("image/png");
localStorage.setItem("imgData", dataURL.replace(/^data:image\/(png|jpg);base64,/,"");
}
after your process you can get your image from local storage
html
<img src="" id="tableBanner" />
js
function getImage() {
var dataImage = localStorage.getItem('imgData');
bannerImg = document.getElementById('tableBanner');
bannerImg.src = "data:image/png;base64," + dataImage;
}
you must run these two function for your problem

Jquery zoom, zooms only one image on hover

Im trying to make a product page with gallery (clickable small thumbnails on the side) which opens a large image on the right side.
Jquery zoom only displays the zoom on the first image, when the other images are displayed the zoom is still on the first image.
Here is my code:
HTML
<section class="product-page">
<div class="thumbnails">
<div class="thumb"><img src="img/nike/shoes/Air-force1/Thumbnails/thumb-air-force-right-side.png" alt="thumb-air-force-right-side" onclick="right()"></div>
<div class="thumb"><img src="img/nike/shoes/Air-force1/Thumbnails/thumb-air-force-left-side.png" alt="thumb-air-force-left-side" onclick="left()"></div>
<div class="thumb"><img src="img/nike/shoes/Air-force1/Thumbnails/thumb-air-force-bottom-side.png" alt="thumb-air-force-bottom-side" onclick="bottom()"></div>
<div class="thumb"><img src="img/nike/shoes/Air-force1/Thumbnails/thumb-air-force-pair-side.png" alt="thumb-air-force-pair-side" onclick="pairSide()"></div>
<div class="thumb"><img src="img/nike/shoes/Air-force1/Thumbnails/thumb-air-force-pair-top.png" alt="thumb-air-force-pair-top" onclick="pairTop()"></div>
</div>
<div class="img-display">
<span class='zoom' id='shoe1'>
<img id="img-area" src="img/nike/shoes/Air-force1/air-force-right-side.png" alt="air-force-right-side" width="320" height="320">
</span>
<span class='zoom1' id='shoe1'>
<img class="hidden" id="img-area" src="img/nike/shoes/Air-force1/air-force-left-side.png" alt="air-force-left-side" width="320" height="320">
</span>
<span class='zoom' id='shoe3'>
<img class="hidden" id="img-area" src="img/nike/shoes/Air-force1/air-force-bottom-side.png" alt="air-force-bottom-side">
</span>
<span class='zoom' id='shoe4'>
<img class="hidden" id="img-area" src="img/nike/shoes/Air-force1/air-force-pair-side.png" alt="air-force-pair-side">
</span>
<span class='zoom' id='shoe5'>
<img class="hidden" id="img-area" src="img/nike/shoes/Air-force1/air-force-pair-top.png" alt="air-force-pair-top">
</span>
</div>
</section>
JS for image changing while clicking on the thumbnail images
var img = document.getElementById("img-area");
function right(){
img.src='img/nike/shoes/Air-force1/air-force-right-side.png';
}
function left(){
img.src='img/nike/shoes/Air-force1/air-force-left-side.png';
}
function bottom(){
img.src='img/nike/shoes/Air-force1/air-force-bottom-side.png';
}
function pairSide(){
img.src='img/nike/shoes/Air-force1/air-force-pair-side.png';
}
function pairTop(){
img.src='img/nike/shoes/Air-force1/air-force-pair-top.png';
}
And the Jquery code
$(document).ready(function(){
$('#shoe1').zoom();
$('#shoe2').zoom();
$('#shoe3').zoom();
$('#shoe4').zoom();
$('#shoe5').zoom();
});
How to make the changed image zoom in on hover?
Thanks in advance.

Something as simple as this could be achievable without causing repetitive strain injury.
For obvious reasons I haven't considered image preloading, etc, but this is something I hope you can take inspiration from.
Your img-display should be treated as a canvas. Bind a single event handler to links wrapped around thumbs who's href attribute contains the larger image you want to load in the canvas area. This event handler simply rotates your thumbnails, but uses the larger image and passes that to both the canvas image and the jQuery zoom plugin API whilst toggling active states of thumbs (as an aesthetic suggestion).
Why href? As an example, screen readers still need to be able to follow these links. I'm thinking accessibility ftw.
Images courtesy of JD Sports.
$(function() {
$('.zoom').zoom();
$('.thumb').on('click', 'a', function(e) {
e.preventDefault();
var thumb = $(e.delegateTarget);
if (!thumb.hasClass('active')) {
thumb.addClass('active').siblings().removeClass('active');
$('.zoom')
.zoom({
url: this.href
})
.find('img').attr('src', this.href);
}
});
});
img {
display: block;
height: auto;
max-width: 100%;
}
.product-page {
display: flex;
}
.img-display {
flex-grow: 1;
max-width: 372px;
}
.thumb {
opacity: .7;
margin: 0 .25rem .25rem 0;
width: 120px;
transition: opacity .25s ease-out;
}
.thumb:hover,
.thumb.active {
opacity: 1;
}
.zoom {
display: inline-block;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-zoom/1.7.21/jquery.zoom.min.js"></script>
<section class="product-page">
<div class="thumbnails">
<div class="thumb active">
<a href="https://i8.amplience.net/i/jpl/jd_334285_a?qlt=92&w=750&h=531&v=1">
<img src="https://i8.amplience.net/i/jpl/jd_334285_a?qlt=92&w=750&h=531&v=1" alt="thumb-air-force-right-side">
</a>
</div>
<div class="thumb">
<a href="https://i8.amplience.net/i/jpl/jd_334285_b?qlt=92&w=950&h=673&v=1">
<img src="https://i8.amplience.net/i/jpl/jd_334285_b?qlt=92&w=950&h=673&v=1" alt="thumb-air-force-left-side">
</a>
</div>
<div class="thumb">
<a href="https://i8.amplience.net/i/jpl/jd_334285_e?qlt=92&w=950&h=673&v=1">
<img src="https://i8.amplience.net/i/jpl/jd_334285_e?qlt=92&w=950&h=673&v=1" alt="thumb-air-force-bottom-side">
</a>
</div>
</div>
<div class="img-display">
<span class="zoom">
<img src="https://i8.amplience.net/i/jpl/jd_334285_a?qlt=92&w=750&h=531&v=1" alt="">
</span>
</div>
</section>

#perocvrc
Please try below code it works perfectly as per your requirement.
<!DOCTYPE html>
<html>
<head>
<style>
img {
display: block;
height: auto;
max-width: 100%;
}
.main-view-page {
display: flex;
}
.full-screen-img {
flex-grow: 1;
max-width: 500px;
}
.sideimg {
opacity: .7;
margin: 0 .1rem .1rem 0;
width: 120px;
transition: opacity .25s ease-out;
}
.sideimg:hover,
.sideimg.active {
opacity: 1;
width:135px;
}
.zoom-in {
display: inline-block;
}
</style>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-zoom/1.7.21/jquery.zoom.min.js"></script>
<script>
$(function() {
$('.zoom-in').zoom();
$('.sideimg').on('click', 'a', function(e) {
e.preventDefault();
var thumb = $(e.delegateTarget);
if (!thumb.hasClass('active')) {
thumb.addClass('active').siblings().removeClass('active');
$('.zoom-in')
.zoom({
url: this.href
})
.find('img').attr('src', this.href);
}
});
});
</script>
</head>
<body>
<section class="main-view-page">
<div class="thumbnails">
<div class="sideimg">
<a href="https://st2.depositphotos.com/2038977/8502/i/950/depositphotos_85027142-stock-photo-goats-grazing-on-the-alpine.jpg">
<img src="https://st2.depositphotos.com/2038977/8502/i/950/depositphotos_85027142-stock-photo-goats-grazing-on-the-alpine.jpg" alt="thumb-air-force-right-side">
</a>
</div>
<div class="sideimg active">
<a href="https://wallpaperplay.com/walls/full/b/1/c/162815.jpg">
<img src="https://wallpaperplay.com/walls/full/b/1/c/162815.jpg" alt="thumb-air-force-left-side">
</a>
</div>
<div class="sideimg">
<a href="https://jooinn.com/images/cabin-with-beautiful-view.jpg">
<img src="https://jooinn.com/images/cabin-with-beautiful-view.jpg" alt="thumb-air-force-bottom-side">
</a>
</div>
<div class="sideimg">
<a href="https://www.principlesinsight.co.uk/wp-content/uploads/2019/07/clouds-conifer-daylight-371589.jpg">
<img src="https://www.principlesinsight.co.uk/wp-content/uploads/2019/07/clouds-conifer-daylight-371589.jpg" alt="thumb-air-force-bottom-side">
</a>
</div>
</div>
<div class="full-screen-img">
<span class="zoom-in">
<img src="https://wallpaperplay.com/walls/full/b/1/c/162815.jpg" alt="main-view-images">
</span>
</div>
</section>
</body>
</html>
I hope above code will be useful for you.
Thank you.

First logo is fading out but Second logo is not fading in ... on scroll down. What am I missing?

I've finally figured out how to get my first logo to fade out to reveal the second logo on scroll down. The idea is that as the user begins to scroll down, the first logo will fade out while the second logo fades in. I'm wanting a seamless, fluid transition from one logo to the other. But what I have now is the first logo slowing fading out and then the second logo just appearing without a gradual fade-in ... though I including what I believed to be the correct code for the proper fade-in effect. What have I done wrong? Thanks in advance for your help.
<div id="nav" class="navbar">
<div id="full_logo"> <img src="images/logo_6_small.png" alt="full_logo" /></div>
</div>
<header>
<div id="nav" class="navbar">
<div id="nav_left">
HOME
SERVICES
PORTFOLIO
</div>
<a href="index.html" id="logo" class="Claire_logo">
<img src="images/logo_6_small.png" alt="logo2" id="logo_Claire" class="logo_main" style="display:none" />
<img src="images/logo_bluebird_90_cc.png" alt="logo1" id="logo_Claire_blue" class="logo" />
</a>
<div id="nav_right">
BLOG
ABOUT
GET IN TOUCH
</div>
</div>
</header>
$(document).ready(function() {
$(window).scroll(function() {
var scroll = $(window).scrollTop();
if (scroll > 0) {
$('#logo_Claire_blue').fadeOut(800, function() {
$('#logo_Claire_blue').replaceWith('<div id="full_logo"><img src="images/logo_6_small.png" alt="full_logo"/></div>').fadeIn(800);
});
}
});
});

Why are you replacing HTML when you already have your logo in the code? Replace the code of the if (scroll > 0) with this:
$('#logo_Claire_blue').fadeOut(800);
setTimeout(function() {
$('#logo_Claire').fadeIn(800);
}, 600)
First it fades the displayed logo, then, with a delay set by setTimeout, it triggers the fade in of the second one. For better transition lower the setTimeout to something like 500, but then, you need to play with the logos positions in the DOM in order for the new to be over the old one and not next to it or on top (position: relative, position: absolute)

You can use .eq() to change between logos
Use .stop() to stop repeat the animation.. Try to remove it to see
You change between eq(0) and eq(1) up to your need
Example 1
$(document).ready(function() {
$(window).scroll(function() {
var scroll = $(window).scrollTop();
if (scroll > 0) {
$('a.Claire_logo img').eq(1).stop().fadeOut(200 , function(){
$('a.Claire_logo img').eq(0).stop().fadeIn(200);
});
}else{
$('a.Claire_logo img').eq(0).stop().fadeOut(200 , function(){
$('a.Claire_logo img').eq(1).stop().fadeIn(200);
});
}
});
});
header{
position : fixed;
top : 0;
}
main{
height : 2000px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<header>
<div id="nav" class="navbar">
<div id="nav_left">
HOME
SERVICES
PORTFOLIO
</div>
<a href="index.html" id="logo" class="Claire_logo">
<img src="https://via.placeholder.com/468x60?text=Visit+Blogging.com+Now" alt="logo2" id="logo_Claire" class="logo_main" style = "display : none;"/>
<img src="https://via.placeholder.com/100x60?text=Visit+Blogging.com+Now" alt="logo1" id="logo_Claire_blue" class="logo" />
</a>
<div id="nav_right">
BLOG
ABOUT
GET IN TOUCH
</div>
</div>
</header>
<main></main>
Example 2 using attr("src")
You can use only one <img> tag and change src attribute of it
Use .stop() to stop repeat the animation.. Try to remove it to see
$(document).ready(function() {
var Check = false;
$(window).scroll(function() {
var scroll = $(window).scrollTop();
if(scroll > 0 && Check == false){
Check = true;
$('a.Claire_logo > img').stop().fadeOut(function(){
$(this).attr("src" ,"https://via.placeholder.com/468x60?text=Visit+Blogging.com+Now").fadeIn(300);
});
}else if(scroll <= 0){
Check = false;
$('a.Claire_logo > img').stop().fadeOut(function(){
$(this).attr("src" ,"https://via.placeholder.com/100x60?text=Visit+Blogging.com+Now").fadeIn(300);
});
}
});
});
header{
position : fixed;
top : 0;
}
main{
height : 2000px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<header>
<div id="nav" class="navbar">
<div id="nav_left">
HOME
SERVICES
PORTFOLIO
</div>
<a href="index.html" id="logo" class="Claire_logo">
<img src="https://via.placeholder.com/100x60?text=Visit+Blogging.com+Now" alt="logo2" id="logo_Claire" class="logo_main"/>
</a>
<div id="nav_right">
BLOG
ABOUT
GET IN TOUCH
</div>
</div>
</header>
<main></main>
Example 3 You need to work around the css style to avoid the delay between both images places
$(document).ready(function() {
var Check = false;
$(window).scroll(function() {
var scroll = $(window).scrollTop();
if (scroll > 0 && Check == false) {
Check = true;
$('a.Claire_logo img').eq(1).stop().fadeOut(800);
$('a.Claire_logo img').eq(0).stop().fadeIn(800);
}else if(scroll <= 0 && Check == true){
Check = false;
$('a.Claire_logo img').eq(0).stop().fadeOut(800);
$('a.Claire_logo img').eq(1).stop().fadeIn(800);
}
});
});
header{
position : fixed;
top : 0;
}
main{
height : 2000px;
}
.Claire_logo{
position : relative;
height : 60px;
display : block;
}
.Claire_logo > img{
position: absolute;
top : 0;
left : 0;
height : 60px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<header>
<div id="nav" class="navbar">
<div id="nav_left">
HOME
SERVICES
PORTFOLIO
</div>
<a href="index.html" id="logo" class="Claire_logo">
<img src="https://via.placeholder.com/468x60?text=Visit+Blogging.com+Now" alt="logo2" id="logo_Claire" class="logo_main" style="display : none;"/>
<img src="https://via.placeholder.com/100x60?text=Visit+Blogging.com+Now" alt="logo1" id="logo_Claire_blue" class="logo" />
</a>
<div id="nav_right">
BLOG
ABOUT
GET IN TOUCH
</div>
</div>
</header>
<main></main>

Typing effect with JavaScript: How to remove cursor once all the text is "typed"

I'm making a personal webpage and I'm using JavaScript to create a typing effect under a header called "My Story". The text types fine, but once it is done typing the cursor remains at the bottom. What do I need to change/add in my code to fix this?
I want the cursor to disappear once the text is type. No error messages are present.
// Displays "My Story" with a typing effect
var _CONTENT = ["When I was 15, I took a Robotics Honors course at my high school. We designed and built robots using VEX robotics kits. To me, the most interesting part was building the drag-and-drop code and uploading it to the robot to control it. This is what inspired me to code. Before long, I was researching software development and decided the best language for me to start with would be Python. That was a year ago, and since then I've worked in HTML, CSS, JavaScript, and Java, and plan to further expand my developer capabilities from this point on."];
var _PART = 0;
var _PART_INDEX = 0;
var _INTERVAL_VAL;
var _ELEMENT = document.querySelector("#text");
var _CURSOR = document.querySelector("#cursor");
function Type() {
var text = _CONTENT[_PART].substring(0, _PART_INDEX + 1);
_ELEMENT.innerHTML = text;
_PART_INDEX++;
if (text === _CONTENT[_PART]) {
_CURSOR.style.display = "none";
clearInterval(_INTERVAL_VAL);
setTimeout(function() {
_INTERVAL_VAL = setInterval(Delete, 50);
}, 1000);
}
}
_INTERVAL_VAL = setInterval(Type, 100);
body {
background: dodgerblue !important;
color: white !important;
}
h3 {
border-left: 6px solid whitesmoke;
background-color: lightslategray;
}
p5 {
text-align: justify;
}
p4 {
text-align: justify;
}
#container {
text-align: center;
}
#text {
display: inline-block;
vertical-align: middle;
color: white;
letter-spacing: 2px;
}
#cursor {
display: inline-block;
vertical-align: middle;
width: 3px;
height: 50px;
background-color: white;
animation: blink .75x step-end infinite;
}
#keyframes blink {
from,
to {
background-color: transparent;
}
50% {
background-color: black;
}
}
::-webkit-scrollbar {
width: 5px;
}
::-webkit-scrollbar-track {
background: whitesmoke;
}
::-webkit-scrollbar-thumb {
background: grey;
}
::-webkit-scrollbar-thumb:hover {
background: dodgerblue;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<div class="row align-items-start">
<div class="col">
<nav class="navbar navbar-expand-sm bg-light navbar-light fixed-top">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="#">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Portfolio</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contact Me</a>
</li>
</ul>
</nav>
<header>
<title>
Robert Smith
</title>
</header>
<body>
<p class="bg-primary text-white">
</div>
<div class="col ml-auto"></div>
<div class="col"></div>
</div>
<div class="row">
<div class="col">
<h1>
<b>
<div class = "p-4 mt-5 align-baseline border bg-light text-dark" style = "width:300px" > Robert Smith </div>
</b>
</h1>
<h2 class="display-4 ml-3"> I want to make a difference.
</h2>
<h3>
<div class="ml-3">
My Story
</div>
</h3>
<divT>
<p1>
<div id="container">
<div id="text"></div>
<div id="cursor"></div>
</div>
<span class="border border-dark">
<div class = "ml-3" >
<br>
</div>
</span>
</p1>
<p6>
<div class="ml-3">
I love to code, whether it's building websites like this <br> or turning my ideas into a reality. <br> I hope I can also do the same for yours.
</div>
</p6>
</divT>
<h4>
Contact me
</h4>
<p6>
<ul3>
<li>Email: robertethansmith#yahoo.com</li>
<li>GitHub: roberto257</li>
</ul3>
</p6>
</div>
<div class="col">
<script language="javascript">
//Changes images when clicked
function changeImage() {
if (document.getElementById("imgClickAndChange").src == "file:///Users/roberto257/Desktop/Coding/Portfolio/Website/robertsmith.JPG") {
document.getElementById("imgClickAndChange").src = "file:///Users/roberto257/Desktop/Coding/Portfolio/Website/robertsmith3.JPG";
} else {
document.getElementById("imgClickAndChange").src = "file:///Users/roberto257/Desktop/Coding/Portfolio/Website/robertsmith.JPG";
}
}
function changeImage2() {
if (document.getElementById("imgClickAndChange2").src == "file:///Users/roberto257/Desktop/Coding/Portfolio/Website/robertsmith2.JPG") {
document.getElementById("imgClickAndChange2").src = "file:///Users/roberto257/Desktop/Coding/Portfolio/Website/robertsmith1.JPG";
} else {
document.getElementById("imgClickAndChange2").src = "file:///Users/roberto257/Desktop/Coding/Portfolio/Website/robertsmith2.JPG";
}
}
</script>
<p2>
<img src="file:///Users/roberto257/Desktop/Coding/Portfolio/Website/robertsmith.JPG" class="img-fluid rounded img-thumbnail" alt="Me" id="imgClickAndChange" onclick="changeImage()" />
<img src="file:///Users/roberto257/Desktop/Coding/Portfolio/Website/robertsmith2.JPG" class="img-fluid rounded img-thumbnail" alt="Me" id="imgClickAndChange2" onclick="changeImage2()" />
</p2>
</div>
<div class="col mt-5">
<p5>
<br> I have been coding for over a year now and am comfortable coding and building applications and developing programs on my own.
<br><b>I am not afraid to tackle <ins>any</ins> challenge a client presents me and will only decline if I
truly feel that I cannot complete the proposed task to the sufficient expectations of the client.</b> <br>
</p5>
<img src="file:///Users/roberto257/Desktop/Coding/Portfolio/Website/python.png" alt="Python">
<p4>
<br> My current skills include but are not limited to:
<ul2>
<li>Python</li>
<li>Web Development</li>
<li>JavaScript</li>
<li>Java</li>
</ul2>
I am <i> always </i> working to improve my current skills in languages, frameworks, libraries, and APIs and hope to continue to learn new ones. <br>
</p4>
</div>
</div>
<div class="row">
<div class="col">
</div>
<div class="col"></div>
<div class="col"></div>
</div>
<div class="row">
<div class="col"></div>
<div class="col"></div>
<div class="col"></div>
</div>
<div class="row">
<div class="col"></div>
<div class="col"></div>
<div class="col"></div>
</div>

Maybe, try this? I'm adding pseudo-class:after, with content: '|' and removing the class at the end.
(function(){
/* cut the text for demo */
let text = "When I was 15, I took a Robotics Honors course at my high school."
let bubu = document.getElementById('bubu');
for( let i = 0; i < text.length; i++ ){
setTimeout( function(){
bubu.innerText += text.charAt(i);
}, i*100);
}
setTimeout(function(){
document.getElementById('bubu').classList.remove('bubu');
}, (text.length)*100); /* Set removing Timeout, synchronous to the end of typing */
})();
#bubu {
text-align: center;
width: 400px;
font-size: 20px;
}
.bubu:after {content: '|'; color: red;}
<div id="bubu" class="bubu"></div>
P.s. I've used text.split('') - to sort each character into array...
Changed → text.charAt(i); due to comment*

Just like you are inserting text from array, insert the cursor as well after the text/innerHtml. Try running the snippet, is that what you are expecting?
Only change made - _ELEMENT.appendChild(_CURSOR);
// Displays "My Story" with a typing effect
var _CONTENT = ["When I was 15, I took a Robotics Honors course at my high school. We designed and built robots using VEX robotics kits. To me, the most interesting part was building the drag-and-drop code and uploading it to the robot to control it. This is what inspired me to code. Before long, I was researching software development and decided the best language for me to start with would be Python. That was a year ago, and since then I've worked in HTML, CSS, JavaScript, and Java, and plan to further expand my developer capabilities from this point on."];
var _PART = 0;
var _PART_INDEX = 0;
var _INTERVAL_VAL;
var _ELEMENT = document.querySelector("#text");
var _CURSOR = document.querySelector("#cursor");
function Type() {
var text = _CONTENT[_PART].substring(0, _PART_INDEX + 1);
_ELEMENT.innerHTML = text;
_ELEMENT.appendChild(_CURSOR);
_PART_INDEX++;
if (text === _CONTENT[_PART]) {
_CURSOR.style.display = "none";
clearInterval(_INTERVAL_VAL);
setTimeout(function() {
_INTERVAL_VAL = setInterval(Delete, 50);
}, 1000);
}
}
_INTERVAL_VAL = setInterval(Type, 100);
body {
background: dodgerblue !important;
color: white !important;
}
h3 {
border-left: 6px solid whitesmoke;
background-color: lightslategray;
}
p5 {
text-align: justify;
}
p4 {
text-align: justify;
}
#container {
text-align: center;
}
#text {
display: inline-block;
vertical-align: middle;
color: white;
letter-spacing: 2px;
}
#cursor {
display: inline-block;
vertical-align: middle;
width: 3px;
height: 50px;
background-color: white;
animation: blink .75x step-end infinite;
}
#keyframes blink {
from,
to {
background-color: transparent;
}
50% {
background-color: black;
}
}
::-webkit-scrollbar {
width: 5px;
}
::-webkit-scrollbar-track {
background: whitesmoke;
}
::-webkit-scrollbar-thumb {
background: grey;
}
::-webkit-scrollbar-thumb:hover {
background: dodgerblue;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<div class="row align-items-start">
<div class="col">
<nav class="navbar navbar-expand-sm bg-light navbar-light fixed-top">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="#">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Portfolio</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contact Me</a>
</li>
</ul>
</nav>
<header>
<title>
Robert Smith
</title>
</header>
<body>
<p class="bg-primary text-white">
</div>
<div class="col ml-auto"></div>
<div class="col"></div>
</div>
<div class="row">
<div class="col">
<h1>
<b>
<div class = "p-4 mt-5 align-baseline border bg-light text-dark" style = "width:300px" > Robert Smith </div>
</b>
</h1>
<h2 class="display-4 ml-3"> I want to make a difference.
</h2>
<h3>
<div class="ml-3">
My Story
</div>
</h3>
<divT>
<p1>
<div id="container">
<div id="text"> </div>
<div id="cursor"></div>
</div>
<span class="border border-dark">
<div class = "ml-3" >
<br>
</div>
</span>
</p1>
<p6>
<div class="ml-3">
I love to code, whether it's building websites like this <br> or turning my ideas into a reality. <br> I hope I can also do the same for yours.
</div>
</p6>
</divT>
<h4>
Contact me
</h4>
<p6>
<ul3>
<li>Email: robertethansmith#yahoo.com</li>
<li>GitHub: roberto257</li>
</ul3>
</p6>
</div>
<div class="col">
<script language="javascript">
//Changes images when clicked
function changeImage() {
if (document.getElementById("imgClickAndChange").src == "file:///Users/roberto257/Desktop/Coding/Portfolio/Website/robertsmith.JPG") {
document.getElementById("imgClickAndChange").src = "file:///Users/roberto257/Desktop/Coding/Portfolio/Website/robertsmith3.JPG";
} else {
document.getElementById("imgClickAndChange").src = "file:///Users/roberto257/Desktop/Coding/Portfolio/Website/robertsmith.JPG";
}
}
function changeImage2() {
if (document.getElementById("imgClickAndChange2").src == "file:///Users/roberto257/Desktop/Coding/Portfolio/Website/robertsmith2.JPG") {
document.getElementById("imgClickAndChange2").src = "file:///Users/roberto257/Desktop/Coding/Portfolio/Website/robertsmith1.JPG";
} else {
document.getElementById("imgClickAndChange2").src = "file:///Users/roberto257/Desktop/Coding/Portfolio/Website/robertsmith2.JPG";
}
}
</script>
<p2>
<img src="file:///Users/roberto257/Desktop/Coding/Portfolio/Website/robertsmith.JPG" class="img-fluid rounded img-thumbnail" alt="Me" id="imgClickAndChange" onclick="changeImage()" />
<img src="file:///Users/roberto257/Desktop/Coding/Portfolio/Website/robertsmith2.JPG" class="img-fluid rounded img-thumbnail" alt="Me" id="imgClickAndChange2" onclick="changeImage2()" />
</p2>
</div>
<div class="col mt-5">
<p5>
<br> I have been coding for over a year now and am comfortable coding and building applications and developing programs on my own.
<br><b>I am not afraid to tackle <ins>any</ins> challenge a client presents me and will only decline if I
truly feel that I cannot complete the proposed task to the sufficient expectations of the client.</b> <br>
</p5>
<img src="file:///Users/roberto257/Desktop/Coding/Portfolio/Website/python.png" alt="Python">
<p4>
<br> My current skills include but are not limited to:
<ul2>
<li>Python</li>
<li>Web Development</li>
<li>JavaScript</li>
<li>Java</li>
</ul2>
I am <i> always </i> working to improve my current skills in languages, frameworks, libraries, and APIs and hope to continue to learn new ones. <br>
</p4>
</div>
</div>
<div class="row">
<div class="col">
</div>
<div class="col"></div>
<div class="col"></div>
</div>
<div class="row">
<div class="col"></div>
<div class="col"></div>
<div class="col"></div>
</div>
<div class="row">
<div class="col"></div>
<div class="col"></div>
<div class="col"></div>
</div>

Unless I'm misunderstanding what you are asking for, it looks like you are just missing a Delete function to get triggered, once the typing is done. Something like this should do the trick:
function Delete() {
_CURSOR.style.display = "none";
}

I like OPTIMUS PRIME idea(+1), but it also should better works with setInterval
I have some remarks:
1 - using textContent is more apopriate (if you don't use html tags)
2 - using arrow function to impact local vars
3 - you don't need CSS to set a Blinking Cursor
So I made this (It use html tags)
It works also if JS is disabled (no animation, but the text is shown)
Text_Typed('bubu');
function Text_Typed( eID, delay = 100)
{
let
element = document.getElementById(eID),
txt = element.innerHTML,
Text_Sz = txt.length,
sItv_id = null,
Text_html = '',
loop_i = -1,
Cursor_i = 1;
element.textContent = '▮'; // or '|';
sItv_id = setInterval(_=>{
loop_i++;
if (loop_i < Text_Sz)
{
let n, inC = txt.charAt(loop_i);
switch (inC) {
case '<':
n = txt.indexOf('>',loop_i);
if (n>0)
{
inC = txt.substring(loop_i,++n);
loop_i = --n;
}
break;
case '&':
n = txt.indexOf(';',loop_i);
if (n>0)
{
inC = txt.substring(loop_i,++n);
loop_i = --n;
}
break;
}
Cursor_i = (Cursor_i+1) % 2;
Text_html += inC;
element.innerHTML = Text_html + ((Cursor_i)?'▮':'▯'); // or '|'   ▉
}
else {
element.innerHTML = Text_html;
clearInterval(sItv_id);
}
}, delay);
}
#bubu {
text-align : center;
width : 400px;
font-size : 20px;
}
<div id="bubu" >
<p>When I was 15, I took a Robotics Honors course at my high school.</p>
<p>We designed and built robots using <span style="color:crimson">VEX robotics kits</span>.</p>
<p>To me, the most interesting part was building the drag-and-drop code and uploading it to the robot to control it.</p>
<p>This is what inspired me to code.</p>
<p>Before long, I was researching software development and decided the best language for me to start with would be Python.</p>
<p>That was a year ago, and since then I've worked in HTML, CSS, JavaScript, and Java, and plan to further expand my developer
<b>capabilities</b> from this point on.</p>
</div>

JQuery slideshow glitching

Can someone tell me what is wrong with this slider? When I execute it, the script works for the first two slides and then glitches.
css:
.slider {
z-index: 0;
clear: both;
position: relative;
margin: 0 0 15px 0;
height: 275px;
}
.slider .jumbo {
z-index: 0;
clear: both;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
padding: 40px 10px;
}
jquery:
$(".slider > .jumbo:gt(0)").hide();
setInterval(function() {
$('.slider > .jumbo:first')
.show("slide",1000)
.next()
.hide(0)
.end()
.appendTo('.slider');
}, 2000);
Webpage (slid show sped up for question): http://awkwardpetsiblings.x10host.com/

When you start the animation, jQuery UI is wrapping your slide in a div as part of its animation process. Your code then immediately moves your slide out of the wrapper, and jQuery UI gets confused, leaving behind a trail of wrapper divs as the interval repeats.
If instead you start the animation after you move the element, it works as intended. Live example:
$(".slider > .jumbo:gt(0)").hide();
setInterval(function() {
$('.slider > .jumbo:first')
.next()
.hide()
.end()
.appendTo(".slider")
.show("slide",500)
;
},1000);
$("#nv-cntnr-tab1").click(function(){window.open("/","_self")});
.jumbo {position:absolute; top:0;left:0;background:white;width:100%}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.11.3/jquery-ui.js"></script>
<div class="slider">
<div class="jumbo slide1">
<div class="cover" id="sld1-cover"></div>
<div class="container" id="sld1-container">
<div class="desc" id="sld1-cntnr-desc">
<h2>For Sharing your awkward and funny pet pictures.</h2>
<h4>See what it's all about by trying our interactive tour.</h4>
</div>
<div class="nav" id="sld1-cntnr-nav">
<div class="tour btn" id="sld1-cntnr-nav-tour_btn">
Let's Get Started
</div>
</div>
</div>
</div>
<div class="jumbo slide2" style="display: none;">
<div class="cover" id="sld2-cover"></div>
<div class="container" id="sld2-container">
<div class="desc" id="sld2-cntnr-desc">
<h2>The Feed. It's what we live on.</h2>
<h4>Try it out for free. No account needed.</h4>
</div>
<div class="nav" id="sld2-cntnr-nav">
<div class="signup btn" id="sld2-cntnr-nav-signup_btn">
Visit The Feed
</div>
</div>
</div>
</div>
<div class="jumbo slide3" style="display: none;">
<div class="cover" id="sld3-cover"></div>
<div class="container" id="sld3-container">
<div class="desc" id="sld3-cntnr-desc">
<h2>Take your experience to the next level.</h2>
<h4>Personalize your profile and Feed with friends.</h4>
</div>
<div class="nav" id="sld3-cntnr-nav">
<div class="feed btn" id="sld3-cntnr-nav-feed_btn">
Create Your Account
</div>
</div>
</div>
</div>
</div>

We Keep Coding

JavaScript is the programming language of the Web.

Trying to use jquery to make content fade in when scrolling - javascript

Related

On sliding the details of particular position should store in local storage?

Jquery zoom, zooms only one image on hover

First logo is fading out but Second logo is not fading in ... on scroll down. What am I missing?

Typing effect with JavaScript: How to remove cursor once all the text is "typed"

JQuery slideshow glitching

Categories

Resources