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 :)
Related
I want to know if it's possible to click on an element and then change another element only using Html and CSS and if it is then how.
some thing like this ( btw this code doesn't work ) :
a:active div{
background-color : blue;
}
Without Javascript your options are rather limited.
You have to find a way to toggle the state by a click and be able to express those states in CSS.
Some option might be theese:
using (hidden?) radiobuttons or checkboxes and using their :checked pseudo class in CSS
using anchors and their pseudo classes (like you already attempted to do)
The problem here is that you have to put all your dynamic contents (the stuff you show/hide on click) inside or next to those toggling elements which might be inpractical.
My favorite is the :target pseudo class. When you open the URL "https://something.com#foobar" the element with the id "foobar" is the current target (if it exists). One limitation of this is that there is only one single target per document. You can control the target by clicking on anchors like this:
.dynamic-content {
display: none;
}
#first:target, #second:target {
display: block;
}
<div>
<div id="first" class="dynamic-content">
First dynamic content
Hide
</div>
<div id="second" class="dynamic-content">
Second dynamic content
Hide
</div>
</div>
Show first
Show second
One way ,I use :focus pseudo class. div:focus a {}
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'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;
}
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
This question already has answers here:
Is there a CSS selector for elements containing certain text?
(20 answers)
Closed 4 years ago.
innerHTML1
innerHTML2
innerHTML3
I want to style the second only (innerHTML2) using CSS selectors, based on the inner HTML. Is this possible? I've tried using a[value=innerHTML2] but it doesn't seem to work.
This is not possible using CSS. You can, however, do it using jQuery. There's a nice blog post on it you can read.
It's currently not possible for all browsers with css, but with javascript you can do this
Updated w/ working code. JSFiddle link below:
Initial HTML per #whamsicore:
innerHTML1
innerHTML2
innerHTML3
JavaScript:
var myEles = document.getElementsByTagName('a');
for(var i=0; i<myEles.length; i++){
if(myEles[i].innerHTML == ' innerHTML2 '){
console.log('gotcha');
//use javascript to style
myEles[i].setAttribute('class', "gotcha");
}
}
CSS for styling:
/* make this look a bit more visible */
a{
display: block;
}
.gotcha{
color: red;
}
https://jsfiddle.net/kjy112/81qqxj23/
Using CSS you can't detect the content of the anchor tag.
[value=] would refer to an attribute on the tag
innerHTML2
Not very useful since the value attribute isn't valid HTML on an a tag
If possible, slap a class on that a tag. As that is most likely not possible (because you would've already done that) you can use jQuery to add a class on that tag. Try something like this:
<script type="text/javascript">
$(function(){ $('a:contains(innerHTML2)').addClass('anchortwo'); });
</script>
And then use .anchortwo as your class selector.
you can use the css nth-child property to access any element and do any changes. i Used it on a website i made to make a logo smaller or bigger based on the width of screen.
Using pup, a command line tool for processing HTML using CSS selectors, you can use a:contains("innerHTML1").
For example:
$ echo ' innerHTML1 ' | pup 'a:contains("innerHTML1")' text{}
innerHTML1
<style>
a[data-content]::before {
content: attr(data-content);
}
a[data-content="innerHTML2"] {
color: green;
}
</style>
This is quite simple with a nth-child selector.
<style>
a:nth-child(2) {
color: green;
}
</style>
innerHTML1
innerHTML2
innerHTML3
Edit: Here's the source I found this at. Check here for browser compatability.
Source: http://reference.sitepoint.com/css/pseudoclass-nthchild