jQuery hide an element if another element contains text - javascript

I have a div that I wish to hide using jQuery, only if I'm in a certain category, so I want to base the hiding of the div based on my breadcrumbs. I think I have the jQuery right, but it isn't hiding the div?
<div class="breadcrumbs">
<ul class="nav">
<li>Home</li>
<li>Tshirts</li>
<li>Mens</li>
</ul>
</div>
<div class="hide-me">I want to hide</div>
<script type="text/javascript">
jQuery(window).ready(function(){
if(jQuery('.breadcrumbs ul.nav li:nth-child(2)').text() == "Tshirts"){
jQuery('.hide-me').hide();
}
});
</script>

jQuery('.breadcrumbs ul.nav li:nth-child(2)').text()
Is strange, why are you hardcoding this so much? You're specifically asking for that list, and only if it is within a very specific tree.
It would be easier if you just changed your HTML
<div class="breadcrumbs">
<ul class="nav">
<li>Home</li>
<li id="secondlist">Tshirts</li>
<li>Mens</li>
</ul>
</div>
and then
$("#secondlist").text() == "Tshirts";

Check if
$('.breadcrumbs ul.nav li:nth-child(2)').text()
is really getting the value, I think that is the principal problem.

Related

jQuery - known class of child: find next descendent of parent in top (from parent ID)

I've been searching a lot for this, without any solution so far. As you might also have seen the topic title might be a little hard to interpret and that's because I'm not quite sure how to explain it shortly.
The problem
Looking at the HTML below, I know the class of the last element called "active" and this element is chosen dynamically in jQuery, based on which site the visitor is on currently - i.e. different elements has this class depending on the site. On another site the li with class first-sub-li could have the class active (or for that matter the li with class first). This class is, as said, added dynamically based on the site with jquery. From here on I wish to identify the parent of the element with active which is a direct descendent of top-parent and add a class called active-parent to this. I.e. in the case below i wish to add the active-parent class to the li with class second.
EDIT: Please note that the "depth" of the list can vary, therefore also requiring a "dynamic" approach to picking out the parent. I completely forgot this in the initial writing.
<ul id="top-parent">
<li class="first">
<ul class="first-sub-ul">
<li class="first-sub-li"></li>
</ul>
</li>
<li class="second">
<ul class="second-sub-ul">
<li class="second-sub-li">
<ul class="second-sub-sub-ul">
<li class="second-sub-sub-li active"></li> <!-- Here -->
</ul>
</li>
</ul>
</li>
</ul>
So far I've tried the following jQuery without succes as it doesn't identify it.
EDIT 2: This actually does work, but initially it didn't as it apparently was called before the class was loaded, despite appearing later in the javascript document. Wrapping it in a $(window).on("load", function() solves the problem as shown below.
$(window).on("load", function() {
$(".active").closest("#top-parent > li").addClass("active-parent");
});
The original code was just $(".active").closest("#top-parent > li").addClass("active-parent");
You can start traversing up with .parent(), it will excluding the self li.
$(".active").parent().closest("li").addClass("active-parent");
You can use :has() selector
$('#top-parent > li:has(.active)').addClass("active-parent");
$('#top-parent > li:has(.active)').addClass("active-parent");
.active-parent {
background-color: red
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="top-parent">
<li class="first">
<ul class="first-sub-ul">
<li class="first-sub-li"></li>
</ul>
</li>
<li class="second">
<ul class="second-sub-ul">
<li class="second-sub-li">
<ul class="second-sub-sub-ul">
<li class="second-sub-sub-li active"></li>
<!-- Here -->
</ul>
</li>
</ul>
</li>
</ul>
I think this is what you're looking for. Find all li which are direct descendants of topmost-parent and filter that for the one which has a child .active. Apply the class.
$('#top-parent > li').filter(function(e){
return $(this).find('.active').length>0;
}).addClass("active-parent");
.active-parent{background-color:red}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="top-parent">
<li class="first">
<ul class="first-sub-ul">
<li class="first-sub-li">1.1</li>
</ul>
</li>
<li class="second">
<ul class="second-sub-ul">
<li class="second-sub-li active">2.1</li> <!-- Here -->
</ul>
</li>
</ul>

Why is the jQuery function showHide() undefined?

I'm really new at trying to use jQuery, so please forgive me for asking what is likely a simple question. Perhaps it isn't even related to jQuery, but anyway, here's the scenario. I'm trying to put in a hidden div which I only want to show up when the user hovers their mouse over the Learner's anchor tag on the page. I've started with only one anchor tag, to get it working first before implementing the rest of them. I've downloaded a jQuery library and included a reference to it, so here's some of what I've got in my page's head section:
<script src="js/jquery-1.11.1.js" type="text/javascript" ></script>
<style type="text/css">
#navcontainer ul { list-style-type: none; }
#navcontainer ul li { display: inline; }
#navcontainer ul li a
{
text-decoration:none;
padding: .2em 1em;
}
</style>
Next I've defined an unordered list, using the styling above to make it horizontal, and I've got a hidden div after it, which I want to show when the user moves their mouse over the first anchor in the unordered list. Here's the relevant HTML from within the body tag:
<body>
<div id="navcontainer">
<ul>
<li>Home</li>
<li>Learners</li>
<li>Teachers</li>
<li>Businesses</li>
<li>Contact Us</li>
</ul>
<div id="dropdown1" style="visibility:hidden;">
<ul>
<li>Description A</li>
<li>Description B</li>
<li>Description C</li>
</ul>
</div>
<!-- other HTML code -->
</body>
However, when I run this from within the browser (IE11) nothing happens. Using the F12 web developers tools built into IE11 I learn that it giving an error of "showHide is undefined". Why is it doing that? The showHide() function is most certainly in the jquery-1-11.1.js file, which most certainly is in my js folder. What have I done wrong, or failed to take into account?
jQuery works kinda different than that. You have to make it look like this:
$("#dropdown1").toggle()
You better make a javascript file and separate the JS from the HTML:
HTML:
<body>
<div id="navcontainer">
<ul>
<li>Home</li>
<li>Learners</li>
<li>Teachers</li>
<li>Businesses</li>
<li>Contact Us</li>
</ul>
<div id="dropdown1" style="visibility:hidden;">
<ul>
<li>Description A</li>
<li>Description B</li>
<li>Description C</li>
</ul>
</div>
<!-- other HTML code -->
</body>
The JS
$(function(){
$("#navcontainer li a").click(function(){
if( this.href.indexOf("#") != -1 ) {
$( $(this).attr("href") ).toggle(); // $( "#container1" )
}
});
});
What this does is on the navcontainer li click, we make a handler, which does something if it contains a #. Then we select that element #container1 which is in the href, also is the selector for the element which we want to show. And we toggle that element.
There is no such function as showHide you could use toggle() or show() or hide()
in you current scenario uou would couple them with $(this). or your chosen selector.
As an example of targetting a particular element with jQuery we have added the class hover-learners and target it with the selector below.
HTML:
<div id="navcontainer">
<ul>
<li>Home
</li>
<li>Learners
</li>
<li>Teachers
</li>
<li>Businesses
</li>
<li>Contact Us
</li>
</ul>
<div id="dropdown1">
<ul>
<li>Description A
</li>
<li>Description B
</li>
<li>Description C
</li>
</ul>
</div>
Add the below javascript as a file or within <script type="text/javascript"> code here</script> after including your jQuery library file.
Javascript:
// wrap everything in jQuery's ready function to make sure the page has fully loaded before executing the javascript
$(document).ready(function () {
//select learners and apply mouseover event
$('.hover-learners').on('mouseover', function () {
$('#dropdown1').show();
});
//select learners and apply mouseout event
$('.hover-learners').on('mouseout', function () {
$('#dropdown1').hide();
});
});
Also since the show and hide methods manipulate the display CSS property I have added
CSS:
#dropdown1 {
display:none;
}
and remove the inline style="visibility:hidden" from the #dropdown1
Working demo here: http://jsfiddle.net/robschmuecker/J6U7d/

How to slideToggle() parts of menus?

Suppose I have a list menu:
<html>
<body>
<div id="menu">
<ul>
<li>News
<ul class="inner_menu">
<li>Hi</li>
</ul>
</li>
<li>Bumble
<ul class="inner_menu">
<li>Hellos</li>
</ul>
</li>
<li>Scratch</li>
<li>Snap</li>
</ul>
</div>
</body>
</html>
And I want all unordered lists be hidden but slidedown/up (jquery slideToggle()) if you hover above the 'li' element in which they are nested. I am having problems with selecting the right elements. E.g. I want to slideToggle() .inner_menu with 'Hi' when I hover above "News".
So far I have been able to slideToggle() all of the .inner_menus or get different unwanted results. I think I can just add bunch of different 'id's but that would be just so messy, considering two similar menus with a lot of inner_menus.
You could use hover in/out handler:
DEMO jsFiddle
$('li').hover(function(){
$(this).children('ul').slideToggle();
});

How can I get toggle to collapse?

I have a working toggle function that expands and collapses but my list when expanded is very long and I wanted to put a "Close" link at the bottom to enable collapse so my users don't have to scroll to top to click and collapse. Any ideas how I can modify this code to expand it's functionality for my purposes?
<script language="javascript">
$(function(){
$(".formname").toggle(function(){
var id=$(this).attr('id');
$("#form"+id).fadeIn('slow');
},function(){
var id=$(this).attr('id');
$("#form"+id).fadeOut('slow');
});
});
</script>
my html looks like:
<ul>
<li>My Expanding/Collapsing Data</li>
<div style="display:none;">
<ul>
<li>Content</li>
</ul>
</div>
</ul>
if I insert the same link li at the bottom before the closing ul the user has to click it twice to collapse. I'd prefer a single click solution.
<ul>
<li>My Expanding/Collapsing Data</li>
<div style="display:none;">
<ul>
<li>Content</li>
<li>Close</li>
</ul>
</div>
</ul>
If you use toggle() event on formxyz, the new close action will break the original rule, therefore sometimes you have to click formxyz twice to show content.
So use click() event with fadeToggle() action on formxyz. It will show content while it's hiding.
Then add a class on all "close", use parents method to find it's parents div (it should be the content div), then hide it.
The html:
<div style="background-color: gray">
<li>My Expanding/Collapsing Data</li>
<div id="formxyz" class="content" style="display:none">
<ul>
<li>Content</li>
<li>Close</li>
</ul>
</div>​
</div>
The js file:
$(function(){
$(".formname").click(function(){
var id=$(this).attr('id');
$("#form"+id).fadeToggle('slow').focus();
});
$(".closeform").click(function(){
$(this).parents("div.content").fadeOut('slow');
});
});
​
OR Check emulate code on jsFiddle. It's executable.
<li>My Expanding/Collapsing Data</li>
<div style="display:none;">
<ul>
<li>Content</li>
<li>Close</li>
</ul>
</div>
An id should be used for a single element. Never ever use the same id for more elements.

If a <li> is clicked, hide the inner div

My DOM looks like this:
<li id="li1">
<div class="c1"></div>
</li>
<li id="li2">
<div class="c1"></div>
</li>
Using jQuery, if the first <li> is clicked, I want the inner <div></div> to be hidden.
$("li:first").click(function() {
$(this).children("div").hide();
});
You will run into problems when ID'ing 2 list items as the same ID. If you want the same CSS to apply to both, use classes instead.
this might work for you:
note: make sure you include the jquery.js, i was lazy and didnt put it in here.
<html>
<head>
<script type="text/javascript" language="javascript">
$(document).ready(function(){
$(".clickableLI").click(function(){
$(this).find("div").hide();
});
});
</script>
</head>
<body>
<ul>
<li class="clickableLI">
<div class="c1"></div>
</li>
<li class="clickableLI">
<div class="c1"></div>
</li>
<ul>
</body>
</html>
Having two identical IDs is invalid xHTML
Not sure about the exact jQuery syntax
but in sudo code would be something like:
li1 addEvent('click')
{
get child of li1, filter by class c1
set style on child(display, none)
}

Categories

Resources