So I have a drop down menu:
JSFiddle Link:
http://jsfiddle.net/cGt4h/3/
HTML:
<div id="container">
<ul>
<li>
<a class='sign-in' href='#'>Login</a>
<div id="loginForm" class='log-content'>
<div>
User name:
<input type='text' />
</div>
<div>
Password:
<input type='text' />
</div>
<div>
<input type='button' value='Login' />
</div>
</div>
</li>
</ul>
</div>
SCRIPT:
$('.sign-in').click(function(e) {
e.preventDefault();
$('#loginForm').toggle();
});
$("#loginForm").mouseup(function() {
return false;
});
$(document).mouseup(function(e) {
if ($(e.target).parent(".sign-in").length == 0) {
$('#loginForm').hide();
}
});
CSS:
#container {margin: 0 auto;width:400px; position:relative; }
#loginForm {
width:200px;
background-color:gray;
color:white;
padding:10px;
display:none;
}
li {list-style: none;}
.sign-in {
background-color:gray;
color:white;
text-decoration:none;
}
.sign-in:hover {background-color:red;}
.open-menu {
display:block !important;
left:0;
}
It works fine but when I click on the .sign-in selector the dropdown doesn't close after it has been opened.
That's because your document.mousedown function is causing the form to hide, then your .sign-in click handler is toggling the form, causing it to show. This line:
if ($(e.target).parent(".sign-in").length == 0) {
evals to true, causing the form to hide, add an AND condition:
if ($(e.target).parent(".sign-in").length == 0 && $(e.target).attr("class") != "sign-in") {
Demo: http://jsfiddle.net/cGt4h/4/
Try this:
$('.sign-in').click(function(e) {
e.stopPropagation();
e.preventDefault();
$('#loginForm').toggle();
});
$("#loginForm").mouseup(function() {
return false;
});
$(document).mouseup(function(e) {
if ($(e.target).parent(".sign-in").length == 0 && $(e.target).attr("class") != "sign-in") {
$('#loginForm').hide();
}
});
Related
$('button').click(function(){
$(this).parent().before('<div class="comment_box_all"><div class="comment_user"></div></div>')
var content = document.createElement("span");
content.innerHTML=$(".textarea").val().replace(/(\n|\r|\r\n)/g, '<br>');
$('.comment_user').append(content);
});
$(document).on("click", "button", function() {
$(this).closest('.comment_panel').find('.textarea').val('')
});
$('button').attr('disabled',true);
$('.textarea').keyup(function(){
if($(this).val().length !=0)
$('button').attr('disabled', false);
else
$('button').attr('disabled',true);
});
.comment_panel
{
width:450px;
height:100px;
}
textarea
{
width:300px;
height:80px;
}
button
{
top:10px;
left:330px;
}
.comment_box_all
{
width:450px;
height:100px;
background-color:#999;
border:1px solid #000;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="comment_panel">
<textarea class="textarea" placeholder="Add text..."></textarea>
<button>Add comment</button>
</div>
Could you help me how I can clear textarea after click button not using .val(''), because look, I would like disabled button when textarea is empty but this happen only in first add text, if I add text next time in textarea is '' and button is active
You can just add the disabled class every time the add button is clicked as you were doing for the first time .
$(this).attr('disabled',true);
Add this line inside the button onclick function.
$('button').click(function(){
$(this).parent().before('<div class="comment_box_all"><div class="comment_user"></div></div>')
var content = document.createElement("span");
content.innerHTML=$(".textarea").val().replace(/(\n|\r|\r\n)/g, '<br>');
$('.comment_user').append(content);
});
$(document).on("click", "button", function() {
$(this).closest('.comment_panel').find('.textarea').val('')
$(this).attr('disabled',true);
});
$('button').attr('disabled',true);
$('.textarea').keyup(function(){
if($(this).val().trim().length !=0)
$('button').attr('disabled', false);
else
$('button').attr('disabled',true);
});
.comment_panel
{
width:450px;
height:100px;
}
textarea
{
width:300px;
height:80px;
}
button
{
top:10px;
left:330px;
}
.comment_box_all
{
width:450px;
height:100px;
background-color:#999;
border:1px solid #000;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="comment_panel">
<textarea class="textarea" placeholder="Add text..."></textarea>
<button>Add comment</button>
</div>
I'm trying to figure out how I can use bind to move the selected li's from box1 to box2 and from box2 back to box1. Stuck on this and need some help. Also when a li is selected and moved over to the next box by clicking Move Right, they stack on every click. How can I fix that?
code:
$(document).ready(function(){
$(".box1 ul li").click(function(){
if($(this).hasClass("active-li")==true)
{
$(this).removeClass("active-li");
}
else
{
$(this).addClass("active-li");
}
});
$(".box1 ul li").click(function(){
var x=$(this).data("drink");
$("#btt1").click(function(){
$(".box2 ul").append(x);
$(x).bind("click", bindLi);
});
});
$(x).bind("click", bindLi);
});
function bindLi(){
alert("hello");
}
CSS:
.box1{border:1px solid black; width:200px; height:200px; float:left; margin-top:100px; margin-left:50px;}
.box2{border:1px solid black; width:200px; height:200px; float:left; margin-top:100px; margin-left:100px;}
.button-container{width:80px; height:30px; float:left; margin-top:200px; margin-left:100px;}
.active-li{background-color:yellow;}
ul li:hover{cursor:pointer;}
HTML:
<div class="box1" id="box1">
<ul>
<li data-drink="beer">
Beer
</li>
<li data-drink="water">
Water
</li>
<li data-drink="soda">
Soda
</li>
<li data-drink="juice">
Juice
</li>
</ul>
</div>
<div class="button-container">
<input type="button" id="btt1" name="btt1" value="Move Right" />
<input type="button" id="btt2" name="btt2" value="Move Left" />
</div>
<div class="box2" id="box2">
<ul></ul>
</div>
JSFiddle:
https://jsfiddle.net/fgo455zt/
Please take a look at below code:
https://jsfiddle.net/fgo455zt/5/
We can simply the code as follows:
$(document).ready(function() {
$(".box1 ul li, .box2 ul li").click(function() {
$(this).toggleClass("active-li"); //highlight the clicked li
});
$("#btt1, #btt2").click(function() {
var sourceUL = null;
var targetUL = null;
//depending upon which button clicked we are moving selected li to and from source to target UL
if ($(this).attr("id") == "btt1") {
sourceUL = $(".box1 ul");
targetUL = $(".box2 ul");
} else {
sourceUL = $(".box2 ul");
targetUL = $(".box1 ul");
}
$(sourceUL).find("li.active-li").each(function() {
$(this).removeClass("active-li"); //removing the active class before moving the li
$(targetUL).append($(this));
});
});
});
I am modifying some jQuery that shows a div when nav links are hovered.
html:
About
<div class="drop" id="drop-about">
<div class="drop-holder">
<div class="grey-block">
<strong class="title">Sub Nav</strong>
<ul>
more links ...
</ul>
</div>
</div>
</div>
jQuery to show dropdowns:
function initSlideDrops() {
var activeClass = 'drop-active';
var animSpeed = 300;
jQuery('#nav ul li').each(function() {
var item = jQuery(this);
var link = item.find('>a[data-drop^="#"]');
//if (!link.length) return;
// Modifications to add hover events to nav menu
if (!link.length) {
jQuery(this).on('mouseover', function (e) {
jQuery("li").removeClass("drop-active");
jQuery('.drop').each(function () {
jQuery(this).stop().animate({
height: 0
}, animSpeed);
});
});
return;
};
var href = link.data('drop');
var drop = jQuery(href).css({
height: 0
});
if(!drop.length) return;
var dropHolder = drop.find('>.drop-holder');
var close = drop.find('.btn-close');
function showDrop(elem) {
elem.stop().animate({
height: dropHolder.innerHeight()
}, animSpeed, function() {
elem.css({
height: ''
});
});
}
function hideDrop(elem) {
elem.stop().animate({
height: 0
}, animSpeed);
}
link.on('click', function(e) {
e.preventDefault();
item.add(drop).toggleClass(activeClass).siblings().removeClass(activeClass);
if(item.hasClass(activeClass)) {
showDrop(drop);
hideDrop(drop.siblings());
} else {
hideDrop(drop);
location.href = link.attr('href');
}
});
close.on('click', function(e) {
e.preventDefault();
item.add(drop).removeClass(activeClass);
hideDrop(drop);
});
// Modifications to add hover events to nav menu
link.on('mouseover', function (e) {
e.preventDefault();
item.add(drop).toggleClass(activeClass).siblings().removeClass(activeClass);
if (item.hasClass(activeClass)) {
showDrop(drop);
hideDrop(drop.siblings());
} else {
hideDrop(drop);
//location.href = link.attr('href');
}
});
drop.on('mouseleave', function (e) {
e.preventDefault();
item.add(drop).removeClass(activeClass);
hideDrop(drop);
});
});
}
This is all working, however the dropdown navigation causes the content to bump down, rather than sliding on top of the site body. I would like the main content to remain where it is, with the navigation showing on top when hovered. I have tried adding z-index during the animate event but could not get it to work. What is the proper way to accomplish this?
Any help is appreciated.
Edit:
SASS:
.drop{
#extend %clearfix;
overflow:hidden;
text-transform:uppercase;
letter-spacing: 1.65px;
.drop-holder{
overflow:hidden;
}
}
Try Adding position:absolute; to .drop-holder. See snippet below.
You will also want to remove overflow:hidden; from .drop.
.drop{
#extend %clearfix;
/* overflow:hidden; - Remove this */
text-transform:uppercase;
letter-spacing: 1.65px;
position:relative; /* add this so .drop is positioned relative to .drop */
}
.drop-holder {
position:absolute;
border:solid 1px teal; /*for demonstration*/
}
About
<div class="drop" id="drop-about">
<div class="drop-holder">
<div class="grey-block">
<strong class="title">Sub Nav</strong>
<ul>
more links ...
</ul>
</div>
</div>
</div>
<div>content <br />content <br />content <br />content <br />content <br />content <br />content <br />
</div>
Positioning property must be specified when using z-index.
Example. Apply
.drop{
#extend %clearfix;
overflow:hidden;
text-transform:uppercase;
letter-spacing: 1.65px;
position:relative; /*Positioning applied here*/
z-index:1;
}
This should fix your problem.
I am trying an animation on the two divs on button click . Here is the demo i have created js fiddle. what i want is
when the user will click on the button the right div will slide to right (it will hide). and the width of left div will become 100%.
on second time when user will click the right div will visible from right to left slide and the width of left div will 50 %
I am trying this code .
my html is
<div class="col-md-12">
<div id="tags-left" class="col-md-6">
div left
</div>
</div>
<div id="tag-div" class="col-md-6">
div right
</div>
</div>
<div class="col-md-12">
<div class="btn-main">
<input id="show-tag" type="button" class="save-btn" value="Show Tag">
<input id="preview" type="button" class="save-btn" value="Preview">
</div>
my js is
$("#show-tag").click(function (e)
{
$( "#tag-div" ).toggle( "slow", function(element) {
//e.preventDefault();
if ($('#tag-div').is(":visible") ) {
$('#tags-left').css('width','50%');
} else {
$('#tags-left').css('width','100%');
}
});
});
$("#show-tag").click(function (e)
{
$( "#tag-div" ).toggle( "slow", function(element) {
//e.preventDefault();
if ($('#tag-div').is(":visible") ) {
$('#tags-left').css('width','50%');
} else {
$('#tags-left').css('width','100%');
}
});
});
.col-md-6 {
width:45%;
float:left;
background:red;
height:200px;
margin:3px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="col-md-12">
<div id="tags-left" class="col-md-6">
div left
</div>
</div>
<div id="tag-div" class="col-md-6">
div right
</div>
</div>
<div class="col-md-12">
<div class="btn-main">
<input id="show-tag" type="button" class="save-btn" value="Show Tag">
<input id="preview" type="button" class="save-btn" value="Preview">
</div>
This one is simple solution without doing much coding see the fiddle: https://jsfiddle.net/uzar3j4q/7/
JS
var action = 1;
$("#show-tag").click(function () {
if ( action == 1 ) {
$("#tag-div" ).animate({'width':'0%',});
$('#tags-left').animate({'width':'90%'});
action = 2;
} else {
$("#tag-div" ).animate({'width':'45%',});
$('#tags-left').animate({'width':'45%'});
action = 1;
}
});
CSS
.col-md-6 {
width:45%;
float:left;
background:red;
height:200px;
margin:3px;
overflow:hidden; /* This property is added just to hide overflowing content */
}
first of all .. put left and right div in same div and in css
CSS
.col-md-12 {
white-space: nowrap;
overflow: hidden;
height:200px;
}
and you can use animate() method in js
JS
$("#show-tag").click(function (e)
{
$( "#tag-div" ).toggle( "slow", function(element) {
//$('#tags-left').css('width','0%');
//e.preventDefault();
if ($('#tag-div').is(":visible") ) {
$('#tags-left').animate({'width':'45%'},500);
} else {
$('#tags-left').animate({'width':'100%'},500);
}
});
});
DEMO HERE
you can just play around that to get the exact action you need
Optimized #Nilesh Mahajan's answer.
Found a problem with it when clicking on the button continuously.
// Caching
var $tagsLeft = $('#tags-left'),
$tagDiv = $('#tag-div');
var tagLeftWidth,
tagDivWidth;
$("#show-tag").on('click', function () {
var $this = $(this);
$this.prop('disabled', true).addClass('disabled'); // Disable the button
tagLeftWidth = $tagDiv.width() ? '90%' : '45%';
tagDivWidth = $tagDiv.width() ? '0%' : '45%';
$tagDiv.animate({
'width': tagDivWidth
}, function() {
$this.prop('disabled', false).removeClass('disabled'); // Enabling button
});
$tagsLeft.animate({
'width': tagLeftWidth
});
});
Demo: https://jsfiddle.net/tusharj/uzar3j4q/11/
Try this html:
<div id="tag-left" class="col-md-6">div left</div>
<div id="tag-right" class="col-md-6">div right</div>
and this javascript:
$("#show-tag").click(function (e) {
if($("#tag-right").width() == 0) {
$("#tag-left").animate({
width: '0'
});
$("#tag-right").animate({
width: '90%'
});
} else {
$("#tag-left").animate({
width: '90%'
});
$("#tag-right").animate({
width: '0'
});
}
});
jsfiddle
I have a div tag which includes input controls. This div is opened when the user clicks on a menu item. I want to hide this tag when the click is outside that div area.
Currently I am able to hide the div when clicking outside it, but my div hides when I click any of the input controls that are in the div. How can I solve this?
My code is:
$(document).click(function (e) {
var elem = $(e.target).attr('id');
console.log(e.target);
if (elem !== 'btnLogin') {
// if (elem != 'TxtUserName' && elem != 'TxtPassword')
HideLoginDetails();
}
if (elem !== 'hpUseFul') {
// if(elem !== 'y')
}
});
Demo: http://jsfiddle.net/3fbpA/
var aboveDiv = false;
$('#yourDiv').click(function () {
aboveDiv = true;
});
$(document).click(function () {
if (!aboveDiv) $('#yourDiv').hide();
aboveDiv = false;
});
jQuery(document).ready(function()
{
$('the div you want').hover(function(){
mouse_inside=true;
}, function(){
mouse_inside=false;
});
$("body").mouseup(function(){
if(! mouse_inside) $('the div you want').hide();
});
});
Also check "Use jQuery to hide a DIV when the user clicks outside of it".
I have done complete bins for above issue. you can check demo link here...
Demo http://codebins.com/bin/4ldqp71
HTML
<div id="loginDialog">
<div class="field">
<label>
User Name:
</label>
<span class="input">
<input type="text" value="" id="txtuser" size="15"/>
</span>
</div>
<div class="field">
<label>
Password:
</label>
<span class="input">
<input type="password" value="" id="txtpassword" size="15"/>
</span>
</div>
<div class="field">
<input type="button" id="btn_ok" value="Login" />
</div>
</div>
<div>
<a href="javascript:void(0);" id="btnLogin">
Login
</a>
<a href="javascript:void(0);" id="btnMenu1">
Menu1
</a>
<a href="javascript:void(0);" id="btnMenu2">
Menu2
</a>
</div>
JQuery
$(function() {
$("#btnLogin").click(function() {
$("#loginDialog").show(500);
});
$(document).click(function(e) {
e.preventDefault();
var elem = $(e.target).attr('id');
if ($(e.target).parents("#loginDialog").length) {
$("#loginDialog").show();
} else {
if ($(e.target).attr('id') !== "btnLogin") {
$("#loginDialog").hide(300);
}
}
});
});
CSS
#loginDialog{
border:1px solid #333;
padding:4px;
background:#2A2A2A;
width:250px;
color:#dfdfdf;
display:none;
}
#loginDialog input{
border:1px solid #efefef;
}
#loginDialog input[type=button]{
background:#ababab;
}
#loginDialog input[type=button]:hover{
background:#cfcfcf;
}
#loginDialog .field{
text-align:center;
margin-bottom:5px;
}
#loginDialog label{
display:inline-block;
width:100px;
}
a{
display:inline-block;
margin-left:8px;
}
Demo http://codebins.com/bin/4ldqp71