Sidebar Sidebar
Become a MacRumors Supporter for $50/year with no ads, ability to filter front page stories, and private forums.

Apple Style Splash Screen in PHP?

H

highdough

macrumors regular
Original poster
Sep 10, 2008
192
64
With the help of this tutorial...
http://tutorialzine.com/2010/11/apple-style-splash-screen-jquery/

...I created a splash screen on an html page, but can't, for the life of me, figure out how to transfer it to PHP. It just doesn't work no matter what I do. At first I thought that maybe having a separate header was the problem, but then I combined it all on one page and that still didn't work.

I'd love someone's input on it.

Here's the html version...
http://www.highdough.com/wp-content/themes/hd-theme/home.html

And here's the php version that doesn't work...
http://www.highdough.com

And help would be greatly appreciated.
 
Apple's version is very subtle and transitions into content quickly.

Your current longer splash screen timing will probably drive away users. Also, more established sites can get away with splash, small sites might not.
 
I see the problem but I refuse to help you on principal until you cut the splash time down to no more than two seconds. You're wasting the time of everyone who looks at your site. They want information and they are not impressed with having to sit through your visual masturbation session.

Also, here's another (nicer) tip: Turn off the setting that lets your site get crawled by search engines until the site is ready for primetime.
 
Last edited by a moderator:
This was just a test page to play with it. It was a long way from going live, which is why there was absolutely no content. I've cut it down to one image, so it's not very long.

I hadn't realized I hadn't turned off the search engine setting, though.
 
highdough said:
With the help of this tutorial...
http://tutorialzine.com/2010/11/apple-style-splash-screen-jquery/

...I created a splash screen on an html page, but can't, for the life of me, figure out how to transfer it to PHP. It just doesn't work no matter what I do. At first I thought that maybe having a separate header was the problem, but then I combined it all on one page and that still didn't work.

I'd love someone's input on it.

Here's the html version...
http://www.highdough.com/wp-content/themes/hd-theme/home.html

And here's the php version that doesn't work...
http://www.highdough.com

And help would be greatly appreciated.
Click to expand...

You should probably post the PHP too in case that might be causing issues. Keep in mind the code gets interpreted when someone sees your page, so we can't exactly pluck the PHP out of thin air.
 
Ride9650 said:
You should probably post the PHP too in case that might be causing issues. Keep in mind the code gets interpreted when someone sees your page, so we can't exactly pluck the PHP out of thin air.
Click to expand...

Good point. Thanks.

Here is the code:

Code: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head profile="http://gmpg.org/xfn/11">
<meta http-equiv="Content-Type" content="<?php bloginfo('html_type'); ?>; charset=<?php bloginfo('charset'); ?>" />
<meta name="distribution" content="global" />
<meta name="robots" content="follow, all" />
<meta name="language" content="en, sv" />

<title><?php wp_title(''); ?><?php if(wp_title('', false)) { echo ' :'; } ?> <?php bloginfo('name'); ?></title>
<meta name="generator" content="WordPress <?php bloginfo('version'); ?>" />

<link rel="stylesheet" type="text/css" href="http://www.highdough.com/wp-content/themes/hd-theme/css/styles.css" />
<link rel="stylesheet" type="text/css" href="http://www.highdough.com/wp-content/themes/hd-theme/css/splashscreen.css" />

<script src="http://ajax.microsoft.com/ajax/jQuery/jquery-1.4.4.min.js"></script>
<script src="http://www.highdough.com/wp-content/themes/hd-theme/js/jquery.splashscreen.js"></script>
<script src="http://www.highdough.com/wp-content/themes/hd-theme/js/script.js"></script>

<link rel="Shortcut Icon" href="<?php echo get_settings('home'); ?>/wp-content/themes/hd-theme/images/favicon.ico" type="image/x-icon" />
<link rel="alternate" type="application/rss+xml" title="RSS 2.0" href="<?php bloginfo('rss2_url'); ?>" />
<link rel="alternate" type="text/xml" title="RSS .92" href="<?php bloginfo('rss_url'); ?>" />
<link rel="alternate" type="application/atom+xml" title="Atom 0.3" href="<?php bloginfo('atom_url'); ?>" />

<script type="text/javascript">
$(document).ready(function(){
	$(".tab").click(function(){
		$(".panel").toggle("fast");
		$(this).toggleClass("active");
		return false;
	});
});
</script>

</head>
<body>

<div id="page">
    <div id="promoIMG">

    </div>
</div>



<div id="nav">
		<ul>
			
<li><a href="#">Home</a></li>
			
<li><a href="#">Link</a></li>
			
<li><a href="#">Link</a></li>
			
<li><a href="#">Link</a></li>
			
<li><a href="#">Contact</a></li>
            
		</ul>
</div>

<div id="content">
<div class="contentmain">

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut eget eros libero. Fusce tempus quam sit amet erat mollis a fermentum nibh imperdiet. Fusce iaculis sapien in turpis aliquet porta. Donec tincidunt gravida tortor, vel dignissim augue convallis sit amet. Aliquam auctor ornare accumsan. Cras convallis elit tincidunt arcu semper egestas. Mauris interdum fringilla nisi. Cras a dapibus lectus. Praesent blandit ullamcorper ornare. Nam hendrerit sollicitudin urna non ultricies. Phasellus condimentum auctor risus, at accumsan tellus tempor vel. Nunc mattis eleifend dolor at adipiscing.</p>

		<p>Ut purus metus, fermentum vitae pulvinar vel, elementum eget nulla. Pellentesque posuere, enim ut dapibus vestibulum, leo nunc porttitor neque, sed pulvinar orci sem eleifend sapien. Nullam at odio nibh, eu pharetra ipsum. Pellentesque eget ante nec ante consequat ullamcorper a vitae mauris. Integer lacus lorem, sollicitudin vulputate posuere at, commodo a sapien. Vivamus lobortis vehicula imperdiet. Donec a congue tortor. Fusce augue tortor, pretium pharetra pellentesque ornare, laoreet nec sapien. Ut eget magna tellus. Pellentesque posuere accumsan condimentum.</p>

</div>

<div class="panel">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut eget eros libero. Fusce tempus quam sit amet erat mollis a fermentum nibh imperdiet. Fusce iaculis sapien in turpis aliquet porta. Donec tincidunt gravida tortor, vel dignissim augue convallis sit amet. Aliquam auctor ornare accumsan. Cras convallis elit tincidunt arcu semper egestas. Mauris interdum fringilla nisi. Cras a dapibus lectus. Praesent blandit ullamcorper ornare. Nam hendrerit sollicitudin urna non ultricies. Phasellus condimentum auctor risus, at accumsan tellus tempor vel. Nunc mattis eleifend dolor at adipiscing.</p>

		<p>Ut purus metus, fermentum vitae pulvinar vel, elementum eget nulla. Pellentesque posuere, enim ut dapibus vestibulum, leo nunc porttitor neque, sed pulvinar orci sem eleifend sapien. Nullam at odio nibh, eu pharetra ipsum. Pellentesque eget ante nec ante consequat ullamcorper a vitae mauris. Integer lacus lorem, sollicitudin vulputate posuere at, commodo a sapien. Vivamus lobortis vehicula imperdiet. Donec a congue tortor. Fusce augue tortor, pretium pharetra pellentesque ornare, laoreet nec sapien. Ut eget magna tellus. Pellentesque posuere accumsan condimentum.</p>

<div style="clear:both;"></div>

</div>
<a class="tab" href="#">Portfolio</a>

</div>

</div>

<?php get_footer(); ?>

I've tried cutting the code right down to the basics, and it still doesn't seem to work. This was the last attempt.
 
Last edited by a moderator:
After a quick glance, PHP looks fine, not sure why I didn't see this before, but your javascript is a bit messed up. I'm getting a error:

"Shadowbox not defined"

Hopefully thats a big enough of a hint.
 
Ride9650 said:
After a quick glance, PHP looks fine, not sure why I didn't see this before, but your javascript is a bit messed up. I'm getting a error:

"Shadowbox not defined"

Hopefully thats a big enough of a hint.
Click to expand...

Unfortunately that's not it. I've been working on a couple of other pages and installed a shadowbox plugin, but that was just today. And even when I deactivate it I still have the same problem. Thanks for trying, though.

Could it be simply that it doesn't work with php? I've never heard of this before.
 
highdough said:
Unfortunately that's not it. I've been working on a couple of other pages and installed a shadowbox plugin, but that was just today. And even when I deactivate it I still have the same problem. Thanks for trying, though.

Could it be simply that it doesn't work with php? I've never heard of this before.
Click to expand...

No, PHP and javascript can definitely be used together, at the moment, I'm a little tired to give it a through look-through, one thought though:

did you try starting over yet? You don't have a lot on the page, so I think thats probably the best approach at this point. And be careful when doing so, you currently have a number of errors when validating, for instance your script tags need a type attribute.

Lastly, I have to concur with the others though, to an extent. Just having your logo pop up isn't eye catching enough and just wastes time. You need to shorten the animation or come up with something a little more eye catching. Also, as a suggestion, I'd implement something so that your previous visitors won't have to sit through the intro again. You could do this with cookies, or through the more modern "sessionStorage" method.
 
Last edited:
Ride9650 said:
No, PHP and javascript can definitely be used together, at the moment, I'm a little tired to give it a through look-through, one thought though:

did you try starting over yet? You don't have a lot on the page, so I think thats probably the best approach at this point. And be careful when doing so, you currently have a number of errors when validating, for instance your script tags need a type attribute.

Lastly, I have to concur with the others though, to an extent. Just having your logo pop up isn't eye catching enough and just wastes time. You need to shorten the animation or come up with something a little more eye catching. Also, as a suggestion, I'd implement something so that your previous visitors won't have to sit through the intro again. You could do this with cookies, or through the more modern "sessionStorage" method.
Click to expand...

I took your recommendation and started from scratch and I've figured out that the "script.js" file is the problem. When I add the link for that file in the header, it breaks. I don't know why, though, or how to fix it.

Here is what the file is:
$(document).ready(function(){

// Calling our splashScreen plugin and
// passing an array with images to be shown

$('#promoIMG').splashScreen({
textLayers : [
'img/splash-4.png'
]
});

});
Click to expand...

Worse comes to worse, I can probably work around it, but I'd like to know what the problem is.

As for the aesthetics of splash screen, I appreciate the advice. As I said, I had just wanted to play around with it for now, and then figure out the the best way to utilize it. I had intended to use cookies so visitors would only have to sit through it once. I'll check out "sessionStorage". Thanks.

Just one added thing. I thought that it might be conflicting with this...

<script type="text/javascript">
$(document).ready(function(){
$(".tab").click(function(){
$(".panel").toggle("fast");
$(this).toggleClass("active");
return false;
});
});
</script>
Click to expand...

...but that does not appear to be the case, because I took it out and it didn't make a difference.
 
Last edited by a moderator:
Have you tried adding the code directly on the page rather than linking to the js file? I've experienced similar problems with php and js in the past.
 
scottgroovez said:
Have you tried adding the code directly on the page rather than linking to the js file? I've experienced similar problems with php and js in the past.
Click to expand...

Yup. Tried that. Unfortunately it results in the same thing. Something about it is not compatible.

And I forgot to mention that I got a "php version" working, but without actually any php coding (eg. <?php get_footer(); ?>). As soon as I add anything like that anything below it doesn't show up.

http://www.highdough.com/wp-content/themes/hd-theme/test.php
 
scottgroovez said:
Do you realise that http://www.highdough.com/img/splash-4.png is a 404?

Looks like it's a path issue. Your working PHP page is in a subfolder, whereas the broken one is in the root.
Click to expand...

THAT"S IT????? Holy crap, I can't believe in the end it was simply a path issue. I can't believe I never figured that out. That must have been the only path I didn't check. I'd probably feel a lot more stupid if I wasn't so relieved.

Thanks a bunch.
 
I highly recommend using something like Google Chrome's Developer Tools. Helps out with the debugging process. It flagged up the 404 in 2 seconds.
 
You must log in or register to reply here.
Register on MacRumors! This sidebar will go away, and you'll see fewer ads.
Top Bottom
Back