The screen jump to next screen when set $.fn.fullpage.setAutoScrolling(true); Is there option in fullPage.js to avoid with onStart or something like that ?
To set $.fn.fullpage.setAutoScrolling(false); working fine with the condition of if (index == 3 && direction == 'down') but very unfortunately $.fn.fullpage.setAutoScrolling(true); not working when scroll up.
Demo: http://codepen.io/athimannil/pen/XKWzOX
$('#fullpage').fullpage({
anchors: ['page1', 'page2', 'page3', 'page4'],
sectionsColor: ['yellow', 'orange', '#C0C0C0', '#ADD8E6'],
onLeave: function(anchorLink, index, direction) {
if (index == 3 && direction == 'down') {
$.fn.fullpage.setAutoScrolling(false);
$.fn.fullpage.setFitToSection(false);
} else {
$.fn.fullpage.setAutoScrolling(true);
$.fn.fullpage.setFitToSection(true);
}
},
});
body {
margin: 0;
padding-bottom: 100px !important;
}
.section {
text-align: center;
font-size: 3em;
}
.content {
margin: 50px
}
footer {
height: 100px;
background-color: tomato;
color: white;
width: 100%;
padding: 10px 0;
position: fixed;
right: 0;
bottom: 0;
left: 0;
z-index: -3;
}
p {
font-size: 30px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<script src="https://rawgit.com/alvarotrigo/fullPage.js/master/jquery.fullPage.js"></script>
<div id="fullpage">
<div class="section">One</div>
<div class="section">Two</div>
<div class="section">Three</div>
</div>
<footer>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quis aperiam incidunt sunt recusandae sint impedit. Eos est ducimus, saepe nobis nesciunt laboriosam officia voluptatibus, totam corporis deserunt at, mollitia iste!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Recusandae magni illo facilis, nemo repellat laudantium sequi incidunt odio fugit quibusdam optio dicta, amet, fugiat cumque? Aut eos esse autem, nobis.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolores accusantium soluta debitis aliquam earum enim a libero sapiente porro voluptatibus, voluptas dolor saepe deleniti ut tempora ipsam reprehenderit facilis rem.</p>
</footer>
Not 100% sure what you are trying to achieve, but I figure, you want your fixed footer to be visible after scrolling the third slide.
I would just ad a 4th transparent slide and wouldn't mess with the basic functionality of the slider/scroller because of the unexpected behavior.
<div class="section"></div> <!-- adding a 4th section to my HTML -->
<script>
$('#fullpage').fullpage({
anchors: ['page1', 'page2', 'page3', 'page4'],
sectionsColor: ['yellow', 'orange', '#C0C0C0', 'transparent']
});
</script>
my codepen example
Related
I'm building a website with a heatmap on it with heatmap.js by Patrick Wied. I manage to make it work and I'm now recording mouse move events as well as click events. Everything works very well except when I add some content on my website:
The canvas for the heatmap is on the front layer and I can't select any text or click anything.
I tried to put everything else than the canvas with a higher z-index, I can select and interact with my content but this time as the canvas is behind everything else, it does no record mouse events when I'm hovering some content.
I checked the website and repo of heatmap.js as it works perfectly, though I can't find any code or explanation on how to have a similar result. It looks like he isn't even playing with z-index to achieve this result.
Any idea on how to solve this problem?
var heatmapInstance = h337.create({
container: document.querySelector('#heatmap'),
radius: 30
});
document.querySelector('.wrapper').onmousemove = function(ev) {
heatmapInstance.addData({
x: ev.layerX,
y: ev.layerY,
value: 1
});
};
body {
position: relative;
width: 100%
height: auto;
}
.wrapper {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.wrapper #heatmap {
position: relative;
height: 100%;
width: 100%;
}
<script src="https://cdn.jsdelivr.net/npm/heatmapjs#2.0.2/heatmap.min.js"></script>
<body>
<div class="wrapper">
<div id="heatmap"></div>
</div>
<div class="content">
<button> Click me! </button>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Consequatur animi ipsum fugit quibusdam excepturi quidem sequi vitae, dolor dignissimos ad rerum neque nam itaque illo perspiciatis eligendi, deserunt repellat in?</p>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Consequatur animi ipsum fugit quibusdam excepturi quidem sequi vitae, dolor dignissimos ad rerum neque nam itaque illo perspiciatis eligendi, deserunt repellat in?</p>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Consequatur animi ipsum fugit quibusdam excepturi quidem sequi vitae, dolor dignissimos ad rerum neque nam itaque illo perspiciatis eligendi, deserunt repellat in?</p>
</div>
</body>
This is how you dot it, put the content above the wrapper by giving it higher z-index and add an event listener to content for the mousemove. when mousemove is fired on content it will simply froward that event to wrapper beneath it.
var heatmapInstance = h337.create({
container: document.querySelector('#heatmap'),
radius: 30
});
document.querySelector('.wrapper').onmousemove = function(ev) {
heatmapInstance.addData({
x: ev.clientX,
y: ev.clientY,
value: 1
});
};
document.querySelector('.content').onmousemove = function(ev) {
let event = new ev.constructor( ev.type,ev)
document.querySelector('.wrapper').dispatchEvent(event)
};
body {
position: relative;
width: 100%;
height:100vh;
}
.wrapper {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.wrapper #heatmap {
position: relative;
height: 100%;
width: 100%;
}
.content{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index:3
}
<script src="https://cdn.jsdelivr.net/npm/heatmapjs#2.0.2/heatmap.min.js"></script>
<body>
<div class="wrapper">
<div id="heatmap"></div>
</div>
<div class="content">
<button> Click me! </button>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Consequatur animi ipsum fugit quibusdam excepturi quidem sequi vitae, dolor dignissimos ad rerum neque nam itaque illo perspiciatis eligendi, deserunt repellat in?</p>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Consequatur animi ipsum fugit quibusdam excepturi quidem sequi vitae, dolor dignissimos ad rerum neque nam itaque illo perspiciatis eligendi, deserunt repellat in?</p>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Consequatur animi ipsum fugit quibusdam excepturi quidem sequi vitae, dolor dignissimos ad rerum neque nam itaque illo perspiciatis eligendi, deserunt repellat in?</p>
</div>
</body>
I want to make it so that when scrolling, the block with the block-1 class changes its position to the right, that is, when scrolling, it moves to the right by 1 pixel
Here is the given code in codesandbox
<template>
<div>
<div class="scroll-block">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Placeat quod at
vitae explicabo unde expedita ullam, excepturi accusantium aut aperiam
adipisci consectetur corrupti, perspiciatis, earum ad modi recusandae
numquam tenetur! Lorem ipsum dolor sit amet consectetur, adipisicing elit.
Corrupti distinctio architecto deleniti quas nihil. Illum possimus
accusamus quibusdam quis, repudiandae labore laboriosam nihil odit, vitae
ratione numquam quod cumque aut.
</div>
<div class="block-1"></div>
</div>
</template>
<style scoped>
.scroll-block {
width: 200px;
overflow: scroll;
height: 200px;
background: red;
}
.block-1 {
width: 100px;
height: 100px;
background: yellow;
}
</style>
Just handle scrolling event and change the box position.
<template>
<div>
<div class="scroll-block" #scroll="onScroll">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Placeat quod at
vitae explicabo unde expedita ullam, excepturi accusantium aut aperiam
adipisci consectetur corrupti, perspiciatis, earum ad modi recusandae
numquam tenetur! Lorem ipsum dolor sit amet consectetur, adipisicing elit.
Corrupti distinctio architecto deleniti quas nihil. Illum possimus
accusamus quibusdam quis, repudiandae labore laboriosam nihil odit, vitae
ratione numquam quod cumque aut.
</div>
<div class="block-1" :style="block1Style"></div>
</div>
</template>
<script>
export default {
name: "HelloWorld",
props: {
msg: String,
},
data() {
return {
block1Left: 0,
timerId: null,
}
},
computed: {
block1Style() {
return {
left: `${this.block1Left}px`,
}
}
},
methods: {
onScroll() {
this.block1Left++;
}
}
};
</script>
<style scoped>
.scroll-block {
width: 200px;
overflow: scroll;
height: 200px;
background: red;
}
.block-1 {
width: 100px;
height: 100px;
background: yellow;
position: relative;
}
</style>
I have a graphic element positioned at the bottom center of my page that is supposed to fade-in when you start scrolling down.
I am using ScrollMagic JS
The problem is that element is being displayed automatically whenever I reload the page and then fades out. And after I start scrolling down, it fades back in again and starts working normally.
I need to hide on initial page load.
How may I achieve that? Because adding display: none to the element simply hides it all together.
I would also like to use a different kind of animation, instead of ease-out in CSS, I would like to use something that makes the graphic element to look like as it is rising up and rising down.
Similar to this site here: http://lempens-design.com/
DEMO https://jsfiddle.net/jtLo27op/3/
HTML
<div class="intro">
<div class="background_image"></div>
<div class="container-fluid height100">
<div class="row height100">
<div class="col-md-12 text-center height100">
<img src="assets/img/logo.png" alt="Logo" class="logo">
<div id="animate" class="city-vector">
<img src="assets/img/skyline.png" alt="Skyline" class="skyline">
</div>
</div>
</div>
</div>
</div>
<div class="container">
<div class="row">
<h1>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aspernatur distinctio facilis fugit quasi quisquam quos recusandae rerum sunt temporibus voluptates? A, ipsa labore laudantium non recusandae suscipit vel voluptas. Aut! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aspernatur distinctio facilis fugit quasi quisquam quos recusandae rerum sunt temporibus voluptates? A, ipsa labore laudantium non recusandae suscipit vel voluptas. Aut!</h1>
<h1>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aspernatur distinctio facilis fugit quasi quisquam quos recusandae rerum sunt temporibus voluptates? A, ipsa labore laudantium non recusandae suscipit vel voluptas. Aut! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aspernatur distinctio facilis fugit quasi quisquam quos recusandae rerum sunt temporibus voluptates? A, ipsa labore laudantium non recusandae suscipit vel voluptas. Aut!</h1>
<h1>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aspernatur distinctio facilis fugit quasi quisquam quos recusandae rerum sunt temporibus voluptates? A, ipsa labore laudantium non recusandae suscipit vel voluptas. Aut! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aspernatur distinctio facilis fugit quasi quisquam quos recusandae rerum sunt temporibus voluptates? A, ipsa labore laudantium non recusandae suscipit vel voluptas. Aut!</h1>
<h1>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aspernatur distinctio facilis fugit quasi quisquam quos recusandae rerum sunt temporibus voluptates? A, ipsa labore laudantium non recusandae suscipit vel voluptas. Aut! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aspernatur distinctio facilis fugit quasi quisquam quos recusandae rerum sunt temporibus voluptates? A, ipsa labore laudantium non recusandae suscipit vel voluptas. Aut!</h1>
<h1>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aspernatur distinctio facilis fugit quasi quisquam quos recusandae rerum sunt temporibus voluptates? A, ipsa labore laudantium non recusandae suscipit vel voluptas. Aut! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aspernatur distinctio facilis fugit quasi quisquam quos recusandae rerum sunt temporibus voluptates? A, ipsa labore laudantium non recusandae suscipit vel voluptas. Aut!</h1>
<h1>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aspernatur distinctio facilis fugit quasi quisquam quos recusandae rerum sunt temporibus voluptates? A, ipsa labore laudantium non recusandae suscipit vel voluptas. Aut! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aspernatur distinctio facilis fugit quasi quisquam quos recusandae rerum sunt temporibus voluptates? A, ipsa labore laudantium non recusandae suscipit vel voluptas. Aut!</h1>
</div>
</div>
CSS
html, body {
width: 100%;
height: 100%;
}
body {
background-color: #191617;
}
.height100 {
height: 100%;
}
.logo {
width: 220px;
margin-top: 10em;
}
.skyline {
display: block;
max-width: 100%;
position: absolute;
bottom:0;
left:50%;
transform:translateX(-50%);
}
.city-vector {
opacity: 1;
transition: all 3s ease-out;
}
.city-vector.fade-in {
opacity: 0;
}
.intro {
height: 100%;
position: relative;
overflow: hidden;
}
.intro::before {
content: "";
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
background: url('../img/bg/bg5.jpg') no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
height: 100%;
-webkit-filter: blur(3px);
-moz-filter: blur(3px);
-o-filter: blur(3px);
-ms-filter: blur(3px);
filter: blur(3px);
transform: scale(1.01);
}
Javascript
$(document).ready(function() {
var controller = new ScrollMagic.Controller();
var ourScene = new ScrollMagic.Scene({
triggerElement: '#animate',
duration: 361
})
.setClassToggle('#animate', 'fade-in')
.addTo(controller);
});
You have to change your CSS code:
.city-vector {
opacity: 0;
transition: all 3s ease-out;
}
.city-vector.fade-in {
opacity: 1;
}
Updated JSfiddle
UPDATE: Okay, for the function you want, you don't need any external libraries. I don't have any experience with ScrollMagic, so I just didn't use it. I've also added the animation that makes it "rise out of the page" through CSS.
JSfiddle
jQuery
$(document).ready(function() {
$(window).scroll(function() { //run function every time window is scrolled
var scroll = $(window).scrollTop(); //find how much is scrolled from top
if (scroll > 0) { // if the scroll from top is greater than zero...
$("#animate").addClass("fade-in"); //then add class
} else { // if the scroll from top is not greater than zero...
$("#animate").removeClass("fade-in"); //then remove class
}
});
});
CSS animation:
.skyline {
display: block;
max-width: 100%;
position: absolute;
bottom: 0;
opacity: 0; /* I removed this in update */
transition: all 3s ease-out; /* Changed animation duration to 0.5s */
left: 50%;
transform: translate(-50%, 100%);
}
.city-vector.fade-in .skyline {
transform: translate(-50%);
opacity: 1; /* and this */
}
UPDATE: New JSfiddle with "snappish" effect.
How can I change the default slide in direction of the navigation menu when the toggle icon ("hamburger icon") is pressed?
I would like to achieve an effect similar to the one www.shopify.com is using on mobile version of their website: http://d.pr/v/1iEUF (here is a short video presentation of what I am trying to achieve).
Thank you very much in advance.
Here is the way to build that style
JS
jQuery(function($){
$('.navbar-toggle').click(function(){
$('.navbar-collapse').toggleClass('right');
$('.navbar-toggle').toggleClass('indexcity');
});
});
I already reupdated the demo, the effect that you wanted i already get the way u posted before.
DEMO
Here is your fiddle
https://jsfiddle.net/sesn/t2h1ya1z/
If you spend some more time, the code can be optimized to minimum number of lines.
<div class="navbar navbar-inverse navbar-fixed-top" role="navigation" id="slide-nav">
<div class="container">
<div class="navbar-header">
<a class="navbar-toggle"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </a>
<a class="navbar-brand" href="#">Project name</a>
</div>
<div id="slidemenu">
<a class="close">X</a>
<ul class="nav navbar-nav">
<li class="active">
Menu
</li>
<li>
Menu
</li>
<li>
Menu
</li>
</ul>
</div>
</div>
</div>
<div id="page-content">
<div class="container">
<h1 class="no-margin-top">Left Sidebar menu</h1>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid sunt minus libero quas soluta blanditiis voluptatibus, eveniet sint tempora! Maxime!
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad laudantium deleniti ratione ea voluptas, dolore expedita nisi? Veniam, doloremque, reiciendis.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci blanditiis nam esse molestiae voluptatem maiores fugiat nulla commodi magni impedit.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempora ducimus iure ipsa ea officia aliquid quibusdam nostrum obcaecati itaque temporibus!
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid sunt minus libero quas soluta blanditiis voluptatibus, eveniet sint tempora! Maxime!
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad laudantium deleniti ratione ea voluptas, dolore expedita nisi? Veniam, doloremque, reiciendis.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci blanditiis nam esse molestiae voluptatem maiores fugiat nulla commodi magni impedit.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempora ducimus iure ipsa ea officia aliquid quibusdam nostrum obcaecati itaque temporibus!
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid sunt minus libero quas soluta blanditiis voluptatibus, eveniet sint tempora! Maxime!
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad laudantium deleniti ratione ea voluptas, dolore expedita nisi? Veniam, doloremque, reiciendis.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci blanditiis nam esse molestiae voluptatem maiores fugiat nulla commodi magni impedit.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempora ducimus iure ipsa ea officia aliquid quibusdam nostrum obcaecati itaque temporibus!
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid sunt minus libero quas soluta blanditiis voluptatibus, eveniet sint tempora! Maxime!
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad laudantium deleniti ratione ea voluptas, dolore expedita nisi? Veniam, doloremque, reiciendis.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci blanditiis nam esse molestiae voluptatem maiores fugiat nulla commodi magni impedit.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempora ducimus iure ipsa ea officia aliquid quibusdam nostrum obcaecati itaque temporibus!
</p>
</div>
</div>
CSS
body.slide-active {
overflow-x: hidden
}
#page-content {
position: relative;
padding-top: 70px;
left: 0;
}
#page-content.slide-active {
padding-top: 0
}
#slide-nav .navbar-toggle {
cursor: pointer;
position: relative;
line-height: 0;
float: left;
margin: 0;
width: 30px;
height: 40px;
padding: 17px 0 0 0;
border: 0;
background: transparent;
}
#slide-nav .navbar-toggle.slide-active .icon-bar {
background: #CC0F0F;
color: #CC0F0F;
}
.navbar-header {
position: relative
}
.navbar.navbar-fixed-top.slide-active {
position: relative
}
#media (max-width: 767px) {
#slide-nav .container {
margin: 0 !important;
padding: 0 !important;
height: 100%;
}
#slide-nav .navbar-header {
margin: 0 auto;
padding: 0 15px;
}
#slide-nav .navbar.slide-active {
position: absolute;
width: 80%;
top: -1px;
z-index: 1000;
}
#slide-nav #slidemenu {
background: #f7f7f7;
left: -100%;
min-width: 0;
position: absolute;
padding-left: 0;
z-index: 2;
top: -8px;
margin: 0;
}
#slide-nav #slidemenu .navbar-nav {
min-width: 0;
width: 100%;
margin: 0;
margin-top: 40px;
}
#slide-nav #slidemenu .navbar-nav .dropdown-menu li a {
min-width: 0;
width: 80%;
white-space: normal;
}
#slide-nav {
border-top: 0
}
#slide-nav.navbar-inverse #slidemenu {
background: #333
}
#navbar-height-col {
position: fixed;
top: 0;
height: 100%;
bottom: 0;
background: #f7f7f7;
}
#navbar-height-col.inverse {
background: #333;
z-index: 1;
border: 0;
}
#slide-nav .navbar-form {
width: 100%;
margin: 8px 0;
text-align: center;
overflow: hidden;
/*fast clearfixer*/
}
#slide-nav .navbar-form .form-control {
text-align: center
}
#slide-nav .navbar-form .btn {
width: 100%
}
#slidemenu .close {
color: white;
margin: 10px;
}
}
#media (min-width: 768px) {
#page-content {
left: 0 !important
}
.navbar.navbar-fixed-top.slide-active {
position: fixed
}
.navbar-header {
left: 0 !important
}
}
Js
$(document).ready(function() {
$('#slide-nav.navbar-inverse').after($('<div class="inverse" id="navbar-height-col"></div>'));
$('#slide-nav.navbar-default').after($('<div id="navbar-height-col"></div>'));
var slidewidth = '20%';
var navbarneg = '-' + slidewidth;
if ($(window).width() < 767) {
$('#navbar-height-col').css("width", slidewidth);
$('#navbar-height-col').css("left", navbarneg);
$('#slide-nav #slidemenu').css("width", slidewidth);
$('#slide-nav #slidemenu').css("left", navbarneg);
}
$('#slidemenu .close').on('click', function() {
var selected = $('#slidemenu').hasClass('slide-active');
$('#slidemenu, .navbar-toggle, .navbar-header').toggleClass('slide-active');
$('#slidemenu').stop().animate({
left : selected ? navbarneg : '0px'
});
$('.inverse').stop().animate({
left : selected ? navbarneg : '0px'
});
//alert(1);
});
$("#slide-nav").on("click", '.navbar-toggle', function(e) {
// slider is active
var selected = $(this).hasClass('slide-active');
// set slidemenu width
$('#slidemenu').stop().animate({
left : selected ? navbarneg : '0px'
});
// set navbar width
$('#navbar-height-col').stop().animate({
left : selected ? navbarneg : '0px'
});
$(this).toggleClass('slide-active', !selected);
$('#slidemenu').toggleClass('slide-active');
$('.navbar, .navbar-header').toggleClass('slide-active');
});
var selected = '#slidemenu .navbar, .navbar-header';
$(window).on("resize", function() {
if ($(window).width() > 767 && $('.navbar-toggle').is(':hidden')) {
$(selected).removeClass('slide-active');
}
});
});
I have a div that is shown/hide by clicking a button as shown on the image below. At here, when pressing the button, I want the the button at the same position and expand the div (content) above it (towards to the top - position 1 instead of the bottom - position 2). I tried with the position:absolute; properties but nothing has changed. Any idea?
Here is the sample html just for indicating this layout:
<body>
<div class="content">
//Content...
</div>
<div id=hidden>
//Hiddent area...
</div>
<input type="button">
<footer>
//Footer...
</footer>
</body>
Update:
Here is the second behaviour for the second sample: I want the code works as explained.
Looks like you may need position: fixed; and not position: absolute;. Does this work?
$(function () {
$(".expcol").hide();
$("#btnCM").click(function () {
$(".expcol").slideToggle();
});
});
/* Start Praveen's Reset for Fiddle ;) */
* {font-family: 'Segoe UI'; margin: 0; padding: 0; list-style: none; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;}
/* End Praveen's Reset for Fiddle ;) */
footer {position: fixed; bottom: 0; width: 100%; background: #ccf;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<footer>
<button id="btnCM">Click Me</button>
<div class="expcol">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ratione commodi, tenetur laborum et beatae praesentium animi, repellat cum pariatur nostrum harum hic excepturi cumque, magnam illo neque quam molestias nam. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eveniet asperiores sunt sed nemo dignissimos enim tempora quam recusandae cum debitis provident eaque dicta illum, voluptatum expedita rerum vel cupiditate deleniti.</p>
</div>
</footer>
Or if the button is on the bottom:
$(function () {
$(".expcol").hide();
$("#btnCM").click(function () {
$(".expcol").slideToggle();
});
});
/* Start Praveen's Reset for Fiddle ;) */
* {font-family: 'Segoe UI'; margin: 0; padding: 0; list-style: none; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;}
/* End Praveen's Reset for Fiddle ;) */
footer {position: fixed; bottom: 0; width: 100%; background: #ccf;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<footer>
<div class="expcol">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ratione commodi, tenetur laborum et beatae praesentium animi, repellat cum pariatur nostrum harum hic excepturi cumque, magnam illo neque quam molestias nam. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eveniet asperiores sunt sed nemo dignissimos enim tempora quam recusandae cum debitis provident eaque dicta illum, voluptatum expedita rerum vel cupiditate deleniti.</p>
</div>
<button id="btnCM">Click Me</button>
</footer>