I have an issue with the layout of my website right now...
The layout is similar to this fiddle I made. Top layer has my project thumbnails, and the lower layer gets exposed to show project details when user clicks a thumbnail.
Problem I am having is that a user has to scroll down to click a thumbnail on the top layer. Then, when the layer fades out, the lower div has already scrolled with it - and I need the div to be scrollTop(0) instead...
Please see my fiddle to understand what I am talking about:
$('#click').on('click', function(){
$('#topPanel').fadeOut(600);
})
#click {
padding:10px 15px;
position:fixed;
z-index:100;
}
#topPanel, #bottomPanel {
width:80%;
height:auto;
margin:0 auto;
padding:100px;
text-align:center;
}
#topPanel {
background:green;
position:absolute;
z-index:10;
}
#bottomPanel {
background:yellow;
position:absolute;
z-index:0;
}
#topPanel p, #bottomPanel p {
padding: 500px 0;
text-transformation:uppercase;
}
#bottomPanel p:nth-child(odd){
background:#555;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="click">CLICK ME TO FADEOUT TOP</button>
<br>
<p>please scroll down and then click button above to see issue</p>
<div id="topPanel">
<p>top of page</p>
<p>middle of page</p>
<p>bottom of page</p>
</div>
<div id="bottomPanel">
<p>top of page</p>
<p>middle of page</p>
<p>bottom of page</p>
</div>
https://jsfiddle.net/reese329/50urkgtm/
The problem is that your panels aren't scrolling: the whole document is scrolling! The trick is to set overflow: hidden on a wrapper element (or the body), and make the panels themselves scrollable with overflow-y: scroll. Here is a working example.
Notice that I had to set the height of the panels explicitly (to 100vh, filling the viewport).
I also fixed your text-transform: uppercase rule (the style is text-transform, not text-transformation :) ).
Related
How can an animation be made to correspond with page scroll position, so that when the user scrolls past it the animation goes to position A, and when the user's page scroll position is over it, it goes to position B?
Here is a mock-up of what I would like to make:
(The pivot point of the 3 pages is represented by the blue dot below them.)
I have found various examples of animations that are triggered once by page scrolling (such as AOS or ScrollTrigger), or can be re-triggered multiple times, but I haven't found any examples where the animation progress is connected to the page scroll position.
Maybe it can be done by modifying some existing example, but if not I think I will need to come up with something custom using the CSS animation property and connect it to the page scroll position somehow.
Any ideas how this can be achieved? Thanks.
It is pretty easy if you use jquery with CSS3 to achieve it. You can rotate the page and calculate the rotate value based on the scroll position.
I have made sample example below. Please see the Snippet below:
$(document).ready(function(){
$(document).scroll(function(){
var scollHeight = $(document).height();
var maxRotate = 30;
var rotateVal = 5 + (($(document).scrollTop()* maxRotate) / scollHeight);
$("#page1").css("transform", "rotate("+(-rotateVal)+"deg)");
$("#page3").css("transform", "rotate("+(rotateVal)+"deg)");
});
});
body{
background-color: rgb(252,252,230);
}
.page-container{
position: fixed;
}
.page{
background-color:white;
border:2px solid lightgray;
width:85px;
height:120px;
position:absolute;
top:20px;
left:40px;
transform-origin:bottom center -30px;
transition-duration: 0.3s;
}
#page1{
transform: rotate(-5deg);
}
#page3{
transform: rotate(5deg);
}
.data-container{
position: absolute;
right:30px;
}
.data{
background-image: url("https://i.stack.imgur.com/HwX2l.png");
width:370px;
height:283px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="main-container">
<div class="page-container">
<div class="page" id="page1"></div>
<div class="page" id="page2"></div>
<div class="page" id="page3"></div>
</div>
<div class="data-container">
<div class="data" id="data1"></div>
<div class="data" id="data2"></div>
<div class="data" id="data3"></div>
</div>
</div>
You can also test it here
Im having difficulties with Firefox and drop down menu.
It has of about 200 px gap under the drop down list created by slideToggle.
When inspected, that area is not taken by anything and completely blank/empty.
Chrome displays everything correctly.
Source is here http://stafter.com/demo
I have been fighting this for 2 days already playing around "display" and "margins".
Here is the main code stracture
JQuery CODE
<script type="text/javascript">
$(document).ready(function(){
$(".plus1").click(function(){
$(".open1").slideToggle("slow");
$(this).toggleClass("active"); return false;
});
});
</script>
<script type="text/javascript">
$(document).ready(function(){
$(".plus2").click(function(){
$(".open2").slideToggle("slow");
$(this).toggleClass("active"); return false;
});
});
</script>
<script type="text/javascript">
$(document).ready(function(){
$(".plus3").click(function(){
$(".open3").slideToggle("slow");
$(this).toggleClass("active"); return false;
});
});
</script>
HTML CODE
<html>
<head></head>
<body>
<div id="wrapper">
<div id="container">
<div id="ul_wrap">
<div class="plus1">
<ul>
<li>one</li><li>two</li><li>three</li>
</ul>
<p class="open1"></p>
</div>
<div class="plus2">
<ul>
<li>one</li><li>two</li><li>three</li>
</ul>
<p class="open2"></p>
</div>
<div class="plus3">
<ul>
<li>one</li><li>two</li><li>three</li>
</ul>
<p class="open3"></p>
</div>
</div>
</div>
<div id="push"></div>
</div>
<div id="footer"></div>
</body>
<html>
CSS
.wrapper {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -77px;
padding:0;
}
.footer, .push {
height: 77px;
clear:both;
}
.footer{
width:100%;
background: url('../images/bottom_bg.jpg') repeat-x 0 0;
position:relative;
margin:auto;
}
.container {
width:800px;
min-height:400px;
margin:auto;
margin-top:20px;
margin-bottom:20px;
padding:30px;
}
#ul_wrap {
position:relative;
margin-bottom:-100px;
clear:both;
}
#ul_wrap ul{
display:inline-block;
position:relative;
left:-20px;
padding:5px 0px 0px 10px;
background-color:#FFFFFF;
border:1px solid #FFFFFF;
clear:both;
height:27px;
}
#ul_wrap li{
font-size:16px;
text-align:left;
float:left;
list-style:none;
}
.one{
width:40px;
}
.two{
width:410px;
}
.three{
width:88px;
}
.open1, .open2, .open3{
margin:-5px 0 20px 0;
position:relative;
font-size:12px;
display:none;
}
PLEASE NO COMMENTS LIKE I FORGOT TO CLOSE A TAG OR SMTH, i had to rewrite the entire html code to post it here in short version and shorter names because otherwise it would be 4 page code of css html and javascript. Problem is not in debugging errors in unclosed tags or smth. Source was html validated 1000 times.
After playing with margins, display properties and floating and clearing i finally assembled a working structure (for now).
The key was to clear all elements and parents containing all floating elements,
Then because for some odd reasons slideToggle wasn't working properly with white background (unless you specified height of the hiding element) behind .wrap_ul if it was display:block, only with inline-block.
With Display:inline-block it was getting footer floating on the right, no matter clear:both on both items;
With specified height, slideToggle wasn't pushing the rest of the sliding elements down below but was overlapping.
Well with all these problems only in Firefox, Chrome never had this flue...
So i posted working code in the last edit, not sure which property got the whole puzzle working which is -> (
the background behind expanding down slideToggle list,
footer that is pushed down as well when list is expanded
not floated footer and no extra gaps or spacing's between drop down list and footer)
Hope you find it usefull
I have a page, let's say 1000px wide. I have a div on that page which is 3000px wide. On load, the div will show the first 1000px of 3000px until I scroll. What I want to do is show the div in position 1000px - 2000px, therefore, as if it has already been scrolled 1000px, therefore it sits in its 'middle' position.
If I do this by using left: 1000px; then my scrollable div no longer scrolls, or, the first 1000px of the div are no longer reachable. (I should mention I'm trying to do this on a mobile device, hence using the -webkit-overflow-scrolling: touch; trick to get this div to bounce in a 'native' manner.
I'm a bit stuck with how to get this to work, if anybody can think of how to do this so that I can still scroll through my entire 3000px div but start at position 1000px, that would be terrific.
this might help: http://jsfiddle.net/uDy9B/
<div class="wrap">
<div class="green"></div>
<div class="red"></div>
<div class="brown"></div>
<div class="clear"></div>
</div>
style:
div.wrap {
width:3000px;
height:300px;
background-color:orange;
position:relative;
}
.wrap > div {
width:1000px;
height:200px;
}
.green { background-color:green; float:left; }
.red { background-color:red; float:left; }
.brown { background-color:brown; float:left; }
.clear {clear:both;}
jquery:
$("html, body").animate({ scrollLeft: '1000px' }, 1000);
I currently have a mobile website project in which I'm creating panels such that one panel can be viewed at a time, where when a user swipes left or right, the panel slides offscreen and a new panel slides in. Everything works fine on Android, and even behavior is acceptable on iPhone.
However, scrolling on iPhone seems to lack momentum. In other words, when "flicking" the panel up / down, it scrolls on Android natively, but on iPhone it seems to lose momentum very quickly. I'd like to find a simple CSS or combo CSS / JS solution that works, without including additional libraries if possible.
Here's the basic structure of the site:
<html>
<head>Head stuff here</head>
<body>
<div class="container">
<div class="headbox">Fixed position menu here</div>
<div id="pages">
<div class="page">Page panel here</div>
<div class="page">Page panel here</div>
<div class="page">Page panel here</div>
</div>
<div class="bottommenu">Fixed position bottom menu here</div>
</div>
</body>
</html>
Here is the basic CSS:
body {
width:100%;
overflow-x:hidden;
font-size:17px;
border-collapse:collapse;
}
.container {
width:100%;
height:100%;
overflow-x:hidden;
overflow-y:scroll;
position:relative;
/*-webkit-perspective:1000;
-webkit-backface-visibility:hidden;*/
}
.headbox {
font-size:17px;
height:2.3529em;
width:100%;
top:0;
position:fixed;
text-align:center;
color:#fff;
z-index:1;
}
#pages {
width:100%;
height:100%;
white-space:nowrap;
font-size:0;
-webkit-backface-visibility:hidden;
-webkit-transform-style:preserve-3d;
position:relative;
-webkit-transform:translate3d(-100%,0,0);
-moz-transform:translate3d(-100%,0,0);
-ms-transform:translate3d(-100%,0,0);
-o-transform:translate3d(-100%,0,0);
transform:translate3d(-100%,0,0);
}
.page {
width:100%;
height:100%;
display:inline-block;
vertical-align:top;
position:relative;
white-space:normal;
background:#fff;
font-size:17px;
}
.bottommenu {
position:fixed;
bottom:0;
left:0;
width:100%;
height:.2em;
transition:height 400ms;
-webkit-transition:height 400ms;
-moz-transition:height 400ms;
-ms-transition:height 400ms;
-o-transition:height 400ms;
z-index:1;
}
And finally, the listener for scrolling, which shouldn't interfere with CSS or the ability to repaint, but maybe I am missing something:
var that = this;
$(document).scroll(function(){
if (!that.direction && !that.loading) {
that.direction = 'vertical';
that.moving = true;
if (that.scrolling) { clearTimeout(that.scrolling); }
that.scrolling = setTimeout(function() {
that.direction = false;
that.sliding = 0;
that._getMore();
that.moving = false;
},500);
}
});
Any ideas? I've tried numerous variations of -webkit-overflow-scrolling:touch;, overflow-y:scroll;, and other possible hacks / fixes / supported syntax, but nothing seems to help. I need the content to scroll within the body tag so that on iPhone the screen resizes itself on scroll, otherwise I'd use a scrollable div. This is not an option.
I guess problem with loss of native elastic scrolling within container with position: relative; overflow: hidden.
Try -webkit-overflow-scrolling: touch; for .container.
I have a modal that pops up on an onclick event. Basically it adds a greyed out layer over the page, then adds a modal div one z-index higher over the grey. The problem I am running into is for smaller screen sizes you can scroll down the body.
I have tried toggling
body { overflow:hidden }
this works except for when the modal has more content that needs to be seen that exceeds the initial view. Ideally you would be able to see only the modal on smaller screens and scroll down it if needed. Thanks.
Here's my attempt.
HTML
<div class = "popup">
<div class = "over"></div>
<div class = "window">
<button class = "close">Close</button>
<p>Filler</p>
<p>Filler</p>
<p>Filler</p>
<button class = "close">Close</button>
</div>
</div>
<div class = "content">
<p>Filler</p>
<button class = "pop">Popup</button>
<p>Filler</p>
<p>Filler</p>
<button class = "pop">Popup</button>
<p>Filler</p>
</div>
CSS
body {
margin:0;
}
p {
margin:0;
height:200px;
background-color:yellow;
}
.popup {
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
display:none;
z-index:1;
}
.over {
width:100%;
height:100%;
background-color:gray;
opacity:0.5;
position:absolute;
z-index:-1;
}
.window {
border:1px solid black;
width:50%;
height:100%;
overflow:auto;
margin:0 auto;
background-color:orange;
}
.content.paused {
position:fixed!important;
width:100%;
height:1000%;
overflow:hidden;
z-index:0;
}
JQUERY
var scroll;
$('.pop').click (function () {
scroll = $(document).scrollTop ();
$('.popup').show ();
$('.content').offset ({top:-scroll}).addClass ('paused');
});
$('.close').click (function () {
$('.popup').hide ();
$('.content').removeClass ('paused').removeAttr ('style');
$(document).scrollTop (scroll);
});
This requires the page content to be inside a div that is separate from the popup. When you click the button, the current scroll position is saved, then the page content is positioned fixed and moved above the top of the page by the same amount as the scroll. So if you scrolled down 100px, the top of the content will be 100px above the top of the screen, to preserve the visual position of the content. The content will no longer be scrollable because I set the height to be insanely large.
The popup will just be any regular div, with a max height and scrollbars if needed.
When you close the popup, the page content is restored to its original state, the fixed position is removed, top displacement removed, and the page's scroll position is set back to what it was before.
Try to add these attributes to your modal container div:
.modalContainer{
max-width: 500px; //maximum width of the size of the modal
position: relative;
width: 85%; //can be how much of the screen you want it to take up
}