Box Scroldown with page

Box Scroldown with page - javascript

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;
}

Related

How can I loop setTimeout slideshow javascript

on function start(){ my javascript I want my slideshow to be like when It start, It would wait for 2s, then It should go to (slide2) first with setTimeout(slide2, 2000); without waiting for so long with '8 second' from }, 8000);.
then It would go to (slide3) with setTimeout(slide3, 4000); (It means wait for 2s per slide) then (slide3) at the last slide, It should go back to (slide1) to star loop again.. //Code-on-JsFiddle//
or any simple way to write javascript loop you would like to suggest.
var div = document.getElementsByClassName('content')[0];
var box = document.getElementsByClassName('box')[0];
var u = -100;
function slide1(){
box.style.marginLeft = '0';}
function slide2(){
box.style.marginLeft = '-100px';}
function slide3(){
box.style.marginLeft = '-200px';}
function start() {
setTimeout(function() {
setTimeout(slide2, 2000);
setTimeout(slide3, 4000);
setTimeout(slide1, 6000);
start();
}, 8000);
}
start();
body { margin:0; padding:0;}
.content { width: 100px; height:60px; margin:5px 0px;
overflow:hidden; white-space:nowrap; background: lightgray;
display: inline-block; position: relative;
border:2px solid black; }
.box { width: 100px; height: 50px; display: inline-block;
position: relative; border:1px solid black; margin:0px;
background:lightblue; transition: all 0.5s ease; }
.button { padding:5px; border:1px solid black; background:pink;
display:inline-block; }
<body>
<div class='content'>
<div class='box'>1</div>
<div class='box'>2</div>
<div class='box'>3</div>
</div>
<br/>
<div class='button' onclick='slide1();'>1</div>
<div class='button' onclick='slide2();'>2</div>
<div class='button' onclick='slide3();'>3</div>
</body>

I think your approach with multiple functions is not a good idea. Keeping as much of your code as possible, this re-write is a lot more expandable.
var div = document.getElementsByClassName('content')[0];
var box = document.getElementsByClassName('box')[0];
var u = -100;
var slideIdx = 0;
var delay;
function slide(idx){
//console.log("slide, slideIdx:["+ slideIdx +"], idx:["+ idx +"]");
if (delay){
clearTimeout(delay);
delay=null;
}
if (idx){
slideIdx = (idx > 2) ? 0 : idx;
} else {
slideIdx++;
}
slideIdx = (slideIdx > 2) ? 0 : slideIdx;
box.style.marginLeft = (-100 * slideIdx) +"px";
delay = setTimeout(slide,2000);
}
delay = setTimeout(slide,2000);
.content {box-sizing:border-box;width:100px;height:60px;margin:5px 0px;
overflow:hidden;white-space:nowrap;background:lightgray;
display:inline-block;position:relative;border:2px solid black}
.box {box-sizing:border-box;width:100px;height:50px;display:inline-block;position:relative;
border:1px solid black;margin:0px;background:lightblue;
transition: all 0.5s ease}
.button { padding:5px; border:1px solid black; background:pink;
display:inline-block;}
<body>
<div class='content'><div
class='box'>1</div><div class='box'>2</div><div
class='box'>3</div></div>
<br/>
<div class="button" onclick="slide(0)">1x</div>
<div class="button" onclick="slide(1)">2x</div>
<div class="button" onclick="slide(2)">3x</div>
</body>

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>

Expanding search bar does not search after closing and reopening it, Jquery

I'm creating an expanding search bar.
I'm using this demo as a base : http://codepen.io/nikhil/pen/qcyGF/
The searchbar works if you open it, write something in the input and then click on the button again
but if you open it, write something in the input, close it by clicking outside of the search bar then open it again; clicking on the button will just close the searchbar again. How can I change the code in a way that if I close and reopen the searchbar it'll search on another click on the button ?
HTML:
<div class="container">
<form class="searchbox">
<input type="search" placeholder="Search......" name="search" class="searchbox-input" onkeyup="buttonUp();" required>
<input type="submit" class="searchbox-submit" value="GO">
<span class="searchbox-icon">GO</span>
</form>
Detailed tutorial on TheCodeBlock
CSS:
body{
background:#475f77;
}
.container{
width:600px;
margin:50px auto;
}
.searchbox{
position:relative;
min-width:50px;
width:0%;
height:50px;
float:right;
overflow:hidden;
-webkit-transition: width 0.3s;
-moz-transition: width 0.3s;
-ms-transition: width 0.3s;
-o-transition: width 0.3s;
transition: width 0.3s;
}
.searchbox-input{
top:0;
right:0;
border:0;
outline:0;
background:#dcddd8;
width:100%;
height:50px;
margin:0;
padding:0px 55px 0px 20px;
font-size:20px;
color:red;
}
.searchbox-input::-webkit-input-placeholder {
color: #d74b4b;
}
.searchbox-input:-moz-placeholder {
color: #d74b4b;
}
.searchbox-input::-moz-placeholder {
color: #d74b4b;
}
.searchbox-input:-ms-input-placeholder {
color: #d74b4b;
}
.searchbox-icon,
.searchbox-submit{
width:50px;
height:50px;
display:block;
position:absolute;
top:0;
font-family:verdana;
font-size:22px;
right:0;
padding:0;
margin:0;
border:0;
outline:0;
line-height:50px;
text-align:center;
cursor:pointer;
color:#dcddd8;
background:#172b3c;
}
.searchbox-open{
width:100%;
}
.byline{
position:absolute;
top:150px;
left:30%;
text-align:center;
font-size:18px;
}
.byline a{
text-decoration:none;
color: #d74b4b;
}
Jquery :
$(document).ready(function(){
var submitIcon = $('.searchbox-icon');
var inputBox = $('.searchbox-input');
var searchBox = $('.searchbox');
var isOpen = false;
submitIcon.click(function(){
if(isOpen == false){
searchBox.addClass('searchbox-open');
inputBox.focus();
isOpen = true;
} else {
searchBox.removeClass('searchbox-open');
inputBox.focusout();
isOpen = false;
}
});
submitIcon.mouseup(function(){
return false;
});
searchBox.mouseup(function(){
return false;
});
$(document).mouseup(function(){
if(isOpen == true){
$('.searchbox-icon').css('display','block');
submitIcon.click();
}
});
});
function buttonUp(){
var inputVal = $('.searchbox-input').val();
inputVal = $.trim(inputVal).length;
if( inputVal !== 0){
$('.searchbox-icon').css('display','none');
} else {
$('.searchbox-input').val('');
$('.searchbox-icon').css('display','block');
}
}

The code base just opens and closes the search bar
submitIcon.click(function(){
if(isOpen == false){
searchBox.addClass('searchbox-open');
inputBox.focus();
isOpen = true;
} else {
searchBox.removeClass('searchbox-open');
inputBox.focusout();
isOpen = false;
}
});
I would change the else (search bar open) code to do the search.

Draw rectangle inside an IFrame

I want to draw a draggable and resizable rectangle/box on an IFrame instead of Canvas or div, How can i go with this?
Currently i am working with the jsFiddle example below with link
I used this Js fiddle example
jQuery(function($) {
var welcome_area = $('.inner_col_two'),
main_content = $('.col_two'),
css_module = $('.inner_col_one'),
gen_box = null,
i = 1;
//fade out welcome button and remove it
$('.start-button').click(function() {
welcome_area.fadeOut('slow', function() {
$(this).remove();
//when welcome button is removed fade in the css module and make .col_two selectable
//css_module.fadeIn('slow').resizable().draggable();
}); //end start button fade callback function
});//end start button click
//make .col_two selectable and...
main_content.selectable({
start: function(e) {
//get the mouse position on start
x_begin = e.pageX,
y_begin = e.pageY;
},
stop: function(e) {
//get the mouse position on stop
x_end = e.pageX,
y_end = e.pageY;
/*** if dragging mouse to the right direction, calcuate width/height ***/
if( x_end - x_begin >= 1 ) {
width = x_end - x_begin,
height = y_end - y_begin;
/*** if dragging mouse to the left direction, calcuate width/height (only change is x) ***/
} else {
width = x_begin - x_end,
height = y_end - y_begin;
var drag_left = true;
}
//append a new div and increment the class and turn it into jquery selector
$(this).append('<div class="gen_box_' + i + '"></div>');
gen_box = $('.gen_box_' + i);
//add css to generated div and make it resizable & draggable
$(gen_box).css({
'background' : '#fff',
'width' : width,
'height' : height,
'position' : 'absolute',
'left' : x_begin,
'top' : y_begin
})
.draggable({ grid: [20, 20] })
.resizable({
stop: function(event, ui) {
var secondwidth = ui.size.width;
alert('Resized width: '+secondwidth);
var secondheight = ui.size.height;
alert('Resized Height: '+secondheight);
}
});
var current_box_width = width;
alert('Box width = '+current_box_width);
var current_box_height = height;
alert('Box height = '+current_box_height);
var x = $(gen_box).position();
alert("Top position: " + x.top + " Left position: " + x.left);
//if the mouse was dragged left, offset the gen_box position
drag_left ? $(gen_box).offset({ left: x_end, top: y_begin }) : false;
console.log( 'width: ' + width + 'px');
console.log( 'height: ' + height + 'px' );
//add thr styles of generated div into .inner_col_one
i++;
}});
});
html {
height:100%;
width:100%;
}
body {
background:#ccc;
height:101%;
width:101%;
}
h3 {
font:bold 20px georgia, serif;
}
#wrapper {
width:100%;
height:100%;
margin:0 auto;
overflow:hidden;
}
/* --------- col_one elements(stylesheet) --------- */
.col_one {
height:100%;
width:18%;
background:#ffe3ac;
min-width:1px;
position:absolute;
bottom:0px;
right:0px;
}
.inner_col_one {
margin:10px;
padding:20px;
min-height:200px;
background:white;
-webkit-border-radius:10px;
-moz-border-radius:10px;
border-radius:10px;
-webkit-box-shadow:0 0 7px -1px #999;
-moz-box-shadow:0 0 7px -1px #999;
box-shadow:0 0 7px -1px #999;
display:none;
position:absolute;
overflow:hidden;
}
.button.dl-css {
float:left;
margin:0 auto;
display:block;
}
/* --------- col_two elements(Create divs) --------- */
.col_two {
background:#ffe3ac;
float:left;
height:100%;
position;
relative;
width:100%;
}
.inner_col_two {
border:1px dashed black;
width:40%;
margin:13% auto;
text-align:center;
background:white;
-webkit-border-radius:10px;
-moz-border-radius:10px;
border-radius:10px;
-webkit-box-shadow:0 0 7px -1px #999;
-moz-box-shadow:0 0 7px -1px #999;
box-shadow:0 0 7px -1px #999;
}
/* ------------ generic styles ------------ */
.full-width {
width:100%;
}
/* box styles */
.ui-resizable {
-webkit-border-radius:10px;
-moz-border-radius:10px;
border-radius:10px;
}
.ui-resizable.ui-resizable-resizing, .ui-resizable.ui-draggable-dragging {
border:2px dashed #ffcc66 !important;
}
.selected {
background:#ffffff;
}
/* prettify styles */
.prettyprint {
border:none !important;
font: 16px 'Courier New', Courier, monospace;
}
/* generated content */
#canvas {
height: 500px;
background: white;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/prettify/188.0.0/prettify.js"></script>
<div id="wrapper">
<div class="col_one css">
<div class="inner_col_one"></div>
</div>
<div class="col_two">
<!--<div class="inner_col_two">
<input type="button" value="Create a div" class="start-button"/>
</div>-->
</div>
</div>

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));
}
});});

Develop Reference

JavaScript is the programming language of the Web.

Box Scroldown with page - javascript

Related

How can I loop setTimeout slideshow javascript

How can the pop up load seconds after the page load

Expanding search bar does not search after closing and reopening it, Jquery

Draw rectangle inside an IFrame

Start loading bar on specific div javascript

Categories

Resources