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));
}
});});
Related
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>
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.
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>
I want the background full image on div id="img" to change whenever the page is reloaded, can this be done on pure css or javascript is required?. Here is my http://jsfiddle.net/9Dp2e/ I am using javascript with jquery to change the background image randomly, but I doesn't work using the code below, any help would be appreciated.
Here is my html:
<div id="header">
<ul>
<div id="wrapper">
<li class="logo"></li>
<li>Homes</li>
<li>Offices</li>
<li>Products</li>
<li></li>
<li></li>
</div>
</ul>
</div>
<div id="center">
<div id="slider">
<div id='footercopy'>
<p>Copyright 2014  </p>
</div>
<div id="img">
<img src="http://upload.wikimedia.org/wikipedia/commons/e/e7/Flaming_cocktails.jpg">
</div>
</body>
</html>
Here is my css:
html,body
{
height:100%;
}
body
{
font-family: 'Open Sans Condensed', sans-serif;
}
h1
{
font-size:30px;
}
#img
{
position: fixed;
top: -50%;
left: -50%;
width: 200%;
height: 200%;
}
#img img
{
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
min-width: 50%;
min-height: 50%;
}
#center
{
position:relative;
z-index:10;
top:0;
min-height:1000px;
background:white;
width:960px;
margin-right:auto;
margin-left:auto;
min-height:1000px;
padding:20px;
}
#header
{
position:relative;
z-index:20;
color:white;
position:fixed;
top:0;
width:1700px;
margin-right:auto;
margin-left:-10px;
background:silver;
opacity:0.7;
}
#wrapper
{
width:960px;
margin-right:auto;
margin-left:auto;
}
#header li
{
display:inline;
padding-right:20px;
}
.logo
{
font-family: 'Lobster', cursive;
font-size:30px;
color:blue;
}
/*content*/
#content
{
padding-top:80px;
width:500px;
}
.floatLeft
{
float:left;
margin: 4px;
}
.floatRight
{
float: right;
margin: 4px;
}
#content img
{
width:100px;
height:100px;
padding:20px;
}
.width
{
width:250px;
padding:10px 30px;
}
#sidebar
{
margin-top:50px;
float:right;
min-height:1500px;
text-align:center;
}
#sidebar img
{
width:150px;
height:150px;
}
#sidebar li
{
list-style:none;
padding:10px;
}
#content-right
{
padding-top:80px;
width:450px;
float:right;
}
#content-right img
{
width:100px;
height:100px;
padding:20px;
}
Here is my javascript:
var images = ['http://acdutyfree.com/images/Page95_LiquorAndTobacco_BombaySapphire_DistilledLondonDryGin_800x800.jpg', 'http://images.china.cn/attachement/jpg/site1007/20130621/0013729929f1132dee4303.jpg', ];
$('#header').css({'background-image': 'url(images/' + images[Math.floor(Math.random() * images.length)] + ')'});
$('<img src="http://acdutyfree.com/images/Page95_LiquorAndTobacco_BombaySapphire_DistilledLondonDryGin_800x800.jpg' + images[Math.floor(Math.random() * images.length)] + '">').appendTo('#img');
You can use this... Works Perfectly fine. Just made it up :)
This one is without jQuery. No need to load the heavy script in your page :)
//You can increase the images by adding more links to the array
var array = ['http://acdutyfree.com/images/Page95_LiquorAndTobacco_BombaySapphire_DistilledLondonDryGin_800x800.jpg','http://images.china.cn/attachement/jpg/site1007/20130621/0013729929f1132dee4303.jpg'];
function shuffle(array) {
var currentIndex = array.length;
var temporaryValue;
var randomIndex;
while (0 !== currentIndex) {
randomIndex = Math.floor(Math.random() * currentIndex);
currentIndex -= 1;
temporaryValue = array[currentIndex];
array[currentIndex] = array[randomIndex];
array[randomIndex] = temporaryValue;
}
return array;
}
var shuffled_images = shuffle(array);
var yourbackground = document.getElementById('img');
yourbackground.style.backgroundImage = 'url(' + shuffled_images[0] + ')' ;
LINK it was working with your logic , just add jquery in fiddle and increase the number of images and removed the unwanted just to check.
Math.random() between 1 and 0, will have less probability to act like random since we have only two values
Check out this tutorial: http://briancray.com/2009/12/28/simple-image-randomizer-jquery/
Start with an array of images.
Change the image filenames in the array to the actual filenames. Don't include the directory—filenames only.
<i>This is not italic</i>, and [this is not a link](http://example.com)var images = ['image1.jpg', 'image2.jpg', 'image3.jpg', 'image4.jpg', 'image5.jpg'];
Set a random background with jQuery and CSS background-image
$('#body').css({'background-image': 'url(images/' + images[Math.floor(Math.random() * images.length)] + ')'});
Try Using :
Here ,you have to use,
Math.random() with in Math.round() because,Math.round() figures your returning value to 0 and 1,so if you have only two images then Math.round() performed them well,and may not repeat any background more then once.
var images = ['http://acdutyfree.com/images/Page95_LiquorAndTobacco_BombaySapphire_DistilledLondonDryGin_800x800.jpg', 'http://images.china.cn/attachement/jpg/site1007/20130621/0013729929f1132dee4303.jpg', ];
var random = Math.round((Math.random()*images.length))
$('#background').css({'background-image':images[random]})
Try to bind 'beforeunload':
$(window).bind('beforeunload',function(){
/* change background */
});
How can you do this reading image from array of images?
read cookie value (a counter): if there is no value, save in it 0 value.
read images[count]
on 'beforeunload' save in coockie count+1 (if count > images.length -> count=0)
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;
}