I am trying to use the hasClass javascript element to see if it should make a div display none or keep it displayed as normal.
Here is the code snippet of what I currently have
if (!$('cool').hasClass('hot')) {
}
I want it to display none if it has class hot. What code would I use to do this?
EDIT: Alright so I have read the comments. I am not exactly sure how hasClass works but from what I have gathered it uses a html tag so it checks if it has a html tag.
I just want it to check if a div has the class "hot" that is will not appear.
Forget the if statement, just select only elements that match your condition in the first place.
jQuery('cool.hot').addClass('foo'); // Where .foo { display: none; }
NB: There is no <cool> element in HTML.
You could also use the :not() selector based on the OP's original premise -
(I'm assuming that 'cool' and 'hot' are classes in this example)
$('.cool:not(.hot)').css({'display':'none'});
You could also use the .not() method -
$('.cool').not('.hot').css({'display':'none'});
Related
I'd like to remove the following HTML:
Buy It
This HTML is added dynamically (not by me).
How is this done in jquery? Or is it better done in AngularJS?
i would solve this by using css..
.css-button {display: none !important}
since it is added dynamically you would need a trigger function or search repedetly for that special container -> slows down the page
//EDIT with jQuery if necessary
if you really want to do it with jquery, is it always a certain container where the button appears? you could do something like this:
function removeButton() {
$('.css-button').remove();
}
// Listen DOM changes
$('.theContainer').bind("DOMSubtreeModified", removeButton);
see here: http://davidwalsh.name/dom-events-javascript
You can use .remove():
$('.css-button').remove();
In this case you should use :contains to find the button, keep in mind that is a string search:
$( "a:contains('Buy It')" ).remove()
I have this element in my HTML page:
<a style="display:block;width:728px;height:90px;margin:0 auto;background:#EEE url('/_images/2011images/img_dotco_3.jpg') no-repeat top left; text-decoration:none;color:#000;" href="/domain-registration/dotco-overview.aspx?sourceid=bnrq2co728x90">
<span style="float:right;margin:5px 27px 0 0;width:110px;color:#FFF;text-align:center">
<span style="display:block;font-size:1em;text-align:center">NOW ONLY</span>
<strong style="display:block;font-size:1.6em;text-align:center"><!-- START TAG // Co_RegisterPrice_TLD -->
<span class="Tag_Co_RegisterPrice_TLD"><strong>$35.70</strong>/yr</span>
<!-- End TAG // Co_RegisterPrice_TLD --></strong>
</span>
</a>
I need to hide it with CSS or Javascript. CSS would be the best scenario but Javascript is OK as well.
The fact is that I cannot edit the HTML code at all, so I have no way to delete this item directly. Also this is not parent of any other HTML element, so I do not find an easy way to hide it with CSS.
Also I need to hide this A element even if the background image changes or the link changes, in fact it's not always the same.
I reported all the available HTML.
Here is an example http://subdir.co/help-center/default.aspx
It's the top banner there.
Let me know how to hide it from the page. Thanks.
Try with jQuery:
$('a[href^="/domain-registration/dotco-overview.aspx?sourceid"]').hide();
This hides the a tag with a href attribute starting with /domain-registration/dotco-overview.aspx?sourceid.
Use:
document.getElementById('yourElementId').display=none;
You can traverse the dom tree from the class "Tag_Co_RegisterPrice_TLD" to find the A tag which you can then hide.
If you need to do additional logic then you can access the text (e.g. price/title/url) before deciding to hide.
Use jQuery if raw javascript is to much for you.
Since you cannot change the HTML code, you can't add an identifier to the element in order to select and manipulate it.
But you can use jQuery to select the first 'a' element, and set the 'display' property to 'none'.
I think something like this should do:
$('a:first').css("display","none");
You could try it with css:
a[style][href] {
display: none !important;
}
i think adding class or making some rule for css selector woudn't work, because definition in attribute of the elements overrides another style definition.
It will be easy if you use some javascript library for dom manipulating for example jQuery.
after that you can write something like
$(".sCntSub3 > a").hide()
you can try finding element from browser console. It is easy way how to verify you choose right element
jsFiddle Classname Method DEMO
jQuery via Classname: In this method we "look inside" the anchor for clues.
$(document).ready(function () {
// To disable the line below, just comment it out just like this line is.
$('.Tag_Co_RegisterPrice_TLD').closest('a').hide();
});
jsFiddle ID Method DEMO
jQuery via ID: This time, we don't look inside since anything can change. We now use a div reference!
$(document).ready(function () {
// To disable the line below, just comment it out just like this line is.
// No matter the unique ID code in front of MasterUpdatePanel Div, it will always be matched.
$('[id$="MasterUpdatePanel"]').next('a').hide();
});
Shown here is a Firefox Screenshot of the HTML Page. Notice the Div ID contains ctl00_MasterUpdatePanel. The letters, numbers, and underscore in front of that may change, but not this keyword. Therefore, a match of the "ending part" of the id works!
I'm experimenting with a third party library written on top of jQuery.
I noticed, for a number of their widgets, that when your source says, for example,
<div id="myWidgetInst" class="their-widget-class-0" ... </div>
Firebug shows that the resulting DOM element reads:
<div id="myWidgetInst" class="their-widget-class-0 their-widget-class-1 ..." ... </div>
How do they do it? Many thanks.
it's probably jquery !
there's probably a function running adding classes to the elements
Not sure I fully understand your question but when looking at the "regular" source of the website, this source doesn't show any modifications to the DOM that happened due to javascript modifications. Firebug does show these updates.
using jQuery, you can add/remove classes simply by using .addClass("className") or .removeClass("className") function on the element you want to modify
They would add classes to the element with jQuery. For example, if the plugin's purpose was to hide all elements on the page (innovative and highly practical, I know), they could use the following:
$(document).ready(function() {
$("*").addClass("my-widget-made-your-element-invisible");
});
With the CSS:
.my-widget-made-your-element-invisible { display: none; }
The methods in which you can manipulate the class attribute in jQuery include the following:
$("#elem").addClass("a"); // adds the class "a" to elem
$("#elem").removeClass("a"); // removes the class "a" from elem
$("#elem").attr("class", "a"); // gives elem a complete class of "a"
$("#elem").attr("class", ""); // removes all classes from attribute
Newbie in javascript.. Need a little help.
I have a SPAN or IMG that I want to fadeOut using javascript. However nothing happens when I do this:
// HTML
<span id='test_one'>Span Text Here</span>
<img src='img_src_here' id='test_two'>
// JavaScript
$(test_one).fadeOut();
$(test_two).fadeOut();
But if I do this, it functions correctly:
// HTML
<div id='test_one'>Span Text Here</div>
// JavaScript
$(test_one).fadeOut();
Am I just making or a silly mistake or am I going insane?
ThanksCoulton
Assuming you're using jQuery, your selector is incorrect:
$('#test_one').fadeOut();
Note that it should be a string (so single or double quotes) and use '#' to select by id. Documentation of selectors can be found on the jQuery site.
This should work:
// HTML
<span id='test_one'>Span Text Here</span>
<img src='img_src_here' id='test_two'>
// JavaScript
$('#test_one').fadeOut();
$('#test_two').fadeOut();
Edit
As to why it works with the div but not the img or span, I'm not entirely clear but as #Steve pointed out, it is possible to reference elements by using their ids as global variables. However, this is non-standard behaviour and only some browsers (notoriously IE) perform this mapping of element ids to the global namespace. IE also allows fetching of named elements via getElementById()! See this and this. I would suggest not depending on this behaviour.
Firstly, which library are you using? jQuery? (The fadeOut() method is not built in to JavaScript.)
Try setting the CSS property of your <span> or <img> to display: block or display:inline-block. This should make the fade out work. The reason it works on your <div> element is that it is a block element by default. <span> and <img> elements are displayed inline by default.
You must use the selectors efficiently like this
for "id" use:
$('#myId').fadeOut();
for classes like this:
$('.myClass').fadeOut();
and so on....
In your styles add this:
span#test_one { display:inline-block; }
And of course:
$("#test_one").fadeOut();
The code you've provided will work only in IE.
I would call it a stupid mistake (we all make them), your selector should be $('#test_two')
Look at: http://jsfiddle.net/ku8sa/
I use a website, which shows information i have no use for, so i tried to hide some of it with Stylish, an addon for Chrome to insert custom CSS.
I will try to explain better.
<div class="splitscreenleft"> <div id="toplevel"
<div class="splitscreenleft"> <div id="coursesection"
I want to hide one of those. Everything above splitscreenleft is the same on both. So the only difference is the div id below.
I must somehow hide one of the two classes based on the name of the div below it i think.
Any solutions to this problem?
You should be able to do this either via CSS or JavaScript.
You probably don't even need to search the children out. You can probably just pick the first or second one that appears on the page and style that. To do via CSS, use the first-of-type selector - http://www.w3.org/TR/css3-selectors/#first-of-type-pseudo
div.splitscreenleft:first-of-type { display: none; }
To do this via JavaScript, you can find the parent object and then hide it:
document.getElementById("toplevel").parentNode.style.display = 'none';
You should be able to do it similarly in jQuery:
$(".splitscreenleft:has(#toplevel)").hide();
This can be accomplish by CSS, using structural pseudo-classes alone:
.parentClassName .className :nth-child(n) { display: none; }
Where n is the element you want to select. In your case you have two elements with the same class. To hide the first one, just replace n with 1, or 2 to hide the second one. You get the idea.
If you can't get access to jQuery with JS (haven't tried in chrome), you could always say
$('#topLevel').parent().hide();
the code below can change the class you defined in style sheet.
document.getElementById("testPara").className = "yourclass";