i need to use slideDown function from jQuery, which requires the content to be animated to be put under class " .hide ",
for .hide I had this in my custom css :
.hide {
display: none;
}
which conflicted with Bootstrap css as it contains :
.hide {
display: none !important;
}
thus when i linked both these stylesheets, slideDown was'nt working, then i tried diffrent variations of .hide in both files, finally removing .hide from my custom css file completely worked,
so my ques is why does .hide in custom css affect the results when the properties defined in Bootstrap ".hide" and custom css ".hide" are exactly same except having " !important " in addition which (i guess, please correct if i am wrong) implies that custom selector would be given preference?
i am trying to share the working version of my code using codepen, but i dont know why my code still does'nt wrok on codepen : http://codepen.io/anon/pen/RaGJwE
The !important is always very strong. It could just be bypassed if you use a display: block !important; afterwards.
The simpliest way would be to not use the "hide" or "hidden" classes which are targeted by bootstrap. Just change the class to "hideit" or something else like in this updated fiddle:
http://codepen.io/anon/pen/MyjXOv
Related
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.
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".
So I'd like to have a popup on my page. I would like to style it with flexbox. I'm using scss to style things and I have mixins for flexbox properties.
The issue I came across is that I want to have flexbox properties applied to my popup such as display: flex which has it's browser variants:
display: -webkit-flex;
display: -moz-flex;
display: -ms-flexbox;
When I try to change css to display: none my browser overrides it with display: -webkit-flex; so I'm still not hiding my element. I thought about using visibility but since jquery uses .show and .hide with display and not visibility it kind of seemed like a wrong tool.
Should I somehow override the jQuery .hide() to change the other display properties as well or maybe create the element each time I want to display it and then delete the html of it after submit?
I have my scss with this overlay-content styling:
.overlay-content {
/* this may or may not be here */
/* visibility: hidden; */
#include flex();
#include flex-direction(column);
#include flex-justify-content(flex-start);
}
And I'd have a code which triggers when I want to display my popup:
$('.overlay-content').css('visibility: visible;');
$('.overlay-bg').css('visibility: visible;');
Is it okay to use the visibility css property or should I always use the display property to change the visibility of the element?
What bothers me is that this way I can't use the cool jquery.hide() options for cool user experience
I've run into the same issue and solution I came up with may not be the most elegant but it does the job.
I simply called .hide() in the initialization code of the component. jQuery adds inline display: none to the element, and subsequent call to .toggle() removes it, so specified in the stylesheet display: flex comes into play.
I have a Jquery selectmenu called #Main which implicitly gets a #Main-button. When I try to set #Main-button's width using css as
#Main-button {
width:200px;
}
it has no effect.
When I explicitly set
$( "#Main" ).selectmenu({ width:200})
it has the desired effect and under Firebug I see that it has appended a style="width:200" on the #Main-button, which is what I tried using CSS at the first place.
What is different? I've checked that the my CSS style sheet gets called AFTER the Jquery one, so there is no precedence issue
Also I notice that html elements turned to Jquery elements cannot be styled using CSS targeted at the specific element, even with the use of unique id's,but require the use of Jquery classes like .ui-menu etc
why do they behave differently? are there any specific styling gudilines when Jquery is involved?
In your CSS you've
#Main-button {
width:200px;
}
but the JS is adding dynamic inline style based on content. So it's having style attribute.
So in terms of CSS specificity their CSS beats you.
You must use !important in your rule to avoid overriding of your CSS.
#Main-button {
width:200px !important;
}
To style selectmenu or every jquery widget, you need to use jquery default classes. Your selector must be like
#Main-button.ui-selectmenu-menu li a
And also you can extend _renderItem and _renderMenu functions of selectmenu for different styling.
Hello I am using this jquery code
onclick="jQuery('.hidden').show()"
to show the class labeled .hidden
this is what the class looks like :
.hidden { display:none}
the issue is when it displays the class its a display:block;
I would like it to display it as display:inline;
that way its on the same line as the text that comes before.
any help would be appreciated been going crazy I googled almost everything related to it but nothing guided me to the right path.
you could append an explicit css attribute to the element:
onclick="jQuery('.hidden').css('display','inline');"
try this, i hope this helps :)
You probably want to add/remove the class .hidden from the element, if you want it to display inline, create a css class .inline with the appropriate css and toggle this on / off when needed. Or the other option is use an html element that is inline rather than block if possible.