I have a fixed button as I scroll down a component, however, a second button is to appear below it when I reach the bottom of the webpage.
I have a working component, but it is wonky when I hit the bottom of the scroll. A scroll animation once the bottom of the page is reached maybe?
My current working component (scroll down the div to see the second button appear):
const App = () => {
const scrollListener = React.useRef();
const [showSecondButton, setShowSecondButton] = React.useState(false);
const onScroll = () => {
if (scrollListener.current) {
const { scrollTop, scrollHeight, clientHeight } = scrollListener.current;
if (scrollTop + clientHeight >= scrollHeight * 0.85) {
if (!showSecondButton) {
setShowSecondButton(true);
}
} else {
if (showSecondButton) {
setShowSecondButton(false);
}
}
}
};
return (
<div>
<div className="main" onScroll={() => onScroll()} ref={scrollListener}>
<h1>My Page</h1>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
commodo consequat. Duis aute irure dolor in reprehenderit in voluptate
velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint
occaecat cupidatat non proident, sunt in culpa qui officia deserunt
mollit anim id est laborum Sed ut perspiciatis unde omnis iste natus
error sit voluptatem accusantium doloremque laudantium, totam rem
aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto
beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia
voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni
dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam
est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit,
sed quia non numquam eius modi tempora incidunt ut labore et dolore
magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis
nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut
aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit
qui in ea voluptate velit esse quam nihil molestiae consequatur, vel
illum qui dolorem eum fugiat quo voluptas nulla pariatur?
</div>
<div
className="my-absolute-btn"
style={{ bottom: showSecondButton ? "40px" : "2px" }}
>
<div>
<button style={{ backgroundColor: "red" }}>My absolute button</button>
</div>
{showSecondButton ? (
<div>
<button style={{ backgroundColor: "blue", marginTop: "50px" }}>
Hidden second button
</button>
</div>
) : null}
</div>
</div>
);
};
ReactDOM.render(
<App />,
document.getElementById('app')
);
.main {
position: relative;
width: 300px;
height: 300px;
overflow-y: scroll;
border: 1px solid red;
}
.my-absolute-btn {
position: absolute;
/* bottom: 50px; */
right: 0;
left: 0;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.0/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.0/umd/react-dom.production.min.js"></script>
<div id="app"></div>
The main issue with my current solution is how my button just "jumps" at some point and the other comes out of nowhere. I would like that the second button "push" the first one up when I hit that certain point in the scroll.
You need to add transition property in .my-absolute-btn css class
.main {
position: relative;
width: 300px;
height: 300px;
overflow-y: scroll;
border: 1px solid red;
}
.my-absolute-btn {
position: absolute;
right: 0;
left: 0;
transition: ease-in-out 0.5s; /* add this line */
}
use a class to show or hide the hidden button and then add #sanket's answer to make the absolute button appear smoothly.
<div className={showSecondButton ? "show" : "hide"}>
<button style={{ backgroundColor: "blue", marginTop: "50px" }}>
Hidden second button
</button>
</div>
and then you can try this to animate the hidden button, change the values depending on what you like
.show,
.hide {
position: fixed;
transition: bottom 0.5s ease-in-out; //to create smooth transition when entering and exiting
}
/*initial state, position the button offscreen*/
.hide {
bottom: -500px;
}
/*position button back on screen*/
.show {
bottom: 0;
}
you can also try other ways to hide elements using css and animate it
Related
I have three different divisions in a single container. div toolbar, div one and div two. I am trying to make toolbar, div one stick to the same place of the screen. and I also want to make sticky the div.fixed-header, only the contents inside div.fixed-header-contents should
be scrollable and shouldn't go behind the divisons above it. I have tried postion sticky and fixed but the div.fixed-header-contents overlaping the previous divisions.
Here's the example :
.toolbar{
border : 1px solid;
position : sticky;
z-index : 1000;
top: 0;
}
.fixed-header{
border-top : 1px solid;
border-bottom : 1px solid;
}
/* .one{
position : fixed
} */
<body>
<div class="toolbar"> // I want this div to be stick to the current position
<h4>
toolbar
</h4>
</div>
<div class="one"> //I want this div to be stick to the current position
<h3>
some images
</h3>
<h3>
some buttons
</h3>
<h3>
some contents
</h3>
</div>
<div class="two">
<div class="fixed-header"> //I want this div to be stick to the current position
<h4>
fixed header items
</h4>
</div>
<div class="fixed-header-contents"> //this div should be scrollable but should not overlap the previous screen
"Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?"
</div>
</div>
</body>
To solve this problem you need to know .toolbar and .one height. You can set to the top property as an absolute value in the CSS, or if don't know to use Javascript to get height of elements.
For the scrollable container (fixed-header-contents) we need to add an extra wrapper, since we restrict viewport then overflow the child element with the min-height: 100%.
document.addEventListener('DOMContentLoaded', function() {
const toolbar = document.querySelector('.toolbar');
const one = document.querySelector('.one');
const two = document.querySelector('.two');
const toolbarHeight = toolbar.getBoundingClientRect().height;
const oneHeight = one.getBoundingClientRect().height;
one.setAttribute('style', `--toolbar-height: ${toolbarHeight}px`);
two.setAttribute('style', `--one-height: ${toolbarHeight + oneHeight}px`);
});
.toolbar,
.one,
.two {
position: sticky;
z-index: 1000;
}
.toolbar {
border: 1px solid;
top: 0;
}
.one {
top: var(--toolbar-height);
}
.two {
top: var(--one-height);
}
.fixed-header {
border-top: 1px solid;
border-bottom: 1px solid;
}
/* for scrollable */
.fixed-header-contents {
overflow: hidden;
height: 5rem;
display: flex;
}
/* for scrollable */
.scrollable {
min-height: 100%;
overflow-y: auto;
}
/* not important */
section {
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
<div class="toolbar">
// I want this div to be stick to the current position
<h4>toolbar</h4>
</div>
<div class="one">
//I want this div to be stick to the current position
<h3>some images</h3>
<h3>some buttons</h3>
<h3>some contents</h3>
</div>
<div class="two">
<div class="fixed-header">
//I want this div to be stick to the current position
<h4>fixed header items</h4>
</div>
<div class="fixed-header-contents">
<div class="scrollable">
//this div should be scrollable but should not overlap the previous screen "Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto
beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor
sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid
ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?"
</div>
</div>
</div>
<section>
<h1>section 1</h1>
</section>
<section>
<h1>section 2</h1>
</section>
We have a horizontal jump menu that will navigate someone to the top of the <h3 class="heading"> tags based on the menu item's href. For some reason, when someone clicks on the menu item, the page navigates to the top of the <h3> element rather than the top of the element (which includes padding).
Question:
How would I navigate to the top of an element that has padding within it?
Current Issue:
Desired results:
Code
Can also be found on codepen.io.
// Shorthand for $( document ).ready()
$(function() {
$(window).on('scroll', function() {
$('.menu').addClass('menu--fixed');
});
$('.menu li a').on('click', function(evt) {
var menuHeight = $('.menu').outerHeight(true);
var elementOffset = ($(this).offset().top) - (menuHeight);
$('html, body').stop().animate({
scrollTop: elementOffset
}, 2000);
evt.preventDefault();
});
});
.container {
max-width: 480px;
}
.heading {
padding: 32px;
background-color: #eee;
}
ul {
list-style: none;
}
.menu {
position: relative;
background-color: black;
color: white;
width: 100%;
display: flex;
justify-between: space-between;
}
.menu li {
display: block;
height: 100%;
}
.menu a {
color: white;
padding: 32px;
}
.menu--fixed {
position: fixed;
top: 0;
left: 0;
margin-top: 0;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
<div class="menu__wrapper">
<ul class="menu">
<li>element 1</li>
<li>element 2</li>
<li>element 3</li>
</ul>
</div>
<div class="wrapper">
<h3 class="heading" id="el1">Lorem ipsum dolor sit amet, consectetur adipisicing elit</h3>
<p>Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Sed ut perspiciatis, unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam eaque ipsa, quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt, explicabo. Nemo enim ipsam voluptatem, quia voluptas sit, aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos, qui ratione voluptatem sequi nesciunt, neque porro quisquam est, qui dolorem ipsum, quia dolor sit amet.</p>
<p>Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Sed ut perspiciatis, unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam eaque ipsa, quae ab illo inventore veritatis et quasi architecto beatae vitae dicta del veritas.</p>
</div>
<div class="wrapper">
<h3 class="heading" id="el2">A Guide to Solving Web Development Problems</h3>
<p>Epicurus autem, in quibus sequitur Democritum, noil fere labitur, Quam- quam utriusque cum mutta non prolx). turn illiid in priniis, quoJ, cum in rerum nalura duo quaerenda sint, ununi quae materia sit ex qua quaeque res cfficiatur, alterum quae vis sit quae quidque efficiat, de materia disserucrunt, vim et causam efficiendi reliquerunt. Sed lioc commune vitiuni; illae Epicur propriae ruinae: censet enim eadem ilia indlvidua e solida corpora ferri deorsum suo pondere ad lineam i hunc naturalem esse omnium corporum motuni.</p>
<p>Deinde ibidem homo acutus, cam illud occorreret, j omnia deorsum e regione ferrentur et, ut dixi, ad lineam, numquam fore ut atomus altera alteram posset attingere, itaque attulit rem commenticiam.</p>
<p>Declinare dixit atomum perpaulum, quo nihil posset fieri minus; ita eifici complexiones et copulationes et adhaesiones atomorum inter se, ex quo eificeretur mundus omnesque partes mundi quaeque in eo essent. Quae cum res tota fieta sit piieriliter, turn ne efficit quidem^ quod vult. Nam et ipsa declinatio ad libidinem fiiigitur - ait enim deelinare atomum sine causa, quo nibil turpius physico quam fieri.</p>
<p>This is about how to solve technical problems that arise from using front or back end technologies to make web pages or apps but some of these steps will be applicable to solving technical problems in general.</p>
<p>Half the technical problems in development are caused by something trivial but for all the problems past this level, you'll probably need to do some structured thinking.</p>
</div>
<div class="wrapper">
<h3 class="heading" id="el3">Tempore intellegi convenire</h3>
<p>Qui autem alia matunt scribi a nobis, aequi esse debent, quod et seripta multa sunt, sic ut plura nemini e nostris, et scribentur fortasse plura et tamen qui diligenter haec quae de philosophia Htteris mandamus legere assueverit, iudicabit nulla ad legendum his esse potiora.</p>
<p>Nam libero tempore, cum soluta nobis est eligendi optio, cumque nihil impedit, quo minus id, quod maxime placeat, facere possimus, omnis dolor repellendus. Qua temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet, ut et voluptates repudiandae sint et molestiae non recusandae pondere ad lineam. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat</p>
</div>
</div>
The main problem I see is that this in your click handling function is the link element in the menu, so getting the offset of it for your calculation has no relevance to the actual <h3> element you're trying to scroll to.
Also, why not always keep the menu fixed if that is the desired behavior on scrolling? Changing it to fixed on the first scroll event changes the layout of the container and throws off the spacing. In my example, I moved the menu outside of the container and made it permanently fixed. I then added padding to the top of the .container element to make it render below the fixed menu when scrollTop is 0 (at page load).
Then, I used the href attribute of the menu <a> element being clicked to find the <h3> element with that same id. Using the actual <h3> element's offset for the calculation gives the desired result.
Check out my example on CodePen: https://codepen.io/bdoughty2018/pen/MLvJOd
There is currently a gap between the top of the page and your menu. You need to specific your top position when you use position: fixed;.
If you want the menu to stick to the top, then use top: 0px;
Also, there is default margin-top on the menu, so you will need to remove that too.
.menu--fixed {
position: fixed;
top: 0;
left: 0;
margin-top: 0;
}
It should be much easier to play with values to cater for the menu height in Javascript after you have this in. (You will also need to remove the margin-bottom for this).
$(document).ready(function(){
$(window).on('scroll', function() {
$('.menu').addClass('menu--fixed');
});
$('.menu a').click(function(e){
e.preventDefault();
// Get clicked anchor href.
var anchorID = $(this).attr('href');
// Get scroll position of the target location.
var scrollDestination = $(anchorID).offset().top;
// Cater for menu height
var finalScroll = scrollDestination -
$('.menu').outerHeight(true);
$('html, body').animate({
scrollTop: finalScroll
}, 2000);
});
});
Edit: Javascript.
I am trying to implementing this effect with Reactjs. bellow youtube video is the animation I'm trying to implement :
https://www.youtube.com/watch?v=WVBAMiu1NPE&feature=youtu.be
Now I need to make them into a Reactjs component, I am using react-addons-css-transition-group. what my code should do is everytime I press a button, that will render a div paragraph in the tabContent array, which then should be animated by ReactCSSTransitionGroup. This is my code
constructor(props) {
super(props);
this.state = {
activeTab: 0
};
this.active = {
color: '#4286f4',
outline: 'none'
};
this.inactive = {};
}
customChange(tabNum) {
this.setState({
activeTab: tabNum
});
};
render() {
var tabContent = [<div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis
nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</div>,
<div>
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore
eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident
</div>,
<div>
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium
doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore
veritatis et quasi architecto beatae vitae dicta sunt explicabo.
</div>,
<div>
Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit,
sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.
</div>
]
return (
<div className='container-fluid mainDiv'>
<div id='TabsNav'>
<button style={this.state.activeTab === 0 ? this.active : this.inactive} onClick={() => {this.customChange(0)}} className='roundBorderLeft InfoButton'> <br/> btn1 </button>
<button style={this.state.activeTab === 1 ? this.active : this.inactive} onClick={() => {this.customChange(1)}} className='adjustLeft InfoButton'> <br/> btn2</button>
<button style={this.state.activeTab === 2 ? this.active : this.inactive} onClick={() => {this.customChange(2)}} className='adjustLeft InfoButton'> <br/> btn3</button>
<button style={this.state.activeTab === 3 ? this.active : this.inactive} onClick={() => {this.customChange(3)}} className='adjustLeft roundBorderRight InfoButton'> <br/> btn4</button>
</div>
<div id='TabContents'>
<ReactCSSTransitionGroup transitionName='tab' transitionEnterTimeout={2000} transitionLeaveTimeout={2000}>
{tabContent[this.state.activeTab]}
</ReactCSSTransitionGroup>
</div>
</div>
);
}
this is part of my css i used for transition:
.tab-enter {
opacity: 0;
padding-left: 0;
-webkit-transition: opacity 2s, padding-left 2s;
}
.tab-enter.tab-enter-active {
opacity: 1;
padding-left: 100px;
}
.tab-leave {
opacity: 1;
padding-left: 100px;
-webkit-transition: opacity 2s, padding-left 2s;
}
.tab-leave.tab-leave-active {
opacity: 0;
padding-left: 200px;
}
.mainDiv {
padding-top: 100px;
padding-bottom: 100px;
color: grey;
background-color: #fafafa;
border-bottom: 1px solid #ebebeb;
}
My code shown no animation, the tab's content appears instantly without any animation. what did i do wrong?
heres a way to achieve what you want :
JS
var Hello = React.createClass({
getInitialState: function() {
return {
activeTab: 0,
previousTab: -1
};
},
customChange: function (tabNum) {
this.setState({
activeTab: tabNum,
previousTab: this.state.activeTab
});
},
buildButton: function (content, index) {
return (
<button
key={index}
className={"button" + (index === this.state.activeTab ? " active" : "")}
onClick={() => {this.customChange(index)}}>
btn{index + 1}
</button>
)
},
buildContent: function (content, index) {
let clazz = "item"
clazz += (index === this.state.activeTab ? " active" : "")
clazz += (index === this.state.previousTab ? " inactive" : "")
return (
<div
key={index}
className={clazz}>
{content}
</div>
)
},
render: function() {
var tabContent = [
"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.",
"Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident",
"Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.",
"Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt."
]
return (
<div className='container-fluid mainDiv'>
<div className="buttons">
{tabContent.map(this.buildButton)}
</div>
<div className='content'>
{tabContent.map(this.buildContent)}
</div>
</div>
);
}
});
ReactDOM.render(
<Hello name="World" />,
document.getElementById('container')
);
CSS
.buttons {
text-align: center;
}
.buttons .button {
outline: none;
color: grey;
margin: 5px;
border: 0;
background: 0;
}
.buttons .button.active {
color: black;
}
.content {
text-align: center;
margin-top: 10px;
position: relative;
}
.item {
opacity: 0;
position: absolute;
top: 0;
left: 0;
right: 0;
}
.item.active {
animation-name: fade-in;
animation-duration: 0.6s;
animation-fill-mode: forwards;
}
.item.inactive {
animation-name: fade-out;
animation-duration: 0.6s;
animation-fill-mode: forwards;
}
#keyframes fade-in {
0% {
opacity: 0;
transform: translateX(-15px);
}
30% {
opacity: 0;
}
60% {
opacity: 1;
}
100% {
opacity: 1;
transform: translateX(0);
}
}
#keyframes fade-out {
0% {
opacity: 1;
transform: translateX(0);
}
30% {
opacity: 1;
}
60% {
opacity: 0;
}
100% {
transform: translateX(15px);
}
}
I checked it locally, you missed only one thing. Your code will work if you assign 'key' to your tabcontent div elements. You must provide the key attribute for all children of ReactCSSTransitionGroup, even when only rendering a single item. This is how React will determine which children have entered, left, or stayed. Check documentation.
var tabContent = [<div key="0">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis
nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</div>,
<div key="1">
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore
eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident
</div>,
<div key="2">
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium
doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore
veritatis et quasi architecto beatae vitae dicta sunt explicabo.
</div>,
<div key="3">
Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit,
sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.
</div>
]
The css you have provided you will need to modify it for the result you want. Apart from that this 'key' will do the trick.
I have a page where I have an section main-section that with the top bar takes 100% height of the screen.
Since my top-bar is 77px high it is set up like this in css:
#app {
position: relative;
height: 100%;
width: 100%;
background-image: url('/img/cover.png');
background-size: cover;
}
#main-section {
position: absolute;
top: 77px;
left: 0;
width: 100%;
}
#magazine-detail {
position: absolute;
top: 77px;
left: 0;
width: 100%;
}
This is how it looks in the html:
<div id="app">
#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')
#show
</div>
<div id="magazine-detail">
#section('magazine-detail')
#include('customer.layouts.partials.magazine-detail')
#show
</div>
<div class="large-10 large-centered columns content">
#yield('content')
</div>
</div>
Initially the main-section is visible and magazine-detail is hidden. On click of a button magazine-detail takes up the space of main section. I did that with fadeIn, fadeOut of each of the sections like this in my js. file:
$('#magazine-detail').fadeIn(2000);
$('#main-section').fadeOut(2000);
I wonder how can I make it fadeIn, so that it appears that it comes from bottom to top, like a drawer kind of effect?
You can use jqueryui "drop" effect, here is a fiddle i made using docs (api.jqueryui.com/drop-effect/)
https://jsfiddle.net/6L0gkvhq/1/
$('#button').click(function() {
$("#toggle").toggle("drop", {direction: "down"});
$("#main").toggle("fade");
});
Or use api.jquery.com/animate/
If I understand your question correctly, animating clip may be your best bet:
CSS:
#magazine-detail {
position: absolute;
top: 77px;
display: none;
}
JavaScript:
var $md = $('#magazine-detail');
$md.show();
$('#main-section').fadeOut(2000);
$({val: $md.height()}).animate(
{val: 0},
{
duration: 2000,
step: function (now) {
$md.css('clip',
'rect(' + now + 'px, ' + $md.width() + 'px, ' + $md.height() + 'px, 0px)'
);
}
}
);
Snippet:
$('button').click(function() {
var $md = $('#magazine-detail');
$md.show();
$('#main-section').fadeOut(2000);
$({val: $md.height()}).animate(
{val: 0},
{
duration: 2000,
step: function (now) {
$md.css('clip',
'rect(' + now + 'px, ' + $md.width() + 'px, ' + $md.height() + 'px, 0px)'
);
}
}
);
});
div {
font: 16px arial;
width: 600px;
}
#main-section {
position: absolute;
top: 77px;
}
#magazine-detail {
position: absolute;
top: 77px;
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button>
Show detail
</button>
<div id="main-section">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.<br>
<img src="http://lorempixel.com/400/100/">
</div>
<div id="magazine-detail">
<img src="http://lorempixel.com/200/100/"><br>
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem.
</div>
Working on a jScrollPane. I've installed on my server exactly as stated through the jScrollPane site. The content seems to scroll but the default window scrollbar is showing up and the styled jScroll Vertical bar and drag bar don't scroll at all.
I've read about some issues with it not scrolling on the latest jquery so I also tried using an older version but still no luck.
I've made a quick fiddle that shows the issue.
Any help would be appreciated. I've been stuck on this for a few days now.
html -
<div id="subpanel" class="nav_dialog displayed" style="height: 560px; left: ; display: block;">
<div class="close_link">
Close (x)
</div>
<div class="scrollpane jspScrollable" id="subpanel_content" style="overflow: hidden; padding: 0px; width: 475px;" tabindex="0">
<div class="jspContainer" style="width: 475px; height: 520px;">
<div class="jspPane" style="padding: 0px 65px 0px 0px; top: 0px; width: 396px;">
<p><img src="http://s2.postimg.org/5uxqi0mgl/cats1.jpg" alt=""></p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
<p>-</p>
<p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p> </p>
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.</p>
<p> </p>
<p>Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.</p>
<p>-</p>
<p>Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. </p>
</div>
<div class="jspVerticalBar">
<div class="jspCap jspCapTop"></div>
<div class="jspTrack" style="height: 600px;">
<div class="jspDrag" style="height: 300px; top: 0px;">
<div class="jspDragTop"></div>
<div class="jspDragBottom"></div>
</div>
</div>
<div class="jspCap jspCapBottom"></div>
</div>
</div>
</div>
</div>
CSS -
#subpanel {
position: absolute;
z-index: 10;
}
.nav_dialog {
position: absolute;
font-family: 'Inconsolata',verdana;
display: none;
float: left;
background-color: rgba(255, 255, 255, 0.75) !important;
color: #111 !important;
padding: 10px;
z-index: 10;
width: 495px;
color: white;
min-height: 306px;
font-size: inherit;
line-height: inherit;
margin-top: 2px;
}
.nav_dialog .close_link {
text-align: right;
margin-bottom: 10px;
}
.nav_dialog .scrollpane {
overflow: auto;
min-height: 270px;
margin: 0px 8px 0px 15px;
padding-right: 65px;
width: 410px;
}
.jspContainer
{
overflow: auto;
position: relative;
}
.jspPane
{
position: absolute;
}
.jspVerticalBar
{
position: absolute;
top: 0;
right: 0;
width: 16px;
height: 100%;
background: red;
}
.jspHorizontalBar
{
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 16px;
background: red;
}
.jspCap
{
display: none;
}
.jspHorizontalBar .jspCap
{
float: left;
}
.jspTrack
{
background: #dde;
position: relative;
}
.jspDrag
{
background: #bbd;
position: relative;
top: 0;
left: 0;
cursor: pointer;
}
.jspHorizontalBar .jspTrack,
.jspHorizontalBar .jspDrag
{
float: left;
height: 100%;
}
.jspArrow
{
background: #50506d;
text-indent: -20000px;
display: block;
cursor: pointer;
padding: 0;
margin: 0;
}
.jspArrow.jspDisabled
{
cursor: default;
background: #80808d;
}
.jspVerticalBar .jspArrow
{
height: 16px;
}
.jspHorizontalBar .jspArrow
{
width: 16px;
float: left;
height: 100%;
}
.jspVerticalBar .jspArrow:focus
{
outline: none;
}
.jspCorner
{
background: #eeeef4;
float: left;
height: 100%;
}
/* Yuk! CSS Hack for IE6 3 pixel bug :( */
* html .jspCorner
{
margin: 0 -3px 0 0;
}
Let the jscrollpane to generate the class in javascript.
Also, include the jscrollpane library in your document.
<!-- Jscroll pane library -->
<script src="http://jscrollpane.kelvinluck.com/script/jquery.jscrollpane.min.js"></script>
<!-- Mousewheel -->
<script src="http://jscrollpane.kelvinluck.com/script/jquery.mousewheel.js"></script>
<div id="subpanel" class="nav_dialog displayed" style="height: 560px; left: ; display: block;">
<div class="close_link">
Close (x)
</div>
<div class="scroll-pane">
<p><img src="http://s2.postimg.org/5uxqi0mgl/cats1.jpg" alt="">
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</p>
<p>
-
</p>
<p>
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
<p>
</p>
<p>
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.
</p>
<p>
</p>
<p>
Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.
</p>
<p>
-
</p>
<p>
Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem.
</p>
</div>
</div>
Give to the element .scroll-pane overflow:hidden and height:300px or the desired height.
I've created fiddle so you can see result
http://jsfiddle.net/8zk4E/1/