Website Compatible To Other Devices? - javascript

I have made this Website just as a little something to do. I have been trying different methods to get it to be 100% Compatible with all devices, and to fit perfectly in the each device.
I don't know anything about #media queries, nor javascript. So I am quite blank on what option I have.
This is the code I am currently using, but I still need to scroll to right to see the whole page:
<meta name="viewport" content="width=device-width, initial-scale=0">
<link rel="stylesheet" href="/script/jquery.mobile-1.4.3.css">
<script type="text/javascript" src="/script/jquery.mobile-1.4.3.js"></script>
I am not really HTML savvy, just mess around with it, and try to create things.
The next solution that I know I could do is just make my images smaller. However by doing this, I obviously won't get the appearance I am particularly after.
Another thing is, how would I get my 'Back To Top' button be in the center of each page, and on all devices?
Javascript:
<script type="text/javascript">
jQuery(document).ready(function() {
var offset = 220;
var duration = 500;
jQuery(window).scroll(function() {
if (jQuery(this).scrollTop() > offset) {
jQuery('.back-to-top').fadeIn(duration);
} else {
jQuery('.back-to-top').fadeOut(duration);
}
});
jQuery('.back-to-top').click(function(event) {
event.preventDefault();
jQuery('html, body').animate({scrollTop: 0}, duration);
return false;
})
});
</script>
Body Code:
<p style="text-align:center">
Back to Top
CSS:
.back-to-top {
position: fixed;
bottom: 0px;
right: 44%;
text-decoration: none;
color: transparent;
background-color: rgba(0, 230, 0, 0.10);
font-size: 13px;
padding: 1em;
display: none;
border: 1px solid #CCFF33;
border-radius: 4px;
box-shadow: 0 0 8px 1px #00E600;
color: #C1C1C1;
outline: none;
height: 10px;
width: 180px;
font-weight: 700;
letter-spacing: 2px;
text-shadow: 0 0 0.2em #000, 0 0 0.2em #000, 0 0 0.2em #000;
text-align: center;
}
.back-to-top:hover {
background-color: rgba(255, 0, 0, 0.10);
}

This is the basics of media queries
You start with designing everything for mobile first in this example and work your way down, changing attributes your each screen size.
/* Mobile Layout: 480px and below. */
exampleDiv {
Width:60%;
height:100px;
}
/* Tablet Layout: 481px to 768px. Inherits styles from: Mobile Layout. */
#media only screen and (min-width: 481px) {
exampleDiv {
Width:60% height:300px;
}
}
/* Desktop Layout: 769px to a max of 1232px. Inherits styles from: Mobile Layout and Tablet Layout. */
#media only screen and (min-width: 769px) {
exampleDiv {
Width:100% height:500px;
}
}

Related

Webkit scrolling too much?

I have some content which can have only specific height (no more), and I added some scroll on that content.
This is my CSS:
.value {
max-height: 60px;
overflow-y: auto;
color: black;
font-size: 16px;
}
/* width */
.value::-webkit-scrollbar {
width: 3px;
}
/* Track */
.value::-webkit-scrollbar-track {
box-shadow: inset 0 0 5px rgb(163, 163, 163);
border-radius: 5px;
}
/* Handle */
.value::-webkit-scrollbar-thumb {
background: linear-gradient(60deg, #b95aca, #8c15ad);
border-radius: 5px;
}
And This is my Subtitle content:
<div
class="value"
*ngIf="courseData.sub_title"
> {{courseData.sub_title}}
</div>
This is the image:
So, when I want to scroll down or up using mouse wheel it's scrolling too much and user can not be able read full text (part of text was going up or down with scrolling).
How can I change scroll step?

parallax backgrounds don't line up properly

What I have is a website with a parallax opening page. Unfortunately, the text sections appear to be interfering with the scrolling backgrounds so that as the page scrolls the bottom parallax image (which should be the size of a pc monitor and then with text overlaying it) is repeated rather than being horizontally centered.
I'm using foundation with my own simple javascript parallax function, however as I'm relatively inexperienced with javascript I'm struggling to fix the problem.
What it seems like the fix should be is to add some padding to the top of the "home-image-3" section, but when I do this the image is still split (repeating) and a margin is added to the text-section and doesn't stop the repeating image. Therefore I need a different solution.
You can see the problem in action here http://r3gamers.com/spratters53/
Take note that images 1 and 2 (the keyboard and building) work perfectly, and image 3 (the ps4) begins again right at the bottom of the image. It's barely noticable, and yet it's annoying that the image isn't aligned properly.
HTML
<!doctype html>
<html class="no-js" lang="en">
<head>
<link rel="icon" type="image/png" href="img/favicon.png">
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Dan Spratling | Portfolio</title>
<link rel="stylesheet" href="css/app.css" />
<link rel="stylesheet" href="css/foundation.css" />
</head>
<body class="darkgrey">
<div class="fixed shadow" id="includeHeader"></div>
<div class="large-12 text-center paddingtb-20">
<h1>Welcome!</h1>
<h3>Take a look around. Make yourself at home!
</div>
<section id="home-image" data-speed="6" data-type="background">
</section>
<section id="home" data-speed="4">
<div id="#robin" class="fullwidth row padding-10">
<div class="large-8 large-centered medium-12 small-12 columns">
<h2>I am a web developer</h2>
<h4>Need a website created or updated? Get in touch!</h4>
<br/><br/>
I've been developing websites for 3 years, since I started university. When I started university, most of the subject was new to me, having only studied database theory before.
Since 2012, I've tried my hand at many different forms of computing however I've found that I love developing websites, especially the front end (<i>how it looks</i>).
I'm now looking for work in Devon to help enhance my ability and start working in a commercial environment.
</div>
</div>
</section>
<section id='home-image-2' data-speed='6' data-type='background'></section>
<section id="home" data-speed="4">
<div id="#robin" class="fullwidth row padding-10">
<div class="large-8 large-centered medium-12 small-12 columns">
<h2>I began learning my craft at Plymouth University</h2>
<h4>But my learning never really stops! </h4>
<br/><br/>
I studied computing, covering a range of subjects. Web development isn't my only skill, it's what I love, but I've had experience working with so much more.
Due to the nature of the course, I have worked with C#, C, ASP.NET, Java, HTML, CSS, Javascript, PHP .. and that's just coding languages! I've worked with MySQL, SQL Server, and Oracle databases.
On top of programming, I've had a lot of experience working with the "business end" of software development, meaning that I am able to do (or understand) a lot more than just coding up a design that's been made for me.
<br/>I've had to:
<br/>
<ul>
<li>Design projects from just an idea; creating proper design documentation such as Entity Relationship Diagrams and Concept Maps</li>
<li>Test on the go; by myself, and with real users, getting as much feedback as possible</li>
<li>Work with a team; using methodologies such as Agile (SCRUM) to help this process</li>
<li>Create projects which have both a short (less than a month) and long (up to a year) development schedule</li>
<li>Learn on the go! - I don't know everything, but I'm persistent and dedicated and will always find a way to complete my objective</li>
</ul>
</div>
</div>
</section>
<section id='home-image-3' data-speed='6' data-type='background'></section>
<section id="home" data-speed="4">
<div id="#robin" class="fullwidth row padding-10">
<div class="large-8 large-centered medium-12 small-12 columns">
<h2>I am a gamer, among other things</h2>
<h4>After all, you can't work all the time!</h4>
<br/><br/>
While I love developing websites, everybody needs some time for their hobbies. In my spare time I love to play video games. Maybe it's because it's so diverse, being both social and mentally stimulating in many ways.
Living in Plymouth also provides a great opportunity to visit local beaches and go on the occasional day out surfing.
</div>
</div>
</section>
<script src="js/vendor/jquery.js"></script>
<script src="js/foundation.min.js"></script>
<script>
$(document).foundation();
</script>
<script src="js/vendor/modernizr.js"></script>
<script>
$("#includeHeader").load("Navigation.html");
</script>
<script src="js/parallax.js"></script>
</body>
parallax.js
$(document).ready(function(){
// cache the window object
$window = $(window);
$('section[data-type="background"]').each(function(){
// declare the variable to affect the defined data-type
var $scroll = $(this);
$(window).scroll(function() {
// HTML5 proves useful for helping with creating JS functions!
// also, negative value because we're scrolling upwards
var yPos = -($window.scrollTop() / $scroll.data('speed'));
// background position
var coords = '50% '+ yPos + 'px';
// move the background
$scroll.css({ backgroundPosition: coords });
}); // end window scroll
}); // end section function
}); // close out script
//creates html5 element in IE
document.createElement("section");
CSS
.darkgrey {
background-color: rgb(30,30,30);
}
.shadow {
box-shadow: 0px 0px 10px 2px black;
}
.border {
border-style: solid;
color: black;
border-width: 1px;
}
div.overlay {
position: absolute;
top: 0px;
}
a.darken {
display: block;
background: black;
}
a.darken img {
display: block;
opacity: 0.9;
-webkit-transition: all 0.5s linear;
-moz-transition: all 0.5s linear;
-ms-transition: all 0.5s linear;
-o-transition: all 0.5s linear;
transition: all 0.5s linear;
}
a.darken:hover img {
opacity: 0.25;
}
h2.brighten, h4.brighten{
display: block;
opacity: 0;
color: white;
-webkit-transition: all 0.5s linear;
-moz-transition: all 0.5s linear;
-ms-transition: all 0.5s linear;
-o-transition: all 0.5s linear;
transition: all 0.5s linear;
}
a.darken:hover h2.brighten, a.darken:hover h4.brighten{
opacity: 1;
}
.caption {
position: absolute;
top: 40%;
left: 0px;
color: #ffffff;
text-align:center;
font-weight:bold;
opacity:0.7;
z-index: 10;
}
.relative {
position: relative;
}
.fullwidth {
width: 80%;
margin-left: auto;
margin-right: auto;
max-width: 80% !important;
}
.fullheight {
height: 100% !important;
}
.padding-10 {
padding: 10px;
margin-bottom: 0;
}
.padding-20 {
padding: 20px;
}
.paddingtb-10 {
padding-top: 10px;
padding-bottom: 10px;
}
.paddingtb-20 {
padding-top: 20px;
padding-bottom: 20px;
}
.margin-10 {
margin: 10px;
}
.margin-20 {
margin: 20px;
}
.margintb-10 {
margin-top: 10px;
margin-bottom: 10px;
}
.margintb-20 {
margin-top: 20px;
margin-bottom: 20px;
}
.lightborder {
border: 1px #5C5B5A solid;
border-radius: 3px;
transition: transform 500ms ease-in-out;
}
#home-image {
background: url(../img/keyboard.jpg) 50% 0 fixed;
height: auto;
margin: 0 auto;
width: 100%;
position: relative;
box-shadow: 2px 2px 20px rgba(0,0,0,0.8);
padding: 300px 0;
}
#media (max-width: 1280px) {
#home-image {
background: url(../img/keyboard1280.jpg) 50% 0 fixed;
padding: 200px 0;
}
}
#media (max-width: 760px) {
#home-image {
background: url(../img/keyboard720.jpg) 50% 0 fixed;
padding: 100px 0;
}
}
#media (max-width: 480px) {
#home-image {
background: url(../img/keyboard480.jpg) 50% 0 fixed;
padding: 60px 0;
}
}
#home-image-2 {
background: url(../img/plymouth.jpg) 50% 0 fixed;
height: auto;
margin: 0 auto;
width: 100%;
position: relative;
box-shadow: 2px 2px 20px rgba(0,0,0,0.8);
padding: 300px 0;
}
#media (max-width: 1280px) {
#home-image-2 {
background: url(../img/plymouth.jpg) 50% 0 fixed;
padding: 200px 0;
}
}
#media (max-width: 760px) {
#home-image-2 {
background: url(../img/plymouth720.jpg) 50% 0 fixed;
padding: 100px 0;
}
}
#media (max-width: 480px) {
#home-image-2 {
background: url(../img/plymouth480.jpg) 50% 0 fixed;
padding: 60px 0;
}
}
#home-image-3 {
background: url(../img/console.jpg) 50% 0 fixed;
height: auto;
margin: 0 auto;
width: 100%;
position: relative;
box-shadow: 2px 2px 20px rgba(0,0,0,0.8);
padding: 300px 0;
}
#media (max-width: 1280px) {
#home-image-3 {
background: url(../img/console1280.png) 50% 0 fixed;
padding: 200px 0;
}
}
#media (max-width: 760px) {
#home-image-3 {
background: url(../img/console720.png) 50% 0 fixed;
padding: 100px 0;
}
}
#media (max-width: 480px) {
#home-image-3 {
background: url(../img/console480.png) 50% 0 fixed;
padding: 60px 0;
}
}
A small change will fix what I believe is your problem. Simply stop the PS4 background repeating and set the background white...
#home-image-3 {
background: rgb(255, 255, 255) url(../img/console.jpg) 50% 0 fixed no-repeat;
height: auto;
margin: 0 auto;
width: 100%;
position: relative;
box-shadow: 2px 2px 20px rgba(0,0,0,0.8);
padding: 300px 0;
}

jssor - Sizing and Stability Issue

I am totally new to jssor, and a less than novice coder. I just discovered the jssor carousel slider today, and I have been fooling around with it for probably 10 hours.
I have managed to solve most of my issues by reviewing other questions on this site, but I have been running around is circles for the past several hours.
First off to clarify, I love the Slider and it's ability to scale, but I need it to be more basic, and somewhat stay where I put it. :) I think after many hours I have got it to stay in one place just under my navigation, and it seems to be good there (although I probably did the the worse way possible.
My main issue now is that it seems to work perfect in IE, and on my native android cell browser, but on Chrome and Safari, the carousel won't keep its height. My photos are # 200x180, and in IE11, they appear to be the proper size. In the other browsers, the slider is only showing to be about 1/2" high.
My pages are PHP, and I call the slider page onto my home page with an "Include" statement (sorry, I seriously green). Now the code I pulled off of jssor.com does have some html references, so that could be giving me some issues, as well.
You can check it out live at (SilverScreenCollectibles.com). I've also pasted the code below (that I am using on my PHP page) so that you can see how bad I am at this.
I would really appreciate any assistance that anyone out there could offer.
Thanks,
Bill
<!DOCTYPE html>
<html>
<head>
<div class="span9">
<script src="assets/js/jquery-1.8.2.min.js" type="text/javascript"> </script>
<script src="assets/js/jquery.carouFredSel-6.0.4-packed.js" type="text/javascript"></script>
<script type="text/javascript">
$(function() {
// create carousel
$('#carousel').carouFredSel({
responsive: false,
items: {
width: 200,
height: '90%',
visible: 8
},
auto: {
items: 1
},
prev: '#prev',
next: '#next'
});
// re-position the carousel, vertically centered
var $elems = $('#wrapper, #prev, #next'),
$image = $('#carousel img:first')
$(window).bind( 'resize.example', function() {
var height = $image.outerHeight( true );
$elems
.height( height )
// .css( 'marginTop', -( height/2 ) );
}).trigger( 'resize.example' );
});
</script>
<style type="text/css">
html, body {
height: 100%;
padding: 0;
margin: 0;
}
body {
min-height: 50px;
position: relative;
}
body h3 {
font-family: Arial, Geneva, SunSans-Regular, sans-serif;
font-size: 20px;
text-align: center;
color: #999;
margin: 0;
padding-top: 50px;
}
body * {
font-family: Arial, Geneva, SunSans-Regular, sans-serif;
font-size: 14px;
color: #333;
line-height: 22px;
}
#wrapper, #prev, #next {
border-top: 1px solid #999;
border-bottom: 1px solid #999;
height: 170px;
position: absolute;
/* top: 35%;*/
margin-top: 0px;
}
#wrapper {
width: 80%;
left: 10%;
overflow: hidden;
box-shadow: 0 0 10px #ccc;
}
#carousel img {
margin: 10px 5px;
border: none;
display: block;
float: left;
}
#prev, #next {
background: center center no-repeat #ccc;
width: 5%;
}
#prev:hover, #next:hover {
background-color: #bbb;
}
#prev {
background-image: url( assets/slide-imgs/form/gui-prev.png );
left: 0;
}
#next {
background-image: url( assets/slide-imgs/form/gui-next.png );
right: 0;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="carousel">
<img src="cw4/images/product_full/LC-ChainedFrt.jpg" alt="Image1" width="212" height="180" onclick="window.location.replace('http://silverscreencollectibles.com/product.php?product=110');" />
</div>
</div>
<a id="prev" href="#"></a>
<a id="next" href="#"></a>
</div>
</body>

Responsive Website not working on Tablet version

I have a resposive site which works fine on desktop and mobile version but on Tablet version, text and images are not in appropriate places and move towards right side making it non-responsive.
You can check the link here for screenshot:
https://dl.dropboxusercontent.com/s/835qg39vor9fhe9/websiteresponsive.JPG
This is my website: http://www.sociolife.co.in/
PS: When site is opened at full browser width in desktop, this problem wont occur but when you try to decrease the browser width search bar and subscription box is moving towards right.
Please can you tell me if there is any CSS problem or is there any javascript problem and how can I fix it?
Your meta viewport is wrong. You should use something like this :
<meta name="viewport" content="width=device-width, initial-scale=1">
You can check out this : https://css-tricks.com/snippets/html/responsive-meta-tag/
Edit : I thought you meant your website wouldn't work in tablet / mobile view. Looking at the code, the width for #main-nav and probably the other few elements are still fixed at 1000px in the 'tablet view'. I think there's something wrong in your media queries.
Edit 2 : Based on your CSS, here's some relevant code (I'm taking #main-nav as example, you can check for other affected elements) :
#media only screen and (max-width: 1028px){
#main-nav{
width:1000px;
}
}
#media only screen and (max-width: 725px){
#main-nav{
width:430px;
}
}
Do you see the problem now? You're making the navigation 1000px wide for screen sizes between 726px and 1028px. You should have used width:100% or width:725px for your #main-nav's 'tablet version'. Now you just need to apply the same principle and check for other areas of your website which have the same problem.
Change in your html file:
At line 1195 of your source code change wiz.
#main-nav {
width: 1000px;
}
change it to:
#main-nav {
width: 103%;
}
At line 1201:
.column-right-outer{
width:320px;
float:left;
}
to the below code:
.column-right-outer{
display: none;
}
At line 1204 change this:
.column-center-outer{
width:670px;
border-right: 0px solid #eaeaea;
}
to this:
.column-center-outer{
width:620px;
border-right: 0px solid #eaeaea;
}
edit- 27/04/15
delete the following lines at line 1208:
#menu-main {
display: none;
}
Add the below lines of code in a separate <style></style> tag in your HTML file.
#media only screen and (min-width: 730px) and (max-width: 1028px){
#menu-main {
margin-top: -10px;
}
#main-nav ul li {
z-index: 20;
text-transform: uppercase;
font-family: Oswald,arial,Georgia, serif;
font-size: 12px;
position: relative;
display: inline-block;
float: left;
border: 1px solid;
border-width: 0 0 0 1px;
height: 50px;
}
}
Now your site will look much better. :)
This works well.
#media only screen and (min-width: 730px) and (max-width: 1028px){
#menu-main {
margin-top: -10px;
}
#main-nav ul li {
z-index: 20;
text-transform: uppercase;
font-family: Oswald,arial,Georgia, serif;
font-size: 12px;
position: relative;
display: inline-block;
float: left;
border: 1px solid;
border-width: 0 0 0 1px;
height: 50px;
}
}

Large background images causing lag while scrolling

The website I am building has 4 large background images that take up the entire height and width of the user's browser. They are implemented as CSS background divs. The problem is, when scrolling on larger screen sizes, it is very laggy and choppy. Scrolling between these images is done automatically via JavaScript when the user presses a button, so this is part of the core functionality of my website and I must find a way to prevent lag.
So far, I have tried preloading the images via JS and converting the images from PNG to JPEG (increase compression and decrease quality) server-side. Neither of these worked.
The minimum height of the image can be 630 pixels. How can I prevent lag while scrolling between sections?
Here's my code:
CSS:
body { height: 100%; margin: 0px; font-family: HelveticaNeue, Helvetica, Arial, sans-serif; }
.area { height: 630px; border: 0px solid red; background: repeat-x; margin-bottom: 0px; }
a { text-decoration: none; }
h1, h2, h3, h4, h5, h6 { font-family: Av, Helvetica, Arial, sans-serif; color: #292E37; font-weight: lighter; }
#top { position: fixed; width: 100%; height: 10%; background: #292E37; box-shadow: inset 0px -1px 5px #000; z-index: 1000; }
#navigation { float: right; height: 100%; }
#bottom { width: 100%; position: fixed; bottom: 0px; padding: 10px; background: #292E37; box-shadow: inset 0px 1px 5px #000; text-shadow: 0px 1px 0px #000; color: #fff; }
#sceneSelection { top: 20%; position: fixed; padding: 10px; }
#info { margin-top: 50px; margin-bottom: 50px; }
.box { margin-top: 50px; padding: 75px; background: #292E37; box-shadow: inset 0px 1px 5px #000; text-shadow: 0px 1px 0px #000; color: #fff; }
.nav { position: relative; top: 38%; height: 100%; margin-right: 35px; display: inline-block; color: #fff; text-shadow: 0px 1px #000; }
.nav:hover { color: #EA5555; }
.nimage { float: left; width: 16px; height: 16px; position: relative; top: 5%; left: -20%; }
.home { background: url(site_images/icons/nav/home.png); }
.pricing { background: url(site_images/icons/nav/pricing.png); }
.features { background: url(site_images/icons/nav/features.png); }
.blog { background: url(site_images/icons/nav/blog.png); }
.contact { background: url(site_images/icons/nav/contact.png); }
.about { background: url(site_images/icons/nav/us.png); }
.logo { font-size: 2em; text-shadow: 0px 1px #000; padding-top: 10px; padding-left: 15px; color: #EA5555; font-family: Av, Helvetica, Arial, sans-serif; }
.red { color: #EA5555; }
.white { color: #fff; text-shadow: 0px 1px 0px #000; font-weight: bold; }
.dark { color: #202020; }
.center { text-align: center; }
.left { text-align: left; }
.right { text-align: right; }
.larger { font-size: 1.25em; }
.buttoni { -webkit-border-radius: 2px; -moz-border-radius: 0px; border-radius: 4px; background: #ddd; display: block; color: #ccc; font-size: 14pt; height: 50px; text-align: right; margin: 10px; cursor: pointer; color: #505050; }
.buttoni:hover { background: #EA5555; color: #fff; }
.btext { padding: 15px; position: relative; top: 25%; }
.groundi { background: url(ground_button.png); }
.skyi { background: url(sky_button.png); }
.stratospherei { background: url(stratosphere_button.png); }
.spacei { background: url(space_button.png); }
.image { height: 50px; width: 50px; float: left; border-top-left-radius: 5px; border-bottom-left-radius: 5px; }
li { color: #EA5555; }
li span { color: #505050; }
HTML:
<div class="space area" id="a4">
</div>
<div class="stratosphere area" id="a3">
</div>
<div class="sky area" id="a2">
</div>
<div class="ground area" id="a1">
</div>
JavaScript:
function scroll_to(id, speed, margin) {
$('html, body').animate({
scrollTop: $('#' + id).offset().top - margin
}, speed);
}
function match_height() {
var heights = [11, 630, 693, 756, 819, 882, 945, 1008, 1071, 1134, 1197, 1260, 1323, 1386, 1449, 1512, 1575, 1638, 1701, 1764, 1827, 1890, 1953, 2016, 2079, 2142, 2205, 2268, 2331, 2394, 2457, 2520];
var browsery = $(window).height();
var i = 0;
while(browsery > heights[i]) {
i++;
}
var h = heights[i];
$(".area").css("height", h + "px");
$(".area").css("width", "100%");
$(".ground").css("background", "url(scenes/ground/" + h + ".png)");
$(".sky").css("background", "url(scenes/sky/" + h + ".png)");
$(".stratosphere").css("background", "url(scenes/stratosphere/" + h + ".png)");
$(".space").css("background", "url(scenes/space/" + h + ".png)");
}
match_height();
var pos = 0;
$(".buttoni").click(function() {
var id = $(this).attr("id");
if(pos != id) {
scroll_to("a" + id, 2000, 0);
}
pos = id;
});
OP,
For browsers that support 3d transforms, e.g.: -webkit-transform, you could try the following:
your.div { -webkit-transform: translate3d(0,0,1px); }
Might not look like much, but doing the above causes the div in question to be hardware-accelerated.
Should you run into any flickering issues—they've been known to turn up in some cases—the following should sort you out:
your.div {
-webkit-transform: translate3d(0,0,1px);
-webkit-backface-visibility: hidden;
}
Via David Walsh - http://davidwalsh.name/translate3d
The use of translate3d pushes CSS animations into hardware acceleration. Even if you're looking to do a basic 2d translation, use translate3d for more power! If your animation is still flickering after switching to the transform above, you can use a few little-known CSS properties to try to fix the problem
Hope that helps.
As per my understanding, the issue and the solution drafted in the OP is two-fold:
initially, within the match_height() function, the OP author retrieves the images that best fits the screen height, so that upon completed animation the user sees one full background image.
after initial load, the user can navigate up and down the sections (with their respective background images) with the help of some buttons that trigger the scroll_to() function and its contained animation. Here is where the actual problem resides.
My efforts and the resulting fiddle focus on the scroll_to() function and the associated animation. I applied the following measures that, in conjunction, result in a (as per my subjective observation) 'smoother' scolling experience:
the original animation happened against 'html' and 'body', I'm reducing the jQuery selector to one selector only. In order to be able to use jQuery 1.9 (where jQuery.browser is deprecated) I'm using feature detection to get the 'right' selector:
function getScrollerSelector() {
var $body = $("<body/>");
$body.scrollTop(1);
return $body.scrollTop() == 1 ? "body" : "html";
}
In order to reduce the browser's processing load, I'm applying a logic that, per CSS, sets the background image of invisible sections to none during scrolling:
.scrolldown.scrollto-a2 #a1,
.scrolldown.scrollto-a3 #a1, .scrolldown.scrollto-a3 #a2,
.scrolldown.scrollfrom-a3 #a4,
.scrolldown.scrollfrom-a2 #a4, .scrolldown.scrollfrom-a2 #a3,
.scrollup.scrollto-a3 #a4,
.scrollup.scrollto-a2 #a4, .scrollup.scrollto-a2 #a3,
.scrollup.scrollfrom-a2 #a1,
.scrollup.scrollfrom-a3 #a1, .scrollup.scrollfrom-a3 #a2
{ background: none; }
I played around with linear easing, but that did not necessarily improve anything
All in all, scrolling doesn't seem choppy to me any more, but please take into account that this is also dependent on the client computers processing power.
Here's the scroll_to() function:
function scroll_to(id, speed, margin) {
var currentScrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
var scrollTop = $('#' + id).offset().top - margin;
var direction = scrollTop > currentScrollTop ? "down" : "up";
$("body").addClass("scroll"+direction + " scrollto-"+id + " scrollfrom-"+getScrollFrom(direction));
$( scrollerSelector ).animate({
scrollTop: scrollTop
}, {
//easing: 'linear',
duration: speed,
complete: function() {
$("body").removeClass("scrollup scrolldown scrollto-a1 scrollto-a2 scrollto-a3 scrollto-a4 scrollfrom-a1 scrollfrom-a2 scrollfrom-a3 scrollfrom-a4");
}
}
);
}
This is the link to jsfiddle
Since you are Scaling up the image, you can tell the Browser how to handle the rendering of image.
During the animation / scrolling, you can tell browser to Optimize on Speed and on completion of Animation / scrolling, Optimize on Quality.
Here is the CSS Property you can use on img: 'image-rendering' with values as optimizeSpeed / optimizeQuality.
https://developer.mozilla.org/en-US/docs/CSS/image-rendering
One thing you could do to images is smush it using http://www.smushit.com/ysmush.it/
this reduces the size of the image without loosing quality removing all unwanted meta data.
Testing locally it seems like your code should work ok, I have firefox 15 and chrome and don't see any lagging
What if you try this for the scroll to method?
function scroll_to(id, speed, margin) {
$('html, body').animate({
scrollTop: $('#' + id)
}, speed);
}
I had a similar problem with a website I was working on. In the end the problem seemed to be because of the large dimensions of the image that the computer/browser had to compute and render on screen.
My recommendation would be to try and reduce the amount of image that needs to be shown and scrolled on screen if possible.
Most modern browsers now support hardware (graphics card) rendering instead of the traditional (usually slower) software based (CPU) rendering. Hardware based rendering should in theory reduce that lag you're experiencing. However if your PC only has base or average graphics rendering capabilities, you're not going to have much success regardless. I personally had no success with either in Chrome, FireFox or IE until I gave in and removed the images.

Categories

Resources