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 3 of 3
  1. #1
    New to the CF scene
    Join Date
    Mar 2013
    Location
    Plymouth
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Parallax Scrolling Issues

    Hi,

    I'm new to coding, I'm currently designing myself a portfolio website to showcase my design skills, I've developed a problem I hope you could help me out with!

    I've built a skeleton for a parallax scrolling index page with the idea to then link to individual projects from the portfolio section. I've spent a while on the visuals and had the scrolling working but now when I've tried to make the site responsive (using media queries to load different CSS styles) it seems to mess up now when it scrolls down to the correct section it then jumps somewhere else.

    Would you be able to look at my code and tell me if there is something I am doing horribly wrong? My website is online at www.ampersandmagazine.co.uk

    I'll also upload the code here too.

    HTML

    Code:
    <!doctype html>
    <html>
    <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>Matt Wilson Graphic Designs</title>
    <link type="text/css" rel="stylesheet" href="style.css">
    <link href='http://fonts.googleapis.com/css?family=Graduate' rel='stylesheet' type='text/css'>
    <script type="text/javascript" src="jquery.js"></script>
    <script type="text/javascript" src="script.js"></script>
    </head>
    
    <body>
    
    <nav>
        
    <div id="menu_wrapper">
    
         <a href="#services"><div class="menu_button">
        
        	<p>services</p>
        
        </div></a>
        
        <a href="#about"><div class="menu_button">
        
        	<p>about</p>
        
        </div></a>
        
        <a href="#top"><div id="logo">
        
        </div></a>
        
        <a href="#portfolio"><div class="menu_button">
        
        	<p>portfolio</p>
            
        </div></a>
        
         <a href="#contact"><div class="menu_button">
        
        	<p>contact</p>
        
        </div></a>
        
    </div>
    
    </nav>
    
    <section id="feature">
    
    <div id="top">
    
    </div>
    
    	<div id="feature_image">
        
        	<img src="images/greece.jpg">
        
        </div>
        
    <div class="logo_border_black">
    
    </div>
        
    </section>
        
    <section id="welcome">
        
    	<div id="message">
        
    		<p>HELLO AND WELCOME TO MY WEBSITE PLEASE CHECK OUT MY WORK AND SAY HELLO WHILST YOUR HERE</p>
            
    	</div>
        
        <div class="bottom_border_black">
            
        </div>
    
    </section>
    
    <section id="services">
    
    	<div class="triangle_white">
            
    	</div>
        
        <div class="title_white">
        
        	<p>services</p>
            
    	</div>
        
    	<div class="logo_border_white">
    
    	</div>
        
        <div class="bottom_border_white">
            
        </div>
        
    </section>
    
    <section id="about">
    
    	<div class="triangle_black">
            
    	</div>
        
        <div class="title_black">
        
        	<p>about</p>
            
    	</div>
    
    	<div class="logo_border_black">
    
    	</div>
        
        <div class="bottom_border_black">
            
        </div>
    
    </section>
    
    <section id="portfolio">
    
    	<div class="triangle_white">
            
    	</div>
        
        <div class="title_white">
        
        	<p>portfolio</p>
            
    	</div>
    
    	<div class="logo_border_white">
    
    	</div>
        
        <div class="bottom_border_white">
            
        </div>
    
    </section>
    
    <section id="contact">
    
    	<div class="triangle_black">
            
    	</div>
        
        <div class="title_black">
        
        	<p>contact</p>
            
    	</div>
    
    	<div class="logo_border_black">
    
    	</div>
        
        <div class="bottom_border_black">
            
        </div>
    
    </section>
    
    </body>
    </html>
    CSS

    Code:
    * {
    	margin:0px;
    	padding:0px;
    }
    
    body {
    	font-family: 'Graduate', cursive;
    	text-decoration:none;
    	color:#FFF;	
    }
    
    h1 {
    	font-family: 'Graduate', cursive;
    	font-size:37px;
    	line-height:55px;
    }
    
    h2 {
    	font-family: 'Graduate', cursive;
    	font-size:20px;
    	line-height:40px;
    }
    
    h3 {
    	font-family: 'Graduate', cursive;
    	font-size:16px;
    	line-height:40px;
    }
    
    a:hover {
    	color:#00739C;
    }
    
    /**MENU**/
    
    nav {
    	position:fixed;
    	z-index:1;
    	width:100%;
    	background-color:#FFF;
    	height:70px;
    	background-color:#0099C1;
    }
    
    #menu_wrapper {
    	width:700px;
    	margin-left:auto;
    	margin-right:auto;
    }
    
    .menu_button {
    	padding-top:25px;
    	text-align:center;
    	width:100px;
    	height:50px;
    	color:#FFF;
    	float:left;
    }
    
    .menu_button:hover {
    	color:#00739C;
    }
    
    #logo {
    	width:300px;
    	height:70px;
    	float:left;
    	background-image:url(images/logo.png);
    	background-position:top left;
    	background-repeat:no-repeat;
    }
    
    #logo:hover {
    	background-position:bottom left;
    }
    
    /**CONTENT**/
    
    section {
    	display:block;
    	position: relative;
    	width:100%;
    }
    
    #top {
    	width:900px;
    	height:100px;
    	margin-left:auto;
    	margin-right:auto;
    	padding-top:70px;
    	background-position:bottom;
    	background-image:url(images/border_black.png);
    	background-repeat:no-repeat;
    }
    
    .triangle_black {
    	z-index:1;
    	padding-bottom:70px;
    	display:block;
    	width:60px;
    	height:25px;
    	margin-left:auto;
    	margin-right:auto;
    	background-image:url(images/triangle_black.png);
    	background-position:top left;
    	background-repeat:no-repeat;
    }
    
    .triangle_white {
    	z-index:1;
    	padding-bottom:70px;
    	display:block;
    	width:60px;
    	height:25px;
    	margin-left:auto;
    	margin-right:auto;
    	background-image:url(images/triangle_white.png);
    	background-position:top left;
    	background-repeat:no-repeat;
    }
    
    .logo_border_black {
    	width:900px;
    	height:100px;
    	margin-left:auto;
    	margin-right:auto;
    	background-image:url(images/logo_border_black.png);
    	background-position:top left;
    	background-repeat:no-repeat;
    }
    
    
    .logo_border_white {
    	width:900px;
    	height:100px;
    	margin-left:auto;
    	margin-right:auto;
    	background-image:url(images/logo_border_white.png);
    	background-position:top left;
    	background-repeat:no-repeat;
    }
    
    .bottom_border_black {
    	width:900px;
    	height:100px;
    	margin-left:auto;
    	margin-right:auto;
    	background-image:url(images/border_black.png);
    	background-position:top left;
    	background-repeat:no-repeat;
    }
    
    .bottom_border_white {
    	width:900px;
    	height:100px;
    	margin-left:auto;
    	margin-right:auto;
    	background-image:url(images/border_white.png);
    	background-position:top left;
    	background-repeat:no-repeat;
    }
    
    .title_white {
    	width:900px;
    	padding-top:20px;
    	margin-left:auto;
    	margin-right:auto;
    	text-align:center;
    }
    
    .title_white p {
    	font-size:37px;
    	color:#FFF;
    }
    
    .title_black {
    	width:900px;
    	padding-top:20px;
    	margin-left:auto;
    	margin-right:auto;
    	text-align:center;
    }
    
    .title_black p {
    	font-size:37px;
    	color:#333;
    }
    
    #feature {
    	color:#333;
    	margin-right:auto;
    	margin-left:auto;
    	width:100%;
    	background-color:#FFF;
    	
    }
    
    #feature_image {
    	color:#333;
    	margin-right:auto;
    	margin-left:auto;
    	width:900px;
    	height:400px;
    	background-image:url(images/greece.jpg);
    	background-position:top left;
    	background-repeat:no-repeat;
    }
    
    #feature_image img {
    	width:100%;
    }
    
    #welcome {
    	color:#333;
    	margin-right:auto;
    	margin-left:auto;
    	width:100%;
    	background-color:#FFF;
    }
    
    #message {
    	width:900px;
    	margin-right:auto;
    	margin-left:auto;
    	text-transform:lowercase;
    	font-family: 'Graduate', cursive;
    	font-size:37px;
    	line-height:55px;
    }
    
    #services {
    	color:#333;
    	margin-right:auto;
    	margin-left:auto;
    	width:100%;
    	background-color:#333;
    }
    
    #about {
    	color:#333;
    	margin-right:auto;
    	margin-left:auto;
    	width:100%;
    	background-color:#FFF;
    }
    
    #portfolio {
    	color:#333;
    	margin-right:auto;
    	margin-left:auto;
    	width:100%;
    	background-color:#333;
    }
    
    #contact {
    	color:#333;
    	margin-right:auto;
    	margin-left:auto;
    	width:100%;
    	background-color:#FFF;
    }
    
    /* #Tablet (Portrait)
    ================================================== */
    
        /* Note: Design for a width of 768px */
    	
    @media only screen and (min-width: 768px) and (max-width: 959px) {
    
    nav {
    	position:fixed;
    	z-index:1;
    	width:100%;
    	background-color:#FFF;
    	height:70px;
    	background-color:#0099C1;
    }
    
    #menu_wrapper {
    	width:655px;
    	margin-left:auto;
    	margin-right:auto;
    }
    
    .menu_button {
    	padding-top:25px;
    	text-align:center;
    	width:100px;
    	height:50px;
    	color:#FFF;
    	float:left;
    }
    
    .menu_button:hover {
    	color:#00739C;
    }
    
    #logo {
    	width:255px;
    	height:70px;
    	float:left;
    	background-image:url(images/Logo_tablet.png);
    	background-position:top left;
    	background-repeat:no-repeat;
    }
    
    #logo:hover {
    	background-position:bottom left;
    }	
    
    /**CONTENT**/
    	
    section {
    	width:768px;
    	
    }
    
    #top {
    	width:768px;
    	height:100px;
    	margin-left:auto;
    	margin-right:auto;
    	padding-top:70px;
    	background-image:url(images/border_black_tablet.png);
    	background-position:bottom left;
    	background-repeat:no-repeat;
    }
    
    .logo_border_black {
    	width:768px;
    	height:100px;
    	margin-left:auto;
    	margin-right:auto;
    	background-image:url(images/logo_border_black_tablet.png);
    	background-position:top left;
    	background-repeat:no-repeat;
    }
    
    .logo_border_white {
    	width:768px;
    	height:100px;
    	margin-left:auto;
    	margin-right:auto;
    	background-image:url(images/logo_border_white_tablet.png);
    	background-position:top left;
    	background-repeat:no-repeat;
    }
    
    .bottom_border_black {
    	width:768px;
    	height:100px;
    	margin-left:auto;
    	margin-right:auto;
    	background-image:url(images/border_black_tablet.png);
    	background-position:top left;
    	background-repeat:no-repeat;
    }
    
    .bottom_border_white {
    	width:768px;
    	height:100px;
    	margin-left:auto;
    	margin-right:auto;
    	background-image:url(images/border_white_tablet.png);
    	background-position:top left;
    	background-repeat:no-repeat;
    }
    
    .triangle_black {
    	z-index:1;
    	padding-bottom:70px;
    	display:block;
    	width:60px;
    	height:25px;
    	margin-left:auto;
    	margin-right:auto;
    	background-image:url(images/triangle_black.png);
    	background-position:top left;
    	background-repeat:no-repeat;
    }
    
    .triangle_white {
    	z-index:1;
    	padding-bottom:70px;
    	display:block;
    	width:60px;
    	height:25px;
    	margin-left:auto;
    	margin-right:auto;
    	background-image:url(images/triangle_white.png);
    	background-position:top left;
    	background-repeat:no-repeat;
    }
    
    .title_white {
    	width:768px;
    	padding-top:20px;
    	margin-left:auto;
    	margin-right:auto;
    	text-align:center;
    }
    
    .title_black {
    	width:768px;
    	padding-top:20px;
    	margin-left:auto;
    	margin-right:auto;
    	text-align:center;
    }
    
    #feature_image {
    	color:#333;
    	margin-right:auto;
    	margin-left:auto;
    	width:768px;
    	height:340px;
    	background-position:top left;
    	background-repeat:no-repeat;
    }
    
    #feature_image img {
    	width:100%;
    }
    
    #message {
    	width:768px;
    	margin-right:auto;
    	margin-left:auto;
    	text-transform:lowercase;
    	font-family: 'Graduate', cursive;
    	font-size:37px;
    	line-height:55px;
    }
    
    
    	}
    	
    /*  #Mobile (Portrait)
    ================================================== */
    
        /* Note: Design for a width of 320px */
    	
    @media only screen and (max-width: 767px) {
    
    nav {
    	position:fixed;
    	z-index:1;
    	width:100%;
    	background-color:#FFF;
    	height:70px;
    	background-color:#0099C1;
    }
    
    #menu_wrapper {
    	width:320px;
    	margin-left:auto;
    	margin-right:auto;
    }
    
    .menu_button {
    	padding-top:30px;
    	text-align:center;
    	width:64px;
    	height:45px;
    	color:#FFF;
    	float:left;
    }
    
    .menu_button p {
    	font-size:11px;
    }
    
    .menu_button:hover {
    	color:#00739C;
    }
    
    #logo {
    	width:64px;
    	height:70px;
    	float:left;
    	background-image:url(images/Logo_mobile.png);
    	background-position:top left;
    	background-repeat:no-repeat;
    }
    
    #logo:hover {
    	background-position:bottom left;
    }
    
    /**CONTENT**/
    	
    section {
    	width:320px;	
    }
    
    #top {
    	width:320px;
    	height:50px;
    	margin-left:auto;
    	margin-right:auto;
    	padding-top:70px;
    	background-image:url(images/border_black_mobile.png);
    	background-position:bottom left;
    	background-repeat:no-repeat;
    }
    
    .logo_border_black {
    	width:320px;
    	height:50px;
    	margin-left:auto;
    	margin-right:auto;
    	background-image:url(images/logo_border_black_mobile.png);
    	background-position:top left;
    	background-repeat:no-repeat;
    }
    
    .logo_border_white {
    	width:320px;
    	height:50px;
    	margin-left:auto;
    	margin-right:auto;
    	background-image:url(images/logo_border_white_mobile.png);
    	background-position:top left;
    	background-repeat:no-repeat;
    }
    
    .bottom_border_black {
    	width:320px;
    	height:50px;
    	margin-left:auto;
    	margin-right:auto;
    	background-image:url(images/border_black_mobile.png);
    	background-position:top left;
    	background-repeat:no-repeat;
    }
    
    .bottom_border_white {
    	width:320px;
    	height:50px;
    	margin-left:auto;
    	margin-right:auto;
    	background-image:url(images/border_white_mobile.png);
    	background-position:top left;
    	background-repeat:no-repeat;
    }
    
    .triangle_black {
    	z-index:1;
    	padding-bottom:70px;
    	display:block;
    	width:33px;
    	height:14px;
    	margin-left:auto;
    	margin-right:auto;
    	background-image:url(images/triangle_black_mobile.png);
    	background-position:top left;
    	background-repeat:no-repeat;
    }
    
    .triangle_white {
    	z-index:1;
    	padding-bottom:70px;
    	display:block;
    	width:33px;
    	height:14px;
    	margin-left:auto;
    	margin-right:auto;
    	background-image:url(images/triangle_white_mobile.png);
    	background-position:top left;
    	background-repeat:no-repeat;
    }
    
    
    .title_white {
    	width:320px;
    	padding-top:20px;
    	margin-left:auto;
    	margin-right:auto;
    	text-align:center;
    }
    
    .title_white p {
    	font-size:25px;
    	line-height:35px;
    }
    
    .title_black {
    	width:320px;
    	padding-top:20px;
    	margin-left:auto;
    	margin-right:auto;
    	text-align:center;
    }
    
    .title_black p {
    	font-size:25px;
    	line-height:35px;
    }
    
    #feature_image {
    	color:#333;
    	margin-right:auto;
    	margin-left:auto;
    	width:320px;
    	height:142px;
    }
    
    #feature_image img {
    	width:100%;
    }
    
    #message {
    	width:320px;
    	margin-right:auto;
    	margin-left:auto;
    	text-transform:lowercase;
    	font-family: 'Graduate', cursive;
    	font-size:37px;
    	line-height:55px;
    }
    
    #message p {
    	font-size:25px;
    	line-height:35px;
    }
    	}
    Script

    Code:
    $(document).ready(function() {
      function filterPath(string) {
      return string
        .replace(/^\//,'')
        .replace(/(index|default).[a-zA-Z]{3,4}$/,'')
        .replace(/\/$/,'');
      }
      var locationPath = filterPath(location.pathname);
      var scrollElem = scrollableElement('html', 'body');
     
      $('a[href*=#]').each(function() {
        var thisPath = filterPath(this.pathname) || locationPath;
        if (  locationPath == thisPath
        && (location.hostname == this.hostname || !this.hostname)
        && this.hash.replace(/#/,'') ) {
          var $target = $(this.hash), target = this.hash;
          if (target) {
            var targetOffset = $target.offset().top;
            $(this).click(function(event) {
              event.preventDefault();
              $(scrollElem).animate({scrollTop: targetOffset}, 1000, function() {
                location.hash = target;
              });
            });
          }
        }
      });
     
      // use the first element that is "scrollable"
      function scrollableElement(els) {
        for (var i = 0, argLength = arguments.length; i <argLength; i++) {
          var el = arguments[i],
              $scrollElement = $(el);
          if ($scrollElement.scrollTop()> 0) {
            return el;
          } else {
            $scrollElement.scrollTop(1);
            var isScrollable = $scrollElement.scrollTop()> 0;
            $scrollElement.scrollTop(0);
            if (isScrollable) {
              return el;
            }
          }
        }
        return [];
      }
     
    });
    If you understand where I've gone wrong I would really appreciate some feedback!

    Best wishes

    Matt
    Last edited by VIPStephan; 03-16-2013 at 05:05 PM. Reason: fixed code BB tags

  • #2
    Senior Coder
    Join Date
    Apr 2011
    Location
    London, England
    Posts
    2,120
    Thanks
    15
    Thanked 354 Times in 353 Posts
    I had a quick look at your page but I don't know what I'm looking for..?
    "I'm here to save your life. But if I'm going to do that, I'll need total uninanonynymity." Me Myself & Irene.
    Validate your HTML and CSS

  • #3
    New to the CF scene
    Join Date
    Mar 2013
    Location
    Plymouth
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Hi Andrew,

    Thanks for looking at my page, the issue is when you click on the buttons in the navigation bar the pages scrolls down to the right place but glitches from time to time causing the page to jolt, I think it's fine on computer web browser but when the design is scaled for tablet and mobile it's very noticeable I've looked through my CSS for both tablet and mobile but can't seem to see what I've done wrong? If you could help that would be brilliant!

    All the best

    Matt


  •  

    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
    •