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/
Related
I'm working on a music streaming app for that I want to make the sidebar sticky (not fixed) but after lot of research on internet and apply my method still I am failed to fix the bug. Using the "align-self: flex-start; position: sticky; top: 0;" it's working, but still there is a problem. It's working perfectly when we scroll from bottom to top but when we scroll from top to bottom it get fixed and starts scrolling when we scroll up to 50% of body. I want to fix this problem please check while scrolling from top to bottom.
NOTE: I've found some jQuery and JS plugins for sticky sidebars but the problem is that I can't use them in my project because I'm building this project entirely in vanilla JavaScript. So looking for a JS and CSS expert to help me fix this bug.
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
padding: 10px;
}
header {
width: 100%;
height: 100px;
background-color: blue;
color: white;
padding: 10px 0px 0px 10px;
}
main {
margin: auto;
padding: 10px 0px;
display: grid;
grid-gap: 0px;
grid-template-columns: 70% 30%;
}
.main-content {
background-color: red;
height: 2000px;
margin-right: 5px;
color: white;
padding: 10px 0px 0px 10px;
}
.sidebar {
background-color: green;
height: 1000px;
margin-left: 5px;
color: white;
padding: 10px 0px 0px 10px;
/*----- Not Working Perfectly-----*/
align-self: flex-start;
position: sticky;
top: 0;
/*----- Not Working Perfectly-----*/
}
footer {
width: 100%;
height: 100px;
background-color: blue;
color: white;
padding: 10px 0px 0px 10px;
}
<body>
<header>
<h1>HEADER</h1>
</header>
<main>
<section class="main-content">
<h1>MAIN CONTENT</h1>
</section>
<section class="sidebar">
<h1>SIDEBAR</h1>
</section>
</main>
<footer>
<h1>FOOTER</h1>
</footer>
</body>
I would start by setting the height of the sidebar to 100vh, so it's always as big as the viewport. Right now it is fixed to 1000px.
.sidebar {
height: 100vh;
}
Your .main-content and .sidebar shouldn't have fixed heights, their heights should depend on their content. Replace fixed heights with some text.
When using display: grid on the parent element, all their children are stretched by default (align-items: stretch), their heights depend on the child that has the largest content or height.
To avoid equal heights for children use align-items: start on the parent element or align-self: start on a specific child element (in your case .sidebar).
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
:root {
scroll-behavior: smooth;
--space-sm: 10px;
--space-md: 20px;
--space-lg: 30px;
--space-xl: 40px;
--text-color: #fff;
--header-bg: blue;
--mainContent-bg: red;
--sidebar-bg: green;
--footer-bg: blue;
}
body {
display: grid;
grid-gap: var(--space-sm);
padding: var(--space-sm);
color: var(--text-color);
}
header {
padding: var(--space-sm);
height: 100px;
background-color: var(--header-bg);
}
main {
display: grid;
column-gap: var(--space-sm);
grid-template-columns: 2fr 1fr;
align-items: start;
}
.main-content {
background-color: var(--mainContent-bg);
padding: var(--space-sm);
}
.main-content p {
margin-bottom: var(--space-md);
}
.sidebar {
position: sticky;
top: 0;
padding: var(--space-sm);
background-color: var(--sidebar-bg);
}
.sidebar li {
list-style: none;
}
.sidebar a {
text-decoration: none;
}
footer {
padding: var(--space-sm);
height: 100px;
background-color: var(--footer-bg);
}
<body>
<header>
<h1>HEADER</h1>
</header>
<main>
<section class="main-content">
<h1>MAIN CONTENT</h1>
<p id="paragraph1">
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.
</p>
<p id="paragraph2">
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?
</p>
<p id="paragraph3">
But I must explain to you how all this mistaken idea of denouncing
pleasure and praising pain was born and I will give you a complete
account of the system, and expound the actual teachings of the great
explorer of the truth, the master-builder of human happiness. No one
rejects, dislikes, or avoids pleasure itself, because it is pleasure,
but because those who do not know how to pursue pleasure rationally
encounter consequences that are extremely painful. Nor again is there
anyone who loves or pursues or desires to obtain pain of itself,
because it is pain, but because occasionally circumstances occur in
which toil and pain can procure him some great pleasure. To take a
trivial example, which of us ever undertakes laborious physical
exercise, except to obtain some advantage from it? But who has any
right to find fault with a man who chooses to enjoy a pleasure that
has no annoying consequences, or one who avoids a pain that produces
no resultant pleasure?
</p>
<p id="paragraph4">
At vero eos et accusamus et iusto odio dignissimos ducimus qui
blanditiis praesentium voluptatum deleniti atque corrupti quos dolores
et quas molestias excepturi sint occaecati cupiditate non provident,
similique sunt in culpa qui officia deserunt mollitia animi, id est
laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita
distinctio. Nam libero tempore, cum soluta nobis est eligendi optio
cumque nihil impedit quo minus id quod maxime placeat facere possimus,
omnis voluptas assumenda est, omnis dolor repellendus. Temporibus
autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe
eveniet ut et voluptates repudiandae sint et molestiae non recusandae.
Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis
voluptatibus maiores alias consequatur aut perferendis doloribus
asperiores repellat.
</p>
<p id="paragraph5">
On the other hand, we denounce with righteous indignation and dislike
men who are so beguiled and demoralized by the charms of pleasure of
the moment, so blinded by desire, that they cannot foresee the pain
and trouble that are bound to ensue; and equal blame belongs to those
who fail in their duty through weakness of will, which is the same as
saying through shrinking from toil and pain. These cases are perfectly
simple and easy to distinguish. In a free hour, when our power of
choice is untrammelled and when nothing prevents our being able to do
what we like best, every pleasure is to be welcomed and every pain
avoided. But in certain circumstances and owing to the claims of duty
or the obligations of business it will frequently occur that pleasures
have to be repudiated and annoyances accepted. The wise man therefore
always holds in these matters to this principle of selection: he
rejects pleasures to secure other greater pleasures, or else he
endures pains to avoid worse pains.
</p>
</section>
<section class="sidebar">
<h1>SIDEBAR</h1>
<ul>
<li>Paragraph 1</li>
<li>Paragraph 2</li>
<li>Paragraph 3</li>
<li>Paragraph 4</li>
<li>Paragraph 5</li>
</ul>
</section>
</main>
<footer>
<h1>FOOTER</h1>
</footer>
</body>
Also, you don't need to explicitly declare width: 100% on header and footer elements because they are block-level elements, by default they have width: 100%.
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
I'd like to see a background image (not full screen), previously positioned as "fixed", slowly move toward the top part of the web page and then disappear like happens with absolute positioning, but only after a certain number of pixels.
I used the "addClass" event to change the positioning from fixed to absolute.
Reached the wanted amount of pixels, the image is affected by the new class but instead of starting a smooth movement upwards, it jumps in the position in which it would be if it has always defined by an absolute position. Instead, I like it to start the movement from the position where it is.
This is the Jquery code (the class ".scrolled" just says "position:absolute")
<script>
$(document).on("scroll", function () {
var pixels = $(document).scrollTop()
if (pixels > 350) {
$("img").addClass("scrolled")
} else {
$("img").removeClass("scrolled")
}
})
</script>
UPDATE
In the following, I'll add my HTML and CSS code. I'm sorry guys, I'm a beginner and I didn't wonder that would be fundamental having them to answer my question.
HTML
<div class="grid"> <div class="row"><div class="col-6"><img src="https://www.illibraio.it/wp-content/uploads/2017/09/francesco-carofiglio-1.jpg" alt="FotoPortfolio"></div></div>
<div class="row">
<p class="page">
Hi everybody!<br>
My name is Francesco Cagnola<br> and I'm a communication designer.<br>
Recently, I've graduated at Politecnico di Milano with a degree in Communication Design.
I'm experienced in videomaking and photography but I can do beautiful graphics too.
I'm based in Milan but I'm spending a period in London to breath this vibrant city!
<br><br>
"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?"
</p>
</div> </div>
CSS
.grid {
width: 100%;
}
.row {
margin-bottom: 1%;
display: flex;
justify-content: flex-start;
}
.col-6 {
width: 50%;
}
body {
background-color: #000000;
color:black;
margin: 0px
}
img { position: fixed;
top:15%;
justify-content: flex-end;
margin-left: auto;
width: 50%;
right:5%;
z-index: 0;
}
.scrolled{
position:absolute;
}
.page {
font-family: 'Roboto', sans-serif;
font-size: 36px;
font-weight: 400;
color: white;
position: absolute;
top: 10%;
padding: 14px 16px;
width: 60%;
float: left;
}
When you are removing class scrolled, you can add another class called for example 'animation'.
And 'animation' will have this in CSS:
.animation {
position: absolute;
animation-name: godown;
animation-duration: ...s;
animation-fill-mode: forwards;
}
#keyframes godown {
0% {
top: 350px;
}
100% {
top: 0px;
}
And this will be jQuery:
if (pixels > 350) {
$("img").addClass("scrolled");
$("img").removeClass("animation");
} else {
$("img").removeClass("scrolled");
$("img").addClass("animation");
}
But scrolled has to have this in CSS:
.scrolled {
position: absolute;
}
I'm on my mobile now so my testing is limited, but it should actually work.
UPDATE:
This is CSS:
.grid {
width: 100%;
}
.row {
margin-bottom: 1%;
display: flex;
justify-content: flex-start;
}
.col-6 {
width: 50%;
}
body {
background-color: #000000;
color:black;
margin: 0px
}
img {
position: fixed;
top:15%;
justify-content: flex-end;
margin-left: auto;
width: 50%;
right:5%;
z-index: 0;
}
.scrolled{
position:absolute;
animation-name: godown;
animation-duration: .5s;
animation-fill-mode: forwards;
}
.page {
font-family: 'Roboto', sans-serif;
font-size: 36px;
font-weight: 400;
color: white;
position: absolute;
top: 10%;
padding: 14px 16px;
width: 60%;
float: left;
}
#keyframes godown {
0% {
top: 350px;
}
100% {
top: 0px;
}
And this is JS:
$(window).scroll(function(){
$(document).on("scroll", function () {
var pixels = $(document).scrollTop()
if (pixels > 350) {
$("img").addClass("scrolled");
} else {
$("img").removeClass("scrolled");
}
});
});
And it works fine, when you scroll 350px from top, img goes smoothly to position absolute.
2nd update:
You can "simulate" position: fixed in jQuery. Just like this:
$(window).scroll(function () {
var pixels = $(document).scrollTop()
if (pixels < 350) {
$('img').css(
'top', $(this).scrollTop() + "px");
} else {
$('img').css(
'top' : '0px',
'transition' : '.5s');
}
});
And CSS:
img {
position: absolute;
}
Then put a position relative on the CSS for images without top, left, right, bottom and it'll be alright.
Don't really know if you don't put your HTML and CSS
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>