Develop Reference

How can I change the value of the onclick attribute if the element has a particular class?

I am looking for a solution if the element has an active class, can it change the onclick value to "closeSideBar"?
function openSidebar() {
document.getElementById('sidebar').style.width = '250px';
document.getElementById('hamburger').style.marginLeft = '250px'
}
function closeSideBar() {
document.getElementById('sidebar').style.width = '0';
document.getElementById('hamburger').style.marginLeft = '0'
}
<button id="hamburger" onclick="openSidebar()">
I am looking for a solution to How can I achieve this result?
<button id="hamburger" onclick="closeSideBar()" class="active">

You don't want to change the attribute value. You want to call just one function and direct its behavior.
Instead of separate open/close functions, use one:
function toggleSidebar(el) {
if (el.classList.contains('active')) {
document.getElementById('sidebar').style.width = '0';
document.getElementById('hamburger').style.marginLeft = '0'
} else {
document.getElementById('sidebar').style.width = '250px';
document.getElementById('hamburger').style.marginLeft = '250px'
}
}
Then call the function, passing the element:
<button id="hamburger" onclick="toggleSidebar(this)" class="active">
Protip: Don't manipulate styles directly. Instead, toggle classes so you can change sidebar size and position in one place, in your stylesheet:
function toggleSidebar(el) {
if (el.classList.contains('active')) {
document.body.classList.remove('sidebar-in');
} else {
document.body.classList.add('sidebar-in');
}
}
Now you can set up your styles using descendant selectors:
body .sidebar { ... }
body.sidebar-in .sidebar { ... }

I think you just need a function toggleSidebar.
function toggleSidebar() {
const isActive = document.getElementById('hamburger').classList.contains('active');
if (isActive) {
closeSideBar();
} else {
openSidebar();
}
}
function openSidebar() {
document.getElementById('sidebar').style.width = '250px';
document.getElementById('hamburger').style.marginLeft = '250px';
}
function closeSideBar() {
document.getElementById('sidebar').style.width = '0';
document.getElementById('hamburger').style.marginLeft = '0';
}

You can achieve that, but it's an anti-pattern. First, let me describe how you can achieve this:
function hamburger(active) {
var myHamburger = document.getElementById("hamburger");
myHamburger.classList[active ? "add" : "remove"]("active");
myHamburger.onclick = (active ? "open" : "close") + "Sidebar()";
}
Now that you see how this works, look at the more elegant solution:
function openClose(item) {
if (item.classList.contains("active")) openSidebar();
else closeSidebar();
}
and use this in your tag:
<button id="hamburger" onclick="openClose()">

Although an alternative solution wasn't asked for its worth considering a CSS only solution such as this:
html, body { height: 100%; width: 100%;}
body {overflow-x: hidden; padding:40px; background: rgb(180,200,220);}
/* #nav-trigger is a hidden input */
#nav-trigger {
position: absolute;
clip: rect(0, 0, 0, 0);
visibility:hidden;
}
/* The nav itself (off-screen by default) */
#nav {
width: 300px;
max-width:80%;
height: 100%;
position: absolute;
top: 0;
left:-300px;
bottom: 0;
z-index: 10;
list-style: none;
background: #111;
}
#nav label.burger {
width:30px;
height:30px;
display:block;
position: absolute;
top: 30px;
right:-60px;
color:#000;
font-size:30px;
line-height:30px;
font-weight:bold;
cursor:pointer;
}
#nav ul {
margin:0;
padding:10px;
display:block;
position:relative;
height:100%;
top:0;
right:0;
overflow:auto;
}
#nav ul a {color:#ffffff;}
/* animate the transitions */
#nav {
-webkit-transition: right 0.2s, left 0.2s, margin 0.2s, background 0.2s;
transition: right 0.2s, left 0.2s, margin 0.2s, background 0.2s;
}
/* move if nav-trigger is checked */
#nav-trigger:checked ~ #nav {
position: fixed;
left: 0;
}
<input type="checkbox" id="nav-trigger" class="nav-trigger" />
<div id="nav">
<label class="burger" for="nav-trigger">&#9776</label>
<ul>
<li>Menu Item</li>
<li>This Thing</li>
<li>Another Thing</li>
<li>Something Else</li>
</ul>
</div>

How to refresh input with every enter press and/or callback variable/function?

let myInput = document.querySelector(".input");
let myOutput = document.querySelector(".result");
let sudo = false;
let isGood = false;
let enter = false;
let repeat =
'<div class="content2">'
+ '<div class="linia">'
+ '<span id="terminal2">linux#love:~</span>'
+'<input type="text" class="input" size="50">'
+'</div>'
+'<div class="result"></div>'
+'</div>';
myInput.disabled = false;
let cA = [
["mkdir", "creates new dir"],
["userdel", "deletes user"],
["useradd", "adds user"]
]
const listHelp = function(command)
{
if(command == "help" || command == "HELP")
{
for(let i=0; i<cA.length; i++){
// console.log(cA[i][0]);
myOutput.innerHTML += '<span>' + (cA[i][0]) + '</span><br />';
}
myOutput.innerHTML += repeat;
myInput = document.querySelector(".input");
return inputValue;
}
else{
myOutput.innerHTML += '<span>' + "Error" +'</span><br />';
myOutput.innerHTML += repeat;
return checkCMD;
}
}
/*------------------------------------------------------------*/
const commandList = function (command){
console.log(command);
if(sudo == true)
{
command = command.replace("sudo ", "");
console.log(command);
}
for (let i = 0; i<cA.length; i++)
{
if(cA[i].includes(command) == true){
console.log(cA [i][1]);
isGood = true;
myOutput.innerHTML += '<span>' + cA [i][1] + '</span><br />';
break;
}
}
if(isGood == true){
myOutput.innerHTML += repeat;
}
else{return listHelp(command);}
}
const isSudo = function (checkSudo){
if (checkSudo.startsWith("sudo") == true)
{
console.log(checkSudo);
sudo = true;
return commandList(checkSudo) + sudo;
}
else{
console.log("Nie sudo");
return commandList(checkSudo);
}
}
const isEnter = function (checkEnter){
if (checkEnter.keyCode === 13)
{
inputValue = myInput.value;
console.log("Enter");
myInput.disabled = true;
console.log(inputValue);
return isSudo(inputValue);
}
}
const checkCMD = myInput.addEventListener("keypress", isEnter);
html{
box-sizing: border-box;
font-family: 'Ubuntu', sans-serif;
}
body{
width:500px;
height:auto;
word-wrap: break-word;
overflow-x: hidden;
overflow-y: hidden;
}
.konsola{
width:500px;
height:300px;
color:#71a33b;
position:absolute;
border-radius:1%;
font-family: 'Ubuntu Mono', monospace;
//float:left;
//z-index: 3;
}
#terminal2::selection{
background:black;
color:white;
}
.pasek{
font-weight:100;
background:linear-gradient(#616161, #353535);
box-shadow: black 0px 1.7px 4px -0.7px;
color:white;
width:100%;
height:8%;
user-select:none;
border-top-left-radius: 2px;
border-top-right-radius: 2px;
font-family: 'Ubuntu', sans-serif;
}
.zamknij{
position:relative;
background-color:darkorange;
color:gray;
border-radius:100%;
width:13px;
height:13px;
float:left;
margin-left:5px;
margin-top:5px;
line-height: 13px;
font-size:10px;
text-align:center;
transition: .2s ease-in-out;
}
.zamknij:hover{
background-color:orange;
transition: .2s ease-in-out;
}
.zamknij:active{
background-color:darkorange;
transition: .05s ease-in-out;
}
#minimalizuj{
position:relative;
background-color:#63625c;
color:gray;
border-radius:100%;
width:13px;
height:13px;
float:left;
margin-left:5px;
margin-top:5px;
line-height: 11px;
font-size:20px;
text-align:center;
transition: .2s ease-in-out;
}
#minimalizuj:hover{
background-color:orange;
transition: .2s ease-in-out;
}
#minimalizuj:active{
background-color:darkorange;
transition: .1s ease-in-out;
}
#maksymalizuj{
position:relative;
background-color:#63625c;
color:gray;
border-radius:100%;
width:13px;
height:13px;
float:left;
margin-left:5px;
margin-top:5px;
line-height: 10px;
font-size:13px;
text-align:center;
transition: .2s ease-in-out;
}
#maksymalizuj:hover{
background-color:orange;
transition: .2s ease-in-out;
}
#maksymalizuj:active{
background-color:darkorange;
transition: .1s ease-in-out;
}
#terminal{
margin:7px;
line-height:9px;
font-size:15px;
float:left;
}
#terminal2{
position:relative;
line-height:9px;
font-size:15px;
font-weight:700;
left: 5px;
top: 10px;
float:left;
}
.content{
background-color:#39152e;
position:relative;
width:100%;
height:100%;
overflow-y: scroll;
overflow-x:hidden;
}
.content2{
background-color:#39152e;
position:relative;
width:100%;
height:100%;
overflow-y: hidden;
overflow-x:hidden;
}
.wynik{
color:red;
}
textarea, #odmowa{
position:relative;
background:none;
border:none;
font-family: 'Ubuntu Mono', monospace;
color:white;
resize:none;
font-size:15px;
width: 78%;
line-height:17px;
//margin-top:13px;
outline:none;
text-decoration:none;
top:4px;
left:10px;
overflow: hidden;
float:left;
}
textarea::selection , #odmowa::selection, .wynik::selection{
background-color: black;
color:white;
}
::-webkit-scrollbar{
border-radius:50px;
width:4px;
}
::-webkit-scrollbar-thumb{
background-color:orange;
border-radius:50px;
}
.linia{
position:relative;
width:100%;
height:30px;
top:1px;
}
#odmowa{
line-height: 20px;
}
<!DOCTYPE HTML>
<head>
<title>Konsola</title>
<link rel="Stylesheet" href="konsola.css" type="text/css">
<link href="https://fonts.googleapis.com/css?family=Ubuntu|Ubuntu+Mono" rel="stylesheet">
</head>
<body>
<div class="konsola">
<div class="pasek">
<div class="zamknij">X</div>
<div id="minimalizuj">-</div>
<div id="maksymalizuj">□</div>
<span id="terminal">linux#love:~</span>
</div>
<div class="content">
<div class="linia">
<span id="terminal2">linux#love:~</span>
<!--<textarea spellcheck="false" class="input" cols="50" rows="1"></textarea>-->
<input type="text" class="input">
</div>
<div class="result"></div>
</div>
</div>
<script language="javascript" src="konsola2.js" type="text/javascript"></script>
</body>
After few days of thinking and making my code I'm finally stuck. I want to make Terminal.
Type help to see commands, and then try to enter one of them. It's impossible, myInput.value doesn't refresh itself or just checkCMD isn't called again.
My question is: how to call checkCMD after first input / or how to refresh
myInput.value
to change every time user type some text. Should I delete its content in any function? I don't expect ready code from you, just small hint with description.
Sorry for nooby question and mess in my code.

Your event listener is always listening for keypress of your first .input element (even when it becomes disabled).
So in your loop you'll have to select newly created element (by using querySelectorAll and selecting last one, or myInput = document.querySelector(".input:not(:disabled)"); to select not disabled one. Then add new event listener to this element: myInput.addEventListener("keypress", isEnter);

How can the pop up load seconds after the page load

So I have been trying this for hours since I have no huge experience in JavaScript. Basically, I have modified a CSS and HTML codes for the pop up, that I found on the web. However, I would love to make the pop up to show up 10 seconds after a page load. I have tried lots of methods, but none of them gave me the result I wanted. Actually, none of them worked, even partially.
Here is the latest method, which also didn't work.
function toggle(div_id) {
var el = document.getElementById(div_id);
if ( el.style.display == 'none' ) { el.style.display = 'block';}
else {el.style.display = 'none';}
}
function blanket_size(popUpDivVar) {
if (typeof window.innerWidth != 'undefined') {
viewportheight = window.innerHeight;
} else {
viewportheight = document.documentElement.clientHeight;
}
if ((viewportheight > document.body.parentNode.scrollHeight) && (viewportheight > document.body.parentNode.clientHeight)) {
blanket_height = viewportheight;
} else {
if (document.body.parentNode.clientHeight > document.body.parentNode.scrollHeight) {
blanket_height = document.body.parentNode.clientHeight;
} else {
blanket_height = document.body.parentNode.scrollHeight;
}
}
var blanket = document.getElementById('blanket');
blanket.style.height = blanket_height + 'px';
var popUpDiv = document.getElementById(popUpDivVar);
popUpDiv_height=blanket_height/2-200;//200 is half popup's height
popUpDiv.style.top = popUpDiv_height + 'px';
}
function window_pos(popUpDivVar) {
if (typeof window.innerWidth != 'undefined') {
viewportwidth = window.innerHeight;
} else {
viewportwidth = document.documentElement.clientHeight;
}
if ((viewportwidth > document.body.parentNode.scrollWidth) && (viewportwidth > document.body.parentNode.clientWidth)) {
window_width = viewportwidth;
} else {
if (document.body.parentNode.clientWidth > document.body.parentNode.scrollWidth) {
window_width = document.body.parentNode.clientWidth;
} else {
window_width = document.body.parentNode.scrollWidth;
}
}
var popUpDiv = document.getElementById(popUpDivVar);
window_width=window_width/2-200;//200 is half popup's width
popUpDiv.style.left = window_width + 'px';
}
function popup(windowname) {
blanket_size(windowname);
window_pos(windowname);
toggle('blanket');
toggle(windowname);
}
window.onkeydown = function( event ) {
if ( event.keyCode == 27 ) {
console.log( 'ESC' );
document.getElementById('popUpDiv').style.display = 'none';
document.getElementById('blanket').style.display = 'none';
}
}
#charset "UTF-8";
body {
font-family:Palatino, Baskerville, Georgia, serif;
background:#190121;
margin: 0;
padding: 0;
text-align: center;
color: #000000;
}
#container {
width: 780px;
background: #FFFFFF;
margin: 0 auto;
font-size:14px;
text-align: left;
}
#mainContent {
padding: 0 60px;
min-height:600px;
line-height:25px
}
img {border:0px}
/*LINKS*/
#mainContent .gamortva:link {
color:#ffffff;
text-decoration:none;
font-size:8px;
background:#000000;
padding:5px;
-webkit-border-radius:10px;
-moz-border-radius:10px;
}
#mainContent .gamortva:visited {
color:#ffffff;
text-decoration:none;
font-size:8px;
background:#000000;
padding:5px;
-webkit-border-radius:10px;
-moz-border-radius:10px;
}
#mainContent .gamortva:hover {
color:#ffffff;
text-decoration:none;
font-size:9px;
background:#333333;
padding:5px;
-webkit-border-radius:10px;
-moz-border-radius:10px
}
#mainContent .gamortva:active {
color:#ffffff;
text-decoration:none;
font-size:9px;
background:#333333;
padding:5px;
-webkit-border-radius:10px;
-moz-border-radius:10px
}
/*STYLES FOR CSS POPUP*/
#blanket {
background-color:#111;
opacity: 0.65;
*background:none;
position:absolute;
z-index: 9001;
top:0px;
left:0px;
width:100%;
-webkit-transition: all 2s ease-in-out;
-moz-transition: all 2s ease-in-out;
-o-transition: all 2s ease-in-out;
transition: all 2s ease-in-out;
}
#popUpDiv {
position:absolute;
background:url(***.jpg) no-repeat;
width:400px;
height:400px;
border:5px solid #000;
z-index: 9002;
}
.amazonis-knopka:link {
display: block;
text-align: center;
padding: 10px;
margin-top: 30px;
color:white;
text-decoration:none;
font-size:40px;
background:#000000;
opacity:0.8;
-webkit-border-radius:20px;
-moz-border-radius:20px;
}
.amazonis-knopka:hover{
padding: 10px;
text-decoration:underline;
font-size:43px;
-webkit-border-radius:10px;
-moz-border-radius:10px;
opacity:1;
}
.amazonis-knopka:visited{
color:white;
}
#mainContent .gamortva:active {
color:#ffffff;
}
.popTitle {
display: block;
margin-top: 10px;
text-align: center;
background:#333333;
padding:19px;
-webkit-border-radius:100px;
-moz-border-radius:10px;
background: rgba(0, 0, 0, 0.5);
display: block;
color:white;
font-size:23px;
}
.popText {
display: block;
margin-top: 40px;
text-align: center;
padding:30px;
-webkit-border-radius:20px;
-moz-border-radius:20px;
background: rgba(144, 154, 56, 0.3);
font-size:25px;
font-weight: bolder;
-webkit-text-fill-color: red;
-webkit-text-stroke-width: 1px;
-webkit-text-stroke-color: black;
}
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Pop Up</title>
<link href="styles.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
function openPopUp() {
element = document.getElementById("popUpDiv");
}
window.onload = setTimeout(openPopUp, 10000);
</script>
<script type="text/javascript" src="css-pop.js"></script>
</head>
<body onload="popup('popUpDiv')">
<div id="container">
<div id="mainContent">
<p><strong>Pop Up</strong> Beta <em>V1</em></p>
<div id="blanket" style="display:none;"></div>
<div id="popUpDiv" style="display:none;">
<a href="#" class="gamortva" onclick="popup('popUpDiv')" >Close</a>
<span class="popTitle">Heading!..</span>
<span class="popText">Text..</span>
Link...
</div>
Click Here To Open The Pop Up
</div>
</div>
</body>
</html>
The setTimeout code is the following:
<script type="text/javascript">
function openPopUp() {
element = document.getElementById("popUpDiv");
}
window.onload = setTimeout(openPopUp, 10000);
</script>
I thought maybe if I could load the pop up with the <script> code it would be very helpful, because I don't really like that the pop up is being loaded with the body tag: <body onload="popup('popUpDiv')">
But, I could not manage to do that, because the pop up does not load after I try to load it with the function. Maybe I was doing it wrong, but I have tried everything I could think of, and almost everything I found on web.
I know I have a lot of other mistakes other than the pop up, I am still working on them.
Sorry for not being very specific and copying entire codes, but without those I thought it would be hard to figure out what I was trying to do.
Thank you.

Just run your function in right place )
function toggle(div_id) {
var el = document.getElementById(div_id);
if ( el.style.display == 'none' ) { el.style.display = 'block';}
else {el.style.display = 'none';}
}
function blanket_size(popUpDivVar) {
if (typeof window.innerWidth != 'undefined') {
viewportheight = window.innerHeight;
} else {
viewportheight = document.documentElement.clientHeight;
}
if ((viewportheight > document.body.parentNode.scrollHeight) && (viewportheight > document.body.parentNode.clientHeight)) {
blanket_height = viewportheight;
} else {
if (document.body.parentNode.clientHeight > document.body.parentNode.scrollHeight) {
blanket_height = document.body.parentNode.clientHeight;
} else {
blanket_height = document.body.parentNode.scrollHeight;
}
}
var blanket = document.getElementById('blanket');
blanket.style.height = blanket_height + 'px';
var popUpDiv = document.getElementById(popUpDivVar);
popUpDiv_height=blanket_height/2-200;//200 is half popup's height
popUpDiv.style.top = popUpDiv_height + 'px';
}
function window_pos(popUpDivVar) {
if (typeof window.innerWidth != 'undefined') {
viewportwidth = window.innerHeight;
} else {
viewportwidth = document.documentElement.clientHeight;
}
if ((viewportwidth > document.body.parentNode.scrollWidth) && (viewportwidth > document.body.parentNode.clientWidth)) {
window_width = viewportwidth;
} else {
if (document.body.parentNode.clientWidth > document.body.parentNode.scrollWidth) {
window_width = document.body.parentNode.clientWidth;
} else {
window_width = document.body.parentNode.scrollWidth;
}
}
var popUpDiv = document.getElementById(popUpDivVar);
window_width=window_width/2-200;//200 is half popup's width
popUpDiv.style.left = window_width + 'px';
}
function popup(windowname) {
blanket_size(windowname);
window_pos(windowname);
toggle('blanket');
toggle(windowname);
}
window.onkeydown = function( event ) {
if ( event.keyCode == 27 ) {
console.log( 'ESC' );
document.getElementById('popUpDiv').style.display = 'none';
document.getElementById('blanket').style.display = 'none';
}
}
function openPopUp() {
setTimeout(function(){
popup('popUpDiv');
}, 5000);
}
#charset "UTF-8";
body {
font-family:Palatino, Baskerville, Georgia, serif;
background:#190121;
margin: 0;
padding: 0;
text-align: center;
color: #000000;
}
#container {
width: 780px;
background: #FFFFFF;
margin: 0 auto;
font-size:14px;
text-align: left;
}
#mainContent {
padding: 0 60px;
min-height:600px;
line-height:25px
}
img {border:0px}
/*LINKS*/
#mainContent .gamortva:link {
color:#ffffff;
text-decoration:none;
font-size:8px;
background:#000000;
padding:5px;
-webkit-border-radius:10px;
-moz-border-radius:10px;
}
#mainContent .gamortva:visited {
color:#ffffff;
text-decoration:none;
font-size:8px;
background:#000000;
padding:5px;
-webkit-border-radius:10px;
-moz-border-radius:10px;
}
#mainContent .gamortva:hover {
color:#ffffff;
text-decoration:none;
font-size:9px;
background:#333333;
padding:5px;
-webkit-border-radius:10px;
-moz-border-radius:10px
}
#mainContent .gamortva:active {
color:#ffffff;
text-decoration:none;
font-size:9px;
background:#333333;
padding:5px;
-webkit-border-radius:10px;
-moz-border-radius:10px
}
/*STYLES FOR CSS POPUP*/
#blanket {
background-color:#111;
opacity: 0.65;
*background:none;
position:absolute;
z-index: 9001;
top:0px;
left:0px;
width:100%;
-webkit-transition: all 2s ease-in-out;
-moz-transition: all 2s ease-in-out;
-o-transition: all 2s ease-in-out;
transition: all 2s ease-in-out;
}
#popUpDiv {
position:absolute;
background:url(iRobot.jpg) no-repeat;
width:400px;
height:400px;
border:5px solid #000;
z-index: 9002;
}
.amazonis-knopka:link {
display: block;
text-align: center;
padding: 10px;
margin-top: 30px;
color:white;
text-decoration:none;
font-size:40px;
background:#000000;
opacity:0.8;
-webkit-border-radius:20px;
-moz-border-radius:20px;
}
.amazonis-knopka:hover{
padding: 10px;
text-decoration:underline;
font-size:43px;
-webkit-border-radius:10px;
-moz-border-radius:10px;
opacity:1;
}
.amazonis-knopka:visited{
color:white;
}
#mainContent .gamortva:active {
color:#ffffff;
}
.popTitle {
display: block;
margin-top: 10px;
text-align: center;
background:#333333;
padding:19px;
-webkit-border-radius:100px;
-moz-border-radius:10px;
background: rgba(0, 0, 0, 0.5);
display: block;
color:white;
font-size:23px;
}
.popText {
display: block;
margin-top: 40px;
text-align: center;
padding:30px;
-webkit-border-radius:20px;
-moz-border-radius:20px;
background: rgba(144, 154, 56, 0.3);
font-size:25px;
font-weight: bolder;
-webkit-text-fill-color: red;
-webkit-text-stroke-width: 1px;
-webkit-text-stroke-color: black;
}
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Pop Up</title>
<link href="styles.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="css-pop.js"></script>
</head>
<body onload="openPopUp()">
<div id="container">
<div id="mainContent">
<p>Roomba iRobot <strong>Pop Up</strong> Beta <em>V1</em></p>
<div id="blanket" style="display:none;"></div>
<div id="popUpDiv" style="display:none;">
<a href="#" class="gamortva" onclick="popup('popUpDiv')" >Close</a>
<span class="popTitle">Heading!..</span>
<span class="popText">Text..</span>
Link...
</div>
Click Here To Open The Pop Up
</div>
</div>
</body>
</html>

Start loading bar on specific div javascript

I have loading bar in specific div, that is 700px from top of the page. JavaScript for loading bar is working fine, but it is triggered at the start page, and when I reach to specific div, bar is already loaded, what I want is to start loading when I reach to that div. Please, help.
JavaScript:
<script>
$('.numberprogress[data-percentage]').each(function () {
var progress = $(this);
var percentage = Math.ceil($(this).attr('data-percentage'));
$({countNum: 0}).animate({countNum: percentage}, {
duration: 5000,
easing:'linear',
step: function() {
// What todo on every count
var pct = '';
if(percentage == 0){
pct = Math.floor(this.countNum) + '%';
}else{
pct = Math.floor(this.countNum+1) + '%';
}
progress.text(pct) && progress.siblings().children().css('width',pct);
}
});
});
</script>
HTML:
<div class="middle>
<div class="progress"><div class="numberprogress" data-percentage="80"></div>
<div class="progressbar"><div class="progresspercent"></div></div></div>
</div>
CSS:
.progress{
float:left;
width:300px;
height:50px;
color:#FFF;
background-color:#38B1CC;
margin-top:5px;
border-radius:4px;
font-family: sans-serif;
text-align:center;
font-size:0.8em;
}
.numberprogress{
float:left;
height:18px;
width:18%;
color:white;
font-size:14px;
text-align:center;
background: rgba(0,0,0,0.13);
padding: 9px 0px;
border-radius:4px;
margin:5px;
}
.progressbar{
margin-left:0px;
float:right;
border-radius:10px;
margin:5px;
height:10px;
width:75%;
background: rgba(0,0,0,0.13);
margin-top:18px;
overflow: hidden;
}
.progresspercent{
height:100%;
float:left;
background-color:white;
border-radius:10px;
}
.middle{
height:600px;
width:auto;
font-family:Bizon;
}

Instead of load it on DOM ready or onload event, you should load it when it reach that specific div.
if ($(document).scrollTop() >= $('.target-div').offset().top) {
Your function
}

To add on #Syahrul answer, here is a working example:a working example
$(document).scroll(function () {
$('.numberprogress[data-percentage]').each(function () {
if ($(document).scrollTop() >= $(this).offset().top) {
animateProgress($(this));
}
});});

Box Scroldown with page

I'want that my box scroll down with my page but this script seem dosn't work her's my code:
CSS
/* Print and Download Buttons */
#box {top: 271px;}
a.print{ background:#ffffff url(images/bg-print.jpg) no-repeat top center; border:1px solid #ccc; display:block; height:24px; padding:2px;
position:absolute; right:765px; text-indent:-9999px; top:271px; width:24px; z-index:110; }
a.download{ background:#ffffff url(images/bg-download.jpg) no-repeat top center; border:1px solid #ccc; display:block; height:24px; padding:2px;
position:absolute; right:765px; text-indent:-9999px; top:300px; width:24px; z-index:111; }
a.print:hover, a.download:hover{ padding-right:12px; }
HTML Code :
<script type="text/javascript" src="_layout/js/costum.js"></script> <!--The Js file call !-->
<!-- My div Box that's i want to scroll down !-->
<div id="box">
Print CV
Download CV
</div>
And this is my costum.js
window.onload = function() {
function getScrollTop() {
if (typeof window.pageYOffset !== 'undefined' ) {
// Most browsers
return window.pageYOffset;
}
var d = document.documentElement;
if (d.clientHeight) {
// IE in standards mode
return d.scrollTop;
}
// IE in quirks mode
return document.body.scrollTop;
}
window.onscroll = function() {
var box = document.getElementById('box'),
scroll = getScrollTop();
if (scroll <= 300) {
box.style.top = "300px";
}
else {
box.style.top = (scroll + 2) + "px";
}
};
};

You have set position:absolute on the a tags not box so setting top will not affect its position. Move position to the div and it should work fine:
/* Print and Download Buttons */
#box {
position:absolute;
right:765px;
top:271px;
}
a.print {
background:#f00;
border:1px solid #ccc;
display:block;
height:24px;
padding:2px;
text-indent:-9999px;
width:24px;
z-index:110;
}
a.download {
background:#c00;
border:1px solid #ccc;
display:block;
height:24px;
padding:2px;
position:absolute;
text-indent:-9999px;
width:24px;
z-index:111;
}
a.print:hover, a.download:hover {
padding-right:12px;
}