Apple Style Splash Screen in PHP?

Discussion in 'Web Design and Development' started by highdough, Mar 22, 2011.

  1. highdough macrumors regular

    Joined:
    Sep 10, 2008
    #1
    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.
     
  2. Consultant macrumors G5

    Consultant

    Joined:
    Jun 27, 2007
    #2
    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.
     
  3. LeeTom, Mar 22, 2011
    Last edited by a moderator: Mar 27, 2011

    LeeTom macrumors 68000

    LeeTom

    Joined:
    May 31, 2004
    #3
    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.
     
  4. highdough thread starter macrumors regular

    Joined:
    Sep 10, 2008
    #4
    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.
     
  5. Ride9650 macrumors 6502

    Joined:
    Jun 29, 2007
    #5
    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.
     
  6. highdough, Mar 23, 2011
    Last edited by a moderator: Mar 27, 2011

    highdough thread starter macrumors regular

    Joined:
    Sep 10, 2008
    #6
    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.
     
  7. Ride9650 macrumors 6502

    Joined:
    Jun 29, 2007
    #7
    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.
     
  8. highdough thread starter macrumors regular

    Joined:
    Sep 10, 2008
    #8
    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.
     
  9. Ride9650, Mar 23, 2011
    Last edited: Mar 23, 2011

    Ride9650 macrumors 6502

    Joined:
    Jun 29, 2007
    #9
    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.
     
  10. highdough, Mar 23, 2011
    Last edited by a moderator: Mar 27, 2011

    highdough thread starter macrumors regular

    Joined:
    Sep 10, 2008
    #10
    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:
    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...

    ...but that does not appear to be the case, because I took it out and it didn't make a difference.
     
  11. scottgroovez macrumors regular

    Joined:
    May 20, 2010
    #11
    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.
     
  12. highdough thread starter macrumors regular

    Joined:
    Sep 10, 2008
    #12
    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
     
  13. scottgroovez, Mar 24, 2011
    Last edited: Mar 24, 2011

    scottgroovez macrumors regular

    Joined:
    May 20, 2010
    #13
  14. highdough thread starter macrumors regular

    Joined:
    Sep 10, 2008
    #14
    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.
     
  15. scottgroovez macrumors regular

    Joined:
    May 20, 2010
    #15
    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.
     
  16. highdough thread starter macrumors regular

    Joined:
    Sep 10, 2008
    #16
    I definitely will. Thanks for the advice. And the help.
     

Share This Page