I wasn't sure how to correctly word the title, but here's what I have going on. I have two images in the body of the html.
<img src="http://www.narm.org.uk/home/images/Daylight%20design.jpg" id="b1" alt="day" />
<img src="http://www.aphoenix.ca/photoblog/photos/NighttimeColours.jpg" id="b2" alt="night" />
The corresponding css is as follow (basically makes one of them the background):
#b1, #b2 {
width: 100%;
height: 100%;
z-index: -1;
position: absolute;
}
Here is the javascript:
window.onload = function() {
setBackground();
}
function setBackground() {
var back1 = $('#b1').hide();
var back2 = $('#b2').hide();
//setTimeout(function() {setBackground()}, 1000);
}
What currently happens now is that one image will display briefly because I"m waiting until the page has loaded to hide both the backgrounds. How would I go about hiding the backgrounds before the page has completely loaded?
Maybe with css on your images:
display: none;
So, styles will be like:
#b1, #b2 {
width: 100%;
height: 100%;
z-index: -1;
position: absolute;
display: none;
}
I think you want to use jQuery.ready:
jQuery(function($) {
var back1 = $('#b1').hide();
var back2 = $('#b2').hide();
});
The window.onload function is fired when all external sources is loaded (styles, scripts, images, etc..)
jQuery's ready method is fired when the DOM is ready.
A little article about the difference
Take the function out of the window.onload call, and move it to between two script tags at the top of the page. The browser reads from top to bottom, so it will execute the code as soon as it sees it.
so make your code look something like this:
<head>...
<script>
setBackground();
</script>
...</head>
i think you have to create a custom functions for this, you can have all your content hidden, once the page is ready .load() you hide you background then show the new background and the content
If I understand correctly, you want to preload the images and keep them hidden until you need them.
Rather than JavaScript, css seems to be the way to go here. However if you use display:none; some browsers might decide to delay the image load. My suggestion is to move the images offscreen:
#b1, #b2 {
left: -9999px;
top: -9999px;
z-index: -1;
position: absolute;
}
[Update] Here is a test page for display:none:
http://www.quirksmode.org/css/displayimg.html
It mentions that Opera will not load the images.
Related
I have been trying to check when a file is being dragged on to my website using javascript. I have tried putting a "hitbox" div covering the whole site:
<div id="Drag-File-Hitbox" ondragover="BGDragFileOver()">
</div>
<style>
#Drag-File-Hitbox {
position: absolute;
width: 100%;
height:100%;
margin: 0;
padding:0;
z-index: 999999999;
}
</style>
Whenever I drag a file to my website it does what I want but I cant click stuff in the background such as my navigation bar. I have also tried putting the ondragover event on the body tag but that didn't work either.
I fixed it by using jQuery instead, here is the code below that worked for others who might stumbleupon the same issue.
$(document).ready(function(){
$(window).on('dragenter', function(){
do stuff
});
});
I have a gif that loads once (i.e gif doesn't loop) when a button is clicked. This is used to signify that a user has successfully copied their serial number as shown in this screenshot:
I have set this up using the following code, CSS:
.greentickactive {
visibility: hidden;
}
JS:
<script>
document.getElementById("copyButton2").onclick = function() {
document.getElementById("greentickactive").style.visibility = "visible";
}
</script>
With 'greentickactive' as the gif CSS class and 'copyButton2' representing the trigger for the state change. This is all working, but the gif must be loading when the page loads (I am presuming as I can't see it on load), and I need it to only load when the button (copyButton2) is clicked. I tried replacing;
document.getElementById("greentickactive").style.visibility = "visible";
with
document.getElementById("greentickactive").style.display = "block";
and amending the CSS to;
.greentickactive {
display: none;
}
but this causes spacing issues on the page and still doesn't allow the gif animation to play at the correct time. Does any one know of another method to achieve this or maybe something that's wrong with this setup?
You can defer the loading of the image until copy is clicked, and to handle the spacing issues, just set the height & width of the element.
Assuming you have the following css for .greentickactive:
.greentickactive {
width: 64px;
height: 64px;
display: inline-block;
background-color: transparent;
background-repeat: no-repeat;
}
you can then change your javascript to:
document.getElementById("copyButton2").onclick = function() {
document.getElementById("greentickactive").style.backgroundImage = 'url("/path/to/image/greentick.gif")';
}
Let me know how that works out for you.
I was checking this example of slideshow and found a strange behavior.
I am using this code but the image under does not show until the above one is done fading out. Why? I expected the image #above to fade out to the image #under.
(Note that #above has z-index:10;)
<div id="current_image">
<img width="370" id="above" src="...
<img width="370" id="under" src="...
</div>
jQuery
$(document).ready(function () {
$(".small_image").click(function () {
event.preventDefault();
var image = $(this).prop("rel");
var above = $('#above');
var under = $('#under');
under.prop('src', image);
above.fadeOut(1000, function () {
above.prop('src', under.prop('src')).css('display', 'block');
});
});
});
FIDDLE
The problem is that the 2 images in the #current_image div are not on top of one another, but the one image is vertically above the other image (the images are not stacked).
http://jsfiddle.net/cVNTG/2/
So, you just need to alter some CSS:
#current_image {
width:370px;
height:245px;
float:left;
overflow:hidden;
position: relative;
}
#current_image img {
min-height:100%;
position: absolute;
top: 0;
left: 0;
}
Now your images are absolutely aligned, and they're on top of one another. So as one fades out, the other one is showing behind it. If you had inspected the HTML/CSS with something like Firebug, you would have seen this.
I would consider rewriting the JavaScript portion of this. You don't really need to change src and all that. Just assign your #above and #below id's as needed, and then make sure #above has a higher z-index (or really, you probably only need to add/remove the #above id).
My html page loads a bit slowly because of the jquery that's in it. I want an image that tells the user that it's loading, until the entire page get loaded. How should I go about doing this?
Many thanks in advance.
<script type="text/javascript">
$(document).ready(function(){
//my jquery here....
});
</script>
Design the page with the loading message already included so that when the page loads from the server, the message is already showing.
Then, using jQuery, you can hide the message as soon as the page is ready:
$(document).ready(function(){
$('#loadingMessage').hide();
});
http://www.jsfiddle.net/dactivo/m4Bxe/
window.onload = function () {
$("#loading").hide();
};
window.onload will wait the whole loading of the page. ready() waits the DOM to be ready which is practically inmediate.
You can read this in these jquery docs
"While JavaScript provides the load
event for executing code when a page
is rendered, this event does not get
triggered until all assets such as
images have been completely received.
In most cases, the script can be run
as soon as the DOM hierarchy has been
fully constructed. The handler passed
to .ready() is guaranteed to be
executed after the DOM is ready,"
Justin's method will do the trick.
make sure you are optimizing the way resources are loaded, for example putting your scripts at the bottom of the page so they don't block HTML rendering
http://developer.yahoo.com/performance/rules.html
Hm, you can load an image that says "loading", then load the rest of the document's scripts by either doing something like:
var TM_script = document.createElement('script');TM_script.src = 'http://www.yoursite.com/script.js';document.getElementsByTagName('body')[0].appendChild(TM_script); someFunctionInScript();
Alternatively, you can just load the image, and then submit Ajax requests to load the rest of the page. You can also try even doing an animated gif or another image at the top of the page, and once the document has loaded (and your script activates), remove that image.
have a background-image set through css to the body, and remove the element in document.ready
I know this a fairly old thread, but the below solution worked for me although jQuery is needed:
First right after the body tag add this:
<div id="loading">
<img id="loading-image" src="images/ajax-loader.gif" alt="Loading..." />
</div>
Then add the style class for the div and image to your css:
#loading {
width: 100%;
height: 100%;
top: 0px;
left: 0px;
position: fixed;
display: block;
opacity: 0.7;
background-color: #fff;
z-index: 99;
text-align: center;
}
#loading-image {
position: absolute;
top: 100px;
left: 240px;
z-index: 100;
}
And finally add this javascript to your page (preferably at the end of your page, before closing body tag of course):
<script language="javascript" type="text/javascript">
$(window).load(function() {
$('#loading').hide(); });
</script>
Then adjust the position of the loading image and the background color of the loading div via the style class.
This is it, works just fine. But of course you have to have an ajax-loader.gif somewhere.
Try AJAXLoad They have some great animated GIF's there.. :)
I have a div which is creating through ajax, i would like to disable the whole body once the div is popup and until, unless the div is closed.Is this possible in jquery. Please let me know your suggestion
Thanks,Praveen Jayapal
You want to REMOVE, or hide the body? Technically this shouldn't be possible because you need to append the div to the body in order to see it. What you could do is create a 'mask' layer that covers the WHOLE body, then use z-index for your div to display it on top of the body.
Something like:
http://www.queness.com/post/77/simple-jquery-modal-window-tutorial
might help!
To completely hide the page all you would need to do is change line 21:
$('#mask').fadeTo("slow",0.8);
in the javascript to:
$('#mask').fadeTo("slow",1);
and the color of the mask on line 7 of the CSS can be changed to whatever you want too:
background-color: #000;
That should do the trick..
HTML:
<body>
<div id="overlay">
this is above the body!
</div>
<!--...rest...-->
</body>
CSS:
#overlay {
background-color: #ccc; /*or semitransparent image*/
display: none;
height: 100%;
width: 100%;
position: absolute;
top: 0;
left: 0;
z-index: 100;
}
#ajax-div {
z-index: 200; /*important, that it is above the overlay*/
}
Javascript:
<script type="text/javascript">
$(document).ready(function() {
//your ajax-call
$.ajax({
//on success
success: function() {
//your logic your showing the ajax-div
$('#overlay').show(); //or fadeIn()
}
})
//use live to catch the close-click of the later added ajax-div
$('#ajax-div a#close').live('click', function() {
//close the ajax-div
$(this).parent().hide();
//close the overlay
$('#overlay').hide(); //or, again, fadeOut()
});
});
</script>
What it sounds like you want is something known as a modal dialog box.
There are a number of JQuery scripts to achieve this quite easily. Here are some links for you:
http://choosedaily.com/1178/15-jquery-popup-modal-dialog-plugins-tutorials/
http://plugins.jquery.com/project/modaldialog
http://www.queness.com/post/77/simple-jquery-modal-window-tutorial
Hope that helps.
OK ... best idea is use jquey.ui if you use jquery.
http://jqueryui.com/demos/dialog/#modal
You can choose theme and download only components you like..
Then just include js and css a place img folder and call dialog. It is quiet easy...