I Have created simple dropdown menu, where sub-menu is full width
jsFiddle
$(document).ready(function(){
$(".drop").hide();
$(".link-1").mouseenter(function(){
$('.link-1-drop').slideDown("fast");
});
$(".link-1").mouseleave(function(){
$('.link-1-drop').slideUp("fast");
});
});
https://jsfiddle.net/814z6eL5/2/
As both are different DIVs , when we mouse out to link and mouse enter to div container ,container div slides up.
Is there any way to keep the drop-down div open while move mouse to container?
You can put the div inside the li so when you hover over the container you are still hovering over the li. You can then use position:absolute; on the div.
https://jsfiddle.net/814z6eL5/4/
wrap the both li and slide in one element and assign event to wrapper element.
Check in jsFiddle code here
Mouseenter code
You could add a condition to see if the .link-1-drop is hovered. And if YES then do not close it, if NO , close it ( when leaving the link1)
See below
$(document).ready(function() {
$(".drop").hide();
$(".link-1").mouseenter(function() {
$('.link-1-drop').slideDown("fast");
});
$(".link-1").mouseleave(function() {
setTimeout(function() {
if (!$('.link-1-drop').is(':hover')) {
$('.link-1-drop').slideUp("fast");
}
}, 100);
});
});
*{
margin: 0;
padding: 0;
}
.main-nav{
width: 400px;
display: block;
background-color: #ccc;
margin: 0 auto;
height:20px
}
.drop{
width: 100%;
height: 250px;
background: #0ff;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="main-nav">
<li class="link-1">Link 1</li>
</ul>
<div class="link-1-drop drop">
drop down content
</div>
<script
src="https://code.jquery.com/jquery-1.12.4.min.js"
integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ="
crossorigin="anonymous"></script>
If you want to that your code take effect without putting your div inside the Main-div
just make sur the li has same hight as the div container and check when you leave the li if the mouse hover the drop div or not as below code
$(document).ready(function(){
$(".drop").hide();
$(".link-1 ").mouseenter(function(){
$('.link-1-drop').slideDown("fast");
});
$(".link-1").mouseleave(function(){
if($(".link-1-drop:not(:hover)").length>0)
$('.link-1-drop').slideUp("fast");
});
$(".link-1-drop").mouseleave(function(){
if($(".link-1:not(:hover)").length>0)
$('.link-1-drop').slideUp("fast");
});
});
*{
margin: 0;
padding: 0;
}
.main-nav{
width: 400px;
display: block;
background-color: #ccc;
margin: 0 auto;
/*commented height to match li height */
/* height:20px;*/
}
.drop{
width: 100%;
height: 250px;
background: #0ff;
position:absolute;
left:0;
right:0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="main-nav">
<li class="link-1">Link 1</li>
</ul>
<div class="link-1-drop drop">
drop down content
</div>
Otherwise and better , just put your drop div inside the li , and make css change by adding to
.drop {
...
position:absolute;
left:0;
}
As bellow Snippet :
$(document).ready(function() {
$(".drop").hide();
$(".link-1 ").mouseenter(function() {
$('.link-1-drop').slideDown("fast");
});
$(".link-1").mouseleave(function() {
$('.link-1-drop').slideUp("fast");
});
});
* {
margin: 0;
padding: 0;
}
.main-nav {
width: 400px;
display: block;
background-color: #ccc;
margin: 0 auto;
height: 20px
}
.drop {
width: 100%;
height: 250px;
background: #0ff;
position: absolute;
left: 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="main-nav">
<li class="link-1">Link 1
<div class="link-1-drop drop">
drop down content
</div>
</li>
</ul>
Related
In my project, I have a list of dropdown buttons which are aligned right using flex-end. I've created a very minimal version of the code that shows the issue:
var popper = new Popper(
$('#anchor')[0],
$('#popper')[0],
{
modifiers: {
preventOverflow: {
enabled: true,
boundariesElement: 'window'
}
}
}
);
body {
height: 2000px;
}
.parent {
display: flex;
justify-content: flex-end;
}
.anchor {
width: 40px;
height: 40px;
background-color: #333;
}
.popper {
width: 120px;
height: 80px;
background-color: #c23;
border: 2px solid #ae3;
}
ul {
list-style-type: none;
margin: 0 -6px;
}
li {
margin: 0 6px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://unpkg.com/popper.js/dist/umd/popper.min.js"></script>
<ul class="parent">
<li><div class="anchor"></div></li>
<li><div class="anchor"></div></li>
<li><div class="anchor"></div></li>
<li>
<div class="anchor" id="anchor"></div>
<div class="popper" id="popper"></div>
</li>
</ul>
As seen above, the .popper div is overflowing body; causing a scrollbar to appear.
Removing the li makes Popper work as expected but I cannot do this as I'd lose my list. Using flex-start instead of -end also works correctly.
It's worth noting that the .popper and .anchor elements could be any width depending on what's in them.
Are there any workarounds or solutions for this behaviour? Preferably, without changing any markup.
I'm beginner in JS and I need to help someone to do one task but I'm stuck.
She need to move element from bottom outside of the screen to the middle of the screen at the display of the page.
She try this but nothing happened:
$(document).ready(function(){
var myimg = $( this ).find(" div ");
//Just trying to move div but nothing
myimg.animate({transform: 'translateY(150px)'}, 800, 'ease')
})
#first {
margin-top: 150px;
margin-left: 170px;
display: block;
float: left;
}
#middle {
margin-top: 150px;
margin-left: 100px;
display: block;
float: left;
}
#last {
background-color:#F16668;
margin-top:150px;
margin-left:100px;
display:block;
width:300px;
height:100px;
float:left;
}
<div id="first">
lama
</div>
<div id="middle">
lama
</div>
<div id="last">
lama
</div>
Can you help me please ?
Thank you a lot !
I hope this helps you understand how to animate with CSS classes and transitions.
setTimeout(function () {
$("#middle").addClass('goUp');
}, 1000); // move up after 1 second
$("#middle").click(function () {
$(this).toggleClass('goUp');
}); // move on click
div {
border: 1px solid red;
position: relative;
transition: all 0.5s;
}
#middle {
display: block;
top: 100px;
}
#middle.goUp {
top: 0px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="middle">Click to move</div>
Hello people I created two divs and when i hover to h3 shows me something. I want display this only when i click on h3. How i can do this?
How to change hover to click? When i do this doesn't working.
Sorry for my bad language.
$(document).ready(function () {
$('li.requirement').hover(function () {
$(this).find('span').show();
}, function () {
$(this).find('span').hide();
});
});
#wrap {
background: #e7e7e7;
padding: 0px;
text-align: center;
width: 100%;
}
#left, #right {
background: #ccc;
display: inline-block;
padding: 20px;
}
li {
list-style-type: none;
padding: 0px;
margin: 0px;
}
span.lewy {float:right; background:red; padding:20px;}
span.prawy {float:left; background:red; padding:20px;}
h3 {text-align:center;}
h3.praw {float:left;}
h3.lew {float:right;}
.calosc {max-width:500px; margin: 0 auto; border:1px solid red;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="wrap">
<div id="left"><div class="lef">
<li class="requirement" id="requirement_1">
<h3 class="lew">SPR</h3>
<span class="fr drag lewy" style="display:none;">1 kontakt</span>
</li>
</div></div>
<div id="right"><div class="praf">
<li class="requirement" id="requirement_2">
<h3 class="praw">SPR 2</h3>
<span class="fr drag prawy" style="display:none;">2 kontakt</span>
</li>
</div></div>
</div>
You can use .on('click', function(){}); and then inside this function you check to see if it's already visible or not. Take a look here
EDIT
As you want to be just the <h3> clickable, i made an adjustment in the code below, and now you need to cehck for the visibility of the h3 parent, because now the context of this is now h3 and no more the li
$(document).ready(function () {
$('.clickableH3').on('click', function () {
if ($(this.parentElement).find('span').is(":visible")){
$(this.parentElement).find('span').hide();
}else{
$(this.parentElement).find('span').show();
}
});
});
#wrap {
background: #e7e7e7;
padding: 0px;
text-align: center;
width: 100%;
}
#left, #right {
background: #ccc;
display: inline-block;
padding: 20px;
}
li {
list-style-type: none;
padding: 0px;
margin: 0px;
}
span.lewy {float:right; background:red; padding:20px;}
span.prawy {float:left; background:red; padding:20px;}
h3 {text-align:center;}
h3.praw {float:left;}
h3.lew {float:right;}
.calosc {max-width:500px; margin: 0 auto; border:1px solid red;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="wrap">
<div id="left"><div class="lef">
<li class="requirement" id="requirement_1">
<h3 class="lew clickableH3">SPR</h3>
<span class="fr drag lewy" style="display:none;">1 kontakt</span>
</li>
</div></div>
<div id="right"><div class="praf">
<li class="requirement" id="requirement_2">
<h3 class="praw clickableH3">SPR 2</h3>
<span class="fr drag prawy" style="display:none;">2 kontakt</span>
</li>
</div></div>
</div>
Well you see, in your js code, where you have "hover" ? Well you type "click" there instead ...
The jQuery hover function can have 2 parameters, which is your case. The first one for the hover, the second is for the unhover
So if you want to be able to close and hide on click I advise to use some css and use toggleClass. But if you wan to keep only javascript you can do like this:
$(document).ready(function () {
$('li.requirement').click(function () {
var $elm = $(this);
if( $elm.hasClass('showed') ){
$elm.find('span').removeClass('showed').hide();
}else{
$elm.find('span').addClass('showed').show();
}
});
});
I am trying to make a nav menu for part of a practice website, and I made an animation that basically slides down a green div when one of the menu options are hovered over, but once that happens the whole nav menu slides down. which I do not want. I tried changing the nav menus position to absolute, but then it looses its position, and I can't re-position it. Any help would be appreciated, thank you!
Here is the JSfiddle version.
HTML:
<ul id="nav_animations">
<li class="nav_square home_square" id="greenHome"></li>
</ul>
<ul id="navlist">
<li class="navlistitems" id="home">Home</li>
</ul>
CSS:
#nav_animations {
display:inline;
position:relative;
bottom:13px;
}
#greenHome {
display:none;
}
.nav_square {
background-color:green;
width:100px;
height:15px;
z-index:22;
position:relative;
}
#navlist {
display:inline;
font-family: 'Dhurjati', sans-serif;
font-size:45px;
position:relative;
}
.navlistitems {
display:inline;
padding:50px;
color:black;
}
JavaScript:
$(document).ready(function(){
$('#home').hover(function(){
$('#greenHome').slideToggle('fast');
});
});
PS: Yes I do have the JQuery library linked in my actual code.
The quick and dirty solution using your work is as follows below. If you wanted the green dropdown to be below the parent nav item, you should add ul#nav_animations inside the li.navlistitems. That's what I've done below. I also modified your CSS a little to take this into consideration.
And here is a JSFiddle I threw together for you: http://jsfiddle.net/84amnjz7/1/
CSS:
#navlist {
margin: 0;
padding: 0;
list-style-type: none;
font-family: 'Dhurjati', sans-serif;
font-size: 45px;
position: relative;
}
.navlistitems {
position: relative;
padding: 25px 0 0;
display:block;
float: left;
color: #000;
}
#nav_animations {
display: block;
position: absolute;
top: 0;
left: 0;
margin: 0;
padding: 0;
list-style-type: none;
width: 100%;
}
#greenHome {
display: none;
}
.nav_square {
background-color: green;
width: 100%;
height: 15px;
z-index: 22;
position: relative;
}
jQuery:
$(document).ready(function(){
$('#home').hover(function(){
$('#greenHome').stop(true, true).slideToggle('fast'); /* ADDED .stop(true, true) */
});
});
Modified HTML:
<ul id="navlist">
<li class="navlistitems" id="home">Home
<ul id="nav_animations">
<li class="nav_square home_square" id="greenHome"></li>
</ul>
</li>
</ul>
I have a div which has to scroll. The problem is that it's within a fixed div.
I tried to fix this in different ways, I went through these posts:
Div with scrollbar inside div with position:fixed
Have a fixed position div that needs to scroll if content overflows
but none of them worked for me.
I'd like to test it with you guys and find out what's the problem.
I am working on a mobile responsive website.
It has a nav menu button that opens .list div up - when clicking the menu button.
I inserted the div of the .list right after the nav bar.
When the menu opens it doesn't show all list items in my tag.
I have to give my main div .list different height sizes and I find it not so efficient.
I will paste my relevant code part of the nav bar, and the relevant CSS parts.
HTML:
<div class="list">
<h2 id="cat-header"> ALL CATEGORIES</h2>
<ul class="sports">
<li class="mainli"></li>
<li class="mainli"></li>
<li class="mainli"></li>
</ul>
</div>
CSS:
.sports{
/*display: none;*/
padding: 0 ;
background-color: #fff;
margin: 0;
width:100%;
/*height: 210%*/
-webkit-overflow-scrolling: touch;
}
.list{
width: 99.9%;
/* overflow: hidden; */
/* overflow-y: scroll; */
/* top: 65%; */
overflow-x: hidden;
/*overflow-y: scroll;*/
height: 75%;
display: none;
-webkit-overflow-scrolling: touch;
}
when clicking #mob-menu-btn it opens .list and makes my whole tag fixed:
$('#mob-menu-btn').click(function(){
var isHidden = $('.sports').is(':visible');
if (isHidden){
$( "body" ).removeClass( "makeFixed" );
} else {
$( "body" ).addClass( "makeFixed" );
}
$('.list').slideToggle("fast");
})
my .makeFixed looks like this:
.makeFixed{
position: fixed;
}
I tested this last, and it didn't solve my problem:
.makeFixed{
position: fixed;
top: 0;
bottom:0;
overflow-y:scroll;
overflow-x:hidden;
}
and changed height: auto; and overflow-y: scroll; within .sports and .list.
What might be the problem?
I have a problem with the following:
if (isHidden){
$( "body" ).removeClass( "makeFixed" );
} else {
$( "body" ).addClass( "makeFixed" );
}
having the following CSS:
.makeFixed{
position: fixed;
}
Which means you are fixing the body to... the body? Here is my suggestion:
// I'll keep your HTML intact
<div class="list">
<h2 id="cat-header"> ALL CATEGORIES</h2>
<ul class="sports">
<li class="mainli"></li>
<li class="mainli"></li>
<li class="mainli"></li>
</ul>
</div>
// Your list will be your fixed element. It might be better to call this your nav.
.list {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 0;
transition: height 500ms;
overflow-x: hidden;
}
// I add an active state for it. It will also nicely animate thanks to the previously named transition.
.list.active {
height: 99%;
}
// I only toggle the .active class on the click of the mobile button
$('#mob-menu-btn').click(function(){ $(".list").toggleClass("active"); });
This way you simplify your menu quite a bit. You animate with CSS, you have a simple wrapper that determines where your menu will be positioned and how, and the contents will push the overflow to be scrollable if they are larger.
Also, 'overflow: auto' is unnecessary, I have not come across a need for this. Heres an example where the yellow area is fixed to be very heigh so the scrolling will work, but the gist is the same (actually, I've adjusted all values to make the example more visually obvious):
window.onload = function(){
document.getElementById("button").addEventListener("click", function(){
if(document.getElementById("list").className == "active"){
document.getElementById("list").className = "";
} else {
document.getElementById("list").className = "active";
}
});
}
#list {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 0;
transition: height 500ms;
overflow-x: hidden;
background: blue;
}
#list.active {
height: 80%;
}
#list ul {
height: 3000px;
background: yellow;
}
#button {
z-index: 4;
position: absolute;
top: 10px;
left: 10px;
background: #fff;
}
<div id="button">click me</div>
<div id="list">
<h2 id="cat-header"> ALL CATEGORIES</h2>
<ul class="sports">
<li class="mainli"></li>
<li class="mainli"></li>
<li class="mainli"></li>
</ul>
</div>
Use overflow: auto; on the div that you want to scroll, if the div have right height this will work
Give the height to the div with overflow-y:scroll !important and
like
write your div like this..
<div style="overflow-y:scroll !important;height:80px;">
/*your scrollable content
</div>
Try position the list by using
.list{
width: 99.9%;
/* overflow: hidden; */
/* overflow-y: scroll; */
/* top: 65%; */
overflow-x: hidden;
/*overflow-y: scroll;*/
height: 75%;
display: none;
-webkit-overflow-scrolling: touch;
position: fixed;
z-index:99999;
}
Try this..
<h2 id="cat-header">ALL CATEGORIES</h2> <div style="overflow-y:scroll ;height:80px;border:1px solid #000"> <ul class="sports"> <li class="mainli">hello</li> <li class="mainli">hello</li> <li class="mainli">hello</li> </ul> </div>