Hiding a div if another contains a specific string in jQuery - javascript

I want to check if an element on page contains a text phrase, it shows a second hidden container? For example, '#product-description' contains 'best gift' then a hidden container '#best-gift-graphic' over the product image is shown. I've found answers that skirt around this, and tackle parts, but I can't seem to put it all together.
I've found solutions that hide the element that contains the text:
<script type="text/javascript">
$(document).ready(function () {
$("div p:contains('text')").parent('div').hide();
});
</script>
I need to apply the show/hide to a second container, not the container with the target phrase in. Really new to jquery and just want to understand the syntax. Thanks in anticipation.

You need to check the length to see if any items exist, you can then use .hide() to hide your corresponding element if there is any:
if ($('#product-description:contains("best gift")').length) { // check if this exists
$('#best-gift-graphic').hide(); // hide this
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="product-description">best gift</div>
<div id="best-gift-graphic">this is hidden</div>

Related

Show nth:div 1, when i click nth: anchor

Good Evening helpful people of stackoverflow,
I want to hide the **clicked ** .project-tile-normal and show the appropriate description div .detail-tile.
I read through some articles regarding my question, but i run into a logical brickwall in my head. Needlessly to say, i'm a beginner in jquery and maybe there is a better way to do that, i just didn't find it.
Here's what i found so far as "answers":
Hide Children, Show nth Child - the closest answer to my question
Show and Hide Several Links - this solution makes my head dizzy
My HTML consists of two rows of divs, similar to that simplified representation:
<div class="wrapper">
<div class=".project-tile-normal">some pictures</div>
<div class=".project-tile-normal"></div>
<div class=".project-tile-normal"></div>
<div class=".detail-tile">description</div>
<div class=".detail-tile"></div>
<div class=".detail-tile"></div>
</div>
This is what i have so far coded:
JQUERY
$(document).ready(function(){
$('.project-tile-normal').on("click", function() {
if( $(this).hasClass("active") ) {
$(this).fadeOut(150);
} else {
var itemid = '#div' + $(this).attr('target'); // my own try to get the Element of the divs.
console.log(itemid);
$(this).addClass("active");
$(".detail-tile").removeClass("hidden");
}
});
$('button').on("click", function(){
$(".detail-tile").addClass("hidden");
$(".project-tile-normal").fadeIn(150);
$(".project-tile-normal").removeClass("active");
});
});//document ready
Should i put all the Items in an array and then count it out? Thanks for your help in advance.
First of all remove the . before the class attribute since there is no need of it. As per the jQuery code there is no need of it. If you are using . you need to escape it using \., in the jQuery selector it may be like $('.\\.project-tile-normal') .
Now you can do the rest using index() and eq(),
$('.project-tile-normal').click(function() {
// you can use toggle if you want toggle between the show and hidden
// else use show method
$('.detail-tile').eq($(this).index()).toggle();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="wrapper">
<div class="project-tile-normal">some pictures</div>
<div class="project-tile-normal">1</div>
<div class="project-tile-normal">2</div>
<div class="detail-tile">description</div>
<div class="detail-tile">1</div>
<div class="detail-tile">2</div>
</div>
Firstly note that your class attributes in the HTML should not contain any . characters.
With regard to the JS, you can link elements by index by retrieving the index() from the clicked element then selecting the matching required element using eq(), something like this:
$('.project-tile-normal').click(function() {
var index = $(this).index();
$('.detail-tile').hide().eq(index).show();
});
Working example
You're declaring your classes wrong in your HTML. It'll be project-tile-normal instead of .project-tile-normal. On doing that you'll be finding your events working. Then you can actually follow those tutorials to pull off your desired behavior on project title click.

How to use not selector in jquery with multiple classes as one class

I have in my HTML div with one class tag and one with 2 classes that look like one class.
<body>
<div class="ad-container left">
<div class="ad-container">
<div class="mobile-ad larger">
<div class="mobile-ad">
</body>
Whats the proper way to use the not selector in jQuery to support all 4 div's and not ignore anything else in body.
I currently have
$('body:not(.ad-container,.ad-container.left,.mobile-ad.larger,.mobile-ad)')
It seems to work without any problems.
But something tells me I need to split the left and larger classes into seperate elements by comma.
Something like this
$('body:not(.ad-container,.left,.mobile-ad,.larger)')
Here is the full code:
$(function () {
$('body:not(.ad-container,.ad-container.left,.mobile-ad.larger,.mobile-ad)').on('selectstart', function (event) {
event.preventDefault();
});
});
It's used to disable the left double click selection but still be able to click on ads.
Which one should I use?
I ended up using
$('body :not(.ad-container, .mobile-ad)')

Select text in the last div of class

I have some contenteditable divs with the same class, the div is dynamically created so I don't know how many there are.
<div class="scale1" onclick="document.execCommand('selectAll',false,null)" contenteditable>0</div>
<div class="scale1" onclick="document.execCommand('selectAll',false,null)" contenteditable>0</div>
<div class="scale1" onclick="document.execCommand('selectAll',false,null)" contenteditable>0</div>
I want the text in the last one to be selected (like if you hold the left mouse button down over the text) with a button
The obvious way in jquery:
$(".scale1:last").click();
Doesn't work, it selects the hole page.
I also thought about ways in javascript like Selection.selectAllChildren and Selection.addRange() but i have no elegant way of knowing the last div
How to make text selection checkout here
To reach your goal - replace ID selection with following code:
var query = document.querySelectorAll(".scale1"),
text = query[query.length-1];
Try:
$('.scale1:last').text()
or
$('.scale1').last().text()
Either would work, even for dynamically added elements.
DEMO

jquery to toggle a label

How can I get the label to toggle show/hide? Below is my code and currently it is also displaying show. I would like it to toggle from show to hide and from hide back to show. when show is displayed the div will be hidden but when show is clicked the label will switch to hide and the div will be displayed and when hide is clicked the label will go back to show and the div will be hidden
<html>
<head>
<title>jQuery test page</title>
<script type="text/javascript" src="../scripts/jquery-1.4.2.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#clickMe").click(function() {
$("#textBox").toggle();
});
});
</script>
</head>
<body>
<label id="clickMe">Show</label>
<br />
<div id="textBox" style="display: none">This text will be toggled</div>
</body>
</html>
If I read your question right, then I think the following would work:
$('#clickMe').toggle(
function(){
$('#textBox').show();
$('#clickMe').text('hide');
},
function(){
$('#textBox').hide();
$('#clickMe').text('show');
});
JS Fiddle demo.
If you use the attribute for, to define the element to which the label 'connects', and also use class-names, then this can be made more generic and useful:
$('.clickMe').toggle(
function(){
$('#' + $(this).attr('for')).show();
$(this).text('hide');
},
function(){
$('#' + $(this).attr('for')).hide();
$(this).text('show');
});
JS Fiddle demo.
Bear in mind, though, that the label element is used to associate information with specific input elements, as opposed to a generic identifier for arbitrary elements. Ideally, you should use a span, or div, element rather than a label for this purpose.
If you do switch to using non-label elements, then the for attribute shouldn't be used either, in its place I'd suggest (assuming the same connection between what's currently the label and the div) using a custom data-* attribute (such as data-for) to identify the relationship.
Note, also, in the above -final- example, the use of the class instead of the id selector, since an id must be unique within the document.
Use the Toogle with callback feature: http://api.jquery.com/toggle-event/
Then you can set the text for the label in each callback.
The answer here talks about the different toggle api calls.
add the code below before or after your toggle.
http://jsfiddle.net/UuADb/
label = $(this);
if(label.html()=="Show"){
label.html('Hide');
}else{
label.html('Show');
}

jQuery: Hide div with no ID

How can I hide a div with no ID? I have an application which creates few stickies. Some of them have no ID and some of the do have. How can I hide the ones with no ID?
The position is not always the same.
This is what I get in the HTML where I want to hide the last one.
Is it possible I can hide the one with no ID? Note that the rest which have ID's, is a number generated randomly.
Thanks alot.
Try this:
$("div.sticky:not([id])").hide();
The main idea is to use :not([id]) selector with element selector.
fiddle: http://jsfiddle.net/57uQ8/
http://sandbox.phpcode.eu/g/d2956/2
<script>
$(function(){
$("div.sticky").each(function(b){
if (!$(this).attr('id')){
$(this).hide();
}
});
});
</script>
will probably do it, assuming you want to show ONLY divs with no IDS and divs with class sticky

Categories