Develop Reference

Alternative to display-toggle when I am not certain that the element uses display:block when visible?

I am working in a project where theer are many js procedures like the following:
if (show)
$('.some-element').css('display', 'block');
else
$('.some-element').css('display', 'none');
How can I achieve the same thing when I don't want to require that .some-element uses display: block; when visible?
.some-element might for example have been designed to use display: inline-block; or display: flex;.
Limitations:
I don't want the element to take up any space when hidden. For this reason I think that the popular methods visibility: none; and opacity: 0; would not work.
I don't want to save any state in js, for example to remember the original display property value.

Do it like this
if (show)
$('.some-element').css('display', '');
else
$('.some-element').css('display', 'none');
This code ($('.some-element').css('display', '');) will remove the inline display: none property , when it is not needed.

jQuery's already solved this problem for you with toggle, show, and hide:
$('.some-element').toggle(show);
or
if (show) {
$('.some-element').show();
} else {
$('.some-element').hide();
}

What I generally do is use a class for the hidden state, because you do know that when the element is hidden the display property should be none.
.whatever {
// normal rules
}
.whatever.hidden {
display: none;
}
Then you manipulate the visibility of the element by adding or removing the "hidden" class. Since your rules don't affect the visible rules for the element, it can be display: inline; or display: table-cell; or anything else.
This approach can get complicated when there are in-line "style" attributes; that's a reason I don't generally like those in my code.
Another alternative to using display is to give the element an absolute position far off the visible page:
.whatever.hidden {
position: absolute;
left: -10000px;
}
This is useful for form fields that need to be invisible but which also need to actually work as form fields. Internet Explorer in particular does not like invisible (display: none) inputs, but it's OK with ones positioned off the screen.

js code displays as text on hover

There's a hidden block with some javascript code inside <script type="text/javascript"></script> tag.
When I hover on the div I see this code as text. If I move js code outside the hidden block, the code is invisible. Why this happens?
You can check my demo here: http://goo.gl/XVlhXq Just hover on any product image.
Bug screen: http://goo.gl/Qvu7Hr

You have that CSS rule
.car-item:hover .hide * {
display: block;
}
Which also targets script tags.
Either do not add scripts inside the page markup (e.g. put it at the end of the body) or add a less specific CSS rule.

How about:
script {
display: none;
}

You got
.car-item .hide {
display:block;
}
overriding the
.hide {
display:none;
}
as it has more classes defined and therefore higher level by CSS Specificity
You can workaround this by either
removing display:block from .car-item .hide,
adding !important flag like
.hide {
display:none;!important
}
adding a couple classes to it, which is awful, like
.car-item .hide * {
display:none;
}
Also, this is unrelated, but you have
<div class="rating">
inside your
<div class="hide">
which doesnt sound right. Maybe that's a case, because having "height: 15px;" isn't quite "hiding".

:hover doesn't work with jquery script

I have a <ul> where each li reponds on :hover. Here is the css:
.profile_nav_item:hover {
border-color: #af0621;
}
But it want these borders to stay colored when I click them.
I have this jQuery function:
$('a[rel="tab"]').click(function(e){
var url = $(this).attr('href');
$('.profile_nav_item').css('border-color', 'transparent');
$('.profile_nav_item', this).css('border-color', '#af0621');
But after clicking, the :hover css property isn't called anymore. Does anyone know how I could fix this?
Here is the fiddle: http://jsfiddle.net/zRJK9/

You need to reset CSS properties to '' (empty string) for the style sheet to kick in again.
$('.profile_nav_item').css('border-color', '');
basically you are forcing the element style to #af0621 after which the stylesheet will do nothing to override it (element styles take priority).
Passing an empty string value to css() removes the inline style setting.
JSFiddle: http://jsfiddle.net/zRJK9/6/

Because inline css attribute has more priority then included one. So when you set it with jQuery it got like this: style="border-color: #af0621". Try to use !important in your css:
.profile_nav_item:hover {
border-color: #af0621 !important;
}

Override the JavaScripted style with media query

In my page design, I have put a menu button on the small resolutions, which onclick I show the menu items. If the items are in the show state (which is done by JS) and I maximize the browser (it would change to another query conditions) the items did not hide. Even I add the display:none to the css to hide them, but it did not hide. To overcome I put !important there. But it caused another issue: the menu items would not shown by the menu click.
It is appreciated if someone could help me.
Edit for better understanding.
The menu click js is as following:
$("#mobilemenu").click(function(){
var dis = $("#menuitems li").css('display');
if(dis == 'none') {
$("#menuitems li").slideDown("slow");}
else {
$("#menuitems li").slideUp("slow");
}
});
On my media query:
#media {
#menuitems li {display:none;}
}
And on the main css:
#menuitems li {display:none;}

Rather than directly setting the style in your JavaScript code, you should instead give the element a class which allows it to be styled with CSS.
For example, instead of directly setting display: block, you can show the element like this:
JavaScript
myElem.className = 'show';
CSS
myElem.show {
display: block;
}
Then with your media query, you can simply override this:
CSS
#media screen {
myElem.show {
display: none;
}
}

counteracting existing styles

I have a div with a padding, created and styled by Javascript.
This div is created on a page with the following CSS rule:
div {
width: 100%;
}
This messes up, as it changes the width of my created div to what it naturally would be PLUS its padding (so I end up with buttons outside of the div borders). I can't statically set div widths because they depend on the content. So how can I overwrite this rule and bring it back to "default width"?

You need the following CSS:
div { width: auto; }
Since the CSS rule is applied through JavaScript, which causes it to be an inline style, you may have to use !important to make sure the new rule has a higher specificity so you can overwrite the old one.
div { width: auto !important; }
Of course, it would be even better if you could just edit the JavaScript so it wouldn’t add the style to the div anymore.