I'm creating a toggling menu using JQuery slide effect. I am trying to make the collapse menu show a bit of over hang for the user to still see a bit of the drawer background when it's closed.
EDIT TO ADD: What do I mean by "overhang"?
In the Google example below, the white app drawer is present at the bottom, it never fully disappears. A piece of it hangs over the content so users can see a few things on it plus a small prompt to slide it up fully. I’d like my own slider to not fully disappear but leave some pixels of overhang.
Here is the code I am successfully using for the drawer:
$(function () {
$("a.toggle").click(function () {
$(".menu-container").toggle("slide", {direction:'right'}, 500);
$(this).toggleClass("open");
});
$(".main-navigation ul li a").click(function () {
$(".menu-container").toggle("slide", {direction:'left'}, 350);
$("a.toggle").toggleClass("open");
});
});
.menu-container {
position:fixed;
top: 0;
left: 0;
right: 0;
height: 999em;
background: rgba(144, 144, 144, 0.85);
display:none;
}
.menu-container ul{padding:2em;}
.toggle{
background:red;
color:#fff;
cursor:pointer;
padding:1em;
transform: rotate(-90deg);
position:absolute;
z-index:999;
top:50%;
right:0;
}
<script src="//code.jquery.com/jquery-1.12.4.js"></script>
<script src="//code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<a class="toggle">Menu</a>
<div class="menu-container">
<ul>
<li>Menu Item 1</li>
</ul>
</div>
Here's how I actually want it to function (I am showing Google Maps mobile drawer as an example):
The white drawer at the bottom has a few settings links
The little grey tictac on the white drawer lets you swipe the container up to take up the whole screen
Is it possible for the jQuery container I'm toggle sliding in and out to have a bit of overhang like this, for users to see even when closed?
You could do this in 10 different ways - but it all depends on your situation. It's always a little bit of a juggling act. - but check out translate. That's what I'd use.
var thing = document.querySelector('[rel="clicky-thing"]');
thing.addEventListener('click', function(event) {
event.target.classList.toggle('open');
});
body {
margin: 0;
}
* {
box-sizing: border-box;
}
.menu {
border-radius: 10px;
border: 1px solid blue;
padding: 1rem;
min-height: 400px; /* arbitrary */
/* */
width: calc(100% - 20px);
position: absolute;
top: 100%;
left: 10px;
cursor: pointer;
/* */
transition: .2s;
transform: translateY(-200px);
}
.menu:not(.open) {
transform: translateY(-50px);
}
<nav class='menu' rel='clicky-thing'>
this is a menu... and it would have stuff in it
</nav>
example with button: https://jsfiddle.net/sheriffderek/zwq2okev/
Related
I'm creating a page where the navigation bar should only appear after scrolling a few thousand pixels. But when I refresh the browser, the navigation bar appears first and disappears as soon as I start scrolling. After that everything works as intended.
How can I make the bar hidden when the page is refreshed?
Here the JS code I have used:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){$(window).scroll(function(){
if( $(this).scrollTop() > 4000){
$('#navigation').fadeIn( "slow", "linear" )
} else {
$('#navigation').fadeOut( "slow", "linear" )
}
})
})
</script>
Here the CSS code I have used:
nav ul {
position:fixed;
list-style: none;
width: 1100px;
height: 40px;
margin: 30px 222px auto;
padding: 20px 20px 20px 20px;
background-color: #798c39;
text-align: center;
}
Maybe try another way. Instead of doing everything with jquery I recommend using pure javascript and css. This method is more efficient and works better.
const nav = document.querySelector('#navigation');
function showNav(){
nav.classList.add('show');
}
function hidewNav(){
nav.classList.remove('show');
}
var currPos = window.scrollY;
document.addEventListener('scroll', () => {
if (window.scrollY < currPos) {
//scroll up
hidewNav();
} else {
//scroll down
showNav();
}
currPos = window.scrollY;
});
body {
margin: 0;
height: 2000px;
margin-top: 100px;
}
nav {
position: fixed;
list-style: none;
width: 100%;
height: 70px;
top: 0;
margin: 0;
background-color: #798c39;
text-align: center;
transform: translateY(-100px);
transition: 0.3s;
}
.show {
transform: translateY(0);
}
<html>
<head>
</head>
<body>
<header>
<nav id="navigation">
<ul>
</ul>
</nav>
</header>
<main>
</main>
</body>
</html>
It depends on whether the navbar's space is to be reserved for it or not on load.
I suspect it is given the JS you have shown, in which case you need to ensure it has opacity: 0 on load.
The only alteration to your code would be in the stylesheet add:
nav {
opacity: 0;
}
This is assuming that the fadeIn/fadeOut keyframes just alter opacity. It they alter some dimension as well, for example, that would also need catering for. Perhaps you could show us those keyframes so we can check?
I tried a lot of code snippets to do this, but nothing worked.
In CSS I used this to make the menu floating on mobile:
#media screen and (max-width: 900px){
header#s5_header_area1 {
position: sticky;
top: 0;
z-index: 2;
}
}
It's working, but I want to give the menu a little transparency after I start to scroll down. How can I do this?
When the user has scrolled it will apply a class .menu--alt to the menu otherwise it will just have the class .menu.
Updating the CSS should do what you want. Looing back at your question you will want to edit the styles for header#s5_header_area1 using javascript - a simple refactor of the example below will do it.
const menu = document.querySelector(".menu");
document.addEventListener("scroll", () => {
// use document.documentElement for chrome, firefox, ie or opera
// and document.body for safari since that's where overflow is set in those browsers
if (document.documentElement.scrollTop > 0)
menu.classList.add("menu--alt");
else
menu.classList.remove("menu--alt");
});
.content {
height: 2000px;
background: pink;
}
.menu {
background-color: #000;
color: #fff;
position: fixed;
top: 0;
left: 0;
padding: 20px;
box-sizing: border-box;
}
.menu--alt {
opacity: 0.5;
}
<div class="menu">
menu (not clickable) - scroll to see opacity change
</div>
<div class="content">
hi there
</div>
Here's the challenge:
I have two divs layered on top of one another in an HTML file. The top div is mostly transparent using CSS the bottom div has an image as its background. On mouseenter, I want the top div to disappear and on mouseleave I want the top div to come back.
$(document).ready(function() {
$('.dimmer').on('mouseenter', event => {
$(this).hide();
}).on('mouseleave', event => {
$(this).show();
});
});
.experience {
background: url("cmu-110.png") no-repeat center;
height: 110px;
width: 110px;
z-index: 2;
}
.dimmer {
background: rgba(238, 238, 238, .25);
position: relative;
top: -128px;
z-index: 3;
}
<div>
<div class="experience"></div>
<div class="dimmer"></div>
</div>
The jquery code snippet above is in a separate file and called in the html's head.
<head>
<!--- Some head stuff like title, meta, calling css in separate file, etc --->
<!--jquery-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="interaction.js"></script>
</head>
Full transparency: I am new to jquery and trying to use it for the first time. Despite working through the full codecademy jquery tutorial, reading w3C school tutorial, searching other stackoverflow posts, and spending more than a reasonable amount of time, I can't seem to get this to work--probably due to a dumb mistake.
Thank you for your help!
I believe a jquery '.on( "mouseout", handler )' on the bottom div should be sufficient to make the top div visible/fade in.
This post should help you: jquery .mouseover() and .mouseout() with fade
If not (if that does not work) what I would do/suggest is:
When mouse enters the top div activate a setTimeout polling functiion or .mouseMove that runs every 1 second or so which checks the mouse position and hide the top div.
If the mouse is not on the bottom div (mousemove) , then display the top div and disable the polling.
You can seach this forum for how to write a setTimeout polling function, etc. If I have some time over the weekend I will give it a whirl...
Trust this helps.
You can set the css visibility property to hidden and visible on mouseenter and mouseleave. I put some space between two divs to make the effect visible clearly.
$(document).ready(function() {
$('.dimmer').on('mouseenter', () => {
$('.dimmer').css("visibility","hidden");
}).on('mouseleave', () => {
$('.dimmer').css("visibility","visible");
});
});
.experience {
background: red;
height: 110px;
width: 110px;
z-index: 0;
}
.dimmer {
background: blue;
position: absolute;
top: -10px;
height: 110px;
width: 110px;
z-index: 1;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<div class="experience"></div>
<div class="dimmer"></div>
</div>
jQuery(document).ready(function(){
jQuery(".dimmer").on({
mouseenter: function () {
jQuery(this).css('opacity', '0');
},
mouseleave: function () {
jQuery(this).css('opacity', '1');
}
});
});
.experience {
background: url("http://lorempixel.com/400/200/") no-repeat center;
height: 110px;
width: 110px;
z-index: 2;
}
.imparant{
position:relative;
height: 110px;
width: 110px;
}
.dimmer {
background: rgba(238, 238, 238, .25);
position: absolute;
top: 0;
left:0;
right:0;
bottom:0;
z-index: 3;
transition:opacity 320ms;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<div class="imparant">
<div class="experience"></div>
<div class="dimmer"></div>
</div>
You don't really need to use jQuery or javascript at all for this. You can do it with a single div, a pseudo-element, and a hover style:
.container{
position:relative;
height: 110px;
width: 110px;
background-image: url("https://randomuser.me/api/portraits/men/41.jpg");
}
.container::before{
content: '';
display: block;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-color: rgba(0,0,0,0.5);
transition: opacity 0.4s;
}
.container:hover::before{
opacity: 0;
}
<div class="container"></div>
If for some reason you wanted to keep the extra divs you could still do it but you'd want to change the CSS hover rule slightly. If you were ok moving the .dimmer before .experience you could just do the hover directly on the .dimmer element:
.dimmer:hover { opacity: 0 }
Otherwise you'd need to use a descendant selector:
.outerDiv:hover .dimmer { opacity: 0 }
I'm uses a previous design of shopping cart, but can't applied the option hover shoppign cart, this its a code example.
My code
$('#cart').hover(function(e) {
$(".shopping-cart").stop(true, true).addClass("active");
}, function() {
$(".shopping-cart").stop(true, true).removeClass("active");
});
I need the contents of the cart not to disappear until the mouse pointer is out.
Example codepen
See the Pen Shopping Cart Dropdown by Eduardo (#alexd2) on CodePen.
use Multiple Selector will solve your issue.
$('#cart, .shopping-cart').hover(function(e) {
$(".shopping-cart").stop(true, true).addClass("active");
}, function() {
$(".shopping-cart").stop(true, true).removeClass("active");
});
With pure css, you could probably do something like this.
.cart {
background-color: lightblue;
float: right;
text-align: right;
position: relative;
}
.list {
background-color: lightgreen;
height: 250px;
width: 300px;
border: 2px solid red;
right: 0;
position: absolute;
transition: 1s all;
transform: scale(0) ;
transform-origin: 100% 0%;
}
.cart:hover > .list {
transform: scale(1);
}
<div>
<div class="cart">
This is a cart
<div class="list">
some long list
</div>
</div>
</div>
position: absolute is optional (along with the accompanying css), just that if you don't have it, then the cart will be as long as the child's width, which may or may not be desirable.
Just remove "active" from this
$(".shopping-cart").stop(true, true).removeClass("active");
to this one
$(".shopping-cart").stop(true, true).removeClass("");
EDIT: Here's a Youtube video that illustrates my problem:
http://youtu.be/OguwjZR_GdU
On my website Black Star Opal I've been trying to implement a sticky menu, much like this one Dansk Kids. I looked at the Dansk Kids website javascript and CSS: there seems to be no javascript involved in their menu (other than the removal of the logo underneath their sticky menu when they scroll). I want my sticky menu to be as smooth as theirs if possible (ie staying flush with the url bar as it pops in and out).
Here's my css for #carttrans, the menu div:
position: fixed;
-webkit-backface-visibility: hidden;
height: 49px;
top: 0px;
left: 0px;
background-color: rgb(255, 255, 255);
width: 100% !important;
z-index: 10000;
text-align: center;
margin-left: 0px;
padding-left: 7px;
border: 1px solid rgb(221, 221, 221);
border-left: none;
border-right: none;
border-bottom-style: solid !important;
border-bottom-width: 1px !important;
border-bottom-color: rgb(221,221,221) !important;
-webkit-transform: translateZ(0);
I also use this js code (only because the menu wouldn't display on iOS Safari without it, although I'm unsure why):
$(function() {
// grab the initial top offset of the navigation
var sticky_navigation_offset_top = $('#carttrans').offset().top;
// our function that decides weather the navigation bar should have "fixed" css position or not.
var sticky_navigation = function(){
var scroll_top = $(window).scrollTop(); // our current vertical position from the top
if ($(window).width() < 500)
{
// if we've scrolled more than the navigation, change its position to fixed to stick to top, otherwise change it back to relative
if (scroll_top > sticky_navigation_offset_top) {
$('#carttrans').css({ 'position': 'fixed', 'top':0, 'left':0 });
} else {
$('#carttrans').css({ 'position': 'fixed' });
}
}
};
// run our function on load
sticky_navigation();
// and run it again every time you scroll
$(window).scroll(function() {
sticky_navigation();
});
});
I even removed all the elements in the menu and just left the blank white bar there to see if it would do the same thing. It popped in and out awkardly just like before.
Any help with this would be amazing.
EDIT: As I said below, it's the URL bar popping in and out that seems to be disturbing my sticky menus. It could possibly be a repaint issue or slow down, because on other sites the disappearance of the url bar and the subsequent movement of the menu (for example, on sticky menu demos) is quite smooth and I'm doing/have tested them with the same url bar popping.
Cheers,
Rob
HTML
<header><h1>Sticky Header</h1></header>
<img src="large-image.jpg" width="782" height="2000" alt="Big Image" />
jQuery (remember to include the jquery library)
$(window).scroll(function() {
if ($(this).scrollTop() > 1){
$('header').addClass("sticky");
}
else{
$('header').removeClass("sticky");
}
});
CSS:
header{
position: fixed;
width: 100%;
text-align: center;
font-size: 72px;
line-height: 108px;
height: 108px;
background: #335C7D;
color: #fff;
font-family: 'PT Sans', sans-serif;
}
header.sticky {
font-size: 24px;
line-height: 48px;
height: 48px;
background: #efc47D;
text-align: left;
padding-left: 20px;
transition: all 0.4s ease;
}
REFERENCES:
http://www.webdesignerdepot.com/2014/05/how-to-create-an-animated-sticky-header-with-css3-and-jquery/
PREVIOUS SAME QUESTION ON STACK OVERFLOW:
CSS Sticky header
I used firebug for firefox and just added the following to your #carttrans ID i am assuming you only want this to stick? If so check the css below replace your #carttrans with the below and lemme know if that is what you want?
#carttrans {
background: none repeat scroll 0 0 white;
position: fixed;
text-align: right;
top: 40px;
z-index: 999;
}
Hi i looked at your youtube clip and i see that it could be that the jquery you are using is affecting your main div for the top section #carttrans make sure on this div that your css is marked as important for the top 0px !important so that the jquery won't be able to change it have a try and see if this works?