Develop Reference

MVC How to add a delay on page load

My question is pretty simple(i think, but i cant find any reference, who wants to slow down their site,right?) and may sound ridiculous, but what I am trying to do is to have a splash screen on page load of the Home/Index of my site.
What I did is at the top of my page, I just added a simple div for my splash and use javascript to hide it when the page is loaded.
$(window).bind("load", function () {
// Remove splash screen after load
$('.splash').css('display', 'none')
})
but my problem is, my home index loads too fast (because its just plain text/html) hence the splash screen shows like .5 sec only. I want to add atleast 2-3 secs before it is removed, Im assuming I just need to add a line or two of code in my $(window).bind to pause for a couple of secs before doing $('.splash').css('display', 'none') but I dont know what or how to do it, please help! Thank you!

You can use setTimeout() to delay things in Javascript, like this:
$(window).bind("load", function () {
var delay = 5000;
setTimeout(function () {
$('.splash').css('display', 'none');
}, delay);
});

Timeout works.
$(window).bind("load", function () {
// Remove splash screen after load and 3 seconds
setTimeout(function() {
$('.splash').css('display', 'none')
}, 3000);
});

javascript/jquery identifying hidden images using dom

$(function(){
var image = $('img');
if (image.attr("id") == "webs"){
$('#hoverpoint').hover(function(){
$('#websitehov').stop(true,true).fadeIn('slow');
}, function() {
$('#websitehov').stop(true,true).fadeOut('slow');
});
}
});
I'm trying to write a conditional to find whether or not a hidden image is visible or not. Basically when you hover over the images, if a certain image is visible the hover image will be specific to that visible image. This would be fine if they were constantly visible but since they're on a cycle (cycle plugin) fading in and out every 10 secs I can't identify them. Any ideas?

Sounds like you have duplicate ids!!!! anyway it will be more logical if you write this block of code like this:
$("img").each(function(){
currentImage=$(this).attr("class");
if(currentImage=="webs"){
$('#hoverpoint').hover(function(){
$('#websitehov').stop(true,true).fadeIn('slow');
}, function() {
$('#websitehov').stop(true,true).fadeOut('slow');
});
}
})

$("img").each(function(){
if($(this).is(':visible')){
$('#hoverpoint').hover(function(){
$('#websitehov').stop(true,true).fadeIn('slow');
}, function() {
$('#websitehov').stop(true,true).fadeOut('slow');
});
}
})
Use visible selector

Simple jquery fader doesnt work in Chrome

I have built a really simple image fading gallery sorta thing, which works on firefox (and I'm sure worked on chrome before the holidays). However now Chrome just fades out the first image and never applies the .first class so subsequent animation is skipped.
JS
function doRotator(time){
$('.rotator3 .property.first').fadeOut(1500, function(){
$('.rotator3 .property.first').removeClass('first').next(".property").addClass('first').fadeIn(1500);
$(this).appendTo('.rotator3'); });
}
setInterval(function () { doRotator(3000);}, 3000);
JSFiddle: http://jsfiddle.net/pkyAS/1/

under each "property" div you have a div with "opacity:inherit" remove the "opacity:inherit" and it should work. let me know if there are more problems.
Here is my solution on fiddle.
I removed your interval, and made the "doRotator" run once - it was easier for me to debug
By the way - fadeIn(1500) is on your interval time.
If your interval is for 3000 millis, and you have fadeIn(1500) - then the div will be visible for 1.5 sec.
Consider triggering "setTimeout(doRotator,3000)" with 3000 when the fadeOut finishes.
EDIT : how to force removal of "opacity:inherit" - you can simply append some JS code to force that.
function doRotator(time){
$('.rotator3 .property.first').fadeOut(1500, function(){
$('.rotator3 .property.first').removeClass('first').next(".property")
.addClass('first').fadeIn(1500).find("div:first").css("opacity",null); $(this).appendTo('.rotator3'); });
}
setInterval(function () { doRotator(3000);}, 3000);

How to hide/show an element by touching/clicking anywhere on the screen?

I'making website which is for all desktop/iPad/iPhone. In one page I have header and footer on the page which will be seen till 5 sec after page load then it will be gone automatically. If We click/touch anywhere on screen it will also like a toggle to show/hide.
And when the header and footer will be seen the area of page will be dim like we see in lightboxes.
http://jsfiddle.net/jitendravyas/yZbTK/2/
The effect I want to exactly like iPad default "Photos" app

I think this is what you are after. On initial page load we fade out after x seconds. If user clicks then we fade in toolbar if hidden, or fade it out if shown. If user fades in toolbar, but doesn't do anything for x seconds we fade it back out.
I updated my answer with some improvements.
http://jsfiddle.net/yZbTK/11/
http://jsfiddle.net/yZbTK/11/show - full screen for iPad
I would assign a class to the controls that you will fade in/out. That way you can gather them quickly and easily. The use of id's to identify them really wasn't very good in my initial code example.
var timer;
var timeVisible = 5000;
timeFadeout();
function timeFadeout() {
timer = setTimeout(function() {
$('.controls').fadeOut();
}, timeVisible );
}
$('html').click(function() {
clearTimeout(timer);
if ($('.controls:visible').length) {
$('.controls').fadeOut();
}
else {
$('.controls').fadeIn();
timeFadeout();
}
});

A short solution is to simply add a click-event to the body and toggle the header and footer on it:
$('body').click(function() {
$('#header').toggle();
$('#footer').toggle();
});
See here also: http://jsfiddle.net/Sgoettschkes/yZbTK/4/
To add the "dim" as you call it you could also make a div box with position absolute and a opacitiy, which is also toggled as above. I played around a bit and created this: http://jsfiddle.net/Sgoettschkes/yZbTK/8/

EDITED:
var countDown=5;
$('body').click(function() {
....
if (countDown < 1) {
...
}
}
var cleanUp = setInterval(function() {
countDown--;
if (countDown < 1) {
...
clearInterval(cleanUp);
}
},1000);
That should do it!

Using Jquery to slowly hide a div

I'm trying to make some code which finds if a div exists, and if it does then have it fade away slowly. I have this to determine whether or not the div exists
if($('#error').length != 0)
{
$('#error').hide(500);
}
And that does work but only on a refresh, I've been attempting to put it in a timer like this:
var refreshId = setInterval(function()
{
if($('#error').length != 0)
{
$('#error').hide(500);
}
}, 500);
But its not getting rid of the innerHTML! I have some code which on hover alters the innerHTML of the error div so I can fill it up, but for some reason this isn't working, any advice would help!
Thank you!

$("#error").fadeOut(500);
Update:
If you are looking to check for existence:
var msg = $("#error");
if(msg.length) {
msg.fadeOut(500);
}
If you want to empty it:
$("#error").empty();

If you just want to delay 500ms then fade out, do this:
$("#error").delay(500).fadeOut();
To also empty the element, provide a callback to .fadeOut() like this:
$("#error").delay(500).fadeOut(function() {
$(this).html('');
});
There's no need to check .length, if an element that matches the selector isn't present, nothing happens :)

The div you're trying to hide likely hasn't loaded by the time your script runs. Try this; it will defer execution until the DOM is loaded:
$(document).ready(function() {
// put your code here
});
This is a good practice when using jQuery anyway.
Reference: http://docs.jquery.com/Tutorials:Introducing_$(document).ready()