I have the following jQuery and HTML which hide the search result when the focus on the input has been lost.
This code hides my div with id #searchResult when the elements on #searchResult are clicked. I want to disable blur when elements on #searchResult div are clicked. Basically, I want to hide <div id="searchResult"> when the focus is lost and show when it's on focus. How can I achieve that?
$(document).on("blur", "#txtSearchTerm", function () {
$('#searchResult').hide();
});
$(document).on("focus", "#txtSearchTerm", function () {
$('#searchResult').show();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<input id="txtSearchTerm" type="text">
<div id="searchResult">
<ul>
<li>
<a href="http://www.google.com">
<div class="title">Google.com</div>
<div class="content">Click here</div>
</a>
</li>
<li>
<a href="http://www.google.com">
<div class="title">Google.com</div>
<div class="content">Click here</div>
</a>
</li>
</ul>
</div>
<div id="searchResult"> will be hidden on every click of elements inside it.
You can simply turn off your blur event with the following code.
$(document).off("blur", "#txtSearchTerm");
You dont need blur event to achieve that:
$(document).click(function(e) {
if ($(e.target).is("div") && $(e.target).has("ul > li")){
$('#searchResult').show()
}
else $('#searchResult').hide()
if ($(e.target).is(':focus')){
$('#searchResult').show()
}
})
#searchResult{
margin-top: 50px;
border: 2px solid black;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<input id="txtSearchTerm" type="text">
Click out the input to hide div
<div id="searchResult">
<ul>
<li>
<a href="http://www.google.com">
<div class="title">Google.com</div>
<div class="content">click here</div>
</a>
</li>
<li>
<a href="http://www.google.com">
<div class="title">Google.com</div>
<div class="content">click here</div>
</a>
</li>
</ul>
</div>
You can't do that, because the blur is fired before the click on the child.
So you would need to add an event handler on the document which closes the results. You cancel that event when someone clicks the results. Something like this:
$('#txtSearchTerm').click(function(e) {
$('#searchResult').show();
e.stopPropagation();
});
$(document).click(function(e) {
$('#searchResult').hide();
});
$('#searchResult').click(function(e) {
e.stopPropagation();
});
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<input id="txtSearchTerm" type="text">
<div id="searchResult">
<ul>
<li>
<a href="http://www.google.com">
<div class="title">Google.com</div>
<div class="content">Click here</div>
</a>
</li>
<li>
<a href="http://www.google.com">
<div class="title">Google.com</div>
<div class="content">Click here</div>
</a>
</li>
</ul>
</div>
My advise it to check relatedTarget and kill blur only if user clicks on certain elements.
$(document).on("blur", "#txtSearchTerm", function (e) {
if ($(e.relatedTarget).hasClass("no-blur")){
}else{
$('#searchResult').hide();
}
});
$(document).on("focus", "#txtSearchTerm", function () {
$('#searchResult').show();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<input id="txtSearchTerm" type="text">
<div id="searchResult">
<ul>
<li>
<a href="http://www.google.com">
<div class="title">Google.com</div>
<div class="content">click here</div>
</a>
</li>
<li>
<a href="http://www.google.com">
<div class="title">Google.com</div>
<div class="content">click here</div>
</a>
</li>
</ul>
</div>
Related
does anyone know how Can I add a class in the A tag:
Subscribe
Here is my html:
<div class="module" id="prod-subscription">
<div class="entity entity-bean bean-ap-bl-instruct contextual-links-region block container">
<div class="contextual-links-wrapper contextual-links-processed">
<a class="contextual-links-trigger" href="#">Configure</a>
<ul class="contextual-links">
<li class="bean- first last">
bloc
</li>
</ul>
</div>
<div class="row">
<div class="col-md-3">
<h2>simple<span>in 3 </span></h2>
</div>
<div class="col-md-6">
<ol>
<li>
<span>1</span><p>text</p>
</li>
<li>
<span>2</span><p>texte testx</p>
</li>
<li>
<span>3</span><p>and text</p>
</li>
</ol>
</div>
<div class="col-md-3">
Subscribe
</div>
</div>
</div>
</div>
you can use
$('a[href="/souscription/digital-vie"]').addClass('classHere');
or
$('div#prod-subscription a[href="/souscription/digital-vie"]').addClass('classHere');
or
$('a[href="/souscription/digital-vie"]:contains("Subscribe")').addClass('classHere');
$('a[href="/souscription/digital-vie"]:contains("Subscribe")').addClass('classHere');
.classHere{
background : red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="module" id="prod-subscription">
<div class="entity entity-bean bean-ap-bl-instruct contextual-links-region block container">
<div class="contextual-links-wrapper contextual-links-processed">
<a class="contextual-links-trigger" href="#">Configure</a>
<ul class="contextual-links">
<li class="bean- first last">
bloc
</li>
</ul>
</div>
<div class="row">
<div class="col-md-3">
<h2>simple<span>in 3 </span></h2>
</div>
<div class="col-md-6">
<ol>
<li>
<span>1</span><p>text</p>
</li>
<li>
<span>2</span><p>texte testx</p>
</li>
<li>
<span>3</span><p>and text</p>
</li>
</ol>
</div>
<div class="col-md-3">
Subscribe
</div>
</div>
</div>
</div>
You could use jQuery's filter function and filter the link where the exact text is 'Subscribe' (this may cause problems if you have multiple links with that exact text)
$('a').filter(function() {
return $(this).text() === 'Subscribe';
}).addClass('new-class');
.new-class {color:red;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Subscribe
Not sure I fully understand the question. Do you just want to give the anchor tag a class? That can be done as simply as <a class="your_class" href="your_link">Subscribe</a>
I have two forms and each form has different a tag, but when I use Javascript to use a tag different form, I can work on the a tag from the first form. How can make Javascript so that I can work on different a tag from different forms.
My codes are shown below.
Form to sell
<body>
<form class="summarybackground" name="sell" id="sell" style="height:500px;width:920px;overflow-y:hidden;" method="post">
<div class="myBox">
<nav id="cd-vertical-nav">
<ul>
<li>
<a data-number="1" href="#section1" class="is-selected">
<span class="cd-dot"></span>
<span class="cd-label">Landed</span>
</a>
</li>
</ul>
</nav>
<div class="col-sm-9">
<div id="section1">
<h1 class="header double">Landed</h1>
</div>
</div>
</form>
Form to rent
<form class="summarybackground" name="rent" id="rent" style="height:500px;width:920px;overflow-y:hidden;" method="post">
<div class="myBox">
<nav id="cd-vertical-nav-sec">
<ul>
<li>
<a data-number="1" href="#section1" class="is-selected">
<span class="cd-dot"></span>
<span class="cd-label">Landed</span>
</a>
</li>
</ul>
</nav>
<div class="col-sm-9">
<div id="section1">
<h1 class="header double">Landed</h1>
</div>
</div>
</form>
</body>
This script can work on the first form's a tag only.
<script>
$('a').click(function () {
$('a').removeClass('is-selected');
$(this).addClass('is-selected');
});
</script>
How to make a script so that I can work on both forms?
Find your a using it's parent
<script>
$('#rent a').click(function () {
$('#rent a').removeClass('is-selected');
$(this).addClass('is-selected');
});
</script>
You can do similar thing for your next form
I tried to achieve tabs using jQuery. Making the current tab class active is working, but to make its sibling's class null is not working.
jQuery(document).ready(function() {
jQuery('.container .tab-links a').on('click', function(e) {
var currentAttrValue = jQuery(this).attr('href');
console.log(currentAttrValue);
// jQuery(this).addClass('active').siblings.removeClass('active');
// Show/Hide Tabs
//jQuery(currentAttrValue).show().siblings().hide();
// Change/remove current tab to active
jQuery(this).addClass('active');
jQuery(this).siblings().find('a').removeClass('active');
jQuery('each_tab').not(currentAttrValue).css("display", "none");
jQuery(currentAttrValue).css("display", "block");
e.preventDefault();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section id="features">
<header>
<div class="features-switcher">
<div class="container">
<ul class="tab-links">
<li>
<a class="active" href="#tab1">
<span>tab one</span>
</a>
</li>
<li>
<a class="" href="#tab2">
<span>tab two</span>
</a>
</li>
<li>
<a class="" href="#tab3">
<span>tab three</span>
</a>
</li>
</ul>
</div>
</div>
<hr>
</header>
<div class="tab-content">
<div id="tab1" class="tab--active">
<section class="container">
<h2> content of tab 1</h2>
<hr>
</section>
</div>
<div id="tab2" class="tab--inactive">
<section class="container">
<h2> content of tab 2</h2>
</section>
</div>
<div id="tab3" class="tab--inactive">
<section class="container">
<h2> content of tab 3</h2>
</section>
</div>
</div>
</section>
The <a> elements in questions have no siblings. The containing <li> elements do.
Target those — and their descendant <a> tags — instead, with:
jQuery(this).parent().siblings('li').find('a').removeClass('active');
Your each_tab query can be replaced with:
jQuery('.tab-content > div').not(currentAttrValue).
hide().
addClass('tab--inactive').
removeClass('tab--active');
jQuery(currentAttrValue).
show().
addClass('tab--active').
removeClass('tab--inactive');
You're selecting the <a> tags, then calling jQuery(this).siblings(). But the <a> tags don't have any siblings; it's their parents (the <li> tags) that have siblings. You should be calling jQuery(this).parent().siblings(), instead.
How can i amend this code please so that the buttons change on the active. It's getting soemwhere with toggleClass but the button that was formerly active remains active.
<script type="text/javascript">
jQuery(function(){
jQuery('#showall').click(function(){
jQuery('.targetDiv').hide();
});
jQuery('.showSingle').click(function(){
jQuery('.targetDiv').hide();
jQuery('#div'+$(this).toggleClass( "greenactive"
).attr('target')).show();
});
});
</script>
my button code
<ul class="choose">
<li><a class="showSingle" target="1">Email Order</a></li>
<li><a class="showSingle" target="2">Order and Pay Now</a></li>
</ul>
the divs
<div id="div1" class="targetDiv" style="display:none">
content
</div>
<div id="div2" class="targetDiv" style="display:none">
content
</div>
style
a.greenactive {background:green}
use removeClass() before addclass()
$('.showSingle').click(function () {
$('.targetDiv').hide();
$('.showSingle').removeClass('greenactive');
$(this).addClass("greenactive")
$('#div' + $(this).attr('target')).show();
});
a.greenactive {
background: green;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="choose">
<li>
<a class="showSingle" target="1">Email Order</a>
</li>
<li>
<a class="showSingle" target="2">Order and Pay Now</a>
</li>
</ul>
<div id="div1" class="targetDiv" style="display:none">content1</div>
<div id="div2" class="targetDiv" style="display:none">content2</div>
You just need to call removeClass() on all the .showSingle elements before toggling the class on the one which raised the event:
$('.showSingle').removeClass('greenactive');
Working example
How can I toggle the subnav for each item, and if one is open, hide the open one to show the current one? If there are none shown, just toggle. If you click one and show subnav then and click another hide previous and show current.
Here is my html -
<header>
<div class="content-wrapper">
<div class="user-menu-wrapper">
<div class="hsn-logo"></div>
<div class="user-greeting-wrapper">
<div class="user-greeting">Hi, Abraham</div>
</div>
<div class="user-menu">
<ul class="user-menu-items">
<li>#Html.ActionLink(" ", "Index", "Home", new { #class = "my-account" })</li>
<li>#Html.ActionLink(" ", "Index", "Home", new { #class = "my-favorites" })</li>
<li>#Html.ActionLink(" ", "Index", "Home", new { #class = "my-bag" })</li>
</ul>
</div>
</div>
<div class="hsn-nav-wrapper">
<div class="hsn-nav">
<ul class="hsn-nav-items">
<li style="width: 25%">
<a class="shop" href="#">
<span class="hsn-nav-item-wrap">
<span>SHOP</span><span class="drop-down-arrow"></span>
</span>
</a>
</li>
<li style="width: 25%">
<a class="watch" href="#">
<span class="hsn-nav-item-wrap">
<span>WATCH</span><span class="drop-down-arrow"></span>
</span>
</a>
</li>
<li style="width: 25%">
<a class="play" href="#">
<span class="hsn-nav-item-wrap">
<span>PLAY</span><span class="drop-down-arrow"></span>
</span>
</a>
</li>
<li style="width: 15%">
<a href=""><span class="hsn-search-icon"></span>
</a>
</li>
</ul>
</div>
<br class="clear" />
</div>
</div>
</header>
<subnav id="shop" class="shop-subnav">
<div class="hsn-subnav-wrapper">
<div class="hsn-subnav">
<div class="hsn-subnav-left">
<ul>
<li>SubnavItem</li>
<li>SubnavItem</li>
<li>SubnavItem</li>
<li>SubnavItem</li>
<li>SubnavItem</li>
<li>SubnavItem</li>
<li>SubnavItem</li>
<li><span class="hsn-subnav-callout">Deals</span></li>
</ul>
</div>
<div class="hsn-subnav-right">
<ul>
<li>SubnavItem</li>
<li>SubnavItem</li>
<li>SubnavItem</li>
<li>SubnavItem</li>
<li>SubnavItem</li>
<li>SubnavItem</li>
<li>SubnavItem</li>
<li><span class="hsn-subnav-callout">Clearance</span></li>
</ul>
</div>
</div>
</div>
</subnav>
<subnav id="watch" class="watch-subnav">
<div class="hsn-subnav-wrapper">
<div class="hsn-subnav">
<div class="hsn-subnav-left">
<ul>
<li>SubnavItem2</li>
<li>SubnavItem2</li>
<li>SubnavItem2</li>
<li>SubnavItem2</li>
</ul>
</div>
<div class="hsn-subnav-right">
<ul>
<li>SubnavItem2</li>
<li>SubnavItem2</li>
<li>SubnavItem2</li>
<li>SubnavItem2</li>
</ul>
</div>
</div>
</div>
</subnav>
Here is my Jquery / JS -
$(document).ready(function () {
$('ul.hsn-nav-items li a').click(function () {
var navitem = $(this).attr('id')
, id = $(this).attr('class')
, subnav = $('subnav.' + id + '-subnav');
$('a.selected').not(this).removeClass('selected');
$(this).toggleClass('selected');
$('#'+id).toggle();
});
});
Just glancing through your html - you have duplicate IDs. Your 'a' that links to 'play' also has an ID of 'play' - that element will be selected, not the subnav!
Also, two of your links are classed watch, none shop.
The simplest way to approach this is to hide all the <subnav> on each click. All your existing code will work just fine which already takes care of toggling the relevant <subnav>.
var $subNavs = $('subnav');
$subNavs.hide();
$('ul.hsn-nav-items li a').click(function () {
$subNavs.hide();
var navitem = $(this).attr('id')
, id = $(this).attr('class')
, subnav = $('subnav.' + id + '-subnav');
$('a.selected').not(this).removeClass('selected');
$(this).toggleClass('selected');
$('#'+id).toggle();
return false;
});
I also added a return false; to stop the default click event on the <a> being executed, which could result in a page load since href="#".
That said, <subnav> is a non-standard element and you would be better off using a simpler markup to describe the data. It may also prove useful to give the each subnav a common class which makes finding them via jQuery simpler.
I have also made a small demo using the following simplified code
HTML
<a class="shop" href="#">
<span class="hsn-nav-item-wrap">
<span>SHOP</span><span class="drop-down-arrow"></span>
</span>
</a><br/>
<a class="watch" href="#">
<span class="hsn-nav-item-wrap">
<span>WATCH</span><span class="drop-down-arrow"></span>
</span>
</a><br/>
<a class="play" href="#">
<span class="hsn-nav-item-wrap">
<span>PLAY</span><span class="drop-down-arrow"></span>
</span>
</a>
<div id="shop" class="shop subnav">
shop
</div>
<div id="watch" class="watch subnav">
watch
</div>
<div id="play" class="play subnav">
play
</div>
JavaScript
var $subNavs = $('.subnav');
$subNavs.hide();
$('a').click(function () {
var $subNavToToggle = $('#' + ($(this).attr('class').split(' ')[0]));
var doToggle = $subNavToToggle.is(':not(:visible)');
$subNavs.hide();
$('a.selected').not(this).removeClass('selected');
$(this).toggleClass('selected');
$subNavToToggle.toggle(doToggle);
return false;
});