On Scroll Animated Skill Bar isn't working

On Scroll Animated Skill Bar isn't working - javascript

I am working with my Portfolio and I am stuck in animated skill bar. I am using JQuery and I have followed different tutorials but none of them isn't working in my project. I have calculate section scroll position and window scroll position. I changed Parent div and child div, but the result are same. Here is My Code
$(document).ready(function() {
var skillBar = $('.skill-body');
$(window).scroll(function() {
var SkillLocation = $("#Education-Skill").offset().top;
var scrollLocation = $(this).scrollTop();
skillBar.each(function() {
if (SkillLocation <= scrollLocation) {
$(this).find('.inner-skill-bar').animate({
width: $(this).attr('data-percent')
}, 2000);
}
});
});
});
.outer-skill-bar {
height: 26px;
width: 100%;
border: 1px solid black;
}
.inner-skill-bar {
height: 100%;
width: 0%;
background: lightcoral;
border-right: 0.5px solid rgb(146, 136, 136);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container" id="Education-Skill">
<div class="row">
<div class="col-md-6 skill" id="skill">
<div class="all-skill">
<div class="my-skill">
<div class="skill-head d-flex">
<i class="fab fa-html5 fa-lg"></i>
<p>HTML5</p>
</div>
<div class="skill-body d-flex" data-percent="90%">
<div class="outer-skill-bar">
<div class="inner-skill-bar"></div>
</div>
<div class="percent">
<p class="skill-value">90%</p>
</div>
</div>
</div>
<!--my-skill-->
<div class="my-skill">
<div class="skill-head d-flex">
<i class="fab fa-css3-alt fa-lg"></i>
<p>CSS3</p>
</div>
<div class="skill-body d-flex" data-percent="80%">
<div class="outer-skill-bar">
<div class="inner-skill-bar"></div>
</div>
<div class="percent">
<p class="skill-value">80%</p>
</div>
</div>
</div>
<!--my-skill-->
</div>
<!--all skill-->
</div>
<!--col-->
</div>
<!--row-->
</div>
<!--Container-->

You just have to decrease the skillPosition variable a bit, so that it starts the animation when it appears on your screen. For this example I just used - 100, but you can tailor it any way you want:
$(document).ready(function(){
var skillBar = $('.skill-body');
$(window).scroll(function(){
var SkillLocation = $("#Education-Skill").offset().top;
var scrollLocation = $(this).scrollTop();
skillBar.each(function(){
if(SkillLocation - 100 <= scrollLocation)
{
$(this).find('.inner-skill-bar').animate({width:$(this).attr('data-percent')}, 2000);
}
});
});
});
.vertical-offset {
width: 100%;
height: 250px;
}
.outer-skill-bar{
height: 26px;
width: 100%;
border: 1px solid black;
}
.inner-skill-bar{
height: 100%;
width: 0%;
background: lightcoral;
border-right: 0.5px solid rgb(146, 136, 136);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="vertical-offset">Scroll down...</div>
<div class="container" id="Education-Skill">
<div class="row">
<div class="col-md-6 skill" id="skill">
<div class="all-skill">
<div class="my-skill">
<div class="skill-head d-flex">
<i class="fab fa-html5 fa-lg"></i>
<p>HTML5</p>
</div>
<div class="skill-body d-flex" data-percent="90%">
<div class="outer-skill-bar">
<div class="inner-skill-bar"></div>
</div>
<div class="percent">
<p class="skill-value">90%</p>
</div>
</div>
</div> <!--my-skill-->
<div class="my-skill">
<div class="skill-head d-flex">
<i class="fab fa-css3-alt fa-lg"></i>
<p>CSS3</p>
</div>
<div class="skill-body d-flex" data-percent="80%">
<div class="outer-skill-bar">
<div class="inner-skill-bar"></div>
</div>
<div class="percent">
<p class="skill-value">80%</p>
</div>
</div>
</div> <!--my-skill-->
</div><!--all skill-->
</div> <!--col-->
</div> <!--row-->
</div> <!--Container-->
<div class="vertical-offset"></div>

Don't use scroll event listener for this kind of stuff, it's bad for browser performance.
You should rather use Intersection Observer (IO) for this, this was designed for such problems. With IO you can react whenever an HTML element intersects with another one (or with the viewport)
Check this page, it shows you how to animate an element once it comes into viewport (scroll all the way down)
Short recap on what you have to do:
First you have to create a new observer:
var options = {
rootMargin: '0px',
threshold: 1.0
}
var observer = new IntersectionObserver(callback, options);
Here we define that once your target Element is 100% visible in the viewport (threshold of 1) your callback Function is getting executed. Here you can define another percentage, 0.5 would mean that the function would be executed once your element is 50% visible.
Then you have to define which elements to watch, in your case this would be the counter elements:
var target = document.querySelector('.counter');
observer.observe(target);
Last you need to specify what should happen once the element is visible in your viewport by defining the callback function:
var callback = function(entries, observer) {
entries.forEach(entry => {
// Each entry describes an intersection change for one observed
// here you animate the skill bar
});
};
If you need to support older browsers, use the official polyfill from w3c.
If you don't want to trigger the animation again when the elements are scrolled again into view a second time then you can also unobserve an element once it's animated.

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

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>

Modify DOM based on amount of divs after specific class

Is there any way to modify DOM based on amount div after specific class?
For example, if I have a div with a class called row and after that I have 4 div elements. Is there a way to change these 4 div element class depending on how many div elements there are?
Code:
<div class="row">
<div class="col-1-of-4">
some content
</div>
<div class="col-1-of-4">
some content
</div>
<div class="col-1-of-4">
some content
</div>
<div class="col-1-of-4">
some content
</div>
</div>
Another example I have a div class row again, but this time I want 3 div elements after that, then I would want these div elements to have a class called col-1-of-3, not col-1-of-4. If I would have just 2 div elements after that then class col-1-of-2 and if just one div element then no class at all.:
Code:
<div class="row">
<div class="col-1-of-3">
some content
</div>
<div class="col-1-of-3">
some content
</div>
<div class="col-1-of-3">
some content
</div>
</div>
Also these div elements with classes called col-1-of-4, col-1-of-3 and col-1-of-2 have their own div elements inside them, but they should stay like they were.
Is it possible to achieve with JavaScript or PHP?

You would need to write conditional blocks to handle this if I'm understanding you correctly (wanting a JS or PHP solution).
Note: It goes without saying that a similar solution can be completed with a CSS-only approach, as outlined here: Can CSS detect the number of children an element has?
Here's an example (using jQuery) with 3 sets of row's, with varying children (2, 3, 4):
$(function() {
var $rows = $(".row");
$rows.each(function() {
$row = $(this);
var $children = $(">div", $row),
total = $children.size();
$children.addClass("col-1-of-" + total);
});
});
.row {
border: 1px solid #000;
margin: 10px;
}
.row > div {
margin: 10px;
}
.row .col-1-of-2 {
border: 1px solid #f00;
}
.row .col-1-of-3 {
border: 1px solid #0f0;
}
.row .col-1-of-4 {
border: 1px solid #00f;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row">
<div>
some content
</div>
<div>
some content
</div>
</div>
<div class="row">
<div>
some content
</div>
<div>
some content
</div>
<div>
some content
</div>
</div>
<div class="row">
<div>
some content
</div>
<div>
some content
</div>
<div>
some content
</div>
<div>
some content
</div>
</div>
When you run the snippet, you must inspect the elements. I've added borders so you can see the difference.

Theres a number of ways to achieve this. I'd maybe add another class name so you can easily identify groups of divs, and differentiate between parent and child divs. Does this help you get where you're going? Basically find the number of children in a row and then concatenate that number into the class name.
var x = document.getElementsByClassName('row')[0].childElementCount
var element = document.getElementsByClassName('row')[0];
element.classList.add(`col-1-of-${x}`);

.row {
width: 100%;
display:flex;
flex-grow: 1;
margin-bottom: 2px;
}
.col {
float:left;
background: rgba(255,0,0,.2);
text-align: center;
margin-right: 2px;
}
.col:first-child:nth-last-child(1),
.col:first-child:nth-last-child(1) ~ .col{
width: calc(100% / 1);
}
.col:first-child:nth-last-child(2),
.col:first-child:nth-last-child(2) ~ .col{
width: calc(100% / 2);
}
.col:first-child:nth-last-child(3),
.col:first-child:nth-last-child(3) ~ .col{
width: calc(100% / 3);
}
.col:first-child:nth-last-child(4),
.col:first-child:nth-last-child(4) ~ .col{
width: calc(100% / 4);
}
.col:first-child:nth-last-child(5),
.col:first-child:nth-last-child(5) ~ .col{
width: calc(100% / 5);
}
<div class="row">
<div class="col">1</div>
</div>
<div class="row">
<div class="col">1</div>
<div class="col">2</div>
</div>
<div class="row">
<div class="col">1</div>
<div class="col">2</div>
<div class="col">3</div>
</div>
<div class="row">
<div class="col">1</div>
<div class="col">2</div>
<div class="col">3</div>
<div class="col">4</div>
</div>
<div class="row">
<div class="col">1</div>
<div class="col">2</div>
<div class="col">3</div>
<div class="col">4</div>
<div class="col">5</div>
</div>
so this is with float, can be used in a sass/scss mixin to create code automagically. there should be also a flex solution but i dont have it at hand at the moment

Background image div clickable

I have a div with a background image. How can i make the div (the background image) clickable? I want to unhide an other div when clicked on the div (image). Onclick code: onclick="javascript:unhide('kazen')"
var clickit = document.getElementsByClassName("fh5co-grid")[0];
var kazen = document.getElementById("kazen");
clickit.addEventListener("click", function(){
if (kazen.style.display === "none") {
kazen.style.display="block";
} else {
kazen.style.display="none";
}
});
kazen.addEventListener("click", function(){
this.style.display="none";
});
#kazen {
background-color: #cc9;
display: none;
width: 100px;
height: 100px;
position: absolute;
top: 15px;
left: 15px;
}
.fh5co-grid {
}
<div class="col-md-4 col-sm-6 ">
<div class="fh5co-grid" style="background-image: url(images/PREVIEW_Shop_02-29.jpg);">
<a class="image-popup text-center" >
<div class="prod-title ">
<h3>Kaas</h3>
<h4>in ons aanbod hebben we verse en harde kazen - binnenkort meer hierover</h4>
</div>
</a>
</div>
</div>
<div id="kazen" >
<div class="col-md-12">
<div class="fh5co-grid" style="background-image: url(images/Melkerhei_Dag2-16-4.jpg);">
<a class="image-popup text-center" >
<div class="prod-title ">
</div>
</a>
</div>
</div>
</div>

You can have a look at the fiddle I created if this is what you want.
$(document).ready(function() {
$("div.fh5co-grid").click(function() {
$("div.next").css("display", "block");
})
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-md-4 col-sm-6 ">
<div class="fh5co-grid" style="background-image: url(http://placehold.it/350x150);">
<a class="image-popup text-center">
<div class="prod-title ">
<h3>cheese</h3>
<h4>tekst</h4>
</div>
</a>
</div>
</div>
<div style="background-color: #000; display:none" class="next">Next div</div>

From what you're describing, this seems pretty close. The background image isn't clickable, it's the div itself. And this could be done with jQuery, yes, but it's trivial enough that pure javascript is pretty easy here. Clicking in the red-boxed area will display the div with the id kazen, and clicking in either kazen or the red-boxed area again will hide it.
Note, there was a weird glitch to my solution. I changed the display if/else to check if it's currently displayed and hide it, rather than if it's currently hidden to display it. That was causing a strange effect of re-hiding the kazan div on the first click.
Within stackoverflow, you'll need an absolute url to display an image. If you aren't seeing your image here, that may be why.
var clickit = document.getElementsByClassName("fh5co-grid")[0];
var kazen = document.getElementById("kazen");
clickit.addEventListener("click", function(){
if (kazen.style.display === "block") {
kazen.style.display="none";
} else {
kazen.style.display="block";
}
});
kazen.addEventListener("click", function(){
this.style.display="none";
});
#kazen {
background: url("https://static.pexels.com/photos/6832/waterfall-beauty-lets-explore-lets-get-lost.jpg");
background-size: 100%;
display: none;
width: 100px;
height: 100px;
position: absolute;
top: 15px;
left: 15px;
color: #fff;
}
.fh5co-grid {
border: 1px dotted red;
}
<div class="col-md-4 col-sm-6 ">
<div class="fh5co-grid" style="background-image: url(images/PREVIEW.jpg);">
<a class="image-popup text-center">
<div class="prod-title ">
<h3>cheese</h3>
<h4>tekst</h4>
</div>
</a>
</div>
</div>
<div id="kazen">
Click me to hide!
</div>

Drag and drop not working for on the fly elements firefox

I have a page that generates some draggable elements.
However I noticed that on firefox I cannot get them to drag while on chrome I can.To create a new element i press the create item button.Here is my code
/*
* #param event A jquery event that occurs when an object is being dragged
*/
function dragStartHandler(event){
//e refers to a jQuery object
//that does not have dataTransfer property
//so we have to refer to the original javascript event
var originalEvent = event.originalEvent;
var currentElement = originalEvent.target;
console.log("Hack it");
console.log($(currentElement).data());
//We want to store the data-task-id of the object that is being dragged
originalEvent.dataTransfer.setData("text",$(currentElement).data("task-id"));
originalEvent.dataTransfer.effectAllowed = "move";
}
$(document).ready(function(){
//When a new task/item is creatted it is assigned a unique data attribute which is the task index
var taskIndex = 0;
$(".text-info").addClass("text-center");
$(".createTask").addClass("btn-block").on("click",function(){
//Find the category whict this button belongs to
var currentCategory = $(this).parent(".box");
var categoryId = currentCategory.data("category");
//Create a new task
var task = $("<div class='list-group-item droppable' draggable='true' data-task-id="+taskIndex+"></div>");
//Assign a data-task-id attribute and set its text
task.text("Data id = "+taskIndex);
taskIndex++;
task.appendTo($(this).prev(".dropTarget"));
});
$(".droppable").on("dragstart",dragStartHandler);
$(".dropTarget").on("dragenter",function(event){
event.preventDefault();
event.stopPropagation();
$(this).addClass("highlighted-box");
}).on("dragover",false)
.on("drop",function(event){
event.preventDefault();
event.stopPropagation();
var originalEvent = event.originalEvent;
//Retrieve the data-task-id we stored in the event
var taskId = originalEvent.dataTransfer.getData("text");
console.log(taskId);
//The object that will be moved is determined by the id we stored on the event parameter
var objectToMove =$("body").find(`[data-task-id='${taskId}']`);
console.log(objectToMove);
var category = $(this).parent(".box").data("category");
objectToMove.data("category-group",category);
//Remove the square object from its previous position
//and append it to the current dropTarget
$(objectToMove).appendTo(this);
return false;
});
});
.highlighted-box {
box-shadow: 0 0 4px 4px #EBE311;
}
.dropTarget {
height: 10em;
width: 10em;
/* border:2px solid; */
margin: auto;
}
.dropTarget .droppable{
margin: auto;
position: relative;
top: 20%;
}
.droppable {
background-color: dodgerblue;
/* height: 6em;
border-radius: 5px; */
/* box-shadow: 0 0 5px 5px #3D0404; */
/* width: 6em; */
}
#square2{
background-color: red;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.1/jquery.min.js"></script>
<body>
<div class="jumbotron intro text-center">
<h1>Drag and drop demo</h1>
</div>
<div class="row">
<div class="col-md-3 box" data-category="0">
<h1 class="text-info">Ideas</h1>
<div class="dropTarget list-group">
</div>
<div class="btn btn-info createTask">
Create item
</div>
</div>
<div class="col-md-3 box" data-category="1">
<h1 class="text-info">Wornking on</h1>
<div class="dropTarget list-group">
</div>
<div class="btn btn-info createTask">
Create item
</div>
</div>
<div class="col-md-3 box" data-category="2">
<h1 class="text-info">Completed</h1>
<div class="dropTarget list-group">
</div>
<div class="btn btn-info createTask">
Create item
</div>
</div>
<div class="col-md-3 box" data-category="3">
<h1 class="text-info">Accepted</h1>
<div class="dropTarget list-group">
</div>
<div class="btn btn-info createTask">
Create item
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-md-6">
<div id="square" draggable="true" data-index = "0" class="droppable list-group-item"></div>
</div>
<div class="col-md-6">
<div id="square2" class="droppable list-group-item" draggable="true" data-index="1"></div>
</div>
</div>
</div>
</body>

The problem with my code was the event delegation.
To fix it I did the following:
$("body").on("dragstart",".droppable",dragStartHandler);
Here you can find more more here

We Keep Coding

JavaScript is the programming language of the Web.

On Scroll Animated Skill Bar isn't working - javascript

Related

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

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

Modify DOM based on amount of divs after specific class

Background image div clickable

Drag and drop not working for on the fly elements firefox

Categories

Resources