jQuery focus is not working? - javascript

I have been trying to add focus function to my specific input i.e want to show a div on focus with class as : .search_by_name but it's not working so if you people please take a look at my code that what I am doing wrong please?
Here is code as :
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<style>
.search_by_business_name {
background: #474747;
display: none;
width: 297px;
margin-left: 179px;
margin-top: 15px;
height: 15px;
position: absolute;
-webkit-animation: fadeIn 0.5s;
animation: fadeIn 0.5s;
}
.arrow-up_search_by_business_name {
width: 0;
height: 0;
border-left: 8px solid transparent;
border-right: 8px solid transparent;
border-bottom: 8px solid #474747;
position: relative;
top: -8px;
left: 20px;
}
.search_by_business_name_text {
background: #99cc33;
font-family: Arial;
font-style: italic;
color: #fff;
padding: 7px;
font-size: 14px;
text-align: left;
padding-left: 15px;
margin-top: -4px;
}
</style>
<input type="text" class="search_input" id="search_by_business_name_input" placeholder="Hi Ruyben, what do you want to find today ?">
<div class="search_by_business_name">
<div class="arrow-up_search_by_business_name"></div><!-- end div arrow-up_search_by_business_name -->
<div class="search_by_business_name_text">Search by business name, or keyword</div><!-- end div search_by_business_name_text -->
</div><!-- end div search_by_business_name -->
<script>
$( "#search_by_business_name_input" ).focus(function() {
$( this ).next( ".search_by_business_name" ).css( "display", "block" );});
</script>
Please have a look at live version as : http://huntedhunter.com/waseem_jobs/pacific_site/index.html

As I explained in the comments, you should not use .next() as the element you are looking for is not the next sibling of the target element.
Also .focus() takes only one function as argument, you need to use .blur() to hide the element
$("#search_by_business_name_input").focus(function () {
$(".search_by_business_name").show();
}).blur(function () {
$(".search_by_business_name").hide();
});

The script should be inside the <body> tag.
In your page the script is after </body></html>
<script>
$( document ).ready(function() {
$( "#search_by_business_name_input" )
.focus(function() {
$( ".search_by_business_name" ).show();
})
.blur(function() {
$( ".search_by_business_name" ).hide();
});
});
</script>
</body>
</html>
Edit:
Of course it does not work.
Have you read the documentation for $.next()?
.next()
Description: Get the immediately following sibling of each element in the set of matched elements. If a selector is provided, it retrieves the next sibling only if it matches that selector.
Replace this:
$( this ).next( ".search_by_business_name" ).css( "display", "block" );
With:
$( ".search_by_business_name" ).css( "display", "block" );
Edit2:
Wrap your code in $.ready:
$( document ).ready(function() {
$( "#search_by_business_name_input" )
.focus(function() {
$( ".search_by_business_name" ).show();
})
.blur(function() {
$( ".search_by_business_name" ).hide();
});
});

You should put
<script>
$( "#search_by_business_name_input" ).focus(function() {
$( ".search_by_business_name" ).show();
});
</script>
at the bottom of body element, because when excute this code,
$("#search_by_business_name_input" ) = []
or
you can write it like this
$(document).on("focus", "#search_by_business_name_input", function(){
$( ".search_by_business_name" ).show();
})

Related

Cannot change variable using click event with jQuery

I am trying to change global variable finish from false to true using click event in order to prevent hovering the circles.
After I use click event, my global variable finish did not change (it is still false) and I can still do hovering over some circles.
Why is that happening?
var finish = false;
$( ".rating-circle" ).click( function() {
$( this ).addClass( "rating-chosen" );
$( this ).prevAll().addClass( "rating-chosen" );
finish = true;
});
if ( finish == false )
{
$( ".rating-circle" ).hover(
function() {
$( this ).addClass( "rating-hover" );
$( this ).prevAll().addClass( "rating-hover" );
},
function() {
$( this ).removeClass( "rating-hover" )
$( this ).prevAll().removeClass( "rating-hover" );
} );
}
body {
font-family: Verdana;
}
h1, h2, h3 {
color: darkblue;
}
.rating-circle {
height: 2em;
width: 2em;
border: .1em solid black;
border-radius: 1.1em;
display: inline-block;
margin: 0;
padding: .1em;
}
.rating-hover {
background-color: yellow;
}
.rating-chosen {
background-color: green;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h2>Finding elements using jQuery</h2>
<h3>Rate this session</h3>
<div id="rating-container">
<div class="rating-circle"></div>
<div class="rating-circle"></div>
<div class="rating-circle"></div>
<div class="rating-circle"></div>
<div class="rating-circle"></div>
</div>
The problem is that your checking logic takes place above your hover event binding, so it is only evaluated once when the code is first run. You need to check the finish flag within the handler function itself, or you could just unbind the handlers on click.
$( ".rating-circle" ).hover(function() {
if (finish) return;
$( this ).addClass( "rating-hover" );
$( this ).prevAll().addClass( "rating-hover" );
}, function() {
$( this ).removeClass( "rating-hover" )
$( this ).prevAll().removeClass( "rating-hover" );
} );
Also, it would be more idiomatic/semantic to name your flag something like finished or hasFinished.
Your global variable does change, but it's too little too late, by that time the event handlers are already bound, and the condition doesn't matter.
As you're adding a unique class anyway on click, you could just check for that class inside the hover events
$(".rating-circle").click(function() {
$(this).addClass("rating-chosen");
$(this).prevAll().addClass("rating-chosen");
});
$(".rating-circle").hover(
function() {
if ($(".rating-circle.rating-chosen").length === 0) {
$(this).addClass("rating-hover");
$(this).prevAll().addClass("rating-hover");
}
},
function() {
if ($(".rating-circle.rating-chosen").length === 0) {
$(this).removeClass("rating-hover")
$(this).prevAll().removeClass("rating-hover");
}
});
body {
font-family: Verdana;
}
h1,
h2,
h3 {
color: darkblue;
}
.rating-circle {
height: 2em;
width: 2em;
border: .1em solid black;
border-radius: 1.1em;
display: inline-block;
margin: 0;
padding: .1em;
}
.rating-hover {
background-color: yellow;
}
.rating-chosen {
background-color: green;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h2>Finding elements using jQuery</h2>
<h3>Rate this session</h3>
<div id="rating-container">
<div class="rating-circle"></div>
<div class="rating-circle"></div>
<div class="rating-circle"></div>
<div class="rating-circle"></div>
<div class="rating-circle"></div>
</div>
var finish = false;
$( ".rating-circle" ).click( function() {
$( this ).addClass( "rating-chosen" );
$( this ).prevAll().addClass( "rating-chosen" );
finish = true;
});
$( ".rating-circle" ).hover( function() {
if ( finish == false ){
$( this ).addClass( "rating-hover" );
$( this ).prevAll().addClass( "rating-hover" );
}
},function(){
if ( finish == false ){
$( this ).removeClass( "rating-hover" )
$( this ).prevAll().removeClass( "rating-hover" );
}
});
body {
font-family: Verdana;
}
h1, h2, h3 {
color: darkblue;
}
.rating-circle {
height: 2em;
width: 2em;
border: .1em solid black;
border-radius: 1.1em;
display: inline-block;
margin: 0;
padding: .1em;
}
.rating-hover {
background-color: yellow;
}
.rating-chosen {
background-color: green;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h2>Finding elements using jQuery</h2>
<h3>Rate this session</h3>
<div id="rating-container">
<div class="rating-circle"></div>
<div class="rating-circle"></div>
<div class="rating-circle"></div>
<div class="rating-circle"></div>
<div class="rating-circle"></div>
</div>

move div from left to right and then stop

do you know how to move the div.move from left to right 1px per second? And stop the move of the div when the div arrives to .stop div?
https://jsfiddle.net/z2mjvbss/4/
<div class="content">
<div class="stop">
stop
</div>
<div class="move">
</div>
</div>
<button id="go">
go
</button>
$( "#go" ).click(function() {
$( ".move" ).animate({
opacity: 0.25,
left: "+=5000px",
height: "toggle"
}, 5000, function() {
});
Change your JS code to following
$( "#go" ).click(function() {
var stop = $(".stop").offset().left;
$( ".move" ).animate({
opacity: 0.25,
left: stop-($(".stop").width()+$(this).width()),
height: "toggle"
}, 5000, function() {}
);
});
And your CSS to this
.content {
width: 500px;
height: 500px;
margin: 10px;
border: 10px solid green;
background:yellow;
overflow-x:scroll;
padding:10px;
position: relative;
}
.stop{
float:right;
background:brown;
}
.move{
left:0;
background:brown;
height:100%;
width:10px;
opacity:0.2;
position: absolute;
}
Fiddle
Here's the modified fiddle
https://jsfiddle.net/z2mjvbss/6/
You can stop it at a particular location by modifying the final value of left.
Code for backup
$( "#go" ).click(function() {
$( ".move" ).animate({
opacity: 0.25,
left: "200px",
}, 5000, function() {
});
});
You can try this......
HTML
<div class="content">
<div class="stop">
stop
</div>
<div class="move">
move
</div>
</div>
<button id="go">
go
</button>
CSS
.content{float:left; width:100%;background:#FFFFFF;}
.move{float:left;width:100px;background:black;color:white;}
.stop{float:right;width:100px;background:red;}
JS
$("#go").on("click",function(){
goOnePixelRight();
});
function goOnePixelRight(){
var top=$(".move").offset().top;
var left=$(".move").offset().left;
$(".move").offset({top:top,left:left+1});
if(parseInt($(".move").offset().left)!=parseInt($(".stop").offset().left)){
setTimeout("goOnePixelRight();",1000);
}
}
You can achieve it using requestanimationframe. The below article explains it more with an example. Here it moves 7px , but you can change it to 1px.
https://link.medium.com/JrgbH9gdf8

jQuery - Adding increasing number to image for each click

I need to create a notification counter for my app. For now, I want to add an increasing number on top of an image for each button click. How can this be achieved using jQuery?
JSfiddle
HTML:
<img id="header_bell_notificator" class="show_notif" src="http://www.gsi.co.ir/Docs/Images/Red_Circle.png" alt="" width="30px">
<button id="kick_button">click this</button>
CSS:
.show_notif{
visibility: hidden;
}
JS:
var counter=0;
$( "#kick_button" ).click(function() {$("#header_bell_notificator").removeClass("show_notif");
});
with a few mods to your implementation...
wrapper div for the image
set data-counter attribute on wrapper
show counter using :before pseudo-element
you could get something like this:
jsfiddle
var counter=0,
$bellNotificator = $('#header_bell_notificator'),
$bellNotificatorImg = $bellNotificator.find('img');
$( "#kick_button" ).click(function() {
counter++;
$bellNotificator.attr('data-counter', counter);
$bellNotificatorImg.removeClass("show_notif");
});
body {
font-family: helvetica,arial,sans-serif;
}
#header_bell_notificator {
float:left;
width: 30px;
height: 30px;
margin: 5px;
position: relative;
}
#header_bell_notificator:before {
content: attr(data-counter);
position: absolute;
line-height: 30px;
width: 30px;
text-align: center;
color: #fff;
font-size: .8em;
font-weight: bold;
}
.show_notif{
visibility: hidden;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="header_bell_notificator">
<img class="show_notif" src="http://www.gsi.co.ir/Docs/Images/Red_Circle.png" alt="" width="30px" />
</div>
<button id="kick_button">click this</button>
simply try it like this:
UPDATED FIDDLE
$( "#kick_button" ).click(function() {
var counter = parseInt($('.counter').html()) + 1;
$('.counter').html(counter);
});
and add a container called <div class="counter">0</div>
One way would be to move the image to the background of a and then change its inner html.
Like this:
var counter=0;
$( "#kick_button" ).click(function() {
counter++;
$("#header_bell_notificator").removeClass("show_notif").html(counter);
});
Here's the updated fiddle

Display hidden container element - hover only works after I click the container

I have a situation like this set up:
http://jsfiddle.net/gz4Z7/2/
The difference in my situation is that all of the elements are created in javascript with document.createElement, and they are appended to the DOM of various webpages on the internet.
Everything works great except one thing: The hover functionality doesn't work until I click on the container. This only happens on some webpages.
My question is: What would cause the need to click on the container element in order for the hover functionality of its children to work? I have tried doing a focus() on the container element but it doesn't seem to make a difference.
Here is the fiddle code:
<input id="myInput" type="text"/>
<myContainer id="myContainer">
<outerThing id="outerThing">
<myThing id="myThing"></myThing>
</outerThing>
</myContainer>
<button type="button" onclick="buttonClick()">show container</button>
#myContainer {
position: absolute;
top:100px;
bottom:auto;
right:auto;
left:100px;
width:200px;
height:200px;
display: none;
background-color: red;
}
#outerThing{
width:50px;
height:50px;
margin-top: 10px;
margin-left: 10px;
display: block;
background-color: white;
}
#myThing{
width:20px;
height:20px;
margin-top: 15px;
margin-left: 15px;
display: none;
background-color: blue;
}
function buttonClick() {
document.getElementById("myInput").focus();
var cont = document.getElementById("myContainer");
cont.style.display = "block";
var outerThing = document.getElementById("outerThing");
$( outerThing ).hover(
function()
{
$(this).children(":last").css( "display", "inline-block" );
},
function()
{
$(this).children(":last").css( "display", "none" );
});
}
$(document).ready(function({
function buttonClick() {
document.getElementById("myInput").focus();
var cont = document.getElementById("myContainer");
cont.style.display = "block";
var outerThing = document.getElementById("outerThing");
$( outerThing ).hover(
function()
{
$(this).children(":last").css( "display", "inline-block" );
},
function()
{
$(this).children(":last").css( "display", "none" );
});
}
});
Like this

Drag/Drop event only works once on dynamically added divs

I'm using the drag and drop libraries found here: http://threedubmedia.com/code/event/drop/
But I can't seem to get it to work more than once for elements added dynamically.
I've made a jsfiddle to demonstrate the issue.
http://jsfiddle.net/Rn9gQ/
Here you can click the button to add new divs, and you can drag the mouse to select some of them, but you can't select again after finishing dragging the mouse. Even if you make no selection the first time.
Now sure where I'm going wrong, and any help would be greatly appreciated :)
*Edit: Added code below
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<script src="http://threedubmedia.com/inc/js/jquery-1.7.2.js"></script>
<script src="http://threedubmedia.com/inc/js/jquery.event.drag-2.2.js"></script>
<script src="http://threedubmedia.com/inc/js/jquery.event.drag.live-2.2.js"></script>
<script src="http://threedubmedia.com/inc/js/jquery.event.drop-2.2.js"></script>
<script src="http://threedubmedia.com/inc/js/jquery.event.drop.live-2.2.js"></script>
<title>Testpage</title>
</head>
<body>
<script type="text/javascript">
jQuery(function($){
$('#foo').click(function(){
$('#main').append($('<div class="drop">foo</div>'))
});
$( document )
.drag("start",function( ev, dd ){
return $('<div class="selection" />')
.css('opacity', .65 )
.appendTo( document.body );
})
.drag(function( ev, dd ){
$( dd.proxy ).css({
top: Math.min( ev.pageY, dd.startY ),
left: Math.min( ev.pageX, dd.startX ),
height: Math.abs( ev.pageY - dd.startY ),
width: Math.abs( ev.pageX - dd.startX )
});
})
.drag("end",function( ev, dd ){
$( dd.proxy ).remove();
})
.on("dropstart", ".drop", function(){
$(this).addClass("active");
})
.on("drop", ".drop", function(){
$(this).toggleClass("dropped");
})
.on("dropend", ".drop", function(){
$(this).removeClass("active");
});
$.drop({ multi: true });
});
</script>
<h1>Live adding of selectable elements</h1>
<p>Click and drag to select any number of dashed boxes.</p>
<input type="button" id="foo" value="Add a box"/>
<div id="main"></div>
<style type="text/css">
.selection {
position: absolute;
border: 1px solid #89B;
background: #BCE;
background-color: #BEC;
border-color: #8B9;
}
.drop {
float: left;
border: 1px dashed #888;
background: #EEE;
text-align: center;
padding: 20px;
margin: 0 10px 10px 0;
}
.dropped {
background-color: #EBC;
border-color: #B89;
}
.active {
background-color: #CEB;
border-color: #9B8;
}
</style></body>
</html>

Categories

Resources