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";
Related
I'm using JavaScript to hide and show some elements onclick events
Using this code
function showPreOne() {
document.getElementById('SecandModalFilter').classList.add('d-none');
document.getElementById('FirstModalFilters').classList.add('d-none');
document.getElementById('colocation').classList.add('d-none');
document.getElementById('coloc-row').classList.add('d-none');
document.getElementById('preFirstModalFilter').classList.remove('d-none');
document.getElementById('FirstModalFiltersa').classList.add('d-none');
}
I don't think this is the correct way! ? specially if I have a very large page with a lot of tabs and elements ?
Thank you
You could add a class on all the element that can be hidden (I assume you are handling a tab system), and just show the one you want to be visible:
function showPreOne() {
document.querySelectorAll('.tab').forEach(elt => elt.classList.add('d-none'))
document.querySelector('#SecandModalFilter').classList.remove('d-none');
}
Otherwise, your current method is not wrong per-say.
If the class is display: none, there's nothing wrong with that approach. Although the code would be more maintainable if you managed the add/remove elements with arrays of ids instead of doing it line by line.
Your approach can be a bit better, if you are showing/hiding elements I suggest you to use the toggle functionnality.
This way you can use only one function that will manage your click event and hide/show your elements, just be sure that the initial state (d-none class present or not) is correct :
function showHide() {
document.getElementById('SecandModalFilter').classList.toggle('d-none');
document.getElementById('FirstModalFilters').classList.toggle('d-none');
document.getElementById('colocation').classList.toggle('d-none');
document.getElementById('coloc-row').classList.toggle('d-none');
document.getElementById('preFirstModalFilter').classList.toggle('d-none');
document.getElementById('FirstModalFiltersa').classList.toggle('d-none');
}
More informations here Toggle specification
I want to toggle(hide/show) an element when a button is being pressed. I have two ways as to implement this:
Find the element according to its class name, e.g $('.my-content')
Find the element according to its relevant DOM position towards the button, e.g. $('#my-button').parent().next().next().next()
However, none of the above seems to me very reliable since in case someone changes the HTML code, the above approaches should not work. Is there something more reliable I am missing?
If it's a specific element, supply it with an Id value and use that
to find it.
If it's a TYPE of element, use a class name.
Other than that, there's no real conventions. Just try and make sure that somebody reading your code understands what is going on.
A very good practice is to decouple HTML, CSS and JS.
When binding javascript to DOM elements you should use javascript selectors.
Basically classes with some custom prefix (like js-) which will be used only for javascript purposes (not css style).
So whenever the DOM tree structure or the CSS class names are changed, you can still have your working JS selector
HTML
<div class="my-content js-toggle-element"></div>
JS
$('.js-toggle-element')
CSS
.my-content{ ... }
Plus, using Javascript Selectors:
makes HTML highly readable: you can easily find out what will happen to that element with that js class
allows you to easily apply/disapply that behaviour also to other elements in the future, simply by adding/removing that class in your HTML and without affecting CSS at all
<div class="my-content js-toggle-element"></div>
...
<div class="another-content-to-toggle js-toggle-element"></div>
Using jQuery will be much easiest way. Like this -
$( ".target" ).toggle();
The matched elements will be revealed or hidden immediately, with no animation, by changing the CSS display property. If the element is initially displayed, it will be hidden; if hidden, it will be shown.
Reference - jQuery Toggle
If the class or the position of the element in DOM is changing then you can try
selecting it with the inner text
$("button:contains('buttontextgoeshere')")
I've been trying to create a grid using
display:inline=block
I need to style every last element of every line/row differently. I tried
nth-child
nth-of-type
However, when I use that, it gets mixed up with my other grids. So how do I do it without adding new classes?
As far as i've seen from your code, you cannot use nth-child to achieve your goal. I will try to explain with an example:
you want the 4th and the 8th child of the section class="four" to be coloured red. In order to use nth-child or nth-of-type, you have to reference to children starting from their parent, i.e. body. So it's difficult to say what number in the list of body's children are the 4th and the 8th children of section class="four", and it's not flexible at all.
I think you are using it in the wrong way, something like section.four:last-child, which is not correct. Please check: w3schools link
Furthermore, nth-child and nth-of-type cannot be used with a selector but only with an element, so no way to do something like .four:nth-child (in the case you make a div with class="four" outside your sections).
So the only way, without adding more classes is jquery, like this:
$('.four').last().css('background-color', 'red');
In CSS3, if you associate every nth-child with a class of some type and every nth-of-type with another class use can style each one differently.
For instance,
<html>
<div class="nth-child">
//some code
</div>
<div class="nth-of-type">
//some code
</div>
</html>
Then in you CSS file you would do something similar to this:
.nth-child
{
//style rules
}
.nth-of-type
{
//style rules
}
I hope this is what you were looking for, without a posted example it is kinda hard to understand what you exactly mean. But if you want to us JS for this then you would create a JS function
obtain all elements in your page using "var elements= document.getElementsByClassName("nth-child")"
the you would loop through "elements.length" setting each element style to "none"
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