I just included a "back-to-top"-button to my website.
HTML:
<div class="scroll-top scroll-is-not-visible">
<i class="fa fa-angle-up" aria-hidden="true"></i>
</div>
<footer class="site-footer">
...
</footer>
CSS:
.scroll-top{
position: fixed;
right: 50px;
bottom: 50px;
display: flex;
align-items: center;
justify-content: center;
}
.scroll-is-not-visible{
visibility: hidden
}
.scroll-is-visible{
visibility: visible
opacity: 1
}
.scroll-fade-out{
opacity: .5
}
The different classes are added or removed by jQuery. Everything works well, but if I scroll down completely, the button (logically) overlaps the footer and hides the text behind it.
My question is, how I can edit my code to display the button at the defined position as long as the footer is not in the viewport and as soon as the footer enters the viewport the button should stay 50px above the footer-container. So if the footer is in the viewport, the button should scroll with the content.
I don't know if this is understandable, so please comment if you do not get what I mean.
Thanks in advance!
Using jQuery, you can determine the point in the window scroll at which the button obscures the footer and then write javascript/jquery that accounts for this. I've done something here: http://codepen.io/babzcraig/pen/QNJrye which you can play with. The code would look something like this:
HTML:
<div class="container">
<h2>Here's Your Content... bla bla bla<h2>
<button id="btn">Click Me</button>
</div>
<div class = "footer">
<p>This is Your Footer</p>
</div>
CSS:
.container {
background-color: pink;
height: 1000px;
margin-bottom: 0px;
}
#btn {
margin-left: 100px;
width: 50px;
height: 50px;
}
.footer {
background-color: yellow;
margin-top: 0px;
height: 200px;
}
p {
padding: 30px;
font-family: roboto;
}
JS:
$(document).ready(function() {
function getScroll() {
var btnScroll = $(window).scrollTop();
console.log(btnScroll);
if (btnScroll < 450) {
$("#btn").css({"position":"fixed","margin-top": "450px"})
} else {
$("#btn").animate({"position":"fixed","margin-top": "200px"}, 400)
}
}
setInterval(function(){getScroll();}, 500);
});
Your numbers would be different based on your particular design but if you pay around with the numbers a bit, you'll find what works. I used a .animate() method in the else block so that you get a smoother transition that using just a css declaration. Let me know if this helps.
Related
I'm trying to do an effect that hide a div behind other like this page: Canalla Agency. I use two divs and the last one with position fixed, and it's worked, but the div lost the height.
Sorry for my explanation but I'm not good in CSS positioning and Javascript. I hope you can help me and see you soon. Thanks.
Solution with three <div>'s:
The only tricky bit is the "viewer" div creates the scrolling space to see the background div.
No JS required!
Also remember to specify position when using z-index.
<html>
<style>
#cover, #viewer, #background {
box-sizing: border-box;
position: relative;
padding-top: 50vh;
text-align: center;
height: 100vh;
width: 100%;
}
#cover {
background-color: paleturquoise;
z-index: 1;
}
#viewer {
z-index: -1;
}
#background {
background-color: coral;
position: fixed;
top: 0;
left: 0;
}
</style>
<body>
<div id="cover">
<h1>This Scrolls Up</h1>
</div>
<div id="viewer"></div>
<div id="background">
<h1>This Stays Static</h1>
</div>
</body>
</html>
I'm wanting to create a div panel with a link which when clicked slides a panel in from the right, I have this working fine but I want to have the clickable link pushed out with the div panel and it's this I cannot figure out although i'm guessing it's really simple.
The html I have is:
<div class="quick-contact">
<div class="slide-toggle">Slide Toggle</div>
<div class="box">
<div class="box-inner">
content goes here
</div>
</div>
</div>
the css is this:
quick-contact {
background: #ccc;
float:right;
}
.box{
float:right;
overflow: hidden;
background: #f0e68c;
display: none;
}
.slide-toggle {
float: right;
position: relative;
right: 0;
}
/* Add padding and border to inner content for better animation effect */
.box-inner{
width: 400px;
padding: 10px;
border: 1px solid #a29415;
}
and the jquery is:
// use this docu ready //
jQuery(function($) {
$(".slide-toggle").click(function(){
$(".box").animate({
width: "toggle"
});
});
}); // end
I can get the panel to slide when I click the link but the clickable link just sits above the panel when it slides in, I need it to slide out with the panel, I need it to work like this http://www.sanwebe.com/assets/floating-contact-form/ The reason i'm not using that example is because I need to slidein panel to slide in the header div and not the body div like this example does.
Just place your <div class="slide-toggle">...</div> after <div class="box">...</div> (because you are using float: "right";). Make it look like this:
<div class="quick-contact">
<div class="box">
<div class="box-inner">
content goes here
</div>
</div>
<div class="slide-toggle">
Slide Toggle
</div>
</div>
Working example: http://codepen.io/anon/pen/GoPPPE
Here's a working example: https://jsfiddle.net/ruo8r7o8/2/
Essentially, what you want to do is:
Lose the float .. it complicates calculations
Animate the whole box, not just one part
Javascript action:
$(function(){
$('.slide-toggle').click(function(){
$('.quick-contact').animate({
right: $('.quick-contact').css('right') == '0px' ? "100px": "0px"
})
});
});
CSS action:
.quick-contact {
position: absolute;
right: 0;
}
.slide-toggle {
position: relative;
background-color: red;
}
.box {
position: absolute;
right: -100px;
width: 100px;
background-color: green;
}
I have two divs. I want the left div to hide and show automatically according to the window size, i.e. I want it to be responsive.
On the other hand, I want to hide/show the left div manually if necessary. I added a black separator in the middle. When the separator is clicked the left div hides and the right div takes the whole width.
Until now, everything is ok.
BUT. When I hide/show the left div manually, it ceases to react to the responsive code.
Please check this JSFiddle and lend me some help.
Thank you very much.
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<style>
.div1 {
background-color: #ffee99;
width: 300px;
height: 100%;
position: absolute;
top: 0px;
left: 0px;
}
.separator {
border-left: 3px solid #000000;
border-right: 3px solid #000000;
width: 0px;
height: 100%;
position: absolute;
top: 0px;
left: 300px;
z-index: 100;
}
.div2 {
background-color: #99eeff;
width: calc(100% - 300px);
height: 100%;
position: absolute;
top: 0px;
left: 300px;
}
#media screen and (max-width: 500px) {
.div {
display: none;
}
.separator {
left: 0px;
}
.div2 {
width: 100%;
left: 0;
}
}
</style>
<script>
$(function() {
function hideLeftDiv() {
$('.div1').hide();
$('.div2').css('width', '100%').css('left', 0);
$('.separator').css('left', '0px');
}
function showLeftDiv() {
$('.div1').show();
$('.div2').css('width', 'calc(100% - 300px)').css('left', '300px');
$('.separator').css('left', '300px');
}
$('.separator').click(function() {
$('.div1').is(":visible") ? hideLeftDiv() : showLeftDiv();
});
});
</script>
</head>
<body>
<div class="div1"></div>
<div class="separator"></div>
<div class="div2"></div>
</body>
</html>
Have a play with having two classes for identifying whether something is hidden or not i.e. desktop and mobile. You can then check whether its actually hidden with is(':hidden') and respond accordingly.
Check this fiddle for a quick demo http://fiddle.jshell.net/tmx3p6ts/31/
Read this: getbootstrap.com/css/#grid You can use the grid system to make a page like you have, but when the screen is getting to small, you can getbootstrap.com/css/#responsive-utilities use this link to know when to hide things.
So to help you maybe a step in the right direction:
<div class="container">
<div class="col-sm-4 hidden-xs">
This is the left div.
</div>
<div class="col-sm-8 col-sm-12">
This is the left div.
</div>
</div>
Something like this should work. Check out this fiddle: Fiddle with bootstrap
You can adjust the classes to any style you want.
I'm having trouble finding a solution to what I'm trying to accomplish. I am trying to use JS (or additional libraries) to make it so that when the user scrolls down on the mousewheel the page scrolls the opposite way than it normally would.
Basically, I want the bottom of the page to be seen first and as the user scrolls I want the top of the screen to come down into view. The only example I've been able to find is the right column of http://conduit.com/.
I've set up a JSFiddle http://jsfiddle.net/5UUtV/ with an example to help visualize it. I know it might have something to do with:
window.scrolltop();
but honestly, I'm not sure of the best way to go about this.
I want the panel labeled '1' to be seen first, and the rest to come down into view as the user scrolls.
Any ideas on how this could be done would be greatly appreciated.
Thanks
here is the solution - http://jsfiddle.net/5UUtV/1/
JS
var winHeight = $(window).innerHeight();
$(document).ready(function () {
$(".panel").height(winHeight);
$("body").height(winHeight*$(".panel").length);
});
window.addEventListener('resize', function (event) {
$(".panel").height($(window).innerHeight());
});
$(window).on('scroll',function(){
$(".panelCon").css('bottom',$(window).scrollTop()*-1);
});
HTML
<body>
<div class="panelCon">
<div id="pane-5" class="panel">
<h1>5</h1>
</div>
<div id="pane-4"class="panel">
<h1>4</h1>
</div>
<div id="pane-3"class="panel">
<h1>3</h1>
</div>
<div id="pane-2" class="panel">
<h1>2</h1>
</div>
<div id="pane-1" class="panel">
<h1>1</h1>
</div>
</div>
</body>
CSS
body {
margin: 0;
padding: 0;
}
.panelCon{
position: fixed;
bottom: 0;
left:0;
width: 100%;
}
.panel {
width: 100%;
}
.panel h1 {
width: 100px;
position: relative;
display: block;
margin: 0 auto;
text-align: center;
top: 50%;
}
#pane-1 {
background-color: green;
}
#pane-2 {
background-color: red;
}
#pane-3 {
background-color: white;
}
#pane-4 {
background-color: pink;
}
#pane-5 {
background-color: yellow;
}
Mozilla.com has this tab on the top of their site that you can click and a menu drops down. I have a client who wants me to do the same thing but upside down, from the bottom half of the page. Apparently this is a really hard request. How do I make something like tabzilla that goes up and either overlaps or pushes the content away? Thanks!
Update: I love you guys.
Edit: http://hemakessites.com/mayukh/4/ Why does the top "Sign In/Register" pop down and the "Toggle" on the bottom pops up? I'm not seeing the difference besides 'top' and 'bottom' in the css. How does that change the direction of the popup?
Also, clicking the '337-9147' will expand the menu. I only want the button region to be clickable. How can I accomplish this?
You guys are awesome and I'm going to return the favor by answering some questions on here when I get time.
I took a similar approach as others, in that you set a div to have a fixed, or absolute position at the bottom of the screen (depending on whether the tab should always be visible, or only at the very bottom). Then, you can write some very simple javascript to vary the height of the element, and as the bottom is fixed, it will cause the tab to rise into the screen.
Essentially all you need is
.container{
position: absolute;
bottom: -1px;
}
And
$('.container').toggle(function(){
$(this).animate({height:'205px'}, 500)
},function(){
$(this).animate({height:'20px'}, 200)
});
Here's a jsfiddle demo.
Here's a jQuery solution, which is smoother than css3:
So, you'll want to do something like this jsfiddle (NOTE: This requires jQuery):
http://jsfiddle.net/cFkn2/
$(document).ready(function() {
$('#tab').click(function() {
if ($('#tab').css('height') == '20px') {
$('#tab').animate({
height: '100px'
}, 1000);
}
else {
$('#tab').animate({
height: '20px'
}, 1000);
};
});
});
and
#tab{
position: absolute;
bottom: 0;
width: 100%;
background-color: red;
height:20px;
}
and
<div id="tab">CONTENT</div>
Style, edit, and add easing to taste.
I was lazy to make here click handler, so it is css3 only hover sample
I used fixed position with {top: 100%}, transition for animation, margin <0 to show;
HTML
<div id="menu">
<div id="handler">handler</div>
<div id="menucontent">
menu menu<br>
menu menu<br>
</div>
</div>
<div id="content">
<div> text text text</div>
<div> text text text</div>
<!-- many of them -->
<div> text text text</div>
<div> text text text</div>
<div> text text text</div>
</div>
CSS:
#content > div {
font-size: 2em;
height: 2.1em;
border: 1px solid black;
margin-top: 10px;
}
#menu {
left: 30px;
position: fixed;
font-size: 20px;
width: 300px;
height: 300px;
top: 100%;
border: 1px solid red;
background: white;
-webkit-transition: all 1s;
-mozilla-transition: all 1s;
-o-transition: all 1s;
transition: all 1s;
}
#menu #handler {
position: absolute;
top: -40px;
background: green;
font-size: 30px;
height: 40px;
padding-left: 5px;
padding-right: 5px;
left: 10px;
}
#menu:hover {
margin-top: -300px;
}
with click, or
JS:
$(function() {
$('#menu #handler').click(function() {
$('#menu').toggleClass('shown');
});
});
in css change hover to class shown
#menu.shown {
margin-top: -300px;
}