Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5
  1. #1
    New Coder
    Join Date
    Oct 2012
    Posts
    35
    Thanks
    16
    Thanked 0 Times in 0 Posts

    Need some help with a page transition

    Hi there everyone,

    I have a basic structure to the website i'm working on, but there's one thing I am having some difficulty with (probably fairly basic to you, but i'm having trouble figuring it out). Any help would be greatly appreciated (i've uploaded the files to the link below where you can download them so you can see the page, code, etc). Here's what I need help with in completing so I can move forward with the other pages of the site:

    1. I have the homepage and the bio page complete, but I want to add a transition between the 2 pages (and ultimately all pages) where the logos and top title text (i.e. "Elvis Tribute Artist, Pete Paquette, One of Canada's Top Elvis...") remain fixed and just the middle part (Video, Black section with awards and Facebook like button) moves to the left and transitions to the next page (I guess that would require jQuery). For example, when you click on "bio" from the homepage right now, there is no transition, but I want the video, awards and Facebook button to move to the left and the "bio" information page would move in from the right to centre.

    Link to files: http://ge.tt/4PRKaVi/v/0

    CSS CODE:

    Code:
    html,body{width:100%;height:100%;margin:0;padding:0;}
    * {margin:0; padding:0;} /* << Most important in every website */
    .imageborder{border:6px solid #333;}
    
    /*** END */
    
    /* Navigation */
    
    nav {position:relative; top:-1px;}
    nav ul {padding: 6px 0 7px 0; /*6px should equal top padding of "ul li a" below, 7px should equal bottom padding + bottom border of "ul li a" below*/margin: 0;text-align: right; //set value to "left", "center", or "right"*/}
    nav ul li{z-index:9999;letter-spacing:0;word-spacing:1px;font-family:"Arial Black";font-size:125%;color:#fff;display:inline;}
    nav ul li {margin-right:10px; margin-left:10px;}
    
    nav ul li a {
    color: #494949;
    padding: 6px 3px 4px 3px; /*top padding is 6px, bottom padding is 4px*/
    margin-right: 20px; /*spacing between each menu link*/
    text-decoration: none;
    border-bottom: 3px solid white; /*bottom border is 3px*/
    }
    
    nav ul li a:hover, .underlinemenu ul li a.selected{
    border-bottom-color: black;
    }
    
    
    
    /* Bio */
    span.bio-p {width:360px; text-align:left; z-index:-1; height:100px;}
    div.main-pic.bio {}
    div.b-img {}
    span.bio-p p {width:400px; font-size:13px;position:relative; top:105px;}
    .bioHead {position:relative;top:90px; left:-50px; width:600px;display:block; background: url(../images/bio-head.png) no-repeat; height: 120px; margin:0 auto;}
    .bioHead {background-size:600px 100px;}
    .bioHead {}
    span.bio-p a {display:inline; float:left; z-index:99999;}
    .transition {position:relative; top:120px;}
    
    /*** END */
    
    
    
    
    .group:after { visibility: hidden; display: block; font-size: 0; content: " "; clear: both; height: 0; }
    
    .group { display: inline-block; clear: both; }
    /*** END */
    
    #container {min-height:100%;position:relative;}
    
    /*Header Social */
    
    a#fb{background:url(../images/fb.png) no-repeat;display:block;height:32px;width:32px;background-color:transparent;position:absolute;right:20%;top:10px;}
    a#yt{background:url(../images/yt.png) no-repeat;display:block;height:32px;width:32px;background-color:transparent;position:absolute;right:17%;top:10px;}
    
    /*** END */
    
    
    /* Top Titles */
    span.top {margin:0 auto;}
    
    .top-titles h1 {font-size: 4.5em;margin: -17px 0 -3px;color: #C90;}
    
    p.bottom {margin:0 0 0 10px;}
    
    .top-titles { display:inline-block; margin:0 auto 0 auto;position: relative;top: -22px;font-family: "Arial Black", Gadget, sans-serif;}
    
    /*** END */
    
    
    /* Video */
    .video iframe{width:600px;height:400px;margin-bottom:-5px; z-index:99; display:inline-block; }
    .awards {-webkit-border-radius: 0px 0px 28px 28px;-moz-border-radius: 0px 0px 28px 28px;border-radius: 0px 0px 28px 28px;}
    .awards {width:600px;height:150px;background:url(../images/awards.png)no-repeat;background-size:600px 150px;margin:0 auto 0 auto;}
    
    .bio {position:relative; left:-105px;}
    
    
    
    /*** END */
    
    
    /* Logo's */
    div.top-logo{height:67px;width:57px;background:url(../images/petelogo.png)no-repeat;background-size:60px 50px;z-index:11;position:absolute;left:27%;top:0; z-index:-1;}
    div.pete-right{height:500px;width:300px;background:url(../images/petelogo.png)no-repeat;background-size:300px 250px;position:absolute;right:9%;top:36%; display:block;}
    
    div.pete-left{height:500px;width:300px;background:url(../images/petelogo.png)no-repeat;background-size:300px 250px;position:absolute;left:9%;top:36%;}
    
    /*** END */
    
    
    #main-content {width:100%;height:100%;}
    #guts {width:670px; margin:0 auto 0 auto; color:#fff;}
    
    
    /* Other */
    #social{position:absolute;top:30px;right:20px;width:60px;height:30px;z-index:99999;}
    
    #header{position:relative;top:11px;min-width:100%;height:50px;background-color:#C90;display:block;float:left;z-index:999;margin-bottom:50px;}
    body{text-align:center;background:url(../images/background.jpg);-webkit-background-size:cover;-moz-background-size:cover;-o-background-size:cover;background-size:cover;height:100%;z-index:-999;}
    #main-content{margin-top: 0;z-index: 99;margin: 0 auto;}
    #papercontent{width:100%;text-align:middle;font-family:Helvetica;font-size:150%;color:#fff;margin:80px auto 0;padding:0 0 120px;}
    
    #footer, .push {height: 4em; width:100%; height:40px; background-color:#C90;}
    
    
    .push{margin-top:40px;}
    a:link,a:visited,.header1 a:link,.header1 a:visited,.header2 a:link,.header2 a:visited{color:#fff;text-decoration:none;}
    a:hover,a:active,.header1 a:hover,.header1 a:active{color:#000;text-decoration:none;}
    .header2 a:hover,.header2 a:active{color:#C90;text-decoration:none;}
    
    #footer > p:first-child {
        float: left;
        text-align: left;
        width: 33.3%; }
    
    #footer > p:nth-child(2) {
        float: left;
        text-align: center;
        width: 33.4%; }
    
    #footer > p:last-child {
        float: right;
        text-align: right;
        width: 33.3%; }
    	
    	/* facebook */
    	
    .facebook{padding-left: 100px;
    margin-top: -37px;}
    HOMEPAGE CODE:

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict/EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1 -strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <html>
    <head>
    	<meta name="description" content="This site shows the positive and negatives to electronic reading versus the traditional method, and the context that surrounds the emergence of new technologies - a context that matters to us" />
    	<meta name="author" content="tempz">
    	<meta name="keywords" content="Electronic, Reading, Print, Text, e-Book, Kindle, Impact, Effects, Libraries, Books, Bookstores, Nicholas, Carr, Bookless, Online, Memory" />
    <title> Elvis Tribute Artist: Pete Paquette </title>
    <!-- Pete, Paquette, Elvis -->
    	<link rel="stylesheet" href="css/main.css?ver=12122012"/>
    <!--[if IE]> 
    	<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]--> 
    	<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js'></script>   
    	<script type='text/javascript' src='js/jquery.ba-hashchange.min.js'></script>
    	<script type='text/javascript' src='js/dynamicpage.js'></script>
    	<script src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script>
    
    </head>
    <body>
    <div id="container">
    	<div id="header">
    		<div class="top-logo"></div>
    			<nav>
    				<ul class="group">
    					<li><a href="index.html">Home</a></li>
    					<li><a href="bio.html">Bio</a></li>
    					<li><a href="about.html">Tour Dates</a></li>
    					<li><a href="#">Multimedia</a></li>
    					<li><a href="#">Sign Up</a></li>
    				</ul>	
    			</nav>
    			<a id="yt" href="youtubehere"></a>
    			<a id="fb" href="fbhere"></a>
    		</div>
    	<div id="page-wrap">
    		<div class="pete-left"></div>
    	<div id="main-content">
    		<div id="guts">
    			<div class="top-titles">
    				<span class="top">ELVIS TRIBUTE ARTIST</span>
    				<h1>PETE PAQUETTE</h1>
    				<p class="bottom">One of Canada's top Elvis Tribute Artists and recipient of numerous awards</p>
    			</div>	
    			<div class="video">	
    				<iframe width="900" height="500" src="http://www.youtube.com/embed/XWqBRTKNhGM" frameborder="0" allowfullscreen></iframe>
    			</div>
    			<div class="awards">
    				
            </div>
    			<div class="facebook">
    				<iframe src="https://www.facebook.com/plugins/like.php?href=https://www.facebook.com/pages/The-Official-Pete-Paquette-Fan-Club/263124813762333?fref=ts"
            scrolling="no" frameborder="0"
            style="border:none; width:450px; height:80px; color:#fff"></iframe>
    
    
    			</div>
    		</div>
    
    	</div> 
    		<div class="pete-right"></div>
    </div>
    	<div class="push"></div>
    	<div id="footer">
    			<p>First section, first line of text<br /> Second line of text</p>
    			<p>Second section, first line of text<br /> Second line of text</p>
    			<p>Third section, first line of text<br /> Second line of text</p>
    	</div>
    <div id="fb-root"></div>
    <script>(function(d, s, id) {
      var js, fjs = d.getElementsByTagName(s)[0];
      if (d.getElementById(id)) return;
      js = d.createElement(s); js.id = id;
      js.src = "//connect.facebook.net/en_GB/all.js#xfbml=1";
      fjs.parentNode.insertBefore(js, fjs);
    }(document, 'script', 'facebook-jssdk'));</script>
    </body>
    </html>
    <!-- Hosting24 Analytics Code -->
    <script type="text/javascript" src="http://stats.hosting24.com/count.php"></script>
    <!-- End Of Analytics Code -->
    BIO PAGE CODE:

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict/EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1 -strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <html>
    <head>
    	<meta name="description" content="This site shows the positive and negatives to electronic reading versus the traditional method, and the context that surrounds the emergence of new technologies - a context that matters to us" />
    	<meta name="author" content="tempz">
    	<meta name="keywords" content="Electronic, Reading, Print, Text, e-Book, Kindle, Impact, Effects, Libraries, Books, Bookstores, Nicholas, Carr, Bookless, Online, Memory" />
    <title> Elvis Tribute Artist: Pete Paquette </title>
    <!-- Pete, Paquette, Elvis -->
    	<link rel="stylesheet" href="css/main.css?ver=12122012"/>
    <!--[if IE]> 
    	<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]--> 
    	<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js'></script>   
    	<script type='text/javascript' src='js/jquery.ba-hashchange.min.js'></script>
    	<script type='text/javascript' src='js/dynamicpage.js'></script>
    	<script src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script>
    
    </head>
    <body>
    <div id="container">
    	<div id="header">
    		<div class="top-logo"></div>
    			<nav>
    				<ul class="group">
    					<li><a href="index.html">Home</a></li>
    					<li><a href="bio.html">Bio</a></li>
    					<li><a href="about.html">Tour Dates</a></li>
    					<li><a href="#">Multimedia</a></li>
    					<li><a href="#">Sign Up</a></li>
    				</ul>	
    			</nav>
    			<a id="yt" href="youtubehere"></a>
    			<a id="fb" href="fbhere"></a>
    		</div>
    	<div id="page-wrap">
    		<div class="pete-left"></div>
    	<div id="main-content">
    		<div id="guts">
    			<div class="top-titles">
    				<span class="top">ELVIS TRIBUTE ARTIST</span>
    				<h1>PETE PAQUETTE</h1>
    				<p class="bottom">One of Canada's top Elvis Tribute Artists and recipient of numerous awards</p>
    			</div>	
    			<div class="bio">	
    				<img src="images/petebio.png" alt="Pete Bio">
    			</div>
    				<iframe src="//www.facebook.com/plugins/like.php?href=http%3A%2F%2Fwww.facebook.com%2Fpages%2FThe-Official-Pete-Paquette-Fan-Club%2F263124813762333&amp;send=false&amp;layout=standard&amp;width=500&amp;show_faces=false&amp;font&amp;colorscheme=light&amp;action=like&amp;height=35" scrolling="no" frameborder="0" style="bottom: 119px;color: white;border: none;overflow: hidden;width: 500px;height: 35px;position: absolute;margin: 0 auto;margin-left: -10em;" allowTransparency="true"></iframe>
    		</div>
    
    	</div> 
    		<div class="pete-right"></div>
    </div>
    	<div class="push"></div>
    	<div id="footer">
    			<p>First section, first line of text<br /> Second line of text</p>
    			<p>Second section, first line of text<br /> Second line of text</p>
    			<p>Third section, first line of text<br /> Second line of text</p>
    	</div>
    <div id="fb-root"></div>
    <script>(function(d, s, id) {
      var js, fjs = d.getElementsByTagName(s)[0];
      if (d.getElementById(id)) return;
      js = d.createElement(s); js.id = id;
      js.src = "//connect.facebook.net/en_GB/all.js#xfbml=1";
      fjs.parentNode.insertBefore(js, fjs);
    }(document, 'script', 'facebook-jssdk'));</script>
    </body>
    </html>
    <!-- Hosting24 Analytics Code -->
    <script type="text/javascript" src="http://stats.hosting24.com/count.php"></script>
    <!-- End Of Analytics Code -->
    Any help with this would be greatly appreciated (and if you want to get the images I used for the site, they are in the download link above)!!
    Last edited by Jake_A_T; 06-05-2013 at 04:41 PM.

  • #2
    Senior Coder DanInMa's Avatar
    Join Date
    Nov 2010
    Location
    Salem,Ma
    Posts
    1,577
    Thanks
    13
    Thanked 248 Times in 248 Posts
    most folks here won't download zips from other users. you are much better off posting code, a pastebin or jsfiddle, or a link to a test page/site

  • #3
    New Coder
    Join Date
    Oct 2012
    Posts
    35
    Thanks
    16
    Thanked 0 Times in 0 Posts
    Thanks for the tip! I have since posted all of the code above. If someone requires the images used on the site those are included in the "files" link.

  • #4
    Senior Coder DanInMa's Avatar
    Join Date
    Nov 2010
    Location
    Salem,Ma
    Posts
    1,577
    Thanks
    13
    Thanked 248 Times in 248 Posts
    ok, so before you really get into this. You have 2 <html> tags at the start of your document.
    You have declared the page as an xhtml document, but you are using the html5shiv script on the page. What type of page is this supposed to be?

  • #5
    New Coder
    Join Date
    Oct 2012
    Posts
    35
    Thanks
    16
    Thanked 0 Times in 0 Posts
    It's supposed to be a xhtml document, sorry about the confusion!


  •  

    Tags for this Thread

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •