[adlamb]

I have lost the battle in persuading against this so...
I have a 3 second animation that needs to play on a black screen before then automatically loading the website. Since it has to be there, I want to make it as user friendly as it possibly can be.
My thoughts are:
- Make it short (3 seconds)
- Make it go directly to the site (without an ENTER HERE)
- Make it only ever play once on a PC (using a cookie i guess)
- Somehow make the actual web page load during this 3 seconds so it is ready and waiting behind the animation. The animation could then fade away?

I have written the the website from scratch using fully validated XHTML. I have also made the animation. The problem is that i never done anything like this before and no not know how to do any of the other parts. I have had a good look around for tutorials etc but cant seem t find anything.....i guess because no-one does this on websites any more!!

Does anyone have any suggestions for any of this? Or tutorials? I literally just have a site and an animation. I dont know how to structure the landing page file system, or make it load the site after or anything!

[Ent]

Would this work?
Put a black dot, stretched across the screen, with absolute positioning to cover the screen.
Put the flash tags, also absolute, in the center of the screen.
Raise their Z indexes so that they cover the screen and let the rest of the page (later in the HTML) silently load behind it. Lastly use a few short lines of code, which could just be Javascript, to remove the image and flash tag, revealing the page.
-----
I suppose it might be worth having the JS create the dot img, the flash tags, and the link to the needed CSS page only after it checks for the absence of a cookie. And in the CSS page it may also be worth setting the body to Display: none; to show only the ID "welcomeScreenIDon'tReallyWantToPutIn" Div and avoid getting a tell-tale scroll down bar if they're headed for a page with content longer than one screen.

[adlamb]

This all sounds fairly sensible although im afraid that JS generation is far beyond me. I like the idea of using a fullscreen div to cover the rest of the site. Very simple and clean. Would it make any difference if I used a single pixel or just set the background to black?

[Ent]

Setting the site background to black wouldn't work; it would be behind the site and couldn't colour it. You could make another element, say a div tag, colour it black, and stretch it, but by the time you've done that you might as well have made the image anyways. Also you could have difficulty getting another tag to resize in all (particularly old) browsers; a problem you shouldn't have with an image.

I'm not sure how you get JS to check for cookies, although I know it can be done. Other than that you'd want to give an ID attribute to a DIV in your HTML, then insert/call the Script just after it. That script should modify the innerHTML property of the div. You'll want something like this (make sure you use the single quotes where you would otherwise use double ones):

 
if (!CookieFound) {
Var AniScreen = "<img src = 'BlackDot.gif' alt = '...' />
AniScreen = AniScreen + "<link ..."
AniScreen = AniScreen + Flash Tag
getElementById("DivInQuestion").innerHTML = AniScreen
}
 
Then waiting on the timeout you'll want:
getElementById("DivInQuestion").innerHTML = ""

[adlamb]

Thanks for the reply. I have been thrashing around with this for a while but it's quite clear that I dont know enough of what im doing to make it work. I have made a single px black image spread across the full screen and positioned it at the beginning of the page and raised it up to the top level. great. I have also done the same thing but using a div with a black background (this is what I meant when i was asking about that, I hadnt read your original post correctly). Both ways work but i assumed that a div method would be better so I have a container within which I can insert the video??

As for the java, im afraid there are big gaps in my knowledge there! I decided to concentrate on doing this without the cookie but that didnt help much.
I will keep tinkering and im sure someone must have done this before and so there must be a tutorial or something i can just copy! I just cant find it!

[Ent]

Exactly how you do it is up to you. I had suggested one div at the top (in my code I'd IDed it DivInQuestion). That I would have the JavaScript fill--with the single dot and then the Flash tags such that the flash comes on top of the black, placing the Flash within the DIV with a Black Background should work as well.-- and that I would have the JavaScript Clear. It would be this DIV that I'd elevate to the front.

Therefore as you can see in my code I am creating the Variable AniScreen, which amounts to plain old HTML. You should just fill in your Flash tags, and the CSS file you use. Make sure to replace any Double Quotes (") with single ones (') The line

 
getElementById("DivInQuestion").innerHTML = AniScreen;

fills the Div with this HTML. Lastly, but still before the closing brace, you'd want

 
setTimeout(getElementById("DivInQuestion").innerHTML = "", 3000);

to remove it after 3 seconds.

For now, just put that code between <SCRIPT> tags after the DivInQuestion Div.

[adlamb]

Ent, thanks very much for all your information. I am, unfortunately, a complete novice with java and despite spending ages playing with it all, I could not put all your bits together to make something that works.
What I ended up doing, was generate the div with a logo inside to simulate the video and then make all the style in the css.
I then managed to modify something else that I came across from searching online (now that I know what terms to search for thanks to your input!!)

I have come up with the following and it seems to basically work:

<div id="splash">
	<img id="vid" src="images/logo.gif" alt="">
</div>

<script type="text/javascript">
function closeSplashDiv(){
document.getElementById("splash").style.display=" none";
}
// close the div in 3 secs
window.setTimeout( closeSplashDiv, 3000 );
</script>

how does that look? It seems to be a different solution to what you were talking about. Is it as good?

thanks again for your input.

[Ent]

Actually it's almost exactly the same. The only differences are that I had the JavaScript remove the splash Screen whereas you've just hidden it through CSS, and my script had a section to actually add the content in the first place, pending a cookie-seeking function to find out whether or not this was actually necessary. This later one you say you've dropped for the moment. So if it works, great.

[adlamb]

The additional features that you mention are both things that I do want to have eventually, I was just trying to make my learning curve slightly shallower!

To complicate things even further, I have never dealt with cookies before either!
Again tho, i have managed to find some code and modify it to work for my case (and spent hours reading tutorials )

What I have now, looks for a cookie and if it is not present it shows the div for 3 seconds. If it is present, it doesnt do anything. The cookie lasts for 24 hours.
Getting there!!!

As I understand it, since the cookie is being called and generated using Java, and the div is being removed with Java, if someone doesn't have Java then they will always see the div and neither the cookie nor the timer will work. ?? This is where I need to add in your code to make Java generate the div in the first place. I think!? ...but of course, Im not sure how to do that. I'm just not familiar with the terms in your original code post

Ok, this is what I have so far (extracted from the bottom of the <head> and the top of the <body> )

<script type="text/javascript">

function createCookie(name,value,days) {
	if (days) {
		var date = new Date();
		date.setTime(date.getTime()+(days*60*60*1000));
		var expires = "; expires="+date.toGMTString();
	}
	else var expires = "";
	document.cookie = name+"="+value+expires+"; path=/";
}

function readCookie(name) {
	var nameEQ = name + "=";
	var ca = document.cookie.split(';');
	for(var i=0;i < ca.length;i++) {
		var c = ca[i];
		while (c.charAt(0)==' ') c = c.substring(1,c.length);
		if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
	}
	return null;
}

function eraseCookie(name) {
	createCookie(name,"",-1);
}

function setTheDivStyle() {
if(!readCookie('foxIndex')) {
// if cookie not found display the div and create the cookie
document.getElementById("splash").style.display="block";
createCookie('foxIndex', 'foxIndex', 24);  // 1 day = 24 hours persistence
}
else {
// if cookie found hide the div
document.getElementById("splash").style.display="none";
}
}
</script>	
	
</head>


<body onload = "setTheDivStyle()">

<div id="splash">
	<div><img id="vid" src="images/logo.gif" alt=""></div>
	<div><img src="images/loader.gif" alt=""></div>
</div>

<script type="text/javascript">
function closeSplashDiv(){
document.getElementById("splash").style.display=" none";
}
// close the div in 3 secs
window.setTimeout( closeSplashDiv, 3000 );
</script>

One other thought about all this....can you think of any way to have the div fade out rather than just be instantly hidden?.......or is this taking it all a bit too far?!

I REALLY appreciate all your time on this.

Thanks!

[Ent]

Right, lastly, it is possible to make the dive fade out, but that would mean using the JavaScript Library JQuery (or another technology altogether). I don't know JQuery, so I can't help with that.

Now as to making sure that nothing appears without JScript on to remove it, this should bethe code you need. Simply replace the setTheDivStyle() function with this:

 
function setTheDivStyle() {
if(!readCookie('foxIndex')) {
// if cookie not found display the div and create the cookie
createCookie('foxIndex', 'foxIndex', 24);  // 1 day = 24 hours persistence
Var AniScreen = "	<div><img id='vid' src='images/logo.gif' alt''></div>";
AniScreen = AniScreen + "	<div><img src='images/loader.gif' alt=''></div>";
getElementById("splash").innerHTML = AniScreen;
}
}

And replace the closeSplashDiv() function with

function closeSplashDiv(){
document.getElementById("splash").innerHTML = ""
}

Also, take the actual lines of code out of the splash div. The JScript will make them now.
I am a little confused as to where your flash code is? Are you just using animated GIF images?

[adlamb]

Well, I have given it a good hour of tinkering with what should be the easy bit of following your instructions but its not quite there. I'm sure, as is usually the case with these things, it will be all down to a .<(,"' or something

In answer to your question, those 2 gifs are just there because I haven't got round to sorting the code out for the flash (I've never done this before either!!......I'm actually quite good at making decent html and css ) Anyway, i did it this morning and it looks like this:

	<div id="splash">
	<div id="vid">

	<object classid="clsid:D697CDE7E-AE6D-11cf-96B8-458453540000"
		codebase="http://active.macromedia.com/flash4/cabs/swflash.cab#version=4,0,0,0"
		id="intro" width="720" height="480" />
		<param name="movie" value="intro.swf" />
		<param name="quality" value="high" />
		<param name="loop" value="false" />
		<param name="bgcolor" value="#000" />

		<embed name="intro" src="intro.swf" quality="high" loop="false" bgcolor="#000" width="720" height="480"
		type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/shockwave/download/index.cgi?P1_Prod_Version=ShockwaveFlash">
		</embed>
	</object>

	</div>
	</div>

and the associated css is:

#splash {
	position: fixed;
	background-color: #000;
	width: 100%;
	height: 100%;
	z-index:1000;
	display:block;
}
#splash #vid {
	margin-top: 100px;
}

my combined version of your code as it currently stands is:

<script type="text/javascript">

function createCookie(name,value,days) {
	if (days) {
		var date = new Date();
		date.setTime(date.getTime()+(days*60*60*1000));
		var expires = "; expires="+date.toGMTString();
	}
	else var expires = "";
	document.cookie = name+"="+value+expires+"; path=/";
}

function readCookie(name) {
	var nameEQ = name + "=";
	var ca = document.cookie.split(';');
	for(var i=0;i < ca.length;i++) {
		var c = ca[i];
		while (c.charAt(0)==' ') c = c.substring(1,c.length);
		if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
	}
	return null;
}

function eraseCookie(name) {
	createCookie(name,"",-1);
}

function setTheDivStyle() {
if(!readCookie('foxIndex')) {
// if cookie not found display the div and create the cookie
createCookie('foxIndex', 'foxIndex', 24);  // 1 day = 24 hours persistence
Var AniScreen = "	<div><img id='vid' src='images/logo.gif' alt=''></div>";
AniScreen = AniScreen + "	<div><img src='images/loader.gif' alt=''></div>";
getElementById("splash").innerHTML = AniScreen;
}

else {
// if cookie found hide the div
document.getElementById("splash").style.display="none";
}
}
</script>	
	
</head>


<body onload = "setTheDivStyle()">

	<div id="splash">

	</div>

	<script type="text/javascript">
	function closeSplashDiv(){
document.getElementById("splash").innerHTML = ""
}

	// close the div in 4.5 secs
	window.setTimeout( closeSplashDiv, 4500 );
	</script>

I tried with and without the 'else' in the setTheDivStyle function
and also added a = to the alt on one of the gifs.
I also didnt bother with the video for now, just used the gifs to try and keep it simple.

All it seems to do it load the div with no content and then does not make it disappear.
....sooo close......I'm sure....!

[Ent]

You might want to try a different approach: reusing your original code, and changing display:block; to display:none; in the CSS. That should make it only appear when JScript is turned on.

[adlamb]

Damn it!! Why didn't I think of that?!

That seems to work fine. I'm not sure how I am going to ensure that the timer closes the div just as the flash finishes. Delays in the loading of the flash could cause problems with this although I don't really want people to have to hang around for too long. It's a shame there isn't any way of making the flash completion initiate the closure!

Anyway, all I have to do now is also make it all work in IE.....fun fun fun!

Thanks for all your help, I owe you a beer!

[Ent]

Isn't there any way to make Flash call JS? I don't use Flash, but a quick internet search brought THIS PAGE to light. Course for all I know it's a lot of gobbledigook, but could be worth a shot.

[adlamb]

I know very little about all this as well but as far as i understand it form the research I have done, you can only use a flash initiated event from a user input such as clicking on the flash. I thought it much tidier to have the flash automatically close....I could be wrong tho and I would love someone to put me right...........