I am trying to add mouse hover effect to a list having nested classes but no luck so far even after spending so many hours.
HTML:
<div class="pricing-wrap">
<ul class="pricing_main">
<li class="pricing pricing_three main">
<h2>Used Containers</h2>
.....
</li>
<li class="pricing pricing_three normal">
<h2>Used Containers</h2>
.....
</li>
<li class="pricing pricing_three normal">
<h2>Used Containers</h2>
.....
</li>
</ul>
</div>
...and here is the jquery I am trying to use for mouse hover
JQUERY:
<script type="text/javascript">
jQuery(document).ready(function() {
jQuery(".pricing-wrap ul.pricing_main").hover(function () {
jQuery(this).find('li.pricing_three').addClass("main");
},
function () {
jQuery(this).find('li.pricing_three').removeClass("normal");
}
);
});
</script>
CSS:
.pricing-wrap{
overflow:hidden;
width:100%;
margin:20px 0 30px 0;
float:left;
}
.pricing_main{
overflow:hidden;
float:none;
margin:0 0 0 0;
width:100.5%;
padding:7px 0;
font-family:Arial, Helvetica, sans-serif !important;
}
li.pricing{
padding:0;
margin:20px 0 20px -1px;
float:left;
text-align:center !important;
border:1px solid #ddd;
position:relative;
}
li.main{
margin:0 0 0 -1px;
-moz-box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
-webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
z-index:1;
}
li.pricing:first-child{
margin-left:0;
}
li.pricing ul li{ padding:8px 0; margin:0 35px; border-top:1px dotted #eee;}
li.pricing ul li:first-child{border-top:none;}
li.pricing h2{
background:#ddd;
padding:10px 0;
margin:0;
font-size:20px;
border-bottom:1px solid #ddd;
font-weight:bold;
}
li.main h2{
background:#000;
color:#fff;
padding:21px 1px;
margin:-1px -1px 0 -1px;
border-bottom:none;
}
li.main{
border-color:#ccc;
}
.plan-head{ background:#f9f9f9; padding:20px 0 15px 0; border-bottom:1px solid #eee;}
.plan-price{ font-size:25pt; font-weight:bold; letter-spacing:-2px; line-height:1;}
.plan-bottom{ background:#f9f9f9; padding:15px 0; border-bottom:1px solid #eee;}
li.main .plan-bottom{padding:35px 0;}
.plan-bottom{ background:#f9f9f9; padding:25px 0; border-top:1px solid #eee;}
.plan-bottom a{ font-weight:bold; padding:8px 15px; background:#000; color:#fff !important; font-size:14px; opacity:.9}
li.main .plan-bottom a{padding:13px 22px; opacity:1}
.plan-bottom a:hover,
li.main .plan-bottom a:hover{}
li.pricing_three{
width:33%;
}
li.pricing_four{
width:24.7%;
}
You can check this live at www.modcansolutions.ca/#pricing
Any quick help will be appreciated.
Many thanks,
~ Dipak G.
jQuery(document).ready(function() {
jQuery(".pricing.pricing_three").hover(function() {
jQuery(this).addClass("main").removeClass("normal");
},
function() {
jQuery(this).removeClass("main");
});
});
your answer
jQuery(document).ready(function() {
jQuery(".pricing").hover(function () {
jQuery(this).addClass("main");
},
function () {
jQuery(this).removeClass("main");
}
);
});
or you can check jsfiddle
Related
I have a web app with an EXPIRATION input date field in the format YYYY.MM.DD and am accessing a MEMBERS.JSON file. It's a look up with player's name as a key and returns the member's expiration date.
I want to add css.color to date field if the date is older than today, like "#FF0000", and "00FF00" if the same date is today or in the future.
Please see: http://communitychessclub.com/cccr-pairing/accountEXP.html
How can I do this, please?
$("#P46").on("blur", function(){
$("#X46").val(getExpireDate($(this).val()));
});
getExpireDate;
function getExpireDate(name) {
var i = null;
for (i = 0; members.length > i; i++) {
if (members[i].Name === name) {
return members[i].Expires;
}
}
return false;
};
You can change your parameter of getExpireDate . This parameter must be the current element instead of current value. In this way, inside your function you can get the element for wich you need to change the color:
$(ele).closest('.universal').find('.expDate')
Hence, change this line:
$("#P04").on("blur", function({$("#X04").val(getExpireDate($(this).val()));});
to:
$("#P04").on("blur", function(){
$("#X04").val(getExpireDate(this));
});
In order to compare the dates I used momentjs library:
var exDate = moment(members[i].Expires, 'YYYY.MM.DD');
if (moment().isAfter(exDate)) {
Now, your function becomes:
function getExpireDate(ele) {
var i = null;
for (i = 0; members.length > i; i++) {
if (members[i].Name == ele.value) {
var exDate = moment(members[i].Expires, 'YYYY.MM.DD');
if (moment().isAfter(exDate)) {
$(ele).closest('.universal').find('.expDate').css('color', "#FF0000");
} else {
$(ele).closest('.universal').find('.expDate').css('color', "#00FF00");
}
return members[i].Expires;
}
}
return 'not found';
}
I reduced your inputs to 'Attaya, Jim' and 'Tao, Patrick'.
var members = [{"Name": "Ahmed, Jamshed", "Expires": "2019.10.05"}, {
"Name": "Attaya, Jim",
"Expires": "2018.01.12"
}, {"Name": "Tao, Patrick", "Expires": "2016.08.01"}, {
"Name": "Tarwid, Jan",
"Expires": "2018.03.21"
}];
var players = [
"Attaya, Jim",
"Tao, Patrick",
];
function getExpireDate(ele) {
var i = null;
for (i = 0; members.length > i; i++) {
if (members[i].Name == ele.value) {
var exDate = moment(members[i].Expires, 'YYYY.MM.DD');
if (moment().isAfter(exDate)) {
$(ele).closest('.universal').find('.expDate').css('color', "#FF0000");
} else {
$(ele).closest('.universal').find('.expDate').css('color', "#00FF00");
}
return members[i].Expires;
}
}
return 'not found';
}
// Lookup date of expiration
$("#P04").on("blur", function(){
$("#X04").val(getExpireDate(this));
});
$( ".automplete-2" ).autocomplete({delay: 0, source: window.players, minLength: 1, autoFocus: true});
body {background: #2E5363; font-family: Arial,Helvetica,sans-serif; letter-spacing:1px; color:#17263F; display: block;}
.container {display: flex; flex-direction: column; flex-wrap: nowrap; align-content:center; width:100%}
.box {width:100%; margin:auto;}
.easy-modal {display:none; }
.easy-modal, .easy-modal-animated {border-radius:1rem; position: relative; top: 15%; transform: translateY(-15%); font-size:1.3rem; width: 55%; font-align:justify; padding: 1rem 2rem; box-shadow: 1px 1px 3px rgba(0,0,0,0.35); background-color: tan; }
.arrow-right {display:inline; font-size:2rem; vertical-align:middle; color:#3F4749; font-weight:bold;}
#pairing {display:table; margin:0 auto; border-radius:2rem; padding:3rem 2rem; background:#ADC1C9; color:#F6FFDA; border:6px solid inherit; box-shadow: 3px 3px 6px rgba(0,0,0,0.3); width:auto}
.ui-widget {font-family: Arial,Helvetica,sans-serif; font-size: 1.4em;}
.ui-autocomplete {z-index: 10000000;}
ul.ui-autocomplete.ui-menu {background:pink; font-size:1.5rem; letter-spacing:2px;}
input {background:inherit; text-align:left; color:#3A3D2E;}
input:focus {background: #AA9491; color:#3A3D2E;}
.glasnost {display:inline; text-align:left; margin:0; margin-right:2rem; background:inherit; font-size:1.5rem !important; border:none;
height:2rem; line-height:2rem; vertical-align: middle; width:20rem; letter-spacing:1px; font-weight:normal; text-shadow: 1px 1px 1px #ccc;}
.glasnost input {display:inline-block; text-align:left; margin-right:2rem; background:#76B8D2; color:#294049; font-size:1.5rem; border:none !important; height:2rem; line-height:2rem; vertical-align: middle; width:20rem; letter-spacing:1px; font-weight:bold; padding:0.5rem 1rem; overflow:ellipsis}
.glasnost input:focus {background:#80A994; color:#F5FCFF; text-align:left; font-weight:bold; overflow:ellipsis}
#total_recall {display:table; margin:2rem auto; margin-top:-1rem; color:#ABB6C8; background:#5D71C9; padding:1rem 2rem; font-size:1.75rem; font-weight:normal; border-radius:0.75rem;box-shadow: 3px 3px 6px rgba(0,0,0,0.3);}
#revenue_totals {margin-right:2rem; color:#F6FFDA}
#memberships {margin-right:0; color:#F6FFDA}
#entrance_fees {margin-right:2rem; color:#F6FFDA}
.cucumber {display:inline; color:#3F4749; text-align:right; float:left; margin-top:0.25rem; margin-right:0.5rem; margin-left:1.0rem; font-size:1.2rem; font-weight:bold; line-height:1.5rem; height:1.5rem; vertical-align:middle; margin-top:0.55rem; width:1.5rem; position:relative; top:0.25rem;}
.cucumber::after {content: ".";}
.player div input {display:inline}
/*
.rating {display:inline; width:4rem; text-align:right; font-size:1.5rem; color:#465D51; vertical-align:middle; }
.rating input {display:inline; width:3rem; text-align:center; font-size:1.5rem; border:none; vertical-align:middle; margin-right:3rem; color:#3A3D2E}
.rating input:focus {background:#D78412; color:#3A3D2E}
.rating input:hover {background:#CC790D; color:#3A3D2E}
*/
.CLASS {display:inline; width:5rem; text-align:right; font-size:1.5rem; color:#3F4749; vertical-align:middle; }
.CLASS input {display:inline; width:5rem !important; text-align:center; font-size:1.5rem; border:none; vertical-align:middle; margin-right:3rem; color:#3A3D2E}
.CLASS input:focus {background:#D78412; color:#3A3D2E}
.CLASS input:hover {background:#CC790D; color:#3A3D2E}
.EF {display:inline; width:4rem; text-align:right; font-size:1.5rem; color:#3F4749; vertical-align:middle; }
.EF input {display:inline; width:3rem; text-align:center; font-size:1.5rem; border:none; vertical-align:middle; margin-right:3rem; color:#3A3D2E}
.EF input:focus {background:#D78412; color:#3A3D2E}
.EF input:hover {background:#CC790D; color:#3A3D2E}
.MEM {display:inline; width:6rem; text-align:right; font-size:1.5rem; color:#3F4749; vertical-align:middle; }
.MEM input {display:inline; width:3rem; text-align:center; font-size:1.5rem; border:none; color:#3A3D2E; vertical-align:middle; }
.EXP {display:inline; width:6rem; text-align:right; font-size:1.5rem; color:#3F4749; vertical-align:middle; margin-left:2rem !important;}
.EXP input {display:inline; width:8rem; text-align:center; font-size:1.5rem; border:none; color:#3A3D2E; vertical-align:middle; }
.fee_totals {border:none; font-size:1.75rem; background:inherit; color:#F6FFDA; width:3rem; line-height:2rem; height:2rem; position:relative; bottom:1px; margin:0;}
.player {margin-bottom:1rem}
.fee_setup {display:inline-block; vertical-align:middle;}
.fee_input {display:inline; line-height:2rem; height:2rem; border:none;}
input.fee:focus {background:#80A994; color:beige;}
.fee {border:none; font-size:1.5rem; background:#ABB6C8; line-height:2rem; height:2rem; padding:0.25rem 1rem; display:inline-block; vertical-align:middle;}
.fee_bank {display:inline;}
.number-B {display:table; color:#BCD2DB; text-align:left; float:right; margin-top:0.25rem; margin-left:-0.5rem; font-size:1.2rem; font-weight:bold; line-height:1.5rem; height:1.5rem; vertical-align:middle; margin-top:0.8rem; width:1.5rem;}
.ui-menu .ui-menu-item-wrapper {padding:0.50rem; box-sizing: inherit;}
/*.ui-menu .ui-menu-item { height:3rem; line-height:3rem; padding:0 !important;}*/
.ui-widget input:hover {background:#9CB7A9; color:inherit;}
/*input[type="text"].focus {border: solid 1px #969696;}*/
.ui-helper-hidden-accessible {display: none;}
.ui-menu .ui-menu-item-wrapper:hover {background:#696ECC;}
/*-------------------------------------------*/
#main {margin:0 auto; display:table; }
.arrow {font-size:1.5rem;}
#heading {text-align:center; white-space:no-wrap; font-size:1.5rem; background:#ADC1C9; color:#2E5363; display:inline; padding:0.75rem 2rem;
font-weight:bold; letter-spacing:2px; height:3.0rem; line-height:3.0rem; margin-top:1.5rem; border-radius:1rem; box-shadow: 3px 3px 6px rgba(0,0,0,0.3); }
/*#heading:hover {background:#BB8443;}*/
#heading a {background:inherit; color:#1F4244; text-decoration:none; text-shadow: 2px 2px 15px #60883E;}
#heading a:hover {background:inherit;}
#heading a img {vertical-align:middle; text-decoration:none; height:2.5rem; line-height:2.5rem; }
#print_image {margin-right: 1.5rem;}
#author {margin:2rem 0; font-size:1.5rem; font-weight:bold; color:#8E2800; text-decoration:none; text-align:right;}
#helper {display:table; margin:0rem auto; margin-top:-2rem; font-size:1.5rem; font-weight:bold; color:#1F4244 !important; text-decoration:none;}
.pusher {background:#FFB03B; color:#1F2936; opacity:0.8; padding:0.5rem; border-radius:0.25rem;}
summary {background:#D2F6E4; margin:0; margin-bottom:0.5rem; width:62rem !important; text-transform: uppercase; color:#465D51; font-size:1.5rem; letter-spacing:1px; font-weight:bold;}
details {background:#D2F6E4; margin:0rem 0; width:62rem !important; color:#17263F; padding:0.5rem;}
details p {text-align:justify; color:#332A23; margin:0.5rem; font-size:1.3rem}
h3 {margin-bottom:0rem; margin-left:1rem}
#docs {background:#D2F6E4; padding:1rem 2rem; margin-top:2rem; border-radius:1rem; font-weight:normal;}
#doc_button {background:#3E606F; color:beige !important; padding:0.6rem 1.5rem; border-radius:0.75rem; font-size:1.5rem; letter-spacing:1px; font-weight:bold; border:none; box-sizing:inherit; text-decoration: none; margin:1rem; float:none; cursor:pointer; display:inline-block; box-shadow: 3px 3px 6px rgba(0,0,0,0.3); text-shadow: 0px 2px 2px rgba(0,0,0,0.4);}
#doc_button:hover {background:#193D2A; color:#fff !important;}
.record {color:#3D1713}
.clearer {clear:left; }
.right {text-align:right}
.left {text-align:left}
.center {text-align:center}
.underline {text-decoration:underline}
.bold {font-weight:bold;}
.boxer {box-shadow: 3px 3px 6px rgba(0,0,0,0.3);}
.middot {margin:0 0.5rem}
pre {font-size:2rem !important}
a:link {text-decoration:none}
.btn {background: #3498db; background-image: linear-gradient(to bottom, #3498db, #2980b9); border-radius: 28px; font-family: Arial; color: #ffffff; font-size: 20px; padding: 10px 20px 10px 20px; text-decoration: none;}
.btn:hover {background: #3cb0fd; background-image: linear-gradient(to bottom, #3cb0fd, #3498db); text-decoration: none;}
/* -------SLICK CAROUSEL------- */
a:link.shark, a:visited.shark {border-bottom:2px dotted darkblue; color: white; font-weight:bold;}
.fixedElement {position: sticky; top: 0; z-index:1000000; background:black;}
.no_show {display:none}
#skyfall {}
#buffer {height:40rem}
input::placeholder {color: #3A3D2E;}
.level {text-transform: uppercase}
#titles tr td {padding:0.25rem 1.5rem}
.universal {margin-bottom: 1rem}
<link href="https://code.jquery.com/ui/1.12.0/themes/smoothness/jquery-ui.css" rel="stylesheet"/>
<script src="https://code.jquery.com/jquery-1.12.3.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment.min.js"></script>
<script src="https://rawgit.com/Mathachew/jquery-autotab/master/js/jquery.autotab.min.js"></script>
<div class="container">
<div id="pairing" class="box" style="width:68rem;">
<div id="skyfall" class="box">
<div class="universal">
<div class="ui-widget glasnost">
<div class="cucumber">4</div>
<input type="text" id="P04" style="display:inline;" maxlength="25"
class="automplete-2 text person ui-autocomplete-input" autocomplete="off"> <span
class="arrow-right">⇾</span>
</div>
<div class="fee_input">
<div class="EF">EF $</div>
<input type="text" onblur="findTotalEF()" name="ef-fee" style="margin-right:1rem; width:1rem;"
class="number fee" maxlength="1" size="1"></div>
<div class="fee_input">
<div class="MEM">MEM $</div>
<input type="text" onblur="findTotalMem()" name="mem-fee" style="width:2rem;" class="number fee"
maxlength="2" size="2"></div>
<div class="fee_input">
<div class="EXP">EXP: <input type="text" id="X04" name="expires" class="number fee expDate"
maxlength="12"
size="12" disabled=""></div>
</div>
</div>
</div>
</div>
</div>
I try to put tooltips on an element, that changes based on four buttons on the same page.
a.tooltip span {
z-index:15;
position: relative;
display:none;
padding:14px 20px;
margin-top:17.5%;
margin-left:18%;
width:300px;
height:80px;
line-height:16px;
border-radius:2px;
box-shadow: 0px 0px 6px 3px #666;
opacity: 0.8;
}
a.tooltip:hover span{
display:inline;
position:absolute;
border:2px solid #666;
color:black;
background:white repeat-x 0 0;
}
This is my tooltip. I works just fine, but I can't hide it, when I want another tooltip to be displayed.
How do I disable this tooltip and show another one, based on the buttons I clicked? Tooltip1 has to be hidden when Tooltip2 is shown and vice versa.
Dr. Google didn't help.
Image for clarification :
You can change tooltip content with
$(".tooltip-selector").tooltip("option", "content", "New Content");
and bind this to your button's click
enter code here
$(document).ready(function(){
$('.btn1').click(function(){
$('.tooltip').addClass('btn1');
$('.tooltip').removeClass('btn2');
});
$('.btn2').click(function(){
$('.tooltip').addClass('btn2');
$('.tooltip').removeClass('btn1');
});
});
a.tooltip span {
z-index:15;
position: relative;
display:none;
padding:14px 20px;
margin-top:17.5%;
margin-left:18%;
width:300px;
height:80px;
line-height:16px;
border-radius:2px;
box-shadow: 0px 0px 6px 3px #666;
opacity: 0.8;}
a.tooltip.btn1:hover span.btn1{
display:inline;
position:absolute;
border:2px solid #666;
color:black;
background:white repeat-x 0 0;}
a.tooltip.btn2:hover span.btn2{
display:inline;
position:absolute;
border:2px solid #666;
color:black;
background:white repeat-x 0 0;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<a href="#" class="tooltip">1
<span class="btn1">1</span>
<span class="btn2">2</span>
</a>
<button class="btn1">1</button>
<button class="btn2">2</button>
The below code achieves a slide up and down action on the selected 'element' but for some reason after slide up, the fa-chevron-down font awesome icon does not display:
function showHideChatBox(element){
var e = jQuery(element).parents(".box1").children(".box1-body");
var t = 0;
if(jQuery(element).hasClass("collapse")) {
jQuery(element).removeClass("collapse").addClass("expand");
t = jQuery(element).children(".fa-chevron-down");
t.removeClass("fa-chevron-down").addClass("fa-chevron-up");
e.slideUp(200);
}
else {
jQuery(element).removeClass("expand").addClass("collapse");
t = jQuery(element).children(".fa-chevron-up");
t.removeClass("fa-chevron-up").addClass("fa-chevron-down");
e.slideDown(200);
}
}
I don't think you are approaching this correctly, you should be referencing the toggle class to properly 'toggle' the font awesome chevron icons. Try using the jQuery toggle class like so:
JS
$(function () {
$('.dropdown_icon').click(function () {
$("#dropdown").slideToggle('fast');
$(this).children(".fa-chevron-down, .fa-chevron-up").toggleClass( 'fa-chevron-down fa-chevron-up');
});
});
Which is a simplified version of the answer to this question: Change class on inactive icon - jquery
HTML
<div id="header">
<ul class="hdr_link_icons">
<li class="dropdown_icon">
Dropdown<i class="fa fa-chevron-down"></i>
</li>
</ul>
<ul class="dropdown_area" id="dropdown">
<li>Your Account <span class="hdr_link_arrow">»</span></li>
<li>Corporate Sales <span class="hdr_link_arrow">»</span></li>
<li>Got a voucher? <span class="hdr_link_arrow">»</span></li>
</ul>
</div>
CSS
body { margin:0; padding:0; }
ul { margin:0; padding:0; }
#header { height:auto; width:100%; overflow:hidden; border-bottom:1px dashed #c1c1c1; padding:5px 0; }
#header .header_logo { height:40px; width:auto; float:left; }
#header .hdr_link_icons { height:40px; width:auto; float:right; list-style:none; background-color: yellow; }
#header .hdr_link_icons li { height:40px; width:70px; float:right; list-style:none; border-right:1px solid #ebebeb; padding:0 0 0 5px; cursor:pointer; position:relative; }
#header .hdr_link_icons li i { position:absolute; right:7px; top:15px; color:#666666; }
#header .hdr_dropdown_area { height:auto; width:100%; background:#F5F2F2; border-top:5px solid #712D55; position:absolute; top:51px; right:0; }
#header .hdr_dropdown_area li { height:auto; float:none; border-bottom:1px dotted #c1c1c1; font-family:tahoma, arial; padding:10px 0; margin:0 0 0 10px !important; text-align:left; text-transform:capitalize; }
#header .hdr_dropdown_area li:last-child { border:none; }
#header .hdr_dropdown_area li a { color:#333333; text-decoration:none; }
#header .dropdown_area { display:none; }
I am having the below code for display custom scrollbar. Here some background is showing, instead of this I need display a 1px thin line image.. How can I do this? I am using the TinyScroller
Css:
#wrapper_1 {width:99%; height:600px; padding:2px}
#scroll_1 {position:relative; width:99%; height:600px; overflow:auto}
#scrollcontent_1 {position:absolute; width:94%; z-index:200}
#scrollbar_1 {float:right; position:relative; border:0; display:none; width:15px; height:600px; z-index:100; background:url(images/scroll-bg.png)}
.scroller_1 {position:relative; top:0; cursor:pointer; border:0; width:15px; background-image:url(images/scroller.png); background-position:50% 50%; background-repeat:no-repeat}
.buttonclick_1 {}
Code:
<div id="wrapper_1">
<div id="scroll_1">
<div id="scrollcontent_1">
<h1>TinyScroller</h1>
<p>test message</p>
</div>
<div id="scrollbar_1">
<div id="scroller_1" class="scroller_1"></div>
</div>
</div>
</div>
<script type="text/javascript">
TINY.scroller.init('scroll_1','scrollcontent_1','scrollbar_1','scroller_1','buttonclick_1');
</script>
Well if you are in Chrome you can use plain ol' CSS:
::-webkit-scrollbar {
width: 15px;
height: 15px;
}
::-webkit-scrollbar-track {
background-clip: padding-box;
border: solid transparent;
border-width: 0 0 0 4px;
}
::-webkit-scrollbar-thumb {
background-color: rgba(0, 0, 0, .2);
background-clip: padding-box;
border: solid transparent;
border-width: 1px 1px 1px 6px;
min-height: 28px;
padding: 100px 0 0;
box-shadow: inset 1px 1px 0 rgba(0, 0, 0, .1),inset 0 -1px 0 rgba(0, 0, 0, .07);
}
::-webkit-scrollbar-corner {
background: transparent;
}
::-webkit-scrollbar-button {
display: none;
}
Demo: http://jsfiddle.net/maniator/ysgBy/
Site to check out: http://css-tricks.com/custom-scrollbars-in-webkit/
According to the doc
http://www.scriptiny.com/2009/09/javascript-scrollable-div/
I think your html is not correct. Try something like :
<div id="wrapper_1">
<div id="scroll_1">
<div id="scrollcontent_1">
<h1>TinyScroller</h1>
<p>test message</p>
</div>
<div id="scrollbar_1">
<div id="scroller"></div>
</div>
</div>
I have a code the function is drop-down. Dropdown can work smoothly.
Now I want when clicked the comment, box will show permanent and will close with outside click.
In this case, when I click the comment, box show and when I drag mouse to input comment, it closed.
So how can I keep the box ?
.dropdown {
position:relative;
}
.dropdown-menu {
position:absolute;
top:100%;
left:0;
z-index:1000;
display:none;
float:left;
min-width:300px;
list-style:none;
background-color:#fff;
border:1px solid rgba(0,0,0,0.2);
border-right-width:2px;
border-bottom-width:2px;
-webkit-border-radius:5px;
-moz-border-radius:5px;
border-radius:5px;
-webkit-box-shadow:0 5px 10px rgba(0,0,0,0.2);
-moz-box-shadow:0 5px 10px rgba(0,0,0,0.2);
box-shadow:0 5px 10px rgba(0,0,0,0.2);
-webkit-background-clip:padding-box;
-moz-background-clip:padding;
background-clip:padding-box;
margin:1px 0 0;
padding:4px 0;
.navbar .dropdown-menu:after {
position:absolute;
top:-6px;
left:10px;
display:inline-block;
border-right:6px solid transparent;
border-bottom:6px solid #fff;
border-left:6px solid transparent;
content:'';
.open .dropdown-menu {
display:block;
}
<span class="navbar">
<span class="dropdown">
<a data-toggle="dropdown" class="comment" href="#">Comment</a>
<ul class="dropdown-menu">
<li><input type="text"></li>
</ul>
</span>
</span>
As per i understand may be that's you want http://jsfiddle.net/H3Vnw/1/ . Write like this
$('.comment').click(function(){
$('.dropdown-menu').css({'display': 'block'});
});
UPDATED
Write like this
var com = $('.comment');
var menu = $('.dropdown-menu');
com.click(function() {
menu.show(); return false;
});
$(document).click(function() {
menu.hide();
});
menu.click(function(e) {
e.stopPropagation();
});
Check this http://jsfiddle.net/H3Vnw/4/