I'm trying to get a bunch of navs to stack on top of one another as you scroll down the page, until the entire page is filled. For some reason, on the third nav, (nav-mid-2), when i try an set the position to fixed it scrolls back up. Confused, and may just need another pair of eyes to check my logic. If there's a better way to do this, let me know.
$(document).ready(function(){
$(window).scroll(function(){
fadeHead();
addNav();
});
});
function addNav() {
var scrollVal = $(window).scrollTop();
console.log(scrollVal)
if(scrollVal < 756) {
$('.nav-mid-1').css({'position': 'relative', 'margin-top': '500px'});
} else if(scrollVal < 1696) {
$('.nav-mid-2').css({'position': 'relative','margin-top': '1500px'});
$('.nav-mid-1').css({'position': 'fixed', 'margin-top': '-256px'});
} else if (scrollVal < 2000){
$('.nav-mid-3').css({'position': 'relative','margin-top': '1500px'})
$('.nav-mid-2').css({'position': 'fixed', 'margin-top': '1478px'});
console.log('here')
}
}
function fadeHead() {
window_scroll = $(this).scrollTop();
$('.head-fade').css({
'opacity' : 1 - (window_scroll/300 )
})}
.main-background {
background-color: #bdc3c7;
width: 100%;
height: 100%;
position: fixed;
}
.h100 {
font-size: 3px;
}
.nav-mid-1 {
margin-top: 500px;
width: 100%;
height: 60px;
background-color: #3498db;
border: 1px solid #3498db;
}
.nav-mid-2 {
width: 100%;
height: 60px;
background-color: #f1c40f;
border: 1px solid #f1c40f;
}
.nav-mid-3 {
margin-top: 600px;
width: 100%;
height: 60px;
background-color: #ecf0f1;
border: 1px solid #ecf0f1;
}
.transition {
-webkit-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;
transition: all 1s ease-in-out;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="main-background"></div>
<div class="top-nav">
<nav class="navbar navbar-inverse navbar-fixed-top"></nav>
</div>
<br>
<br>
<br>
<br>
<div class="container">
<div class="col-md-6">
<div class="head-fade">
<h1>Alo</h1>
<h2>How's it goin</h2>
<h3>Science.</h3>
<h4>Nature Man.</h4>
<h5>Linguist.</h5>
<div class='h100'>Too Small.</div>
</div>
</div>
</div>
<div class="nav-mid-1">
<h1>Welcome</h1>
</div>
<div class="nav-mid-2">
<h1>To</h1>
</div>
<div class='nav-mid-3'>
<h1>My</h1>
</div>
<div class='nav-mid-4'>
<h1>My</h1>
</div>
The moment you assign a fixed position to an element it is removed from the flow of the page. Thus reducing the length of your page and the $(window).scrolltop value. This is where your code gets stuck and cannot run for the higher $(window).scrolltop values.
Related
This question is related to one that i have already created transition-in-div . I didnot get answer for my next issue there so i decided to create new question.
I have four boxes and i want the transition effect in all four boxes.
What i want is whenever i click on any box, the width of that box must increase from its side to the left and right to fit the full width. Right now it only fills some portion of width.
My Code is
<html>
<head>
<title>Transition</title>
<style type="text/css">
.container {
display: flex;
justify-content: space-between;
}
.box {
width:20%;
height: 200px;
transition: transform .5s;
transform-origin: 0 0;
}
#first {
background-color: red;
}
#second {
background-color: green;
transform-origin: 25% 75%;
}
#third {
background-color: aqua;
transform-origin: center center;
}
#fourth {
background-color: blue;
transform-origin: 100% 0;
}
.scale {
transform: scaleX(4);
}
</style>
</head>
<body>
<div class="container">
<div id="first" class="box"></div>
<div id="second" class="box"></div>
<div id="third" class="box"></div>
<div id="fourth" class="box"></div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
var containerWidth = $(".container").width();
$(".box").click(function() {
var id = $(this).attr("id");
$(this).addClass('scale');
});
});
</script>
Jsfiddle
There's a small mathematical error, you are scaling each div to 4x when their size is 20% so their new size is now 80% instead of the full 100% width.
Please consider the following fiddle: https://jsfiddle.net/m157u2yw/7/
For previewing purposes I've made it so if you click on an expanded box it resets back so you can quickly play with it.
I'm using width instead of scale as it will be useful in case these squares actually have some content inside (scaling would distort it).
I'm also adding another class .scale-down to the not-clicked divs to make sure they also animate out leaving the full space to the expanded one.
Just tweak around your CSS a lil bit:
Since your .box width is 20%, your scaleX() is 5,
Then just go ahead and fix your Transform-origins so it covers out correctly:
https://jsfiddle.net/m157u2yw/8/
.box {
width:20%;
height: 200px;
transition: transform .5s;
transform-origin: 0 0;
}
#first {
background-color: red;
}
#second {
background-color: green;
transform-origin: 33.33%;
}
#third {
background-color: aqua;
transform-origin: 66.66%;
}
#fourth {
background-color: blue;
transform-origin: 100%;
}
.scale {
transform: scaleX(5);
}
Why not put the boxes in containers and animate the width, something like this:
https://jsfiddle.net/pt1vk0c1/
<div class="container">
<div id="first" class="box-container">
<div class="box"> </div>
</div>
<div id="second" class="box-container">
<div class="box"> </div>
</div>
<div id="third" class="box-container">
<div class="box"> </div>
</div>
<div id="fourth" class="box-container">
<div class="box"> </div>
</div>
</div>
.container {
display: flex;
justify-content: space-between;
}
.box-container {
width:25%;
height: 200px;
}
.box {
width:80%;
height: 200px;
transition: width .5s;
transform-origin: 0 0;
}
#first .box {
background-color: red;
}
#second .box {
background-color: green;
transform-origin: 25% 75%;
}
#third .box {
background-color: aqua;
transform-origin: center center;
}
#fourth .box {
background-color: blue;
transform-origin: 100% 0;
}
.scale {
width:100%;
}
Here's a solution that will work regardless of the number of boxes or their width. Better to avoid any magic numbers if possible.
Transition width instead of transform. You won't need any transform origins and it will work with any number of boxes regardless of the box size.
To make the width of the other boxes 0. You can add a class to the container.
Than use
.container.open .box:not(.scale) {
width: 0;
}
to set the width of any box without the class .scale to 0
http://codepen.io/flurrd/pen/xqmwLN
CSS
.container {
display: flex;
justify-content: space-between;
}
.box {
width: 20%;
height: 200px;
transition: width .5s;
background-color: tomato;
}
.box:nth-child(odd) {
background-color: aquamarine;
}
.scale {
width: 100%;
}
.container.open .box:not(.scale) {
width: 0;
}
JS
var containerWidth = $(".container").width();
$(".box").click(function() {
var id = $(this).attr("id");
$(this).toggleClass('scale');
$(".container").toggleClass('open')
});
$(document).ready(function () {
$("#toggle").click(function () {
if ($(this).data('name') == 'show') {
$("#sidebar").animate({
width: '10%'
}).hide()
$("#map").animate({
width: '89%'
});
$(this).data('name', 'hide')
} else {
$("#sidebar").animate({
width: '29%'
}).show()
$("#map").animate({
width: '70%'
});
$(this).data('name', 'show')
}
});
});
html, body {
width:100%;
height: 100%;
}
#header {
width: 100%;
height: 20%;
float: left;
border: 1px solid;
}
#map {
width: 80%;
height: 80%;
float: left;
border: 1px solid;
}
#sidebar {
width: 19%;
height: 80%;
float: left;
border: 1px solid;
}
#toggle {
width: 10%;
height: 40%;
margin-right: 6.5%;
margin-top: 3.5%;
float: right;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="header">HEADER
<input type="button" data-name="show" value="Toggle" id="toggle">
</div>
<div id="map">MAP</div>
<div id="sidebar">SIDEBAR</div>
I am a beginner in angularjs, jquery and css. I want to create three div with toggle side by side
Please help me how to do that in angularjs.
In normal mode Example:-
It will be like this.
If I expand center div it needs to be like this Example:-
If I expand last div it needs to be like this Example:-
Thanks..
Try this. All the div can be expanded in any order. To switch back into normal position, click on the expanded div again.
Width in compressed and expanded states are expressed in percentage and you can change them in the css, according to your requirement. Also I added transition property for smooth functioning.
Here's a pen.
$("a.expansion-btn").click(function (){
classes = this.className;
var divNumber = classes.slice(-1);
var toGetId = "#div-"+divNumber;
if ($(toGetId).hasClass("expanded-div")){
$(".normal-div").removeClass("compressed-div expanded-div");
}
else{
$(".normal-div").removeClass("compressed-div expanded-div").addClass("compressed-div");;
$(toGetId).removeClass("compressed-div").addClass("expanded-div");
}
});
*{
box-sizing:border-box;
}
.container{
margin:0;
padding:0;
width:100%;
height:400px;
}
.normal-div{
width:33.33%;
height:100%;
position:relative;
border:2px solid black;
float:left;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}
.expanded-div{
width:80%;
}
.compressed-div{
width:10%;
}
#div-1{
background-color:green;
}
#div-2{
background-color:red;
}
#div-3{
background-color:blue;
}
a.expansion-btn{
position:absolute;
top:10px;
right:10px;
font-weight:bold;
cursor:pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div class="normal-div" id="div-1">
<a class="expansion-btn exp-1">click</a>
</div>
<div class="normal-div" id="div-2">
<a class="expansion-btn exp-2">click</a>
</div>
<div class="normal-div" id="div-3">
<a class="expansion-btn exp-3">click</a>
</div>
</div>
If you just want to toggle between divs then do something like this.
// varible for holding div index
var i = 0,
// cache divs
$div = $('.div');;
// bind click event handler
$('.toggle').click(function() {
$div
// remove both class from all elements
.removeClass('active nonactive')
// get element by index
.eq(i)
// add active class
.addClass('active')
// get siblings
.siblings()
// add nonactive class
.addClass('nonactive');
// update index
i = ++i % $div.length;
})
.div {
height: 300px;
width: 30%;
border: solid 1px black;
display: inline-block
}
.active {
width: 75%;
}
.nonactive {
width: 10%;
}
.active,
.nonactive {
-webkit-transition: width 1s ease-in-out;
-moz-transition: width 1s ease-in-out;
-o-transition: width 1s ease-in-out;
transition: width 1s ease-in-out;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="toggle">toggle</button>
<br>
<div class="div"></div>
<div class="div"></div>
<div class="div"></div>
Or if you want to toggle when clicked a button inside the div then do something like this.
$('.toggle').click(function() {
$(this)
// get div
.parent()
// remove nonactive class from clicked element
.removeClass('nonactive')
// toggle active class
.toggleClass('active')
// get sibling divs
.siblings()
// remove active class from siblings
.removeClass('active')
// toggle nonactive class based on the clicked element
.toggleClass('nonactive', $(this).parent().is('.active'));
})
.div {
height: 300px;
width: 30%;
border: solid 1px black;
display: inline-block
}
.active {
width: 75%;
}
.nonactive {
width: 10%;
}
.div,
.active,
.nonactive {
-webkit-transition: width 1s ease-in-out;
-moz-transition: width 1s ease-in-out;
-o-transition: width 1s ease-in-out;
transition: width 1s ease-in-out;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<div class="div">
<button class="toggle">toggle</button>
</div>
<div class="div">
<button class="toggle">toggle</button>
</div>
<div class="div">
<button class="toggle">toggle</button>
</div>
</div>
<div id="header">HEADER
<input type="button" data-name="show" value="Toggle" id="toggle">
</div>
<div id="maincont">
<div id="map" class="active">MAP</div>
<div id="sidebar" class="inactive">SIDEBAR</div>
<div id="sidebar1" class="inactive">SIDEBAR1</div>
</div>
script:
$(document).ready(function () {
$("#toggle").click(function () {
var $div = $('#maincont').find(".active");
$div.removeClass('active').addClass("inactive").next().addClass("active");
$('#maincont').find(".inactive").animate({
width: '10%'
})
$('#maincont').find(".active").animate({
width: '79%'
});
});
});
css.
html, body {
width:100%;
height: 100%;
}
#header {
width: 100%;
height: 100px;
float: left;
border: 1px solid;
}
#map {
height: 80%;
float: left;
border: 1px solid;
}
.active{
width:78%;
float: left;
height: 100px;
}
.inactive{
width:10%;
float: left;
border: 1px solid;
height: 100px;
}
#sidebar {
height: 80%;
float: left;
}
#toggle {
width: 10%;
height: 40%;
margin-right: 6.5%;
margin-top: 3.5%;
float: right;
}
fiddle link
Since you tagged your question with angularjs, here is a simple solution with no fancy CSS:
Suppose you have some array of objects that describe the panels/divs in the controller, e.g.
$scope.panels = [{
title: "One",
expanded: true
}, {
title: "Two"
}, {
title: "Three"
}];
The expanded flag just track which panel is actually expanded. By default the first one.
Then when you click on a panel, this function set the flag to the selected panel:
$scope.expandPanel = function(panel) {
$scope.panels.forEach(p => p.expanded = false);
panel.expanded = true;
}
And you display all that in a ng-repeat loop where the key thing is to set dynamically the class depending on the expanded flag with ng-class:
<div class="panel"
ng-class="{'expanded': panel.expanded, 'reduced': !panel.expanded}"
ng-repeat="panel in panels" ng-click="expandPanel(panel)">
<span>{{panel.title}}</span>
</div>
See it live with this plunker.
Note: .panel, .expanded and .reduced classes are define in the plunker css file.
I am trying to figure out how I can trigger a waypoints function. Right now this function starts when my info div is at the very top of the screen. Ideally, I want this to start when the user's bottom of the screen just gets to the info-box section. I am unsure of how I can even modify when the event triggers.
Also, for some reason the info-boxes aren't transitions to the right like I am attempting. They just transition into a fade with now horizontal movement. What is wrong with what I am trying?
var $info_show = $('#info');
$info_show.waypoint(function () {
$('.info-box').addClass("fadeShow");
});
#info {
max-width: 100%;
height: auto;
padding: 300px 20%;
}
.info-box {
border: 1px solid black;
padding: 50px;
background: #00f;
color: #fff;
display: inline;
margin: 0 100px;
transition: 1s;
opacity: 0;
}
.info-box.fadeShow {
opacity: 1;
transform: translateX(150px);
}
<script src="https://leaverou.github.io/prefixfree/prefixfree.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="info">
<div class="info-box">Red</div>
<div class="info-box">Blue</div>
<div class="info-box">Green</div>
</div>
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;
}
I've got this issue that i can't resolve myself.
I've got css tabs like in this site: http://www.sitepoint.com/css3-tabs-using-target-selector/
but i've got a fixed menu in the top of the page. So, when i click in one tab, the html navigate to the anchor that is under this menu and the content jump to top.
I want to scroll the content on top of the page, I've searched a lot, tried `$('body').scrollTop(0); what they said in this answer: Scroll to the top of the page using JavaScript/jQuery?
but nothing work. This is my code, HTML:
<body class="centered">
<div id="main-container">
<!-- header -->
<div class="col_1_of_1 blue header">
<div class="col_1_of_5 menu-icon">
<img src="img/menu.png">
</div>
<div class="col_3_of_5">
<p class="main_title" id="headerTitle"></p>
</div>
<div class="col_1_of_5 img-icon">
<img src="*">
</div>
</div>
<!-- body -->
<div class="body" id="list">
<article class='tabs'>
<section id='tab1'>
<h2><a href='#tab1' id='sayit'>Person1</a></h2>
<div class='col_1_of_1'>
<img src='img/bike/img.png'>
</div>
<div class='col_1_of_1'>
<p class='fausto_title'>dscdsvdvds</p>
<p class='fausto_text'>vdlisvd shvgldk sgvds gvgsd kjbvds ds uidshiu diui guig uig uig g g gl ffyolg f f h hj lhfh ff yfyufolyf uhyf <p>
</div>
</section>
<section id='tab2'>
<h2><a href='#tab2'>John</a></h2>
<div class='col_1_of_1'>
<img src='img/moto/img2.png'>
</div>
<div class='col_1_of_1'>
<p class='fausto_title'>dcdsdvdvds </p>
<p class='fausto_text'>dsvdvdhvihiu ugig piogv hgho ghvh vhvhv hvo vohv hovhjvhjvhvh vhvvhv vhvh vhvhv hv hjvp8ythtuy ty tygt gtg68g 6g 6g 6g tg tr gytrg <p>
</div>
</section>
</article>
</div> <!-- end body -->
</div>
CSS:
tabs.css
/* --- container's width --- */
article.tabs
{
position: relative;
display: block;
width: 100%;
}
article.tabs section
{
position: absolute;
top: 1.8em;
left: 0;
height: 12em;
background-color: #ddd;
z-index: 0;
width: 100%;
}
article.tabs section .table {
display: none;
}
article.tabs section:first-child
{
z-index: 1;
}
article.tabs section h2
{
position: absolute;
font-size: 1em;
font-weight: normal;
width: 33%;
height: 1.8em;
top: -1.8em;
padding: 0;
margin: 0;
color: #999;
background-color: #ddd;
border-top: 1px solid #ddd;
}
article.tabs section:nth-child(2) h2
{
left: 33%;
}
article.tabs section:nth-child(3) h2
{
left: 66%;
}
article.tabs section h2 a
{
display: block;
width: 100%;
line-height: 1.8em;
text-align: center;
text-decoration: none;
color: inherit;
outline: 0 none;
}
/* --- active section --- */
article.tabs section:target,
article.tabs section:target h2
{
background-color: #fff;
z-index: 2;
}
article.tabs section:target {
width: 100%;
position: absolute;
top: 1.8em;
left: 0;
height: 12em;
}
article.tabs section:target h2 {
width: 33%;
border-right: 1px solid rgb(27,47,105);
border-left: 1px solid rgb(27,47,105);
border-top: 1px solid rgb(27,47,105);
color: rgb(27,47,105);
}
article.tabs section:target .table{
display: block;
}
/* --- transition effect --- */
article.tabs section,
article.tabs section h2
{
-webkit-transition: all 500ms ease;
-moz-transition: all 500ms ease;
-ms-transition: all 500ms ease;
-o-transition: all 500ms ease;
transition: all 500ms ease;
}
menu.css:
.menu-icon {
padding-top: 9% !important;
}
.menu-icon img {
width: 40%;
}
.header {
position: fixed;
height: 64px;
top: 0;
z-index: 1000;
}
.header div {
float: left;
padding-top: 8%;
}
Thanks in advice for any help!
EDIT:
This is a phonegap application and i'm compling in iOS just now. It seems like the command scrollTop isn't recognize.
I'm using zepto.js, a jQuery like library but much faster.
EDIT 2:
Zepto.js / jQuery:
function clickButton()
{
document.getElementById('sayit').click();
return true;
}
$(function() {
//..other code (nothing to do with tabs)
//simulate the first click on a tab
clickButton();
$('a').on('click', function(event){
var anchor = $(this);
alert($(anchor.attr('href')).offset().top);
$('html, body').stop().animate({
scrollTop: $(anchor.attr('href')).offset().top
}, 100);
event.preventDefault();
});
});
Add the class .tab to your tab links.
<h2><a href='#tab1' id='sayit' class='tab'>Person1</a></h2>
Include jQuery in the <head> of your page:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
Bind a click event to tabs that scrolls the page to the top:
$('.tab').click(function(event) {
event.preventDefault(); //Prevent the link from jumping.
$('html,body').animate({scrollTop:0}, 400); //Scroll to top
});
Try this :
JS :
//To scroll top of the Tab
$(function() {
$('a').bind('click',function(event){
var $anchor = $(this);
$('html, body').stop().animate({
scrollTop: $($anchor.attr('href')).offset().top
}, 1000);
event.preventDefault();
});
});
HTML :
<div class="col_1_of_5 img-icon">
<img src="*" alt="TOP"/>
</div>
Also, I added Anchor tag over the image which shows the Top arrow.
DEMO HERE
Kindly reply if your are able to figure it out.