Grouping elements for focus/onblur events? - javascript

I have an autocomplete div which appears when the user keyup's in a search field. I want the div to disappear when they click outside of the div, so I have tried the following:
//SHOW THE DIV WHEN INPUT CLICKED
$('#searchbar').focus(function(){
$('#div').show();
});
//HIDE THE DIV WHEN FOCUS LOST
$('#searchbar').on("blur", function(){
$('#div').hide();
});
Unfortunately, the div which houses the autocomplete choices contain tags that I want the user to click. As soon as the user clicks a link, the div disappears (because focus from the input field is lost).
So is there any way to 'group' the div with the input field so they can both be 'focussed' when the input is active, or div is clicked?
Regards, and thank you in advance!
EDIT: Here is my HTML
<div class="appBar">
<table class="abTable">
<tr>
<td><b><span style="color:white;">gelDB</span></b></td>
<td><input id="sbar" type="text" name="searchBar" class="searchBar" placeholder="Search for entries..." /></td>
<td>
<img class="navButton" alt="" src="images/btn_new.png" style="width: 50px; height: 50px" />
<img class="navButton" alt="" src="images/btn_browse.png" style="width: 50px; height: 50px" />
<img class="navButton" alt="" src="images/btn_proto.png" style="width: 50px; height: 50px" />
<img class="navButton" alt="" src="images/btn_permis.png" style="width: 50px; height: 50px" />
</td>
<td>
<button class="menuButton"></button>
</td>
</tr>
<div class="menuButtonDiv"></div>
</table>
</div>
</head>
<br/>
<body>
<div id="acd" class="autoCompleteDiv">No results. Try searching something else.<hr></div>
Here is a graphical example of what I'm doing:

Figured it out, had to use the following code:
$('#sbar').on("blur", function(){
if ($('#acd').is(':hover')) {}
else{$('#acd').hide();};
});
Basically it states to hide the div unless the mouse is currently over (hovering over) the div.

try this:
<div id="box">
<a href="#">link<a>
<div>
_
$( "body" ).click(function() {
// if the element that was clicked is #box OR any child of #box
if($(event.target).is( "#box, #box > *" )) {
} else {
alert("outside the box");
}
});
demo: http://jsfiddle.net/J9yzj/2/

Related

How can I prevent shift of the input element inside parent div?

I have div that contains three elements.
Here is the div:
<div id="toolbarArea" class="toolbarArea" data-Owner="geomind" data-Date="11/2016">
<img id="toolbarTitle" width="15px" height="15px" src="../stdicons/threePoints.png">
<iframe id="frTools" style="width:400px;height:25px;overflow: hidden;" name="tbFrame" src="/data/mapview/toolbar.aspx?LOCALE=en" frameBorder="0"></iframe>
<input type="text" id="txtSearch" placeholder="Sample Input"/>
</div>
The input text that inside div is shifted.Here how it looks:
Here is jsfiddle.
How can I prevent shift down of the input element and make it fit parent element?
You can just add vertical-align: top; to the input field:
#txtSearch {
vertical-align: top;
}

After button is clicked , another button won't click

I'm trying to make a content slider just like youtube
And here is mine..
My content slides to right or left perfectly by 800px. But here's the problem.. When I click on the left icon first , Then clicking on the right icon won't work! Could there be a solution to this..?
Javascript:
$(document).ready(function(){
$("#trendingnexticon").on('click' ,function(){
$("#trendingtable").animate({right: '+=800px'});
});
});
$(document).ready(function(){
$("#trendingpreviousicon").on('click' ,function(){
$("#trendingtable").animate({left: '+=800px'});
});
});
HTML:
<div id="trendingdiv" class="" style="overflow-x:scroll; overflow: hidden;">
<table id="trendingtable" class="table" style="position:relative;">
<a id="trendingpreviousicon" style="cursor:pointer; margin-top: 62px;
position:absolute; z-index:1;" class="previous round">‹</a>
<a id="trendingnexticon" style="cursor:pointer; margin-left: 1250px;
margin-top: 62px; position:absolute; z-index:1;" class="next round">›
</a>
<tr>
<?php while ($tsingers = mysqli_fetch_assoc($tsingersquery)): ?>
<td>
<div class="media" style="border: 1px solid #e6e6e6; width:400px;
padding: 0px;">
<img src="images/<?=$tsingers['image'];?>" alt="<?
=$tsingers['name'];?>"
class="pull-left img-responsive" style="width: 200px; height:
150px;" id="artistimg">
<div id="trendingmediabody" class="media-body">
<p id="trendingname" style="font-size:14px; font-weight:
bolder;"><?=$tsingers['name'];?></p>
<p id="trendingcategory" style="font-size:12px; font-weight:
bolder;"><?=$tsingers['category'];?></p></br></br>
</div>
</div>
</td>
<?php endwhile; ?>
</tr>
</table>
</div>
The "left" and "right" attributes are conflicting.
$(document).ready(function(){
$("#trendingnexticon").on('click' ,function(){
$("#trendingtable").animate({right: '+=800px'});
});
$("#trendingpreviousicon").on('click' ,function(){
$("#trendingtable").animate({right: '-=800px'});
});
});
P.S.: I also removed the double $(document).ready since one is enough.
Heyo, you only need one $(document).ready(), you can put both functions inside that one.
Try check on the inspector to see if after the slide animation something doesn't overlap the button
I'm going to take a guess and say that it is because you are animating left and right instead of one or the other. left doesn't mean "move left", it means, "set the left CSS style property". And left means "where does my left border belong relative to my nearest relative parent".
Read a bit more about the left and position CSS properties.
Try this instead:
$(document).ready(function () {
$("#trendingnexticon").on('click', function () {
$("#trendingtable").animate({
left: '-=800px'
});
});
$("#trendingpreviousicon").on('click', function () {
$("#trendingtable").animate({
left: '+=800px'
});
});
});

How to put an iframe behind a div, then when a button is clicked, it will appear over the div?

I need to make a webpage where a user would click a button then an iframe behind a div would pop up and appear over the div?
My sample code goes like this:
<style>
#myiframe {
position: absolute;
display:none; }
</style>
<script = "text/javascript">
function showIFrame() {
var iframe = document.getElementById("myiframe");
iframe.style.display="block";
}
</script>
<div class="custom" style="margin-top:17px;margin-bottom:17px;" >
<table>
<tr valign="top">
<td style="max-width: 715px;">
<div id="error" class="err" style="margin-bottom:8px;"></div>
<div id="cavas_id<?php echo $module->id; ?>" class="bt-googlemaps" style="border: 1px solid rgba(0, 0, 0, 0.2);">
<form name="search" id="search" method="get" action="crime_map/map_crime.php" target="carsearch">
<button id="SearchCarButton" class="submitBtn" onclick="showIFrame()"/> <span>Crime Map</span></button></form>
I plan to overlap the iframe div (cavos) over the div (cavas) when the Crime Map button is clicked. How can I do this? Thank you very much!

How to assign delegate events to particular Dom elements

I want to specify click event to particular textfield in my web page, it's id value is service.
Even If I pass another element using setElement() to view, still I want to apply that click event on text-field(id:service).
view code:
var addService=Backbone.View.extend({
events:{
"click #service":"alertfunction"
},
alertfunction:function(event){
alert("working");
}
});
var addFunctionObj=new addService({el:$("div")});
html code:
<div align="center" id="div2">
<input type="text" id="service" style="width: 200px; height: 20px; color: white; background: green" placeHolder="Enter Service"/>
<input type="text" id="price" style="width: 200px; height: 20px; color: white; background: green" placeHolder="Enter Price"/>
<input type="button" id="add" align="center" style="width: 100px; height: 50px; color: white; background: green" value="AddService"/>
<span>I am Normal Text</span>
</div>
testcases :
Initially If I click on text-field(service),getting alert even If you pass div to view.
But If I pass the following names to view using setElement,click event is not working on text-field(service).
view.setElement('#add')
view.setElement('input')
view.setElement('span')
again If you pass div or #div2 to view, click event is working fine on text-field(service).But If you pass the above elements to view,it's not working. Why?
What I want : If you pass any element to view,click event should be work on text-field(service). Is it possible.
Thanks.
What you are trying to do is not how Backbone works.
What the following code does is listen for click events for children of the "this.el" that bubble up.
events:{
"click #service": "alertfunction"
}
This means that you cannot set "this.el" to be input#add because this element has no children with the id #service.
Works
<div id="div1">
<input type="text" id="service" />
</div>
var addFunctionObj=new addService({el:$("div1")});
Does not work
<div id="div1">
</div>
<input type="text" id="service" />
var addFunctionObj=new addService({el:$("div1")});
The second examples does not work because #service is not a child of this.el. As long you "pass" it an element that does not have #service as a child element then it will never work.

sliding a page in html

My html page is divided into many div
<div id=1> //content1</div>
<input type="button" value="Go to div 2" />
<div id=2> //content2 </div>
My div having id=2 is too below on the page. I want that whenever I click the button the div having id 2 slides up and reaches at the starting of the page.
If you don't want to simply use an anchor or ID reference and want to animate it, just use animate.
Here's a fiddle : http://jsfiddle.net/zMGnQ/
#div1, #div2 {
height: 400px;
background: #00aa00;
margin: 20px;
padding: 20px;
}
<div id='div1'> //content1</div>
<input id='but' type="button" value="Go to div 2" />
<div id='div2'> //content2
$('#but').click(function(){
$('body').animate({
scrollTop: $('#div2').offset().top
})
})
Try something like $("#2").slideUp() Check here for more info on JQuery SlideUp()

Categories