I want to hide an arialabel without modifying it so just adding some code in css or javascript.
I know that you can put display:none for a class but is there any similar options for labels ?
Here's the aria label I want to hide. It doesn't have any ID
// aria-label="Sign-up" href="/EN-CA/contact-sign-up/" title="Sign-up">
Sign-up
//
You should be able to use display: none or visibility: hidden for this but if it isn't working for some reason, there's a way to hide aria-labels.
Use aria-hidden="true".
For example, <p aria-hidden="true">Hidden Aria Label</p>.
Related
I have a mobile menu on responsive, which use a javascript to show all of the elements from the menu. It puts on my <ul> a css code display:block on the element. So on a specific screen in my case:
#media only screen and (max-width:980px){
ul {display:none}
}
If I want to override it with a display none, it doesn't work because the display:block it is inline. I tried to change it like this :
.myclass .myclass2 ul {display:none}
but still doesn't work. I do not want to touch the javascript. How can I override it ?
If you have an inline style as you said display:block the single why to override this from within a CSS file is by using !important. But that wont work in your case if you want to show the menu at a click of a button.
I would use 2 classes for this, one to show the menu and one to hide it, no inline CSS and no !important. On window.onload/document.ready event I would take the width of the document and if its greater than 980px I would add the hidden class to hide the menu, when user clicks the menu button I toggle the show class. The same thing for window.resize event.
Though text-overflow: ellipsis in css works properly in div, spans and etc it does not work properly in HTML select. Only the text overflow will be hidden from the select. But not ends with dots as the default behavior of text-overflow
Can anyone suggest any workarounds for this please ?
JsFiddle Exampleenter code here
Add
select, select option {
instead of
select
in your css
You had given style to only the select tag header and not the option tag
I have a Twitter button on the page using the widget. The button renders as it should unless I place it into a hidden container.
I would like to place the share button into a hidden container that only shows when clicked. I have all of the functionality working, however the Twitter button will not show if placed into a hidden container.
You could use the CSS tag display: none then remove the tag when you click the button and add the tag back whenever you are done sharing to Twitter.
Something like this:
HTML
<input type="button" class="clickMe" value="Click Me" />
<img src="img/twitter.png" class="twitterPic hideMe" />
CSS
Assuming you have a separate style sheet.
.hideMe { display: none;}
JavaScript
$(".clickMe").on("click", function () {
$(".twitterPic").removeClass("hideMe");
});
Here are some links to the JQuery pages to add and remove classes:
https://api.jquery.com/removeClass/
https://api.jquery.com/addClass/
You could try the following:
place the container outside the viewport by setting its left or
right property to sth like 5000px .container {left:5000px;}
take off the display:none css
rule that's causing the problem. This way the twitter code should be
able to fire properly when the page loads
then set the container's position by using
the offset() function when the user clicks on the button. This way
the container will show where you want it to
I have a div with a span inside (simplified).
<div class="divDash">
<span>XX</span>
</div>
Based on the below CSS, the span is initially hidden and shows only when you hover over the div.
.divDash {height:300px;width:300px;border:1px solid gray;}
.divDash span {display:none}
.divDash:hover span {display:inline}
Based on some user interaction, I need to hide the span using jQuery...
$('.divDash').children('span').hide();
And then, based on some other user interaction, I need to restore the original behaviour of the span. If I simply show the span again using $('.divDash').children('span').show(); then it is shown permanently and not just on hover.
How can I restore the original CSS behaviour so the span shows only on hover?
Instead of using show and hide, add/remove a specific CSS class that has the behavior you would want.
You can revert to the default behavior by setting display: ''
$('.divDash').children('span').css('display', '');
Demo: Fiddle
In my code, I have a div tag with type="hidden". I just don't want to show the div. If needed, I will show it using JQuery Show().
But, using this, my div is not hidden from view.
Edit:
Now I hide the div by using
<div style="visibility:hidden">XYZ</div>
If I need to show it again, how can I?
try using style instead of type
<div style="display: none;">content</div>
type="hidden"
is used only for hidden input textbox.
If you want to hide you div use :
style="display:none"
Or with JQuery hide your div with hide().
Use display: none to prevent the div from being displayed and layout space won't be reserved.
Use visibility: hidden to simply hide it (like 0% opacity), but the necessary space will be reserved.
If the DIV isn't absolutely positioned, "display:none" can crash the overall structure of the document.
You may use:
<div style="visibility:hidden"></div>
This will make the DIV invisible.
By using style="display:none" , can hide the div
Define a id for that element
To hide element in javascript
document.getElementById('elementId').style.display= 'none' ;
To hide element in javascript
document.getElementById('elementId').style.display= 'block' ;
There is another way. Let's say you have:
<div hidden>content</div>
In the css:
div[hidden] {
display: none;
}