Website Ajax Welcome Screen Tutorial?

Discussion in 'JavaScript' started by sami1255, May 10, 2009.

0
  1. #1
    I don't know why there isn't any. I've googled it but couldnt find.. secondly Iam not seeing this concept at all on the websites. I want to show a ful welcome screen with a pic / message which dissolves automatically after few seconds to reveal original webpage.

    Any help will be greatly appreciated :)
     
    sami1255, May 10, 2009 IP
  2. camjohnson95

    camjohnson95 Active Member

    Messages:
    737
    Likes Received:
    17
    Best Answers:
    0
    Trophy Points:
    60
    #2
    You would not need to use AJAX to do this but I guess you could if you wanted to.
    It is easy enough to just make it disappear after a few seconds (or even slide away), but i'm not sure about dissolve.
     
    camjohnson95, May 10, 2009 IP
  3. sami1255

    sami1255 Well-Known Member

    Messages:
    835
    Likes Received:
    24
    Best Answers:
    0
    Trophy Points:
    125
    #3
    I dont want to be specific about "dissolving".. it can be anything.
     
    sami1255, May 11, 2009 IP
  4. MMJ

    MMJ Guest

    Messages:
    460
    Likes Received:
    12
    Best Answers:
    0
    Trophy Points:
    0
    #4
    Just have an overlay div, after a timeout remove it.

    No AJAX needed.
     
    MMJ, May 11, 2009 IP
  5. sami1255

    sami1255 Well-Known Member

    Messages:
    835
    Likes Received:
    24
    Best Answers:
    0
    Trophy Points:
    125
    #5
    sounds great.. leme try this one !
     
    sami1255, May 12, 2009 IP
  6. camjohnson95

    camjohnson95 Active Member

    Messages:
    737
    Likes Received:
    17
    Best Answers:
    0
    Trophy Points:
    60
    #6
    If you do this you want the DIV to not be visibile by default... Use javascript to make it visible when the document loads and then remove it after the time period. This way if the user does not have javascript enabled, they will not be stuck with the welcome message.

    Here is an example i made quickly:
    
<html>
<head>
<title>Page1</title>
<style type="text/css">
    #welcomeDiv 
    {
    	background-color: skyblue;
    	position: absolute;
    	border: solid 1px black;
    	text-align: center;
    	display: none;
    	top: 0px;
    	left: 0px;
    }
</style>
</head>
<body>
<script type="text/javascript">  
var delayInSec = 5; //Delay before fade. 
var fadespeed = 15; //The higher the slower
var opac = 100;
var h = document.body.clientHeight;   //screen height

window.onload = function() {
    var wDiv = document.getElementById("welcomeDiv");
    //set div to full screen
    wDiv.style.width = "100%";
    wDiv.style.height = h;

    wDiv.style.display = "block";
    setTimeout("fadeout();", delayInSec * 1000);
}

function fadeout() {
    var wDiv = document.getElementById("welcomeDiv");
    if(opac > 0) {
        opac = opac - 1;
        wDiv.style.filter = "alpha(opacity=" + opac + ")";
        wDiv.style.opacity = opac / 100;
        setTimeout("fadeout()", fadespeed);
    }
    else {
        wDiv.style.display = "none";
    }
}
</script>
<div id="welcomeDiv">
Here goes your welcome page and picture.
</div>
This is the main body of the page......
</body>
</html>
    Code (markup):
    You would probably want to implement a cookie so that the user only see's it once. I've made it so that it takes the full screen but that can be altered easily enough.
    Fading out was easy enough to create so i added that in aswell. It works well with FF3, IE7 and Chrome. Don't know about the others.
     
    camjohnson95, May 12, 2009 IP