I have the following javascript that I am using to position an element when some other event happens:
$('div.arrow').css('top', #$().offset().top - 20)
The above works but I am curious as to whether it is possible to get the same effect using pure css?
I only need to worry about modern browsers so no worries about legacy IE problems.
Should be pretty compatible:
div.arrow {
position: relative;
top: -20px;
}
If there's already a position attribute on div.arrow, you won't need to specify it again, unless it's position: static.
What is the action in particular that you want to cause this change?
The only way to effectively "action" a CSS change is the checkbox hack - but if you're looking to simply change the position of an element when something is clicked (for example) you could have the click event give a class of "active" to the element in question.
For example;
div.arrow { regular: styles here; }
div.arrow.active {
position: relative;
top: -20px;
}
To be honest though, your way is probably the most efficient already, especially if it's an onClick event.
Related
Say I have 2 html elements, in different parts of a html form: element "first-element" and element "second-element".
"first-element" is a flex item, which varies in position with page resize (the flex wraps).
When I hover the first element, I would like to make "second-element" visible and position it 20px down from "first-element".
I tried:
#first-element:hover #second-element {
display:block;
position:absolute;
left:#first-element.left;
height:#first-element.top+20px;
}
which, obviously didn't work :)
Can you please tell me if such a thing is possible and what is the correct syntax? Or, maybe suggest another approach? Thanks!
You need jQuery or Javascript to do this. It is not possible with only CSS.
See an example here with jQuery
$(document).ready(function{
$('#first-element').hover(function(){
$('#second-element').toggle(200);
})
})
Style the rest of what you want in your css.
#second-element{
position: absolute;
top: 20px;
}
My website has a number of standard constructs in it, like tables and buttons and so forth. In some cases, I want one instance of a construct to be marked up one way and a different instance of the same construct to be marked up a different way. How do I write the CSS to accomplish that?
For instance, I have some checkboxes that I use for the Checkbox Hack that need to kept invisible or hidden offscreen and some other checkboxes that are real checkboxes that are used on forms. What's the best way to write the CSS so that I can distinguish between the two types of checkboxes and mark them each up differently?
Right now, I have the checkboxes used in the Checkbox Hack marked up like so:
input[type=checkbox] {
position: absolute;
top: -9999px;
left: -9999px;
}
This has the unfortunate side-effect of hiding my "real" checkboxes entirely.
I've learned my CSS in a slightly haphazard fashion so I never learned the standard approach(es) to this common situation. Could someone enlighten me on the best way to handle this?
You could use CSS classes.. for exmaple
input[type=checkbox].special {
position: absolute;
top: -9999px;
left: -9999px;
}
that way, only checkboxes that have class="special" will be affected.
Yotam Omer is right, you should use classes. I do it this way:
.hide {
display:none;
}
then all you have to do is add the class "hide" to the checkboxes/other elements you want hidden.
<input type=checkbox class=hide>
I was wondering if someone here knows how or why my video play button of my new slick slider isn't working at http://starter.theshopbuilders.eu.
I figured it must be a CSS-thing, I've tried a whole bunch of things but nothing seems to work.
Maybe someone here has any idea!
You iFrame has the following CSS attributes:
.slick-slide iframe {
position: relative;
pointer-events: none;
}
pointer-events basically determines whether or not an element can be altered by the user, and in this case it's set to ignore any user interaction.
Deleting the pointer-events:none or setting it to pointer-events: auto should do the trick.
Lets say I have a plugin's CSS which loads later as my style.css
/*style.css*/
.something {
position:absolute;
left: 0px !important;
}
/*plugin's CSS*/
.something {
position:absolute;
left: -50px;
}
/now it has 0px but i want no left value at all/
i know i can set !important so that property wont be overriden, but is there any solution to turn "left" off as Chrome DevTools uncheck a property?
As far as I am aware (someone please feel free to correct me) there is no way to directly "turn off" a CSS property like in the Chrome DevTools.
The closest you can get it to reset the property to its default. In your example, it would be "left:auto;"
P.S. You may wish to adjust your tags to get more views and hopefully answers.
You should use the "auto" value for left:
.something
{
position:absolute;
left:auto !important;
}
"auto" will reset to the default (that is set by browsers for that style)
more info here: http://www.w3schools.com/cssref/pr_pos_left.asp
Specificity is the key to selecting the CSS attribute that you really want. Leverage the specific structure of the HTML in the plugin vs. non-plugin case so that specificity rules select the CSS you desire when plugin rules should apply.
There's a great overview of specificity here:
Source: http://www.stuffandnonsense.co.uk/archives/css_specificity_wars.html
One thought that comes to mind is to use an additional class, plugin, along with an appropriate selector.
If you are trying to override it then you can play with CSS Specificity Rules
Has anyone ever encountered a case where a more specific !important declaration is not overwriting another !important declaration? Here is the base css:
.x-floating {
position: absolute !important;
z-index: 10000 !important;
}
And here is what I want to use to override the z-index:
.x-msgbox.x-floating {
z-index: 10001 !important;
}
When I inspect via the Chrome (or Safari) debugger on Windows, I see the .x-msgbox.x-floating declaration being overwritten (crossed out), and the x-floating declaration being active. This goes against what I know of css specificity, and what I expect from simplified tests.
Example code:
Since I'm using Sencha, this will only work in Chrome or Safari, but here's a jsFiddle link (perhaps not kosher to hotlink Sencha's source, but this'll never get enough views for it to matter at all). To run the test, click the "choose date" button, then spin one of the wheels by dragging. A message box will appear. Compare the message box with the date picker (the top level elements of each — children of the body; another way to do it is to look for elements with class x-floating).
Default position is static. In static position can´t use z-index.
.x-msgbox.x-floating {
position: relative;
z-index: 10001 !important;
}
!important sets the highest priority for that css
why .x-msgbox.x-floating? and not .x-msgbox only.
the first time you give .x-floating the highest priority, so the next time there is important (z-inbdex.10001) this time it is ignored.
the first !important can be deleted
why not creating a new class and overwriting it again directly with the new value?
and x_msgbox would maybe also better