We Keep Coding

Preloading a DIV

I'm using preloadme script to fadeOut my preloader div on window.load but I'm wondering if instead of waiting for the whole entire page to load I can target one specific div:
preloadme code
$(window).load(function() {
$('#status').fadeOut();
$('#preloader').delay(350).fadeOut('slow');
$('body').delay(350);
})
my idea that doesn't work
$('#img-container').load(function() {
Any suggestions greatly appreciated

I am afraid its not possible, since you can access the page element once DOM is initialize.
just go with $(function(){ //your code}), that will make your code run every time
$(function(){
$('#status').fadeOut(); // dont rely on this to hide the loaded, use css below
$('#preloader').delay(350).fadeOut('slow');
});
You can do this using CSS, to initially show the preloaded till page loads
#preloader {display:block}

Javascripts not fully loading in jQuery ajax content

I have a problem and it's giving me headaches since I started looking for it yesterday.
I have a couple of jQuery scripts and my page includes .load jQuery ajax (at the bottom of the page).
I use a hover effect for the images and a fixed position of the header that is located in js/tools.js
The problem is that, randomly my browsers won't load the tools.js into the ajax. So sometimes you don't see the image hover effect in the loaded ajax content. When refreshing the page it woks fine.
My first bet was that the scripts I use collide or that there's a problem with the order in which the content or the .js loads.
js:
$(document).ready(function() {
$('.cta-btn, .portf1, .portf2, .portf3, .portf4, .portf5, .btn-facebook, .btn-twitter, .btn-linkedin, .btn-studiofacebook, .btn-studiotwitter,.btn-studiolinkedin,.newsitem1, .newsitem2, .newsitem3').append('<span class="hover"></span>').each(function () {
var $span = $('> span.hover', this).css('opacity', 0);
$(this).hover(function () {
$span.stop().fadeTo(200, 1);
}, function () {
$span.stop().fadeTo(400, 0);
});
});
});
$(function(){
var stickyHeaderTop = $('#stickyheader').offset().top;
$(window).scroll(function(){
if( $(window).scrollTop() > stickyHeaderTop ) {
$('#stickyheader').css({position: 'fixed', top: '0px'});
$('#stickyalias').css('display', 'block');
} else {
$('#stickyheader').css({position: 'static', top: '0px'});
$('#stickyalias').css('display', 'none');
}
});
});
html:
<!-- portfolio -->
<div id="portfoliowrapper">
<div id="portfolioitems"></div>
<script>$("#portfolioitems").load("werk.html #portfolio");</script>
<div class="clear"></div>
<h2 class="btn">Werk</h2>
</div>
Any ideas? Thanks in advance!

You need to show some code, you can't expect us to dig through your site.
It's very likely that you're using
$(function(){
// code that depends on images being loaded here
});
However, that will not wait for the images to load, it only waits until the DOM is ready to be modified. The event that waits for images is the load event of the window.
$(window).load(function(){
// here all images in the HTML are guaranteed to be loaded
});
The second time your page is run, the images are in the cache and they are already loaded when the DOM is ready, that is from your $(document).ready() handler

The issue is here:
$("#portfolio").offset() is null
Line 33
According to Firebug. Looks like you are trying to call a function before the page has been completely rendered, this is causing an error as it cannot calculate the offset and it breaks the rest of the function.

popup window from right on the page load through jquery

i searched on internet for j Query or java script code that do some work for me like when the the page completely loads a popup window come out from the right side for some time and then disappears after some specific time but i couldn't succeed. i need yours help and favor in this regard.(send me any link of document related my question or any you tube or any other media link from where i could get help now and for future).
thanks in advance

you can use jquery' anitmate function Animate()
some thing like this: pseudocode
$('#yourDivorModalBox').animate({
right: '+=50',
height: 'toggle'
}, 5000, function() {
// Animation complete.
});

Have you checked jQuery's ready() function? There's also window.open
$(document).ready(function() {
newwindow = window.open('http://www.google.com/','testme','height=200,width=300');
});
Then use setTimeout() to close the popup.

jQuery actions strictly after full DOM load

I'm using jquerynewsticker to reveal 100,000 digits of the number π in a news ticker fashion.
If i have my Chrome inspector open, i can see that the page loads from top to bottom, but the after the number, as well all the JS behind it, is rendered black for a few seconds, and only then becomes coloured as per default. However, the script already starts running as you can see on the test page here: http://marckremers.com/pi/ticker/
It seems to run, but without rendering.
If i reduce the size of the number, it works.
So it's clearly an issue where the loading isnt complete.
How can I force the script to only play once everything has 100% loaded?

Looking at your website I see the you load the ticker plugin and you execute your own code:
jQuery(document).ready(function($) {
$(function () {
$('#js-news').ticker({
speed: 0.05,
fadeInSpeed: 0,
titleText: '',
controls: false,
});
});
});
There 2 issues in this code:
1) Unnecessary nesting. you execute your code on document ready and then you call again a document ready handler ($(function(){...});
Keep in mind that writing $(document).ready( function(){} ) or $(function(){}) serves exactly the same purpose. For this reason you can remove the second event listener (useless):
jQuery(document).ready(function($) {
$('#js-news').ticker({
speed: 0.05,
fadeInSpeed: 0,
titleText: '',
controls: false,
});
});
with document.ready registration your code will run after the DOM has been completely built.
2) Another issue I see is that your selector #js-news does not resolve! I see no element in the page with ID=js-news... am I missing something ?

You can put your code as above to wait for the dom to be fully loaded.
$(function() {
// Your code
});
If it's not enough, if you want to wait for everything to be loaded (images, css, ...), you can put your code as above :
$(function()
{
$(window).bind('load', function()
{
// Your code
});
});

Load javascript animation ONLY when entire site (images) loaded

I'm building this hotsite that relies heavily on 'heavy' images and animations.
It has some "Curtains" covering all the site, then i want to open these curtains (animate, already coded it), but only when all my site (specially images) is loaded.
Would also like to create a simple loader (no progress at all, just say "loading");
UPDATE:
$.ready(function() {
$("#loading").fadeOut();
$(".leftcurtain").stop().animate({ width: '374px', left: '-60px' }, 6200);
$(".rightcurtain").stop().animate({ width: '374px', right: '-60px' }, 6200);
$(".leftback").stop().animate({ width: '60px' }, 6500);
$(".rightback").stop().animate({ width: '60px' }, 6500);
});

Using
window.onload = function() {
// initialize site
};
Will work. It fires once everything embedded into the site (HTML, CSS, images...) has finished loading.
You will then need to hide your website content while it loads. If you place everything within a DIV, you can toggle the visibility of it with "visibility: hidden". You should not use "display: none", as with some browsers (if I can remember correctly, Opera), they won't load content that has no display value.
You should then be able to place a DIV containing your "Loading" content at the top of the page, then simply either toggle off the display of it, or remove it from the DOM once the page is loaded.
As a side note, you should not use the jQuery.ready() function, as pointed out by RobG, as this only waits for the DOM to load, and not the images.

try combining jQuery`s ready and load
$(document).ready(function()
{
var images = $('img');
var loadedImgs = [];
images.each(function()
{
$(this).load(function() //image load callback
{
loadedImgs.push('');
});
// we are interested only if the images is loaded,
// so we need to place something in the loadedImgs array;
});
var interval = setInterval(function()
{
if(loadedImg.length == loadedImgs.length)
{
clearInterval(interval);
//your code here ... images were loaded !!!
}
},10);
});

Put your handlers inside window.load. This is triggered only after the page is fully loaded, including graphics.
$(window).load()

Use Prototype's Event.observe like
Event.observe(window, 'load', function()
{
//add javascript script tags to the document here
}
Function in Event.observe will be called only after all the images in the DOM are loaded.

Just use:
window.onload = function(){
// javascript code will be executed only after the whole dom is loaded
}
With Jquery:
$.ready(function(){
// some code
});