Go Back   CodingForums.com > :: Client side development > JavaScript programming > JavaScript frameworks
Reload this Page Parallax Scrolling Issues

Before you post, read our: Rules & Posting Guidelines

Reply
 
Thread Tools Rate Thread
Enjoy an ad free experience by logging in. Not a member yet? Register.
Old 03-16-2013, 01:46 PM   PM User | #1
Matt Wilson
New to the CF scene

 
Join Date: Mar 2013
Location: Plymouth
Posts: 2
Thanks: 0
Thanked 0 Times in 0 Posts
Matt Wilson is an unknown quantity at this point
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
Matt Wilson is offline   Reply With Quote
Old 03-17-2013, 01:40 AM   PM User | #2
AndrewGSW
Senior Coder

 
Join Date: Apr 2011
Location: London, England
Posts: 2,120
Thanks: 15
Thanked 354 Times in 353 Posts
AndrewGSW will become famous soon enough
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
AndrewGSW is offline   Reply With Quote
Old 03-17-2013, 08:39 AM   PM User | #3
Matt Wilson
New to the CF scene

 
Join Date: Mar 2013
Location: Plymouth
Posts: 2
Thanks: 0
Thanked 0 Times in 0 Posts
Matt Wilson is an unknown quantity at this point
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
Matt Wilson is offline   Reply With Quote
Reply

Bookmarks

Tags
issue, parallax, responsive, scroll

Jump To Top of Thread


« Previous Thread | Next Thread »
Thread Tools
Rate This Thread
Rate This Thread:

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts
BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Forum Jump


All times are GMT +1. The time now is 10:54 PM.
Advertisement
Log in to turn off these ads.