I'm trying to set the rendered attribute of af:panelList on a CSS file so I can't display it according to the device resolution but when I define on CSS:
#pl2 {
rendered:false;
}
I get a unknown property "rendered" and chrome doesn't hide it when its a smaller resolution.
Heres the component definition on my .jspx file:
<af:panelList id="pl2" rows="3" maxColumns="5" >
What can i do to fix this? Is there a way around?
it renders a div with id pt1:panelobile and then a table which has no id. i added this line to the css #pt1:panelmobile { display: none; } but i have no luck so far
If you ignore deprecated browsers like IE6/7, then you should be using this selector instead:
#pt1\:panelmobile {
display: none;
}
The : is namely a special character in CSS selectors indicating a pseudo selector and therefore needs to be escaped by \ when used as-is.
But, especially in your particular case, much better is to just assign the JSF component a more generic and better reusable style class.
<af:panelList ... styleClass="hidden">
with
.hidden {
display: none;
}
See also:
How to use JSF generated HTML element ID with colon ":" in CSS selectors?
if you are trying to hide the element, try:
#pl2
{
display: none;
}
Related
This question already has answers here:
Is there a HTML opposite to <noscript>?
(12 answers)
Closed last year.
how to involve a(some) element(s) within body section of HTML only if js is enabled or supported by browser.
involve in the sense if the condition were met(js was enabled or supported), the element(s) would be displayed.
ps: I already know the use of "noscript" element.
A simple way to achieve that would be to hide by default your divs and display them with js.
document.querySelectorAll('.js-only').forEach(x => x.classList.add("show"))
.js-only {
display: none;
}
.show {
display: block;
}
<div class="js-only">
js is enabled
</div>
There is nothing you can do in just pure HTML/CSS. You will need to set the elements to be hidden by default with CSS. When JavaScript runs, you just add a class to the body which will show the elements with additional CSS Selectors.
document.body.classList.add("js-enabled");
.js-block, .js-inline {
display: none;
}
.js-enabled .js-block {
display: block;
}
.js-enabled .js-inline {
display: inline;
}
<div class="js-block">Hello</div>
<p>Hello <span class="js-inline">World</span></p>
I would assume you are trying to see if you can display specific javascript elements or not. I would recommend just using the noscript tag but if you want to check it you can use a .no-js class on the body and create non javascript styles based on .no-js parent class to seperate them.
If javascript is disabled you will get all the non javascript styles you added, if there is JS support the .no-js class will be replaced giving you all the styles as usual.
example:
document.body.randomClassName = document.body.randomClassName.replace("no-js","js");
But I would recommend just a redirect or alert that says that they should enable javascript if they ever want to browse a website to the fullest :)
Is there any way to use conditional statements in CSS?
I'd say the closest thing to "IF" in CSS are media queries, such as those you can use for responsive design. With media queries, you're saying things like, "If the screen is between 440px and 660px wide, do this". Read more about media queries here: http://www.w3schools.com/cssref/css3_pr_mediaquery.asp, and here's an example of how they look:
#media screen and (max-width: 300px) {
body {
background-color: lightblue;
}
}
That's pretty much the extent of "IF" within CSS, except to move over to SASS/SCSS (as mentioned above).
I think your best bet is to change your classes / IDs within the scripting language, and then treat each of the class/ID options in your CSS. For instance, in PHP, it might be something like:
<?php
if( A > B ){
echo '<div class="option-a">';
}
else{
echo '<div class="option-b">';
}
?>
Then your CSS can be like
.option-a {
background-color:red;
}
.option-b {
background-color:blue;
}
No. But can you give an example what you have in mind? What condition do you want to check?
Maybe Sass or Compass are interesting for you.
Quote from Sass:
Sass makes CSS fun again. Sass is CSS, plus nested rules, variables, mixins, and more, all in a concise, readable syntax.
CSS itself doesn't have conditional statements, but here's a hack involving custom properties (a.k.a. "css variables").
In this trivial example, you want to apply a padding based on a certain condition—like an "if" statement.
:root { --is-big: 0; }
.is-big { --is-big: 1; }
.block {
padding: calc(
4rem * var(--is-big) +
1rem * (1 - var(--is-big))
);
}
So any .block that's an .is-big or that's a descendant of one will have a padding of 4rem, while all other blocks will only have 1rem. Now I call this a "trivial" example because it can be done without the hack.
.block {
padding: 1rem;
}
.is-big .block,
.block.is-big {
padding: 4rem;
}
But I will leave its applications to your imagination.
The #supports rule (92% browser support July 2017) rule can be used for conditional logic on css properties:
#supports (display: -webkit-box) {
.for_older_webkit_browser { display: -webkit-box }
}
#supports not (display: -webkit-box) {
.newer_browsers { display: flex }
}
The only conditions available in CSS are selectors and #media. Some browsers support some of the CSS 3 selectors and media queries.
You can modify an element with JavaScript to change if it matches a selector or not (e.g. by adding a new class).
I would argue that you can use if statements in CSS. Although they aren't worded as such. In the example below, I've said that if the check-box is checked I want the background changed to white. If you want to see a working example check out www.armstrongdes.com. I built this for a client. Re size your window so that the mobile navigation takes over and click the nav button. All CSS. I think it's safe to say this concept could be used for many things.
#sidebartoggler:checked + .page-wrap .hamb {
background: #fff;
}
// example set as if statement sudo code.
if (sidebaretoggler is checked == true) {
set the background color of .hamb to white;
}
CSS has become a very powerful tool over the years and it has hacks for a lot of things javaScript can do
There is a hack in CSS for using conditional statements/logic.
It involves using the symbol '~'
Let me further illustrate with an example.
Let's say you want a background to slide into the page when a button is clicked. All you need to do is use a radio checkbox.
Style the label for the radio underneath the button so that when the button is pressed the checkbox is also pressed.
Then you use the code below
.checkbox:checked ~ .background{
opacity:1
width: 100%
}
This code simply states IF the checkbox is CHECKED then open up the background ELSE leave it as it is.
css files do not support conditional statements.
If you want something to look one of two ways, depending on some condition, give it a suitable class using your server side scripting language or javascript. eg
<div class="oh-yes"></div>
<div class="hell-no"></div>
There is no native IF/ELSE for CSS available. CSS preprocessors like SASS (and Compass) can help, but if you’re looking for more feature-specific if/else conditions you should give Modernizr a try. It does feature-detection and then adds classes to the HTML element to indicate which CSS3 & HTML5 features the browser supports and doesn’t support. You can then write very if/else-like CSS right in your CSS without any preprocessing, like this:
.geolocation #someElem {
/* only apply this if the browser supports Geolocation */
}
.no-geolocation #someElem {
/* only apply this if the browser DOES NOT support Geolocation */
}
Keep in mind that you should always progressively enhance, so rather than the above example (which illustrates the point better), you should write something more like this:
#someElem {
/* default styles, suitable for both Geolocation support and lack thereof */
}
.geolocation #someElem {
/* only properties as needed to overwrite the default styling */
}
Note that Modernizr does rely on JavaScript, so if JS is disabled you wouldn’t get anything. Hence the progressive enhancement approach of #someElem first, as a no-js foundation.
Changing your css file to a scss file would allow you to do the trick. An example in Angular would be to use an ngClass and your scss would look like:
.sidebar {
height: 100%;
width: 60px;
&.is-open {
width: 150px
}
}
While this feels like a bit of a hack, and may not work perfectly in all browsers, a method I have used recently combines the fact that CSS (at least in Chrome) seems to ignore invalid values set on properties, and we can set custom properties that fall back to their default value when invalid.
(Note: I haven't deeply tested this, so treat it as a hacky proof of concept/possible idea)
The following is written in SCSS, but it should work just as well in standard CSS:
.hero-image {
// CSS ignores invalid property values
// When this var is set to an image URL, the browser will ignore it
// When this var isn't set, then we will use the default fallback for the var, which is 'none'
display: var(--loading-page-background-image, none);
// This part isn't directly relevant to my 'if' example, but shows how I was actually using this custom property normally
background-image: var(--loading-page-background-image, none);
}
I'm setting the custom property from JavaScript / React, but it would likely work regardless of how you set it:
// 'true' case
const chosenLoaderUrl = "https://www.example.com/loader.png";
// 'false' case
//const chosenLoaderUrl = "";
// containerRef is just a reference to the div object, you could get this with
// jquery or however you need. Since I'm in React, I used useRef() and attached
// that to my div
containerRef.current.style.setProperty(
"--loading-page-background-image",
`url(${chosenLoaderUrl})`
);
When chosenLoaderUrl is set to my url, that url is an invalid value for the display property, so it seems to get ignored.
When chosenLoaderUrl is set to an empty value, it falls back to the default value in my var() statement, so sets display to none
I'm not sure how 'generalisable' this concept it, but figured I would add it to the other suggestions here in case it is useful to anyone.
Your stylesheet should be thought of as a static table of available variables that your html document can call on based on what you need to display. The logic should be in your javascript and html, use javascript to dynamically apply attributes based on conditions if you really need to. Stylesheets are not the place for logic.
You can use combination of jquery and css classes i.e. I want to change a font color of certain element depending on the color of the background:
CSS:
.h3DarkMode{
color: lightgray;
}
.h3LightMode{
color: gray;
}
HTML:
<h3 class="myText">My Text Here...</h3>
JQuery:
var toggleMode = localStorage.getItem("toggleMode");
if (toggleMode == "dark"){
$(".myText").removeClass("h3LightMode").addClass("h3DarkMode");
}else{
$(".myText").removeClass("h3DarkMode").addClass("h3LightMode");
}
No you can't do if in CSS, but you can choose which style sheet you will use
Here is an example :
<!--[if IE 6]>
Special instructions for IE 6 here
<![endif]-->
will use only for IE 6 here is the website where it is from http://www.quirksmode.org/css/condcom.html , only IE has conditional comments. Other browser do not, although there are some properties you can use for Firefox starting with -moz or for safari starting with -webkit. You can use javascript to detect which browser you're using and use javascript if for whatever actions you want to perform but that is a bad idea, since it can be disabled.
I am trying to hide some specific adds on my page based on their href property(using CSS). I scrolled through some of the answers which tells about hiding an element based on its href value. But, the element here is quite dynamic and keeps changing every time I load the page. Is there any way to hide an element/anchor based on its partial href value ?
Below is the HTML code that I am trying to hide.
Code:
<div id="union-ad" class="union-banner">
<a href="http://someURL?Dynamic_Id's">
</div>
This is what i have been trying so far.
<style type="text/css">
a[href='someURL']{ display: none }
</style>
Use a substring selector:
a[href^="http://someURL"] {
display: none;
}
You CAN see me.
You can't see me!
Get more info on substring attribute selectors
You can use *. This finds the string partial someURL anywhere in the element's href attribute.
a[href*="someURL"]{ display: none }
Demo:
a[href*="someURL"]{
display: none;
}
<div id="union-ad" class="union-banner">
my Link
other Link
</div>
JSFiddle
You have two different choices of substring selectors, which you should select between based on the nature of the URL.
If your URL always starts with the same set of characters, including the protocol specification, then ^= is the best choice - it will only match elements which href-attribute begins with the given set of characters. This will pretty much eliminate the chance of randomly hiding other links because they randomly contain your selector.
a[href^='http://someURL'] {
display: none;
}
However if you're entirely unsure about the consistency of the URL and only know a certain part in the middle, use *=, which will match elements that contain at least one instance of the set of characters given.
a[href*='someURL'] {
display: none;
}
Yes, there's a CSS selector for that.
a[href~=someURL] { display: none }
Context: making printable invoices to generate in a browser.
It's common in making printable webpages to use an #media print rule to change the way the content looks for a printed page. Ideally, because I'm printing only a small part of the page, I'd like to hide everything and then display the contents of a particular element.
Structure is something like this:
<body>
<div id="topMenu">...lots of elements...</div>
<div id="sideMenu">...lots more...</div>
<div class="tools">...some tools...</div>
<div class="printing">...some elements I want to print...</div>
<div class="tools">...more stuff I don't want to print...</div>
</body>
Stuff I've tried:
Ideally, I'd like to do something like
body * {
display: none;
}
.printing, .printing * { /* Both parts are needed to make it display */
display: block !important;
}
But this won't work because some elements need to be inline and some need to be block. I've played with some different values for display from MDN and can't find one that easily resets the value to its original. display: initial seems to be treated like inline.
The suggestion in CSS: "display: auto;"? seems to only work for JS.
Of course, it is possible to explicity "hide" the stuff I don't want printed rather than display the stuff I do want, but it seems to me that it should be possible to go the other way.
In this question How to only show certain parts with CSS for Print? suggests body *:not(.printable *) {display:none;} but notes (as backed up on the w3 negation page ) that this is not yet supported.
I note that the w3 draft and the display-outside page seem to recommend using an unknown (to webkit) box-suppress property to preserve the display value while not displaying the element.
My questions:
What is the best way to hide everything and target certain elements for display when they don't all share a common display property?
What exactly does box-suppress do?
Since you specifically tagged this CSS3, try using CSS3!
body>:not(.printing) {
display: none;
}
This should work for the example you gave. I hope it works for your real-world application!
To answer your auxiliary question, as of October 2014, box-suppress is a possible future replacement for display:none that will hopefully make it easier to both hide and remove elements from the flow without worrying about changing its display type (as opposed to visibility still keeps it in the flow, and position:absolute which still keeps it visible). I don't think it's currently supported so I'd stay away from it for now. If you want to know more, see http://w3.org/TR/css-display
You cannot use display for this purpose. See Display HTML child element when parent element is display:none
However, you can use visibility, as long as you use absolute positioning for the hidden content:
body, body * {
visibility: hidden;
position: absolute;
}
.printing, .printing * {
visibility: visible;
position: relative;
}
If you don't use any absolute or fixed elements, you can use an alternative way of hiding elements.
Instead of using display: none to hide your elements, try using:
body * {
position:absolute;
top: -999999px;
left: -999999px;
}
To set it back use:
.printing, .printing * {
position: initial;
/* OR */
position: static;
}
I have an image and when the image is clicked I want to reveal another image below it. I am looking for a simple CSS only solution.
Is that possible?
TL;DR!
input[type="checkbox"] {
content: url('http://placekitten.com/150/160');
appearance: none;
display: block;
width: 150px;
height: 150px;
}
input[type="checkbox"]:checked {
content: url('http://placekitten.com/170/180');
}
<input type="checkbox" />
A Pure CSS Solution
Abstract
A checkbox input is a native element served to implement toggle functionality, we can use that to our benefit.
Utilize the :checked pseudo class - attach it to a pseudo element of a checkbox (since you can't really affect the background of the input itself), and change its background accordingly.
Implementation
input[type="checkbox"]:before {
content: url('images/icon.png');
display: block;
width: 100px;
height: 100px;
}
input[type="checkbox"]:checked:before {
content: url('images/another-icon.png');
}
Demo
Here's a full working demo on jsFiddle to illustrate the approach.
Refactoring
This is a bit cumbersome, and we could make some changes to clean up unnecessary stuff; as we're not really applying a background image, but instead setting the element's content, we can omit the pseudo elements and set it directly on the checkbox.
Admittedly, they serve no real purpose here but to mask the native rendering of the checkbox. We could simply remove them, but that would result in a FOUC in best cases, or if we fail to fetch the image, it will simply show a huge checkbox.
Enters the appearance property:
The (-moz-)appearance CSS property is used ... to display an element
using a platform-native styling based on the operating system's theme.
we can override the platform-native styling by assigning appearance: none and bypass that glitch altogether (we would have to account for vendor prefixes, naturally, and the prefix-free form is not supported anywhere, at the moment). The selectors are then simplified, and the code is more robust.
Implementation
input[type="checkbox"] {
content: url('images/black.cat');
display: block;
width: 200px;
height: 200px;
-webkit-appearance: none;
}
input[type="checkbox"]:checked {
content: url('images/white.cat');
}
Demo
Again, a live demo of the refactored version is on jsFiddle.
References
:checked
-moz-appearance/-webkit-appearance
Note: this only works on webkit for now, I'm trying to have it fixed for gecko engines also. Will post the updated version once I do.
Update: the appearance property is now widely adopted, so the use of vendor prefixes is redundant. Horay!
You could use an <a> tag with different styles:
a:link { }
a:visited { }
a:hover { }
a:active { }
I'd recommend using that in conjunction with CSS sprites: https://css-tricks.com/css-sprites/
some people have suggested the "visited", but the visited links remain in the browsers cache, so the next time your user visits the page, the link will have the second image.. i dont know it that's the desired effect you want. Anyway you coul mix JS and CSS:
<style>
.off{
color:red;
}
.on{
color:green;
}
</style>
Foo
using the onclick event, you can change (or toggle maybe?) the class name of the element. In this example i change the text color but you could also change the background image.
Good Luck
This introduces a new paradigm to HTML/CSS, but using an <input readonly="true"> would allow you to append an input:focus selector to then alter the background-image
This of course would require applying specific CSS to the input itself to override browser defaults but it does go to show that click actions can indeed be triggered without the use of Javascript.
Try this (but once clicked, it is not reversible):
HTML:
<a id="test"><img src="normal-image.png"/></a>
CSS:
a#test {
border: 0;
}
a#test:visited img, a#test:active img {
background-image: url(clicked-image.png);
}
You can use the different states of the link for different images example
You can also use the same image (css sprite) which combines all the different states and then just play with the padding and position to show only the one you want to display.
Another option would be using javascript to replace the image, that would give you more flexibility
No, you will need scripting to place a click Event handler on the Element that does what you want.
https://developer.mozilla.org/en/DOM/Event
https://developer.mozilla.org/En/Listening_to_events