Following is my code in question
(function($) {
'use strict';
var button = $('#open_button');
var box = $('#dropdown');
function init() {
eventsInit();
}
function eventsInit() {
box.hide();
button.on('click', open);
}
function open(event) {
if (event.target !== button[0]) {
box.hide();
} else {
box.show();
}
}
init();
})(jQuery);
body,
html {
padding: 0;
margin: 0;
}
#container {
height: 100px;
width: 800px;
margin: 0 auto;
}
h1 {
color: white;
}
#dropdown {
height: 600px;
width: 800px;
background-color: black;
margin: 0 auto;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container">
<form action="" id="open_button">
<input type="text" placeholder="Enter the text" />
</form>
</div>
<div id="dropdown"></div>
I need to dropdown when I click on the input form input element and close it when I click outside.
My code I believe it says, if the click target is not the button, close the dropdown, else show.
Could someone explain, why doesnt it work ?
(event.target !== button[0]) is always true.
event.target is the <input> field.
button[0] is the <form> element.
You could move the #open_button id to the input field, that would cause the box to appear when the user clicks the input field -- but then the box would never disappear (because your if condition would never return true.)
What you really want are focus and blur handlers on the input field, to show and hide the box respectively:
$('#open_button input').on('focus', function() {
$('#dropdown').show()
}).on('blur', function() {
$('#dropdown').hide()
});
// added to answer per comment below:
$('#dropdown').on('mousedown',function(e) {
e.preventDefault() // prevent input field from losing focus when user clicks inside the box
});
$('#dropdown').hide();
#dropdown {
height: 600px;
width: 800px;
background-color: black;
margin: 0 auto;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container">
<form action="" id="open_button">
<input type="text" placeholder="Enter the text" />
</form>
</div>
<div id="dropdown"></div>
Related
I'm using jQuery to retrieve and set my data attribute. I've tried to set data value with attr() and data() as well:
$("#select2").attr("data-myval", "true");
$("#select2").data("myval", "true");
Neither is working, and it returns with a function if I console.log() it. What is the problem?
$(document).ready(function() {
var select1 = $("#select1").data("myval");
var select2 = $("#select2").data("myval");
console.log(select1);
console.log(select2);
$("#select1").click(function() {
$(this).children("p").css("display", "block");
$("#select2").data("myval", "true");
});
if (select2 == "true") {
$("#select2").click(function() {
$(this).children("p").css("display", "block");
});
} else {
}
});
#select1,
#select2 {
width: 100px;
height: 100px;
background-color: lightblue;
color: white;
margin: 20px;
display: inline-block;
}
div.ex p {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="ex" id="select1" data-myval="true">
<p>Text1</p>
</div>
<div class="ex" id="select2" data-myval="false">
<p>Text2</p>
</div>
There is no events order here, there is only one event for the first box. The event for the second box will never be attached because the if (select2 == "true") is false when $(document).ready and it is Boolean not string anyway. You can move it to inside the event and change it to if ($(this).data("myval")):
$(document).ready(function() {
$("#select1").click(function() {
$(this).children("p").css("display", "block");
$("#select2").data("myval", "true");
});
$("#select2").click(function() {
if ($(this).data("myval")) {
$(this).children("p").css("display", "block");
} else {
}
});
});
#select1,
#select2 {
width: 100px;
height: 100px;
background-color: lightblue;
color: white;
margin: 20px;
display: inline-block;
}
div.ex p {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="ex" id="select1" data-myval="true">
<p>Text1</p>
</div>
<div class="ex" id="select2" data-myval="false">
<p>Text2</p>
</div>
Alternatively, you can add the second even inside the first event, but to avoid adding it several times if you click on the first box several times, you must remove it with off("click") first then add it.
I have a form/div displayed on top of the map. I want to make it so that it is hidden when there is a click outside the form/div area but not when the click is inside the form/div.
I can't get to detect when the click is done inside the div. Instead all clicks inside the form/div are detected as done on the map, as if the div doesn't exist.
<div id="map" class="map"><div id="popup">
//input data of form
</div> </div>
<script>
map.on('click', function(evt) {
console.log('Clicked #map');
//one method I tried from another stack overflow answer
(evt.target !== this) ? $("#popup").show() : $popup.hide();
var feature = map.forEachFeatureAtPixel(evt.pixel,
function(feature) {
return feature;
});
if (feature) {
loadInfo(feature.get('id'));
$("#popup").show();
}
});
$("popup").on('click', function(e) {
e.stopPropagation();
console.log('Clicked #popup');
});
</script>
Output
Clicked #map
Clicked #popup
As you can see in the code I tried few different methods on detecting clicks on the popup but none of them worked. All of them are as if, the popup is not even there.
I am using openlayers3 if that matters.
You can use Event.stopPropagation() to prevent further propagation of the current click event in the capturing and bubbling phases:
var $map = $('#map'),
$popup = $('#popup');
$map.on('click', function(e) {
console.log('Clicked #map');
(e.target !== this) ? $popup.show() : $popup.hide();
});
$popup.on('click', function(e) {
e.stopPropagation();
console.log('Clicked #popup');
});
#map {
background-color: grey;
width: 80%;
height: 120px;
margin: auto;
padding: 40px;
}
#popup {
background-color: #000000;
color: #ffffff;
width: 60%;
margin: auto;
padding: 20px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="map" class="map">
<div id="popup">
// input data of form
</div>
</div>
I have 2 divs that are initially hidden
<div id="whistle" style="display:none;">
<div id="lean" style="display:none;">
I also have a div that is visible
<div id="me" style="display:block">
I have jQuery code that allows only the #whistle or #lean divs to be open at once, their buttons will hide the other.
I currently have code that also hides the #me div, but I would now like the #me div to open back up when both #whistle and #lean are closed.
If you want to see the site, the link is maxdev.tk
The jQuery code is
$(document).ready(function(){
$("#calc").click(function(){
$("#whistle").hide(600);
$("#lean").toggle(900);
});
});
$(document).ready(function(){
$("#whi").click(function(){
$("#lean").hide(600);
$("#whistle").toggle(900);
});
});
This is one way to solve it. Find it also as a pen at the end of this post.
$(document).ready(function() {
function callback() {
if( $('#whistle').hasClass('hidden') && $('#lean').hasClass('hidden') ) {
$('#me').removeClass('hidden');
} else {
$('#me').addClass('hidden');
}
}
$('button[data-for=whistle]').on('click', function() {
$('#whistle').toggleClass('hidden');
$('#lean').addClass('hidden');
callback();
});
$('button[data-for=lean]').on('click', function() {
$('#lean').toggleClass('hidden');
$('#whistle').addClass('hidden');
callback();
});
})
.hidden {
opacity: 0;
height: 0;
overflow: hidden;
padding: 0;
}
div {
background-color: #ccc;
border-radius: 25px;
margin-top: 20px;
padding: 50px;
text-align: center;
transition-duration: 0.4s;
width: 50%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<button data-for="whistle">Whistle</button>
<button data-for="lean">Lean</button>
<div id="whistle" class="hidden">Whistle!</div>
<div id="lean" class="hidden">Lean!</div>
<div id="me">Me!</div>
http://codepen.io/anon/pen/yNJrwe
Add this code to the end of whatever buttons' click function.
if( !$('#whistle').is(':visible') && !$('#lean').is(':visible') ) {
$('#me').css("display","block"); // or use .show();
} else {
$('#me').css("display","none"); // or use .hide();
}
I'm developing a webpage of videos, like YouTube or Vimeo...
I'm working now in a search input... I was searching in Google about guides and I found this one: http://tympanus.net/codrops/2013/06/26/expanding-search-bar-deconstructed/
I have almost done it, but the problem is, the guy who posted it, did it with Javascript, not with JQuery (easier...)
I have been trying to modify the code, the search input appears when you click on the button, but it doesn't dissapear...
Could you help me in this part?
Javascript:
;( function( window ) {
function UISearch( el, options ) {
this.el = el;
this.inputEl = el.querySelector( 'form > input.sb-search-input' );
this._initEvents();
}
UISearch.prototype = {
_initEvents : function() {
var self = this,
initSearchFn = function( ev ) {
if( !classie.has( self.el, 'sb-search-open' ) ) { // open it
ev.preventDefault();
self.open();
}
else if( classie.has( self.el, 'sb-search-open' ) && /^\s*$/.test( self.inputEl.value ) ) { // close it
self.close();
}
}
this.el.addEventListener( 'click', initSearchFn );
this.inputEl.addEventListener( 'click', function( ev ) { ev.stopPropagation(); });
},
open : function() {
classie.add( this.el, 'sb-search-open' );
},
close : function() {
classie.remove( this.el, 'sb-search-open' );
}
}
// add to global namespace
window.UISearch = UISearch;
} )( window );
My JQuery code:
$(document).ready(function () {
$("#search_container").click(function(){ if(!$("#search_container").hasClass("open")){ $("#search_container").addClass("open"); } });
$(".search_input").click(function(){
if($("#search_container").hasClass("open")){
if($(".search_input").val() == ""){
$("#search_container").removeClass("open");
} else {
// Search
}
}
});
});
And my HTML code:
<div id="search_container">
<form>
<input type="search" class="search_input" placeholder="Búsqueda" id="search" value="" />
<input type="submit" class="search_submit" value="" />
<span class="btn icon_search"></span>
</form>
</div>
You can achieve it by combining a little css, and the .animate() function of jQuery.
Here is the JS part, see the fiddle for live demo
$(document).ready(function () {
$("#btnsearch").on('click',function(e){
e.preventDefault();
e.stopPropagation();
/* Check if field is already displayed, if not, displays it, else, submit */
if($('#search_container').hasClass('closed')){
$('#search_container').toggleClass('closed');
$('#hint').html('');
$('#search').animate({
right: '40px',
}, 200, function(){
/*
* Bind event to hide field when clicking OUT
* use .one() instead of .on() to avoid stacking binding click events on document
*/
$(document).one('click', function(){
$('#search_container').toggleClass('closed');
$('#search').animate({
right: '-200px',
}, 200);
$('#hint').html('');
});
});
}
else {
/* Add here your field entry check */
/* Submit your form with $('#myform').submit(); */
$('#hint').html("Your form has been submitted with $('#myform').submit();");
}
});
$('#search').on('click',function(e){
/* Needed to avoid closing field when clicking on it */
e.preventDefault();
e.stopPropagation();
});
});
LIVE DEMO HERE
Sliding effect can be achieved with CSS (or jQuery .animate({width: '100%'})). Also, you are removing class, but never adding it back.
$(document).ready(function() {
$('.input-wrapper')
.click(function() {
$(this).toggleClass('active');
$('input', this).focus();
})
.focusout(function() {
$(this).removeClass('active');
});
});
.wrapper {
width: 200px;
background-color: #ddd;
padding: 10px 25px;
}
.input-wrapper {
width: 25px;
height: 25px;
overflow: hidden;
position: relative;
float: right;
-webkit-transition: width .5s;
/* For Safari 3.1 to 6.0 */
transition: width .5s;
}
.input-wrapper input {
width: 100%;
border: none;
}
.input-wrapper.active {
width: 100%;
}
.input-wrapper:after {
content: '?';
width: 25px;
height: 25px;
text-align: center;
font-weight: bold;
background-color: red;
color: black;
line-height: 20px;
font-size: 20px;
display: block;
position: absolute;
right: 0;
top: 0;
}
.clear {
clear: both;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">
<div class="input-wrapper">
<input type="text" placeholder="Enter your search term..." />
</div>
<div class="clear"></div>
<div class="input-wrapper">
<input type="text" placeholder="Enter your search term..." />
</div>
<div class="clear"></div>
<div class="input-wrapper">
<input type="text" placeholder="Enter your search term..." />
</div>
<div class="clear"></div>
<div class="input-wrapper">
<input type="text" placeholder="Enter your search term..." />
</div>
<div class="clear"></div>
</div>
I am building a simple Grocery List App and I am having issues trying to remove a place holder div element.
HTML
<!DOCTYPE html>
<html>
<head>
<title>Grocery List App</title>
<link type="text/css" href="style/form.css" rel="stylesheet"/>
</head>
<body>
<div id="container">
<div id="left_side">
<div id="to_buy">To Buy:</div>
</div>
<div id="right_side">
<div id="in_cart">In Cart:</div>
</div>
</div>
<input type="text" id="item_body" placeholder="Type Item to Add">
<script src="scripts/jquery-1.11.2.min.js"></script>
<script src="scripts/grocery.js"></script>
<script src="scripts/jquery-ui/jquery-ui.js"></script>
</body>
</html>
JS
$(function () {
var rmv = false;
$('#item_body').keydown(function(e) {
if (e.keyCode == 13) {
var add = $('#item_body').val();
$("#to_buy").append('<div class="draggable_item">' + add + '</div>');
$("#in_cart").append('<div class="holder"></div>');
}
$(".draggable_item").draggable( {
axis: "x"
});
$(".draggable_item").dblclick(function() {
this.remove();
$('#in_cart > div:first').remove();
});
});
});
CSS
#to_buy {
float:left;
width: 50%;
height: 100%;
color: #00E5EE;
}
#in_cart {
float: left;
width: 49%;
height: 100%;
color: #00E5EE;
}
#container {
width:100%;
height: 100%;
}
#left_side {
height: 100%;
width: 50%;
float:left;
background: #5D5851;
}
#right_side {
height: 100%;
width: 50%;
float: left;
background: #6D5D4D;
}
#item_body {
float:left;
clear:both;
color: #326B62;
}
body {
background: #B1ADA5;
}
.draggable_item {
color: #FFF;
}
.holder {
height: 20px;
}
So the screen is split vertically between "to_buy" and "in_cart." When I add an item to "to_buy" I also add a "dummy" div to "in_cart" so that the two sides remain even. However, when I double click to remove an item, when
$('#in_cart > div:first').remove();
gets called, first one div is removed, then on the next double click two, then four etc etc. Apparently, it is getting called multiple times or something else wonky is going wrong.
This is because you bind event handlers for double click event on every Enter key press so they multiply on every item addition. Just move dblclick registration outside:
var rmv = false;
$('#item_body').keydown(function (e) {
if (e.keyCode == 13) {
var add = $('#item_body').val();
$("#to_buy").append('<div class="draggable_item">' + add + '</div>');
$("#in_cart").append('<div class="holder"></div>');
}
$(".draggable_item").draggable({
axis: "x"
});
});
$("#left_side").on("dblclick", ".draggable_item", function () {
this.remove();
$('#in_cart > div:first').remove();
});
Also note, that it makes sense to delegate double click event to the parent container #left_side so you don't have to worry about presence of elements at the time of event registration.
Here is a demo: http://jsfiddle.net/hx11gkcj/