Is there a CSS selector for things that are in view, i.e. visible within the viewport?
You have to use Javascript to achieve that. The modern way is to use getBoundingClientRect().
Related
The question is pretty straight forward. Should I use CSS or JQuery when styling elements that are in the hover state (does one have any real advantage over the other)? To me, using JS seems like a hassle since the pseudo-classes are so easy to use. Thank you!
You should use CSS wherever possible; it's more efficient.
It also works better with property cascade and with elements created later.
Well it depends. If you want your website also displayed on mobile devices it is wiser to make a hover class and attach it with jquery because mobile browser handle hover very sketchy and different.
Is there a CSS-only way to fix a nav bar (or any element really) below a header, but at the top of the page when scrolling past the header?
I know how to do it with js, I was just curious if there was a clever way to do it with CSS.
No, you can't conditionally style elements based on the scroll value of the page, simply because CSS doesn't care, and doesn't measure that parameter. JavaScript however does. So your solution would have to involve JavaScript.
I think there's no fix with pure CSS.
If :target would work without clicking any element maybe yes. But I think not.
I want to know if the element is showing vertical scrollbars or not, and if it is possible to do this with CSS only.
This only needs to work for Firefox by the way.
If you mean using selectors to test, no, there isn't such a selector in standard CSS (because the presence of scrollbars is calculated during rendering), nor can I find any selectors in this list of Mozilla vendor extensions that do what you're looking for.
No, CSS cannot accomplish as this requires to be able to monitor the element, not apply styles.
Using jQuery
var element = $("#yourdiv");
if(element.get(0).scrollHeight > element.height()) {
console.log('scroll bar is visible');
}
I have Javascript codes building a small div layer with CSS. The div layer has inline style codes to display the way I want. I notice the div layer looks distorted on some microsites. Are there ways to write the inline style code from being overwritten by other CSS?
Thanks in advance
Inline styling cannot be overwritten by a stylesheet. However, if there are properties in a stylesheet that aren't written inline, and therefore nothing is conflicting with one another, those styles will also be active.
The reason for distortion could be that other CSS files from these 'microsites' share similar naming conventions for this particular element. If this is the case, the stylesheets from these microsites are applying their styles that are otherwise unfounded within your inline styling.
My code creates CSS divs with dynamic names
i.e.
cke_record_body_19
cke_record_body_54
Is it possible to style all divs that contain the string cke_record_body_ in their name using CSS?
The best cross browser solution is to style them by adding a class to each div.
Can you just have your code give these divs a class="cke_record_body" attribute? Then you can just apply a style to them however you want and ignore the ids.
If you really have to this should work:
div[id*="cke_record_body_"] {
}
Keep in mind I believe this is CSS3 so I have no idea what current support is, but really this is the only way to do it in straight CSS without other libraries. If you are using jQuery or something see Nealv's answer.
sure:
$("[id^=cke_record_body]*").something()