Currently, I am in the process of enhancing my online portfolio by integrating a bar graph feature. However, I have encountered an issue with its functionality. The goal is for the bar graph to display only when it comes into view during scrolling. Although I have managed to make it work properly, the effect triggers immediately upon scrolling rather than at the point when it enters the user's view. Could someone please guide me on what I might be doing wrong in this setup? Additionally, it is worth mentioning that I am utilizing a plugin named LiveQuery on my website.
HTML:
<div id="section-three">
<div id="web-head">
<h2>Web Development</h2>
<br>
<p><i>Code, code, and more code!</i></p>
</div>
<div id="web-graph">
<div id="html-bar">
<p>HTML</p>
<div id="html">
</div>
<div class="clear"></div>
</div>
<div id="css-bar">
<p>CSS</p>
<div id="css">
</div>
<div class="clear"></div>
</div>
<div id="jq-bar">
<p>JQuery/JavaScript</p>
<div id="jq">
</div>
<div class="clear"></div>
</div>
</div>
</div>
CSS:
/*SECTION THREE CODE*/
#section-three {
min-width: 100vw;
width: 100%;
min-height: 500px;
height: 100%;
background-color: #000000;
overflow: hidden;
text-align: center;
}
#web-head {
max-width: 70vw;
width: 100%;
min-height: 100px;
height: 100%;
margin-top: 2%;
margin-left: auto;
margin-right: auto;
color: white;
}
#web-head h2 {
font-weight: normal;
}
#web-head p {
color: #808080;
}
#web-graph {
min-width: 85vw;
width: 100%;
min-height: 300px;
height: 100%;
display: flex;
flex-direction: column;
text-align: left;
}
#web-graph p {
float: left;
max-width: 14vw;
width: 100%;
min-height: 50px;
height: 100%;
margin-left: 2%;
margin-top: 37.5px;
color: white;
}
#html-bar {
flex: 1;
}
#html {
min-height: 50px;
height: 100%;
max-width: 70vw;
width: 0;
float: left;
margin-top: 25px;
}
#html.active {
background-color: #808080;
transition: all ease-in-out 1s;
min-height: 50px;
height: 100%;
max-width: 70vw;
width: 70%;
float: left;
margin-top: 25px;
}
#css-bar {
flex: 1;
}
#css {
min-height: 50px;
height: 100%;
max-width: 70vw;
width: 0;
float: left;
margin-top: 25px;
}
#css.active {
background-color: #808080;
transition: all ease-in-out 1s;
min-height: 50px;
height: 100%;
max-width: 65vw;
width: 65%;
float: left;
margin-top: 25px;
}
#jq-bar {
flex: 1;
}
#jq {
min-height: 50px;
height: 100%;
max-width: 70vw;
width: 0;
float: left;
margin-top: 25px;
}
#jq.active {
background-color: #808080;
transition: all ease-in-out 1s;
min-height: 40px;
height: 100%;
max-width: 35vw;
width: 35%;
float: left;
margin-top: 25px;
}
JQuery:
$(document).ready(function () {
$('#jq-bar:visible').livequery(function () {
$('#html').addClass('active');
$('#css').addClass('active');
$('#jq').addClass('active');
})
});
I should also note that I had previously tried linking it to whenever a div or an item with a certain ID or class showed, it will trigger the function, but it still didn't work, unfortunately. If someone would be able to point me in the correct direction, I would highly appreciate it. Thank you!