I'm trying to make a dropdown suggestion box.
In that case I wish to hide the box whenever the input field AND dropdown box is no longer in focus.
This is my HTML code:
<input type="text" id="user_address">
<div id="user_address_sg">SUGGESTION</div>
<div id="another element">Pressing another element on the page should hide the suggestion box</div>
I have tried the following:
$('[id=user_address][id=user_address_sg]').focusout(function (){
$('#user_address_sg').hide();
});
How come the user_address_sg doesn't hide whenever I select another input field or other elements on the page?
Images (1st: When I write a name, 2nd: When I select another form while suggestions appear)
First image: suggestion box should be displayed and clickable
Second image: When doing this the suggestion box should disappear
UPDATED: CSS alternative:
function suggest(key) {
document.getElementById('user_address').value = document.getElementById(key).innerHTML;
}
#user_address_sg {
vertical-align: top;
text-decoration: none;
display: none;
color:black;
}
#user_address_sg:focus, #user_address_sg:active {
display: inline-block;
color:black;
}
#user_address:focus ~ #user_address_sg {
display: inline-block;
}
<input type="text" id="user_address">
<a href=# id="user_address_sg">
<span id=a1 onClick="suggest('a1')">SUGGESTION 1</span><br>
<span id=a2 onClick="suggest('a2')">SUGGESTION 2</span><br>
<span id=a3 onClick="suggest('a3')">SUGGESTION 3</span><br>
<span id=a4 onClick="suggest('a4')">SUGGESTION 4</span>
</a>
You may need blur and separate the selectors with commas, because one single element with two different ids doesn't exist, but two different elements with different ids yes. So separate them:
$('[id=user_address],[id=user_address_sg]').blur(function (){
$('#user_address_sg').hide();
});
Better with on() method
$('[id=user_address],[id=user_address_sg]').on('blur', function (){
$('#user_address_sg').hide();
});
blur event will fire when a focused element loses the focus. So I think that's what you need.
Related
I have two menu icons, both classed .menuentry, with the IDs #topicicon and #searchicon, in a menubar. Beneath them are two larger divs, #topiclist and #searchform, both initially set to display:none;.
What I would like to do is click each menu icon and display the corresponding larger div underneath, as well as getting rid of the other larger div if it has been display previously.
So, for example, when I click #topicicon, it displays #topiclist and hides #searchform.
The code is being used on this website, in the menubar at the top: http://bonfiredog.co.uk/bonfog
And this is the code that I am using.
HTML:
<div id="topicicon"><img src="topic_icon.png" /></div>
<div id="searchform"><img src="search_icon.png" /></div>
<div id="topiclist"></div>
<div id="searchform"></div>
CSS:
#topiclist {
display:none;
}
#searchform {
display:none;
}
jQuery:
$("#topicicon").click(function(){
$("#topiclist").css("display", "visible");
$("#searchform").css("display", "none");
}, function(){
$("#formlist").css("display", "hidden");
});
Not working as of now...
You have to make two click handlers for #topicicon and #searchform and use .hide() and .show() as shown :-
$("#topicicon").click(function(){
$("#topiclist").show();
$("#searchform1").hide();
});
$("#searchform").click(function(){
$("#topiclist").hide();
$("#searchform1").show();
});
and you are using two div's with same id's i.e searchform so change the id of second searchform div to say searchform1 and try above code.
You could avoid having to write multiple click handlers, and reuse across different components with the following:
$(function () {
$('.showRelated').click(function () {
var relatedId = $(this).data('rel');
$('.related').hide(); // hide all related elements
$(relatedId).show(); // show relevant
});
});
.related {
display: none;
margin-top: 10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
<div id="topicicon" class="showRelated" data-rel="#topiclist"><i class="fa fa-newspaper-o"></i></div>
<div id="searchicon" class="showRelated" data-rel="#searchform"><i class="fa fa-search"></i></div>
<div id="topiclist" class="related">Topic List</div>
<div id="searchform" class="related">Search Form</div>
"visible" is not correct value for display propriety. You should add "display: block", or "display: inline-block", or "display: inline" or any other value that is admitted by display propriety.
Why does the DIV lose focus when i click on elements inside it?
I have an JS that hides the DIV when it loses focus. But that should not happen when clicking on elements inside the DIV.
It needs to be done with .on because there is some ajax loading going on.
$(document).on('focusout', '#geomodal', function(e) {
console.log('.focusout');
});
<div id="geomodal" tabindex="-1">
<input value="109" name="districts[]" type="checkbox">
<label>Bla</label>
<br>
<input value="152673" name="districts[]" type="checkbox">
<label>Blabla</label>
<br>
</div>
http://jsfiddle.net/2g41su81/2/
jQuery Documentation:
The focusout event is sent to an element when it, or any element
inside of it, loses focus.
Only one element has focus at a time - if an input has focus, your div doesn't. After losing focus, check if the newly-focused element is your div or a child, and don't hide it in that case.
$(document).on('focusout', '#geomodal', function (e) {
setTimeout(function(){
var focus=$(document.activeElement);
if (focus.is("#geomodal") || $('#geomodal').has(focus).length) {
console.log("still focused");
} else {
console.log(".focusout");
}
},0);
});
The setTimeout is necessary to allow the new element to gain focus before doing the check.
http://jsfiddle.net/2g41su81/5/
you can also use e.relatedTarget to get the element which caused the focusout to be triggered and do handling according to that!
check this example.
the focusout event is not execute while click on inner elements
Check the "tabindex" attribute, is the trick
Html Code
<div id="mydiv" tabindex="100">
<div class="anotherdiv">
<input type="checkbox" name="" value=1>
</div>
<div class="anotherdiv"> child content
<input type="checkbox" name="" value=1>
</div>
</div>
http://jsfiddle.net/tierrarara/kPbfL/425/
JS Code
$("#mydiv").focusin(function() {
$("#mydiv").css("background","red");
});
$("#mydiv").focusout(function() {
$("#mydiv").css("background","white");
});
CSS Code
#mydiv{
width : 50px;
height:auto;
border : 1px solid red;
}
.anotherdiv{
width : 50px;
height:50px;
border : 1px solid blue;
}
Here we go , this is my question and i can't find anything to resolve it.
The problem that i have this template(for data-Binding) for my Gridview:
<div id="mytemplate" data-win-control="WinJS.Binding.Template">
<div id="questions" class="tweet">
<img src="#" style="-ms-grid-row-span: 2; width: 64px; height: 64px; margin-right: 10px;" data-win-bind="src:picture_url">
<h2 style="width:auto;-ms-grid-column: 2; -ms-grid-column-span: 1; margin-left: 1px; margin-right: 0px; -ms-grid-row-span: 2;" data-win-bind="textContent:type"></h2>
<label id="answer" ">Message</label>
</div>
</div>
In all items , i have Message as a label
So when i click to an item , in the itemInvokedHandler(eventObject) function , i make show a Flyout which contains an input text and i want that this label will change from my input text field from the Flyout.What is the solution for that.
Just , i am thinking about moving the label tag outside of the template but it's not logical because it want a label for each item.
Any suggestion or help will be well appreciated.
I think that best option is to use a MVVM approach: Bind every item to an entity and have this entity expose an observable property named Text, bind Flyout to another observable property SelectedItem that will be updated with currently selected item and use two-way binding to have the selected item's Text property updated when Flyout text input changes. In case you need it i blogged about two way binding here: http://codeworks.it/blog/?p=81
suggest use data-win-bind attribute in the flyout html. code below will display item.title property in the input element in the flyout
test.html:
<div class="edit-item" data-win-control="WinJS.UI.Flyout">
<input type="text" class="item-text" data-win-bind="value: title" />
<input type="submit" class="submit" />
</div>
test.js: event handler for iteminvoked event for the listview control
_oniteminvoked: function oniteminvoked(event)
{
var item = this.items.getAt(event.detail.itemIndex); // assuming items is the list binding to the list view
var editItemFlyoutElement = this.element.querySelector('.edit-item');
WinJS.Binding.processAll(editItemFlyoutElement, item);
editItemFlyoutElement.winControl.show(this.element);
}
HTH
By Sharepoint a bunch of tds get generated with a few elements inside of them. So just to be clear I cant edit or change elements since it gets generated.
What I want to accomplish is to iterate throught all '.js-contentFollowing-itemLink' and then if the .text() contains the specific text I am looking for the '<span> Stop following</span>' should become hidden with '.hide()'.
I cant seem to accomplish this I have tried many ways.
Here is the jsfiddle:
http://jsfiddle.net/QXwyk/3/
Also take notice that I cant grab a id that is unique and many of these elements are generated with different values and texts.
HTML:
<span class="ms-contentFollowing-itemTitle">
test
</span>
<br>
<div class="js-contentFollowing-itemUrlDiv">
<span class="ms-metadata ms-contentFollowing-itemUrl"></span>
<input type="text" readonly="readonly" class="ms-metadata ms-contentFollowing-itemUrl ms-contentFollowing-itemFullUrl" style="visibility: visible; border-color: transparent; background-color: transparent;">
</div>
<span>Stop following</span>
My JS:
$('.js-contentFollowing-itemLink').each(function () {
if ($(this).text() == "test")
$(this).closest("span").hide();
});
Note: I know it hides wrong element but the If statement works its the code inside the if statement that I cant accomplish I need to hide ' Stop following'. This JS is just one of the examples I have done that is not working.
I tried with $('.ms-secondaryCommandLink span').hide(); inside the if statement but that removed all <span> with "Stop following" :/
Thanks a bunch!
Several issues in your code:
$('.js-contentFollowing-itemLink').each(function () {
if ($(this).text() == "test")
var text = $(this).parent().parent().parent().hide); <-- hide not closed properly
} <--- Extra bracket here..
});
Working code:
$('.js-contentFollowing-itemLink').each(function () {
if ($(this).text() == "test") {
var text = $(this).parent().parent().parent().hide();
}
});
Html
<div class="ms-content">
<span class="ms-contentFollowing-itemTitle">
test
</span>
<br>
<div class="js-contentFollowing-itemUrlDiv" id="contentFollowingUrl_18" url="http://dev/socialsites/Utförsåkning">
<span class="ms-metadata ms-contentFollowing-itemUrl"></span>
<input type="text" readonly="readonly" class="ms-metadata ms-contentFollowing-itemUrl ms-contentFollowing-itemFullUrl" style="visibility: visible; border-color: transparent; background-color: transparent;">
</div>
<span>Stop following</span>
</div>
JS
$('.js-contentFollowing-itemLink').each(function () {
if ($(this).text() == "test")
var text = $(this).closest('.ms-content').find('.ms-secondaryCommandLink').hide();
});
http://jsfiddle.net/QXwyk/4/
You can select the object containing specific text by following way,based on which you can can do remaining actions ...
Example: $('.js-contentFollowing-itemLink:contains(test)').hide(); will hide "test"
So the labels are populated from the database. Once the label is clicked, the label need to turn red and bold. when clicked on another label, the first label need to come back to original state and the new label should be activated and it needs to be bold and red. for some reason, the changeActiveStates() only works for the first 2 labels, i.e., when first label is clicked it turns red and when the second label is clicked the first label is turned black and the second label is turned red. when the third label is clicked, the second label remains red and the third one turns red. How do i fix this??
Here is the code:
<html>
<span>
<input type="hidden" name="LiabFilter" id= "idLib<%=liabkey %>" value="<%=liabkey %>" />
<div>
<label for="idLib<%=liabkey%>" id="liablabel" style="cursor: hand; padding-left: 25px; font-weight: normal"
onClick ="clearLiabFilter();
document.getElementById('idLib<%=liabkey%>').checked = true;
changeActiveStates(this);">
<%=liab.getName() %>
</br>
</label>
</div>
</span>
<style type="text/css">
.activate { font-weight: bold; color:#e40000;}
.visited{ font-weight: normal; color: #000000;}
</style>
<script>
function byId(id) {
return document.getElementById ? document.getElementById(id) : document.all[id];
}
var prevLink = "";
function changeActiveStates(ele) {
if (prevLink) byId(prevLink).className = '';
ele.className = 'activate';
prevLink = ele.id;
}
</script>
</html>
Are you averse to JQuery?
If not, this should work.
$('label').click(function() {
$('label').removeClass('activate'); /* Remove 'activate' class from all labels */
$(this).addClass('activate'); /* Add 'activate' class to clicked label
});
EDIT: Example on jsFiddle
EDIT: A little more detail as the questioner hasn't used JQuery before.
JQuery is a javscript library and so must be loaded by the browser before you can do all the nifty stuff.
Add the following between the <head></head> tags on your page:
<script src="http//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
(Why let google host JQuery for you?)
Then add the following, also between the tags but after the script tag given above:
$(document).ready(function() {
$('label').click(function() {
$('label').removeClass('activate'); /* Remove 'activate' class from all labels */
$(this).addClass('activate'); /* Add 'activate' class to clicked label
});
});
(What does $(document).ready() do?)
Maybe not the best of solutions, but have you considered using jQuery? It's generally not too much of a dependency , and will solve these sort of issues quite elegantly and easily for you. Plus. Cross-browser compatibility.