I want to create a parallax effect on divs on click on an element. I have html set up like this:
<div id="app">
<div id="main-section">
<top-bar></top-bar>
<div id="main-content">
...
</div>
</div>
<div id="item-detail">
</div>
</div>
I have an image slider in main-content div, and on click of an image slider div item-detail is being populated with content, on the page load is empty. Now I would like to somehow get the parallax effect of when the div is populated, that it scrolls to the top-bar and goes over the main-content div.
I have tried with something like this:
$('html, body').animate({
scrollTop: $("#item-detail").offset().top
}, 1700);
parallaxScroll();
function parallaxScroll(){
var scrolledY = $(window).scrollTop();
$('#item-detail').css('top','-' + ((scrolledY*1.3)) + 'px');
}
And the css for the divs:
#main-section {
position: absolute;
top: 0;
height: 900px;
width: 100%;
background-image: url('/img/cover.png');
background-size: cover;
}
#main-content {
position: absolute;
top: 77px;
height: 833px;
}
#item-detail {
position: absolute;
top: 900px;
z-index: 1;
}
But it didn't work for me, and both main-content and item-detail have top set to 0 after the function was executed on click.
Related
I have a div that is on the page load pushed down out of the view and then exposed later and pushed up to the top-bar and takes over the rest of the screen on click function by changing the top style in my function like this:
$('#drawer').animate({
top: 92
}, 500);
I would like to when that div is visible, to detect if the user is scrolling up and when it attempts to scroll up that the div slides down by the amount of pixels the user is scrolling up. I am not sure how to exactly do that.
In my script scroll-event.js I have tried to setup a function where I would on document ready first declare global variable drawerIsUp = false;, check if it is false or true and then execute the scrolling part. But, since when the drawer is up the window.pageYOffset is 0, how can I keep adding pixels to the div top style if the user tries to scroll but the window.pageYOffset is 0 already?
$(document).ready(function (){
drawerDiv = this.getElementById("drawer");
topBar = this.getElementById("top-bar");
drawerIsUp = false;
scrollDrawer = function () {
if (drawerIsUp) {
console.log('entered');
function winScroll() {
drawerDiv.style.top = window.pageYOffset + "px";
}
winScroll();
$(window).bind({scroll: winScroll});
}
}
});
And this is the html:
<div id="app">
<div id="bg">
</div>
#section('topBar')
#include('customer.layouts.partials.top-bar')
#show
<div id="main-section">
#section('header')
#include('customer.layouts.partials.header')
#show
#section('carousel')
#include('customer.layouts.partials.carousel', ['function' => 'drawer', 'carouselPadding' => ''])
#show
</div>
<div id="drawer">
<div id="magazine-detail">
</div>
<div id="magazine-detail-carousel">
#section('magazine-detail-carousel')
#include('customer.layouts.partials.carousel', ['function' => 'magazineDetail', 'carouselPadding' => 'carouselPadding'])
#show
</div>
</div>
</div>
So, the drawer gets over the main-section on click, and then when it is over I should move it down if the user scrolls up from it.
The css for the drawer and top bar:
#main-section {
height: calc(100vh - 92px);
overflow-y: scroll;
width: 100%;
position: fixed;
overflow-y: scroll;
top:77px;
}
#drawer {
z-index: 5;
position: fixed;
top: 100vh;
height: calc(100vh - 92px);
max-height: 100%;
overflow-y: scroll;
width: 100%;
background-color: $white;
padding-left: 15px;
padding-right: 15px;
}
.top-bar {
position: fixed;
top: 0;
}
You used drawer inside winResize function. But drawer was declared inside $(document).ready so winResize could not recognize what you meant by drawer.
$(document).ready(function (){
drawer = this.getElementById("drawer");
topBar = this.getElementById("top-bar");
drawerIsUp = false;
function winResize() {
drawer.style.top = topBar.offsetHeight + "px";
}
winResize();
$(window).bind({resize: winResize, scroll: winScroll});
});
Learn more about variable scopes
https://www.sitepoint.com/demystifying-javascript-variable-scope-hoisting/
When I'm using show() and hide() methods from jquery-ui:
var current = 1;
function slide(buttonNum) {
if (current != buttonNum){
$("#page" + current).hide("slide", { direction: "left" }, 800, function() {
$("#page" + buttonNum).show("slide", { direction: "right" }, 800);
});
current = buttonNum;
}
}
My intention is that every time button is clicked for this function the page would scroll left to change to required page.
The problem is that it doesn't work first time I'm clicking page number with function above(the current div would slide to the left, but div which I change to just pops up without animation) but works normally other times.
my css is as follows:
.slider {
width: 400px;
height: 300px;
overflow: hidden;
}
.slider .content {
position: relative;
}
.slider .content .page {
float: left;
width: 400px;
height: 300px;
background-size: cover;
}
and HTML:
<div class="slider">
<div class="content">
<div id='page1' class="page">
<!-- stuff -->
</div>
<div id='page2' class="page">
<!-- stuff -->
</div>
<div id='page3' class="page">
<!-- stuff -->
</div>
</div>
</div>
<a onclick='slide(1)' href="#">1</a>
<a onclick='slide(2)' href='#'>2</a>
Try hiding the elements that you expect not to be visible at the beginning, so that the show animation will actually execute. E.g. add this at the top:
$("#page2").hide();
$("#page3").hide();
That way running .show() on them will have an effect.
I know that this is a frequent question but I can't find an answer that matches my requirements.
In short, I want to horizontal slide a box from the right-side (insivisible) part of the screen to the left and then from the left back to the right.
The html/css/js below demonstrates what I want:
<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<style type="text/css">
#box-1 {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 80em;
background-color: #f00;
}
#box-2 {
position: absolute;
top: 0;
right: -100%;
width: 100%;
height: 4em;
background-color: #0f0;
}
#viewport {
overflow: hidden;
position: relative;
height: 100em;
}
#container {
position: absolute;
top: 0;
left: 0;
width: 100%;
}
</style>
</head>
<body>
<div id="viewport">
<div id="container">
<div style="position: relative">
<div id="box-1">
</div>
<div id="box-2">
</div>
</div>
</div>
</div>
<script type="text/javascript">
$("#box-1").click(function () {
$(this).parent().parent().animate({left: "-100%"});
});
$("#box-2").click(function () {
$(this).parent().parent().animate({left: "0"});
});
</script>
</body>
</html>
Now, everything might seem fine except for two important things:
I do not want to specify a height for the outer viewport. I would like this viewport to adopt automatically the height of the highest item in the container
this code does not do what I want if you scroll down at the bottom of the page when the red box is visible and click on it: the green box comes within the viewport but it is scrolled at the bottom. I would like the green box to come in view directly. As a bonus, it would be nice if once the green box is in view, if I click on it, the red box came back in view at its previous scroll position.
Of course, this example has lots of other limitations (the default animation function provided by jquery sucks, etc...) but I believe I can fix them later.
Given the limitations of the solution I have posted here, I suspect that I did not chose the right approach but I have no idea on where I should start.
You need to scroll to the top of the div when you click on the box.
Here's the code:
$(function() {
var vheight = Math.max($("#box-1").height(), $("#box-2").height());
$("#viewport").height(vheight)
});
$("#box-1").click(function () {
$(this).parent().parent().animate({left: "-100%"});
$('html,body').animate({
scrollTop: $("#box-1").offset().top
});
});
$("#box-2").click(function () {
$(this).parent().parent().animate({left: "0"});
$('html,body').animate({
scrollTop: $("#box-2").offset().top
});
});
I also updated the JS Fiddle: http://jsfiddle.net/Av7P3/1/
I am trying to get the div with id="markdown-editor" to slide over when a button is clicked using JQuery's Animate function. markdown-editor contains two divs that have position: fixed. The div with id=header doesn't have any other positioning css (top, bottom, left, etc.), but the other div, where id=footer, has bottom: 0px. When I animate the #markdown-editor div, everything inside #markdown-editor animates correctly except #footer. I know it has something to do with using positioning css, but I'm not sure what to do about it. Below is the pertinent code:
HTML:
<div id="markdown-editor" class="col-xs-12">
<div id="header" class="row">
...
</div>
<div class="row">
...
</div>
<div id="footer" class="row">
...
</div>
</div>
<script type="text/javascript" src="http://code.jquery.com/jquery-2.0.3.min.js"></script>
CSS:
#header {
position: fixed;
padding-top: 15px;
z-index: 9001;
}
#footer {
position: fixed;
bottom: 0px;
width: 100%;
margin: auto;
z-index: 9001;
padding: 10px;
}
Javascript:
$("#menu-button").on("click", function(e) {
$("#markdown-editor").animate({left: "20%"}, 500, "swing");
});
You need quotes around the first #menu-button in the Javascript portion.
You forgot quotes around #menu-button
$("#menu-button").on("click", function(e) {
$("#markdown-editor").animate({left: "20%"}, 500, "swing");
});
EDIT
Make sure you're linking to the jQuery library in your head.
Also, try giving #markdown-editor a left value in your css. Also, you need to give it a position. It doesn't matter if the elements inside it have position, the actual element needs a position in order to animate. Has to be fixed, relative, or absolute.
#markdown-editor {
position: relative; // or fixed or absolute
left: 2px;
}
I have a Div with 395px of Height, and overflow hidden, like this:
<style>
#content {
width: 100%;
height: 395px;
overflow: hidden;
}
</style>
<div id="content">
1<br>2<br>3<br>4<br>......<br>29<br>30<br>
1<br>2<br>3<br>4<br>......<br>29<br>30<br>
</div>
UP
DOWN
The buttons should scroll the content of the div, but not in Mouse Over, I want to a single click scroll 132px of height and with EaseOutCubic. I found a lot of scroller, but all with Mouse over, I need them working with the Mouse Click.
You could use something like this
<style>
#content {
width: 100%;
height: 395px;
overflow: scroll;
}
</style>
<div id="content">
1<br>2<br>3<br>4<br>5<br>6<br>7<br>8<br>9<br>10<br>
11<br>12<br>13<br>14<br>15<br>16<br>17<br>18<br>19<br>20<br>
21<br>22<br>23<br>24<br>25<br>26<br>27<br>28<br>29<br>30<br>
1<br>2<br>3<br>4<br>5<br>6<br>7<br>8<br>9<br>10<br>
11<br>12<br>13<br>14<br>15<br>16<br>17<br>18<br>19<br>20<br>
21<br>22<br>23<br>24<br>25<br>26<br>27<br>28<br>29<br>30<br>
</div>
UP
DOWN
<script type="text/javascript">
(jQuery.noConflict())(function($){
$('a.up').click(function(){
var newTop = $('#content').scrollTop() + 132;
//TODO: newtop not greater than height - 132
$('#content').animate({'scrollTop': newTop}, 250);
});
});
</script>