I drew an image in HTML out of div boxes. I'm not very fluent with JavaScript, I am trying to display one div at a time like a building image. What would be a good JavaScript equation to display each div one at a time like a flash movie without rewriting my code? I have access to Dreamweaver if that would make anything easier. Here is a small piece of my image:
<html>
<head>
<style type="text/css">
</head>
#apDiv6101 {
position:absolute;
width:131px;
height:81px;
z-index:35;
left:119px;
top:785px;
background-color:#80d010;}
#apDiv6102 {
position:absolute;
width:9px;
height:8px;
z-index:45;
left:119px;
top:858px;
background-color:#80d010;}
#apDiv6104 {
position:absolute;
width:9px;
height:8px;
z-index:45;
left:241px;
top:858px;
background-color:#80d010;}
#apDiv6106 {
position:absolute;
width:9px;
height:8px;
z-index:45;
left:241px;
top:785px;
background-color:#80d010;}
#apDiv6108 {
position:absolute;
width:9px;
height:8px;
z-index:45;
left:119px;
top:785px;
background-color:#80d010;}
#apDiv6110 {
position:absolute;
width:121px;
height:73px;
z-index:40;
left:124px;
top:789px;
background-color:#000000;}
</style>
<body bgcolor="#000000">
<div id="apDiv6110"></div>
<div id="apDiv6108"></div>
<div id="apDiv6106"></div>
<div id="apDiv6104"></div>
<div id="apDiv6102"></div>
<div id="apDiv6101"></div>
</body>
</html>
This page hides all divs, and then stepwise, displays one at a time until all divs in the document are displayed.
http://jsfiddle.net/fFtZc/2/
The JS code:
var current = 0, L, alldivs;
function displayOne() {
if (current < L) {
alldivs[current].style.display = '';
current++;
setTimeout(displayOne, 750);
}
}
function init() {
var i;
alldivs = document.getElementsByTagName('div');
for (i=0, L=alldivs.length; i<L; i++) {
alldivs[i].style.display='none';
}
setTimeout(displayOne, 750);
}
if (document.addEventListener) {
document.addEventListener("DOMContentLoaded", init, false);
}
else {
/* for other browsers */
window.onload = init;
}
As far as i understand you want the images to appear one after the another.
and you want only one image to appear at once(hide the previous one)
the code for that would be .
(assuming Jquery is used)
var img_arr = ['appDiv6101','appDiv6102'....,'appDiv6110'];
var i =0;
function cycleImages(){
// hide all the divs
$('div#^appDiv').hide();
//now show the apppropiate div
i = i++ % 12;
$('div#'+img_arr[i-1]).show();
// wait for sometime and call again.
setTimeout(cycleImages,30);
}
Related
I have a div id="coding" set on height:300px on CSS.
when I click another div id="menu", I want #coding to change it's height to 800px. I managed to do that like this
<script>
function changec() {
document.getElementById('coding').style.height = "800px";
}
</script>
Now, when click the #menu again, I want the height to get back to it's original 300px value. Can someone help? The code is:
HTML
<div id="coding">
<div id="menu" onclick="changec()">≡</div>
...
</div>
CSS
#coding{
...
height:300px;
}
Simple check if the value is set - remove it (then CSS height will take over).
function changec() {
var xDiv = document.getElementById('coding');
if (xDiv.style.height == '')
xDiv.style.height = '800px'
else
xDiv.style.height = ''
}
Demo: http://jsfiddle.net/ygalanter/BLE6N/
one of the solution for your problem is as follows:
First count how many times you click on #menu
now depending on your expectation you can change the javascript as follows
<script type="text/javascript">
var count = 0;
function changec() {
count++;
if(count%2==1)
document.getElementById("coding").style.height = "800px";
else
document.getElementById("coding").style.height = "300px";
}
</script>
Another alternative solution is
<script type="text/javascript">
function changec() {
var currentheight = document.getElementById('coding').clientHeight;
if (currentheight == 300)
document.getElementById('coding').style.height = "800px";
else if (currentheight == 800)
document.getElementById('coding').style.height = "300px";
}
</script>
Not sure why you tagged jQuery since you didn't use it, but still...Considering the possibility that you are willing to use/learn it, I created a jsFiddle for it: http://jsfiddle.net/Tm2Hd/.
CSS:
#coding{
border:1px solid black; /*optional: Keep track of your div's expand*/
height:300px;
}
#coding.larger{
height:800px;
}
JS:
function changeHeight() {
if($('#coding.larger').length>0)
{
$('#coding').removeClass("larger");
}
else
{
$('#coding').addClass("larger");
}
}
HTML
<div id="coding">
<!--<div onclick="changeHeight()">≡</div>
Personally, I don't suggest using divs as clickable objects... Why don't you use buttons instead?
-->
<button onclick="changeHeight()">≡</button>
...
</div>
My solution to your problem is: Create a new class named larger, pointing to your div, and toggle between this and the original whenever you click the button.
I made a div and a button. Made a function that changes the opacity of the div in JavaScript.
Then I made an array of opacities and a for loop and kept the opacity that I want on each loop. But I don't know what is wrong?
Please don't give me suggestions like I should use jQuery or some other library. I want to do it in JavaScript!(without any library)
Here see my code:-
<!DOCTYPE html>
<html>
<head>
<link rel="icon" type="image/jpg" href="http://s3images.coroflot.com/user_files/individual_files/original_240004_eFk2sUc1K3KyXWz60vHrALo5H.jpg">
<title>JavaScript</title>
<style>
body
{
font-family:ebrima;
color:black;
}
#box
{
height:100px;
width:100px;
background:red;
opacity:1;
}
</style>
</head>
<body id="mainBody">
<div id="box"></div>
<button type="button" id="b" onClick="lessTheOppacity()">OPACITY</button>
<script>
function lessTheOppacity()
{
var box = document.getElementById("box");
var oppArray = ["0.9", "0.8", "0.7", "0.6", "0.5", "0.4", "0.3", "0.2", "0.1", "0"];
for (var x = 0; x < 10;x++)
{
box.style.opacity=oppArray[x];
}
}
</script>
</body>
</html>
function lessTheOppacity()
{
var box = document.getElementById("box");
var oppArray = ["0.9", "0.8", "0.7", "0.6", "0.5", "0.4", "0.3", "0.2", "0.1", "0"];
var x = 0;
(function next() {
box.style.opacity = oppArray[x];
if(++x < oppArray.length) {
setTimeout(next, 100); //depending on how fast you want to fade
}
})();
}
Explanation:
(1) next is a function that will advance us to the next opacity. I chose its name arbitrarily.
(function next() {
...
})();
defines the function and then calls it immediately.
(2) ++x means "increase the value of x by one and give me that value". We use it to increment x and to check whether we need to continue fading the element.
(3) We want the fade to happen gradually, over time. Yours happens all at once, so the user only sees the last one, "0.0".
Here, the setTimeout waits 100 milliseconds before calling the next function and going to the next opacity.
See setTimeout documentation for more info.
Futher notes:
A more flexible approach would be to allow the fade time to vary, and to calculate the steps accordingly, not always having ten, or to have a non-linear fade. But that is more complicated, and it is why people usually use jQuery.
// this does a linear fade
function fade(element, duration) {
var start = new Date;
(function next() {
var time = new Date - start;
if(time < duration) {
box.style.opacity = 1 - time / duration;
requestAnimationFrame(next);
} else {
box.style.opacity = '0';
}
})();
}
JSFiddle
Also, if you can depend on the browser supporting CSS3 transitions, I would look into doing it that way. It is cleaner and generally preferred.
You can't. But you can use jQuery instead JavaScript
<!DOCTYPE html>
<html>
<head>
<link rel="icon" type="image/jpg" href="http://s3images.coroflot.com/user_files/individual_files/original_240004_eFk2sUc1K3KyXWz60vHrALo5H.jpg">
<title>JavaScript</title>
<style>
body
{
font-family:ebrima;
color:black;
}
#box
{
height:100px;
width:100px;
background:red;
opacity:1;
}
</style>
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
</head>
<body id="mainBody">
<div id="box"></div>
<input type="button" class="opacity" value="opacity" />
<script>
$(".opacity").click(function () {
$('#box').toggle("slow");
});
</script>
</body>
</html>
It's more easy. You can use toggle(), slideToggle() or fadeToggle() functions for animations.
Don't iterate through an array of values that you can easily calculate. This should show you how it works:
var opacity = 1;
function lto() {
var box = document.getElementById('box');
opacity -= 0.1;
if (opacity < 0)
{opacity = 1; return;}
box.style.opacity = opacity;
setTimeout(lto, 100);
}
In your case, you run from full opacity to transparent without the browser getting even a chance to draw it anew. So instead of the function above, use some asynchronous event ( setTimeout(…)) to actually call the lto function
I am fairly inexperienced with Javascript, but I've been struggling with something that doesn't feel like it should be this hard. I'm trying to have my script check an image that has been loaded to see if it's valid (Not a missing file), and if it is missing, to reset the image array to item 0 and repeat, as I can assume it has reached the end of available images in the dir when it encountered a missing file.
I need to reserve several hardcoded image names in a local directory for a slideshow display, but in the event there are more reserved names than images, I need it to reset rather than display broken images.
I cannot make use of PHP or HTML5 for a more straightforward and dynamic solution. I've tried several attempts and I'm just out of ideas here. Any help would be appreciated. Thank you.
<!DOCTYPE html>
<html>
<head>
<title>Monitor Display<title>
<script src="jquery-1.10.2.min.js"></script>
<base href="file://c:/LocalDir/"/>
<!-- CSS -->
<style>
.images {
position:relative; margin:-8px; max-width:100%; height:auto;}
.images img {
position:absolute; left:0; top:0; margin:-8px; max-width:100%; height:auto;}
body {
background-color:rgb(51,51,51);}
</style>
</head>
<body>
<!-- Animation -->
<script>
$(document).ready(function(){
changeImage();
});
function changeImage() {
var img = $('.images img');
if(x >= (images.length-1)) {
x = 0;
}
else
{
x++;
}
img[0].src = images[x];
setTimeout("changeImage()", 5000);
}
var images = [],
x = 0;
images[0] = "ThumbChart0big.png";
images[1] = "ThumbChart1big.png";
images[2] = "ThumbChart2big.png";
images[3] = "ThumbChart3big.png";
</script>
<!-- Image Container -->
<div class="images">
<img src="ThumbChart1big.png"/>
</div>
</body>
</html>
you can use .error() :
....
var x = 0;
function changeImage() {
var img = $('.images img');
img.error( function() {
x = 0; // reset the array index
});
//continue...
I am trying to load an alert that redirects to another page, but the problem is the background of the page doesn't load. The only html to be rendered is the javascript alert. Any idea how to fix this so that at least some of the html loads before the alert?
also tried
var onFooEndFunc = function()
{
var delay = 50; /* milliseconds - vary as desired */
var executionTimer;
return function()
{
if (executionTimer)
{
clearTimeout(executionTimer);
}
executionTimer = setTimeout(function()
{
window.alert('Please download a game');
window.location.href='games.html';
}, delay);
};
}();
Since you've tagged using jQuery, you could do this:
$(document).ready(function(){
window.alert('Please download a game')
window.location.href='games.html';
});
Or natively:
window.onload=function(){
window.alert('Please download a game')
window.location.href='games.html';
};
Popup is what you need
just set a div
<div id="popup_download">
Please download a game!
Mario
Sonice Rider
</div>
at style set display:hidden
#popup_download
{
position:absolute;
display:none;
top:200px;
left:50%;
width:500px;
margin-left:-250px;
border:1px solid blue;
padding:20px;
background-color:white;
}
when page is loaded just set display:block
<script type="text/javascript">
function show_popup()
{
document.getElementById('popup_download').style.display = 'block';
}
window.onload = show_popup;
</script>
The benefit of it is you can add any HTML elements,css and even php or asp or any code inside and your background will continue working.
I am using javascript to periodically replace a .png picture, which ist viewed fullscreen as the only content of a site. No matter how I try, in Firefox, after being loaded (as seen via firebug), the new image is always drawn from top to bottom. This takes some seconds. Is there any way to prevent this and show the picture all at once?
This is my current javascript code:
function preloadScreenshotPeriodically(){
var new_screenshot = new Image();
new_screenshot.src = "screenshot.png?defeat_firefox_caching=" + counter;
new_screenshot.id = "screenshot";
counter = counter + 1;
new_screenshot.onload = function(){
loadScreenshot(new_screenshot);
setTimeout("preloadScreenshotPeriodically();", 5000);
};
}
function loadScreenshot(new_screenshot){
document.getElementById("screenshot").parentNode.replaceChild(new_screenshot, document.screenshot);
}
I also tried to use two images, one of them hidden. Then loading the picture in the hidden one and swapping them. Same results :/
In an other version, I fetched the image with Ajax and after loading is complete, changed the url of the img-tag. My hope was, that the browser would recognize the picture had already been loaded and fetch it from the browsercache rather than loading it. But this didn't happen and I ended up with two requests to the server for one picture and the same slow drawing of it as in my other trys.
edit:
Now I tried it like suggested in answer 1. While it works just fine if I switch the picture when I load the next one (I don't want this), trying to switch it as soon as it is loaded (what I want) results in a blank window (very short) and visible loading of the picture as described above.
this works:
<body>
<style type="text/css">
#loaderWin { display:block; height:1px; width:1px; overflow:hidden; }
</style>
<div id="imagewin"></div>
<div id="loaderWin"></div>
<script type="text/javascript">
var screenshotCount=0;
function showFirstImage() {
loadNextImage();
}
function showNewImage() {
loadNextImage();
}
function nextImageLoaded() {
// swapImage();
}
function loadNextImage() {
swapImage();
screenshotCount = screenshotCount +1;
var nextImage = "<img id='loaderWinImg' src='screenshot.png?x="+screenshotCount+"' onload='nextImageLoaded()' />";
document.getElementById('loaderWin').innerHTML = nextImage;
}
function swapImage() {
document.getElementById("loaderWinImg").onload = '';
var newimage=document.getElementById('loaderWin').innerHTML;
document.getElementById('imagewin').innerHTML = newimage;
}
var showImages = setInterval("showNewImage()",15000);
showFirstImage();
</script>
</div>
</body>
</html>
this doesn't work:
<body>
<style type="text/css">
#loaderWin { display:block; height:1px; width:1px; overflow:hidden; }
</style>
<div id="imagewin"></div>
<div id="loaderWin"></div>
<script type="text/javascript">
var screenshotCount=0;
function showFirstImage() {
loadNextImage();
}
function showNewImage() {
loadNextImage();
}
function nextImageLoaded() {
swapImage();
}
function loadNextImage() {
screenshotCount = screenshotCount +1;
var nextImage = "<img id='loaderWinImg' src='screenshot.png?x="+screenshotCount+"' onload='nextImageLoaded()' />";
document.getElementById('loaderWin').innerHTML = nextImage;
}
function swapImage() {
// loadNextImage();
document.getElementById("loaderWinImg").onload = '';
var newimage=document.getElementById('loaderWin').innerHTML;
document.getElementById('imagewin').innerHTML = newimage;
}
var showImages = setInterval("showNewImage()",15000);
showFirstImage();
</script>
</div>
</body>
</html>
The problem can be seen here (in firefox problem like described above, in chrome there are no pauses between pictureloads and there is a blank window in between picture changes): http://sabine-schneider.silbe.org:1666/test.html
And here, what Rob suggested in answer 1 without any changes (displays the picture fine in firefox, but not in chrome - there I get a blank window in between picture changes): http://sabine-schneider.silbe.org:1666/test0.html
sounds like the image is "progressive" ( interlaced) and the preload needs more time for it to complete download.
You can set a width and height to the image also for a more stable presentation
( poss )
using
?defeat_firefox_caching=" + counter;
means you never cache the image ( which has confused me about your question ) - remove that line( unless you need it for something you haven't mentioned)
update: Can you try ...
<style type="text/css">
#loaderWin { display:block; height:1px; width:1px; overflow:hidden; }
</style>
<div id="imagewin"></div>
<div id="loaderWin"></div>
<script type="text/javascript">
var screenshotCount=0;
function showNewImage() {
screenshotCount = screenshotCount +1;
var newimage=document.getElementById('loaderWin').innerHTML;
document.getElementById('imagewin').innerHTML = newimage;
var nextImage = "<img src='screenshot.png?defeat_firefox_caching="+screenshotCoun+"'/>";
document.getElementById('loaderWin').innerHTML = nextImage;
}
var showImages = setInterval("showNewImage()",5000);
</script>