Develop Reference

Why does the following Jquery event.target does not work properly

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>

Javascript change color of button by hovering OUTSIDE it

I can hover on the button using jquery. Can someone please point me to the right direction on how to hover on the
function setColor(btn, color) {
var property = document.getElementById(btn);
if (window.getComputedStyle(property).BackgroundColor == 'rgb(0, 0, 0)') {
property.style.backgroundColor = color;
} else {
property.style.backgroundColor = "#000";
}
}
function setColor(btn, color) {
var property = document.getElementById(btn);
if (window.getComputedStyle(property).backgroundColor == 'rgb(244, 113, 33)') {
property.style.backgroundColor = color;
} else {
property.style.backgroundColor = "#f47121";
}
}
document.addEventListener('onclick', function(e) {
if (!(e.id === 'btnHousing')) {
document.getElementById('btnHousing').property.style.backgroundColor = '#FFF'
}
});
$(document).ready(function() {
$("button").hover(function() {
$(this).css("backgroundColor", "#fff");
}, function() {
$(this).css("backgroundColor", "#9d9d9d");
});
});
div {
height: 100px;
width: 300px;
background-color: black;
}
button {
height: 50px;
width: 150px;
position: relative;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="dropdown" id="notification-dropdown" onclick="setColor('btnBell','#9d9d9d');">
<button type="button" id="btnBell">
</button>
</div>
area also and make the button white on hover?
Please check!
https://jsfiddle.net/obw6ec9v/

There is no need of javascript just css will do.
Also if you want to retain the color, on click you can use a additional class like
jQuery(function($) {
$('#notification-dropdown').click(function() {
$(this).find('button').addClass('clicked');
})
})
div {
height: 100px;
width: 300px;
background-color: black;
}
button {
height: 50px;
width: 150px;
position: relative;
background-color: #9d9d9d;
}
#notification-dropdown:hover button {
background-color: #fff;
}
#notification-dropdown button.clicked {
background-color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="dropdown" id="notification-dropdown" onclick="setColor('btnBell','#9d9d9d');">
<button type="button" id="btnBell"></button>
</div>
With javascript
$(document).ready(function() {
$("#notification-dropdown").hover(function(e) {
var $btn = $('button', this);
if (!$btn.hasClass('clicked')) {
$btn.css("backgroundColor", e.type == 'mouseenter' ? "#fff" : '#9d9d9d');
}
}).click(function() {
$('button', this).addClass('clicked').css("backgroundColor", 'red');
})
});
div {
height: 100px;
width: 300px;
background-color: black;
}
button {
height: 50px;
width: 150px;
position: relative;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="dropdown" id="notification-dropdown">
<button type="button" id="btnBell"></button>
</div>

You can also replace onclick with onmouseover
<div class="dropdown" id="notification-dropdown" onmouseover="setColor('btnBell','#9d9d9d');">
See JSFiddle

You can just change the target you're listen for hover to that div, then use $("#btnBell") instead of $(this) to change the button's color.
function setColor(btn,color){
var property=document.getElementById(btn);
if (window.getComputedStyle(property).backgroundColor == 'rgb(244, 113, 33)') {
property.style.backgroundColor=color;
}
else {
property.style.backgroundColor = "#f47121";
}
}
document.addEventListener('onclick', function(e){
if(!(e.id === 'btnHousing')){
document.getElementById('btnHousing').property.style.backgroundColor = '#FFF'
}
});
$(document).ready(function(){
$("div").hover(function(){
$("#btnBell").css("backgroundColor", "#fff");
}, function(){
$("#btnBell").css("backgroundColor", "#9d9d9d");
});
});
div{
height:100px;
width:300px;
background-color:black;
}
button{
height:50px;
width:150px;
position:relative;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div class="dropdown" id="notification-dropdown" onclick="setColor('btnBell','#9d9d9d');">
<button type="button" id="btnBell" >
</button>
</div>

Expanding Search Bar

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>

Second toggel should be close when i click back to the first toggle

I have tow toggles. I want appear only one toggle at the time. When i click to second toggle then first toggle should be close.
Javascript
$('#bar').click(function () {
$('#foo').slideToggle('slow');
});
$('#bar1').click(function () {
$('#foo1').slideToggle('slow');
});
HTML
<button id="bar">bar</button>
<div id="foo"></div>
<button id="bar1">bar1</button>
<div id="foo1"></div>
CSS
#foo {
width: 100px;
height: 100px;
background-color: green;
display:none;
}
#foo1 {
width: 100px;
height: 100px;
background-color: green;
display:none;
}
jsfiddle

You can use classes instead of id's
$('.bar').click(function () {
$('.foo').hide(); // hide previous elements
$(this).next().show('slow'); // show next element in the DOM (it will be <div> with class 'foo')
});
Example

I did what you want with classes,
the accordion style,
$('#bar, #bar1').click(function () {
var id = '#'+$(this).attr('data-for');
if ($(id).hasClass('open')) {
$(id).toggleClass('open');
}
else if ($('#foo').hasClass('open') || $('#foo1').hasClass('open')) {
$('#foo').toggleClass('open');
$('#foo1').toggleClass('open');
}
else {
$(id).toggleClass('open');
}
});
#foo {
width: 100px;
height: 0;
background-color: green;
display:block;
transition: all .5s;
}
#foo1 {
width: 100px;
height: 0;
background-color: green;
display:block;
transition: all .5s;
}
#foo.open, #foo1.open {
height: 100px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="bar" data-for="foo">bar</button>
<div id="foo"></div>
<button id="bar1" data-for="foo1">bar1</button>
<div id="foo1"></div>

hi i have two ways which you can achive it
in this case the first div is sliding up when second div is opening
$('#bar').click(function () {
$("div").slideUp("slow");
$('#foo').slideToggle('slow');
});
$('#bar1').click(function () {
$("div").slideUp("slow");
$('#foo1').slideToggle('slow');
});
case 1 in fiddler
in second case am hiding the first div when am opening the second div
$('#bar').click(function () {
$("div").hide();
$('#foo').slideToggle('slow');
});
$('#bar1').click(function () {
$("div").hide();
$('#foo1').slideToggle('slow');
});
case 2 in fiddler
i hope my answer helps you :)

running jquery media query without reload

i have three different divs red, blue, green and yellow. red contains an input box. am trying to hide yellow if the input box in red is clicked(focus) and if the screen size is below 500. it does work but only if i reload the page is there any way to make it work without reloading the page?
html
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
<input class="s" placeholder="Search">
</form>
</div>
<div class="blue"> top </div>
<div class="green"> middle </div>
<div class="yellow"> bottom </div>
js
if ($(window).width() < 960) {
$(function(){
$(".s").on("focus",function()
{
$(".yellow").hide();
});
$(".s").on("blur",function()
{
$(".yellow").show();
});
});
}
else {
}
css
.red, .blue, .green, .yellow
{
padding: 10px;
border: 1px solid #f00;
}
.red{
background: red;
}
.blue{
background: blue;
}
.green{
background: green;
}
.yellow{
background: yellow;
}
.s:focus{
border: 1px solid black;
}
.s:focus + yellow{
display: none;
}

Instead of binding on load of the page, put the code in a function and call that function when you want it to be called. I added it in a function and called on click of a button for the demo.
Demo
$(document).ready(function () {
$('button').on('click', function () {
if (checkWidth()) { //checking width of window before binding the focus event
onFocusHandling();
}
});
});
function onFocusHandling() {
//you can also add the checkWidth() here than above
$(".s").on("focus", function () {
$('.yellow').hide();
});
$(".s").on("blur", function () {
$('.yellow').show();
});
}
function checkWidth() {
return ($(window).width() < 960);
}
Updated
Fiddle
Called the function onFocusHandling on window resize and on document ready
$(document).ready(function () {
onFocusHandling();
$(window).resize(function () {
onFocusHandling();
});
});
function onFocusHandling() {
if (checkWidth()) {
$(".s").on("focus", function () {
$('.yellow').hide();
});
$(".s").on("blur", function () {
$('.yellow').show();
});
}
else {
$(".s").off("focus").off("blur");
}
}
When the width is maximized unbind the focus and blur event.

The functionality you want can be done using a much simple way, here is my HTML
HTML
<div class="red">
<form>
<input type="text" class="s" id="txt" placeholder="Search"/>
</form>
</div>
<div class="blue">top</div>
<div class="green">middle</div>
<div class="yellow">bottom</div>
CSS
.red, .blue, .green, .yellow {
padding: 10px;
border: 1px solid #f00;
}
.red {
background: red;
}
.blue {
background: blue;
}
.green {
background: green;
}
.yellow {
background: yellow;
}
.s:focus {
border: 1px solid black;
}
.s:focus + yellow {
display: none;
}
MY JS:
$(document).ready(function() {
var width = $(window).width();
$(window).resize(function() {
$(".s").trigger("blur");
$(".s").on("focus", function()
{
var width = $(window).width();
if (width < 960)
{
$(".yellow").hide();
}
});
$(".s").on("blur", function()
{
$(".yellow").show();
});
});
});
UPDATED JS:
$(document).ready(function() {
var width = $(window).width();
$(".s").trigger("blur");
$(".s").on("focus", function()
{
var width = $(window).width();
$("#det").text(width);
alert(width);
if (width < 960)
{
$(".yellow").hide();
}
});
$(".s").on("blur", function()
{
$(".yellow").show();
});
$(window).resize(function() {
$(".s").trigger("blur");
$(".s").on("focus", function()
{
var width = $(window).width();
$("#det").text(width);
alert(width);
if (width < 960)
{
$(".yellow").hide();
}
});
$(".s").on("blur", function()
{
$(".yellow").show();
});
});
});
What i am doing here is ,
Used window.resize()function in order to detect the resize of the page
Once window is resized, i trigger a blur function to the textbox, using $(".s").trigger("blur")
Then, I find the width of the window, only when the user focuses on the text
Once input box gets into focus again, I hide the Yellow div.
Here is a DEMO for your reference