I have a dropdown that works with CSS. I want it to disappear when an item in the dropdown is clicked, but still function correctly after words.
Here is what I have so far:
$("span").click(function(){
$(this).parent().hide();
$("#text").html("Try hovering over it again. Now it's broken, because the display attribute was set for the element.");
});
.dropDownContainer{
display: inline-block;
}
.dropDown{
display: none;
padding-left: 6px;
background-color: black;
color:white;
position: absolute;
}
.dropDownContainer:hover .dropDown {
display: block;
}
span{
cursor:pointer;
color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="dropDownContainer">
hover over this
<div class="dropDown">
this is the dropdown<br><br>
click <span>this</span> to close drop down.
<br><br>
It doesn't work.
</div>
</div>
<div id="text">
</div>
You should add a timeout to remove the display none right after you hide. so the cursor wont be positioned in a way it will automatically reopen (on hover this) so its fine.
$("span").off().click(function(){
var dropdown = $(this).parent();
dropdown.hide();
setTimeout(function(){dropdown.removeAttr('style');}, 300);
$("#text").html("Try hovering over it again. Now it's broken, because the display attribute was set for the element.");
});
You didn't have any event handler to hover and open it first. If you close or open something with CSS, you should use CSS to open or close it as well, same goes for JS/jQ, otherwise they may conflict.
SNIPPET
$(".dropDownHeader").on('mouseenter', function() {
$(".dropDownContainer").show();
$("kbd").on("click", function() {
$('.dropDownContainer').hide();
});
});
.dropDownContainer {
display: none;
padding-left: 6px;
background-color: black;
color: white;
position: absolute;
}
.dropDownHeader:hover .dropDown {
display: block;
}
kbd {
cursor: pointer;
color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<header class="dropDownHeader">
<h3>Hover over this</h3>
</header>
<div class="dropDownContainer">
<p>This is the dropdown</p>
<p>Click <kbd>this</kbd> to close drop down.</p>
<p>It doesn't work.</p>
</div>
<article id="text">
</article>
I have updated your code a bit see this fiddle: https://jsfiddle.net/dLcLoggx/1/
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="dropDownContainer">
<span class="trigger">hover over this</span>
<div class="dropDown">
this is the dropdown<br><br>
click <span>this</span> to close drop down.
<br><br>
It doesn't work.
</div>
</div>
<div id="text">
</div>
.dropDownContainer{
display: inline-block;
}
.dropDown{
display: none;
padding-left: 6px;
background-color: black;
color:white;
position: absolute;
}
span{
cursor:pointer;
color: red;
}
$(".dropDown span").click(function(){
$(this).parent().slideUp();
});
$("span.trigger").hover(function(){
$('.dropDown').slideDown();
});
Related
I want to display 2 buttons side by side when you click on the button "Land" present below the "Water" button. Both those buttons should be able to open up pop windows for which the code i have already included. I have tried to implement the button code but when i click on "Land" button everything disappears. How can i fix this?
Here is the fiddle:
http://jsfiddle.net/fku50o9v/2/
Here is my current code:
function popup(id){
if($("#"+id).hasClass( "vis" )){
$("#"+id).removeClass( "vis" );
}else{
$(".dropdown-content").removeClass( "vis" );
$("#"+id).addClass( "vis" );
}
}
#outer
{
width:100%;
text-align: center;
}
.inner
{
display: inline-block;
padding-right: 20px;
}
.msgBtn2{
cursor: pointer;
font-size: 1.2rem;
height: 2.5rem;
border: none;
border-radius: 10px;
color: blue;
background-color: #ffff;
outline: none;
box-shadow: 0 0.3rem rgba(121,121,121,0.70);
}
.dropdown {
position: relative;
display: inline-block;
width: 100%;
}
.dropdown-content {
min-width: 160px;
top: 50px;
margin-left: 10px;
display: none;
position: absolute;
z-index: 1;
color: red;
}
.dropdown-content button{
color: red;
margin: 5px;
display: block;
}
.vis {
display: block;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="outer">
<div class="inner">
<div class="dropdown">
<span><button class="msgBtn2" onclick="popup('water');" >Water</button></span>
<div id="water" class="dropdown-content">
<!--<button type="submit" class="msgBtn2">land</button>!-->
<span><button class="msgBtn2" onclick="popup('land');" >land</button></span>
<div id="land" class="dropdown-content">
<button target="popup"
onclick="window.open('http://google.com/popup','popup','width=600,height=600'); return false;" class="msgBtn2">Workflow</button>
</div>
<button type="submit" class="msgBtn2">river</button>
<button type="submit" class="msgBtn2">ocean</button>
</div>
</div></div>
</div>
I believe this should work. Like Svela mentioned you're "hiding" all elements but the one you're clicking. You need to keep the parent visible. This is just a dirty implementation, I'm pretty sure there are more elegant ways, but it should give you a good idea :D ... I think..
function popup(id){
let element = $("#"+id);
if(element.hasClass( "vis" )){
element.removeClass( "vis" );
}else{
$(".dropdown-content").removeClass( "vis" );
element.addClass( "vis" );
element.parent(".dropdown-content").addClass( "vis" );
}
}
I have a button witch shows only when the parent(parent-class) element is hover. The parent-class has position:relative, and the button has absolute:position. It's works fine.
Now i want to have a drop down list witch appears only when i click the button.
I try to set the absolute:position and display:none to dropdown-list class, and display the dropdown only when i focus the button.
But it's not working.
This is an example code:
<div class="parent-class">
<button class="btn" >button</button>
<ul class="dropdown-list">
<li > content1</li>
<li > content1</li>
</ul>
</div>
.parent-class{
position: relative;
}
.parent-class:hover .btn{
display:block;
}
.btn{
position:absolute;
display:none;
}
.btn:focus .dropdown-list{
display: block;
}
.dropdown-list{
position: absolute;
display: none;
}
Also i used Angular 2, so if there is a way to resolve this with angular 2 it would be perfect
Your problem is that when you use .btn:focus .dropdown-list you expect the .dropdown-list element to be a child element of the .btn element (and in your case - they are not). The .dropdown-list is a sibling element of the .btn.
You can fix this by using the ~ (sibling selector):
.parent-class{
position: relative;
border: 1px solid red;
width: 100px;
height: 100px;
}
.parent-class:hover .btn{
display:block;
}
.btn{
position:absolute;
display:none;
}
.btn:focus ~ .dropdown-list{
display: block;
}
.dropdown-list{
position: absolute;
display: none;
}
<div class="parent-class">
<button class="btn" >button</button>
<ul class="dropdown-list">
<li > content1</li>
<li > content1</li>
</ul>
</div>
I can't seem to find the answer to this; when I google it, all I get are "replace button text".
I want to hover over some text, and have that text replaced with a button. I've tried the fadeIn/fadeOut technique and the Show/Hide technique. However, the button becomes visible, it is in a different space.
Here's my Jquery:
$(document).ready(function(){
$('#hidedsl6').hide();
$('#showdsl6').hover(function(){
$('#hidedsl6').fadeIn();
}, function(e){
e.preventDefault();
$('#hidedsl6').fadeOut();
});
$('#showfttn10').hover(function(){
});
$('#showfttn15').hover(function(){
});
$('#showfttn25').hover(function(){
});
$('#showfttn50').hover(function(){
});
});
My HTML:
<div class="DSL6">
<h3 class="DSLLocation" id="showdsl6">DSL 6</h3>
<button class="btn btntruespeed" id="hidedsl6" type="button">Order Now!</button>
</div>
My CSS:
.DSLLocation {
margin-top: 110px;
}
.DSL6 {
background-color: #dbdbdb;
width: 300px;
height: 250px;
border-style: solid;
border-width: 1px;
border-color: #D3D3D3;
float: left;
display: inline;
}
So if anyone can help me. I don't care if it's with Jquery, or just simple HTML/CSS
Are you simply trying to make some text appear as a button on hover? if so this should work nicely for you:
div {
padding: 10px;
display: inline-block;
transition: all 200ms ease
}
div:hover {
background: red
}
<div>Psuedo button</div>
Or if you want to hide the text and show the button on hover:
.container {
padding: 10px;
display: inline-block;
background: red;
}
button {
display: none;
}
.container:hover button {
display: block;
}
.container:hover .text {
display: none;
}
<div class="container">
<div class="text">Text</div>
<button>Psuedo Button</button>
</div>
You should understand that since you are replacing one element with another they might move due to the different content. Or you can style both elements the same way so that the change is not abrupt.
You could use just CSS for this
.DSL6 {
background-color: #dbdbdb;
width: 300px;
height: 250px;
border-style: solid;
border-width: 1px;
border-color: #D3D3D3;
float: left;
display: inline-block;
}
.DSL6 h3, .DSL6 button{margin:110px 0 0;padding:0;}
.DSL6 h3{display:block;}
.DSL6 button{display:none;}
.DSL6:hover h3{display:none;}
.DSL6:hover button{display:block;}
<div class="DSL6">
<h3 class="DSLLocation" id="showdsl6">DSL 6</h3>
<button class="btn btntruespeed" id="hidedsl6" type="button">Order Now!</button>
</div>
I'm very new to jquery/javascript and I'm trying to make an animated dropdown box when I click onto a button within my navbar.
My code works within jsfiddle http://jsfiddle.net/SQHQ2/2898/
But when I try to implement this within my website and refresh the page, the div disappears completely. I used inspect element and it appears to change to "display:none". I've tried changing the div to a button but still no avail. I just want the button to work! lol
Please can someone show me where I'm going wrong?
This is my html:
<div class="col-md-4 right">
<ul id="user-bar">
<li><div class="btn-burger" id="userlinksbox"><span class="fa fa-bars"></span></div></li>
<li>My Account</li>
<li>Logout</li>
</ul>
</div>
<!----- USER LINKS BOX ----->
<div class="user-links-box">
<h1>Test</h1>
</div>
My CSS:
.user-links-box {
height: 400px;
width: 285px;
padding: 15px;
top:-400px;
right:0px;
position: absolute;
background-color: #111;
color: #fff;
text-align: center;
z-index: 4;
border-bottom-left-radius: 15px;
border-bottom-right-radius: 15px;
}
And finally, the js I'm using:
$(document).ready(function(){
$("#userlinksbox").toggle(function(){
$('.user-links-box').animate({top:40},500);
},function(){
$('.user-links-box').animate({top:-400},500);
});
});
Try these changes :
HTML
<div class="user-links-box" style="display:none">
<h1>Test</h1>
</div>
CSS
.user-links-box {
height: 400px;
width: 285px;
padding: 15px;
top:40px; // CHANGED HERE
right:0px;
position: absolute;
background-color:#111;
color:#fff;
text-align: center;
z-index: 4;
border-bottom-left-radius: 15px;
border-bottom-right-radius: 15px;
}
#userlinksbox { display: inline-block!important; }
JS
$(document).ready(function(){
$("#userlinksbox").click(function(){
$('.user-links-box').slideToggle();
});
});
Is it really #userlinksbox?
Your fiddle tells me #user-links-box
try this
$(document).ready(function(){
$("#userlinksbox").toggle(function(){
$('.user-links-box').css({'display':'block'});
$('.user-links-box').animate({top:40},500);
},function(){
$('.user-links-box').animate({top:-400},500);
});
});
How about placing the .css() function in #Vilvan's answer outside the .toggle() function?
$(document).ready(function(){
$("#userlinksbox").toggle(function(){
$('.user-links-box').animate({top:40},500);
},function(){
$('.user-links-box').animate({top:-400},500);
});
$('#userlinksbox').css({'display':'block'});
});
I've build a tab Container with multiple Tabs and corresponding content, which is only visible if the corresponding Tab is clicked. This works great so far, but I have tried to add two buttons which will navigate to the next and previous tab and I don't know how to achieve this.
You'll find below what I've done so far. I think it's no so good JS code, maybe someone can give me also some hint's to improve it.
Thanks in advance for your help
$(document).ready(function(){
// hide all contents accept from the first div
$('.tabContent div:not(:first)').toggle();
// hide the previous button
$('.previous').hide();
$('.tabs li').click(function () {
if($(this).is(':last-child')){
$('.next').hide();
}else{
$('.next').show();
}
if($(this).is(':first-child')){
$('.previous').hide();
}else{
$('.previous').show();
}
var position = $(this).position();
var corresponding = $(this).data("id");
// scroll to clicked tab with a little gap left to show previous tabs
scroll = $('.tabs').scrollLeft();
$('.tabs').animate({'scrollLeft': scroll+position.left-30},200);
// hide all content divs
$('.tabContent div').hide();
// show content of corresponding tab
$('div.' + corresponding).toggle();
// remove active class from currently not active tabs
$('.tabs li').removeClass('active');
// add active class to clicked tab
$(this).addClass('active');
});
});
body{
background-color: gray;
}
*{
box-sizing: border-box;
}
.contentWrapper{
width: 350px;
margin: 0 auto;
position: relative;
}
.tabsWrapper{
width: 100%;
height: 24px;
overflow: hidden;
position: relative;
}
.tabs{
margin: 0;
padding: 0;
position: absolute;
top: 0;
bottom: -25px;
left: 0;
right: 0;
white-space: nowrap;
overflow: auto;
}
.tabs li{
display: inline-block;
background-color: #ccc;
padding: 3px 8px;
cursor: pointer;
}
.tabs li.active{
background-color: white;
}
.next, .previous{
position: absolute;
padding: 2px 4px;
top: 0;
background-color: white;
}
.next{
right: -25px;
}
.previous{
left: -25px;
}
.tabContent{
width: 100%;
background-color: white;
padding: 15px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="contentWrapper">
<div class="tabsWrapper">
<ul class="tabs">
<li data-id="contentOne" class="active">CSS</li>
<li data-id="contentTwo">HTML, HTML, HTML</li>
<li data-id="contentThree">JS and jQuery</li>
<li data-id="contentFour">one more tab</li>
<li data-id="contentFive">another tab</li>
<li data-id="contentSix">the last tab</li>
</ul>
</div>
<a class="next">></a>
<a class="previous"><</a>
<div class="tabContent">
<div class="contentOne">
<p>this is the CSS tab Content</p>
next
</div>
<div class="contentTwo">
<p>this is the HTML tab Content<br><br>1</p>
next
</div>
<div class="contentThree">
<p>this is the JS tab Content</p>
next
</div>
<div class="contentFour">
<p>this is the sample Content</p>
next
</div>
<div class="contentFive">
<p>this is more sample Content</p>
next
</div>
<div class="contentSix">
<p>this is more than more sample Content</p>
next
</div>
</div>
</div>
You can use trigger('click') to programmatically click the tab you want. This way all the code written for tab change will automatically get executed. For example see the following code:
$('div a').click(function(e){
e.preventDefault();
$('li.active').next('li').trigger('click');
});
See JsFiddle here