I try to make a progress bar with bootstrap css on images loading. For this, I use the following script :
<html>
<head>
<link href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css" rel="stylesheet"/>
<script type="text/javascript">
var n=0;
var c=0;
$('img').each(function() {
n++;
var tmpImg = new Image() ;
tmpImg.src = $(this).attr('src') ;
tmpImg.onload = function() {
c++;
};
});
var interval = setInterval(function() {
percent = n/100;
loaded = c/percent;
// for displaying purposes
setBar(getBar()+50)
// feed loaded var to the progressbar
if (loaded == 100) {
clearInterval(interval);
}
}, 1);
function setBar(n) {
var bar = document.getElementById('fabbar');
bar.style.width = n+'%';
}
function getBar() {
var bar = document.getElementById('fabbar');
return parseInt(bar.style.width);
}
</script>
</head>
<body>
<div class="progress progress-info progress-striped active">
<div class="bar" id='fabbar' style="width: 20%"></div>
</div>
But this doesn't work, i.e the progress bar doesn't progress. How could I do that ?
Try this (demo):
$(function () {
var n = 0,
$imgs = $('img'),
val = 100 / $imgs.length,
$bar = $('#fabbar');
$imgs.load(function () {
n = n + val;
// for displaying purposes
$bar.width(n + '%').text(n + '%');
});
});
Related
I'm pretty new to Javascript and im trying to build slideshow myself now. Only im stuck right now after i build the array where i get my pictures from. It only shows a white screen.
My Javascript
$(function () {
var counter = 0;
var defaultSettings = {
"sliderContainer": "#slider"
, "pauseWithMouse": true
, "sliderSpeed": 2000
, "transitionSpeed": 1500
};
function cycleImages() {
counter++;
if (counter >= images.Length) {
counter = 0;
}
document.getElementById("#slider img").src = MyImages[counter];
var images = $('#slider img')
, now = images.filter(':visible')
, next = now.next().length ? now.next() : images.first()
, speed = 1500; //Transition speed
now.fadeOut(speed);
next.fadeIn(speed);
}
var theInterval; // Slide speed
var = images = [];
// if myImages exists then
images = myImages;
if (images.length > 0) {
$(defaultSettings.sliderContainer).append('<img id="sliderImage" src="' + images[0] + '" />');
startSlide();
}
var startSlide = function () {
setInterval(cycleImages, defaultSettings.sliderSpeed); // Set interval
};
var stopSlide = function () {
if (defaultSettings.pauseWithMouse) {
clearInterval(theInterval);
}
};
startSlide();
$('#slider img').on('mouseover', function () {
stopSlide();
});
$('#slider img').on('mouseout', function () {
startSlide();
});
});
And my HTML:
<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<title>Javascript Slider</title>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<link rel="stylesheet" href="css/style.css">
<script src="js/slideshow.js"></script>
<script>
var myImages = ["slide1.jpg", "slide2.jpg", "bg/slide3.jpg"];
</script>
</head>
<body>
<main>
<div id="slider">
</div>
</main>
</body>
</html>
you have strange declaration of variable here
var = images = [];
also you need to move this part
var startSlide = function() {
setInterval(cycleImages, defaultSettings.sliderSpeed); // Set interval
};
before
if (images.length > 0) {
$(defaultSettings.sliderContainer).append('<img id="sliderImage" src="' + images[0] + '" />');
startSlide();
}
you have wrong variable name (MyImages) here
document.getElementById("#slider img").src = MyImages[counter];
first try to debug your code
I want to use an animation of counting number with coin flip effect, means with my number count i want to flip my circle horizontally 360 deg.
I am using below code for it :
kindly help! Thanks in advance
(function ($) {
$.fn.CountUpCircle = function(options){
var self = this;
var settings = $.extend({
duration: 1000 //ms
}, options);
var toCount = parseInt(this.html());
console.log("Count up to " + toCount);
var i = 0;
var step = settings.duration / toCount;
console.log("Step duration " + step);
var displayNumber = function() {
i++;
self.html(i);
if (i < toCount) {
setTimeout(displayNumber, step);
}
};
displayNumber();
}
}(jQuery));
$(document).ready(function(){
$('#count-box').CountUpCircle({
duration: 1500
});
});
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<link href="http://www.jqueryscript.net/css/jquerysctipttop.css" rel="stylesheet"/>
<link href="http://www.jqueryscript.net/demo/Minimal-jQuery-Count-Up-Plugin-CoutUpCircle/css/style.css" rel="stylesheet"/>
<div id="jquery-script-menu">
<h1 style="margin-top:150px; color:#fff;" align="center">CountUpCircle jQuery Plugin Demo</h1>
<div id="count-box">23</div>
</div>
I have a progress bar with Bootstrap, CSS and jQuery. Everything works fine but I would like this bar disappears when all images are loaded.
For this I tried to put in the following script a:
if(n==100) { $('#fabbar').hide(); }
Here's the script :
$(function () {
var n = 0,
$imgs = $('img.gallery'),
val = 100 / $imgs.length,
$bar = $('#fabbar');
$imgs.load(function () {
n = n + val;
// for displaying purposes
$bar.width(n + '%').text(n + '%');
});
if(n==100) { $('#fabbar').hide(); }
});
and into my body, I have :
<div class="progress progress-info progress-striped active">
<div class="bar" id='fabbar' style="width: 20%">0%</div>
</div>
<img class="gallery" src="images/1.jpg">
<img class="gallery" src="images/2.jpg" >
<img class="gallery" src="images/3.jpg" >
<img class="gallery" src="images/4.jpg" >
...
Use WaitforImages jquery plugin for that:
https://github.com/alexanderdickson/waitForImages
Here is how it should work:
$(function () {
var n = 0,
$imgs = $('img'),
val = 100 / $imgs.length,
$bar = $('#fabbar');
$imgs.load(function () {
n = n + val;
// for displaying purposes
$bar.width(n + '%').text(n + '%');
});
});
$('body').waitForImages(function() {
// All descendant images have loaded, now hide the progress bar.
$(".bar_wrap").fadeOut();
});
Check out the demo((click the run button))
http://jsfiddle.net/yphM4/24/
Should work:
$(function () {
var n = 0,
$imgs = $('img.gallery'),
val = 100 / $imgs.length,
$bar = $('#fabbar');
$("img").one('load', function () {
n = n + val;
// for displaying purposes
$bar.width(n + '%').text(n + '%');
n === 100?$('#fabbar').hide():false;
}).each(function () {
if (this.complete) $(this).load();
});
});
I have an image slideshow which will work in any other browser I try but not in IE - it just does nothing but display the primary image. Please could someone tell me I not going mad and it is a simple fix that I can't see.
Many thanks
Mickeyjay.
Code below:
<div id="image_slide"><img src="images/.......jpg" id="slideit" name="slideit" border="0">
<script type="text/javascript">
var dimages=new Array();
var numImages=3;
dimages[0]=new Image();
dimages[0].src="images/.......jpg";
dimages[1]=new Image();
dimages[1].src="images/.......jpg";
dimages[2]=new Image();
dimages[2].src="images/.......jpg";
var curImage=-1;
function swapPicture()
{
if (document.images)
{
var nextImage=curImage+1;
if (nextImage>=numImages)
nextImage=0;
if (dimages[nextImage] && dimages[nextImage].complete)
{
var target=0;
if (document.images.slideit)
target=document.images.slideit;
if (document.all && document.getElementById("slideit"))
target=document.getElementById("slideit");
if (target)
{
target.src=dimages[nextImage].src;
curImage=nextImage;
}
setTimeout("swapPicture()", 1500);
}
else
{
setTimeout("swapPicture()", 150);
}
}
}
setTimeout("swapPicture()", 1500);
</script>
Try this simplified test, the idea is to load your pictures before start to swap, and will not need to test .complete that way.
<html>
<head>
<title>Example</title>
</head>
<body>
<div id="image_slide"><img src="intro.jpg"
id="slideit" name="slideit" border="0"></div>
<script type="text/javascript">
var curImage = -1;
var numImages = 2;
var dimages = new Array();
function loadPictures()
{
dimages[0] = new Image();
dimages[0].src = "test1.jpg";
dimages[1] = new Image();
dimages[1].src = "test2.jpg";
setTimeout(swapPicture, 3000);
}
function swapPicture()
{
var nextImage = curImage + 1;
if (nextImage >= numImages)
nextImage = 0;
document.images.slideit.src = dimages[nextImage].src;
curImage = nextImage;
setTimeout(swapPicture, 1500);
}
setTimeout(loadPictures, 1500);
</script>
</body>
</html>
I'm trying to have a function that does setTimeout, then changes the innerHTML:
<script type="text/javascript">
$(document).ready(function(){
setTimeout(function(){
document.getElementById("middlecolor").innerHTML='new text new text';
}, 1000);
});
</script>
Question: How could I animate the new text that appears, i.e. line by line as opposed to being written all at once?
Thanks for any suggestions!!
Try something like this:
<div id="text">
</div>
$(document).ready(function () {
var interval = setInterval(function () {
$('#text').append('<p style="display: none;">new text</p>');
$('#text p:last').fadeIn('slow');
}, 5000);
});
See the example here
If you want to kill the interval, can be doing this:
clearInterval(interval);
Greatings.
Line-by-line is a bit tricky, but possible.
var ps = document.getElementById("text").children;
var i = 0;
var $p = $(ps[i]);
setTimeout(function newline(){
$p.css("height", function(index, h){
h = parseInt(h);
h += parseInt($p.css("line-height"));
console.log(h, ps[i].scrollHeight);
if (h > ps[i].scrollHeight)
$p = $(ps[++i]);
return h;
});
if (i < ps.length)
setTimeout(newline, 200);
}, 200);
I'd suggest to use a typewriter effect, which is also very likable: http://jsfiddle.net/pZb8W/1/
var ps = document.getElementById("text").children;
var i = 0;
var $p, text;
var speed = 20;
setTimeout(function newchar(){
if (!text) {
$p = $(ps[i++]);
text = $p.text();
$p.empty().show();
}
$p.append(document.createTextNode(text.charAt(0)));
text = text.slice(1);
if (text.length || i < ps.length)
setTimeout(newchar, Math.random()*speed+speed);
}, 3*speed);
Here's a function that would animate in multiple lines of text, one after the other:
<script type="text/javascript">
$(document).ready(function(){
function animateAddText(id, text, delta) {
var lines = text.split("\n");
var lineCntr = 0;
var target = $("#" + id);
function addLine() {
if (lineCntr < lines.length) {
var nextLine = "";
if (lineCntr != 0) {
nextLine = "<br>";
}
nextLine += lines[lineCntr++];
$("<span>" + nextLine + "</span>").hide().appendTo(target).fadeIn(1000);
setTimeout(addLine, delta);
}
}
addLine();
}
var multilineText = "First line\nSecond Line\nThird Line\nFourth Line\nFifth Line";
animateAddText("middlecolor", multilineText, 1000);
});
</script>
And a working demo: http://jsfiddle.net/jfriend00/Gcg5T/