How to revert to original CSS? - javascript

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

Related

Hide Aria label with css or javascript

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>.

Overriding css elements on responsive issue

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.

Change CSS value dynamically with jQuery

I have a div:
<div class="badger-left"></div>
This CSS:
/* Change style dynamically according to the bg-color attribute added to the div from jQuery */
.badger-change:after {
background-color: attr(bg-color);
}
This jQuery to add an attribute and a class:
$('.badger-left').addClass('badger-change').attr('bg-color','red');
Since jQuery can't do :after like in CSS, I thought of this way, but it's failing. What should I try?
Thanks
Edit: The color would change dynamically from jQuery, it won't always be red.
So, you can't pass it in to a color value because it will be interpreted as a string instead of a reference. You can pass in the content value to prove this point. On that note, you'll need to give your :after some layout, either with content or with some display or dimensions.
Here is a hacky workaround. I would personally refactor this to not use the pseudo style, but this will work with your current implementation:
function addStyle(color) {
$('<style>.badger-left:after { background-color: ' + color + ';</style>').appendTo('head');
}
// example addStyle('red');
Working Demo: http://jsfiddle.net/3qK2G/
How about just changing the class of .badger-left? So do something like this:
$('.badger-left').addClass('badger-red')
$('.badger-left').addClass('badger-blue')
with css like this:
.badger-red:after {
background-color: red;
}
.badger-blue:after {
background-color: blue;
}
what you can do is to set background-color in .badger-change and have .badger-change:after inherit this value.
In .badger-change you need to set a background-color and hide it width a gradient over it.
DEMO (hover the div to see it in action)
DEMO 2 only change background-color without switching classes.
You can think of other method with inherit , like a background image of 1 pixel set hundreds of pixel away from screen in parent container and setted as repeat in pseudo-element.
Establishing a color in your CSS prior to it being added would do the trick. Then changing that classes color later would change the badger-left with the new class badger-change
CSS
/* Change style dynamically according to the bg-color attribute added to the div from jQuery */
.badger-change {
background-color: red;
}
jQuery
$('.badger-left').addClass('badger-change'); // As soon as we're loaded add badger-change class
$('#button').click(function(){ // When example button is clicked
$('.badger-change').css('backgroundColor', 'blue'); // change badger-change background to blue
});
Here we are using a button for an example of changing the color.
HTML
<div class="badger-left">Hello World</div>
<input type="button" id="button" value="Change it" />
Some example content for badger-left for example.
When the page loads badger-left is given the new class badger-change with the BG being red. Then the button fires the jQuery to change that classes BG color to blue.
JSFiddle Example

Darken Background - Without affecting elements itself. (Overlay?)

I want to darken my background. Normally, its as simple as putting an overlay with a lower z-index than the most front element like seen here:
(source: jankoatwarpspeed.com)
What I want to achieve now is to make the elements behind the overlay STILL be clickable, selectable and so on.
In this example, the links should be clickable, and the text above should be selectable, but STILL be this dark.
I guess I cant archive this with pure CSS, what would be your solution?
Thanks
Just disable pointer events on your overlay:
pointer-events: none;
Example:
http://codepen.io/anon/pen/ebcdz
See this fiddle.My technique is to add the same elements to the overlay div and to set the color of text of the href text to the background color of overlay so that it appears invisible.See this fiddle.
http://jsfiddle.net/5Ux5t/1/
CSS for href within overlay div to make it invisible
#overlay a{
color:black;
}
Actually there are links in the overlay too.I just added the above CSS to make them invisible.See this:
http://jsfiddle.net/5Ux5t/

Div type="hidden" + Not hided

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;
}

Categories

Resources