Is it possible to create a page which changes on click on various elements and bind multiple events to various elements of the page without using any javascript?
0
Add a comment
|
3 Answers
Yes, it is, there are multiple ways to do this, it can be done using :focus, :active, :checked. View demo.
Following is an example using :checked why I choose this over the others is because it simplifies writing css rules and allows me to use multiple elements to interact with it from various places. But enough talking, the html:
<input type="checkbox" id="cb1" /><span>This will change color</span>
and the css:
span { color: red; }
input:checked + span { color: blue; }
You may say that checkboxes are ugly and they don't look the same on all browsers, that is true, but you don't have to display them, you can use a label with a for attribute to affect the state of the checkbox, for the previous example this can be achieved using:
<label for="cb1">Click here to toggle checkbox</label>
Ok, but now you may think things get complicated because you use 2 elements instead of one, yes, but at the same time, due to the fact that <label for="id"> selects an element by id you can place your label anywhere you like in the document, and more than that you can use multiple labels to change the state of the same input. and you can give them their own ids or classes and style them differently as well if you want.
Even more is that you can combine multiple input's states and add a rule on that if you'd like to which, from what I know is currently not available with any other pure HTML + CSS solution.
For a more complicated example and even a micro-demo of a lightbox like effect achieved using this see this fiddle.
Comments
My personal favourite pseudo-selector is :target .
Here is a little pure-CSS lightbox I created that relies solely on :target. The lightbox is called LightBoCSS (Github) (for obvious reasons). There is a demo on the main page, and a link to the github repository. Note that I haven't put any non-webkit transitions in there yet, so use a webkit browser for the best experience.
#The HTML:
<div class="lightbox">
<!-- ===== Put the thumbnails in here ===== -->
<div class="thumbnails">
<a href="#b1">
<img src="images/ScreenShot1thumb1.png"/>
</a>
<a href="#b2">
<img src="images/ScreenShot2thumb2.png"/>
</a>
</div>
<!-- ===== Put the big images in here ===== -->
<div class="lightboximg">
<a id="b1" href="#">
<img src="images/ScreenShot1.jpg" alt="EggMaps iPhone Screenshot 1" />
</a>
<a id="b2" href="#">
<img src="images/ScreenShot2.jpg" alt="EggMaps iPhone Screenshot 2" />
</a>
</div>
</div>
##The Basic (distilled) CSS that makes it work: The "top" property is changed when the "a" is the target.
/* Hide each large image */
.lightboximg > a { /* the container for a large image */
top: -999em;
}
/* display the (large image container) anchor elem when it is the target */
.lightboximg > a:target {
top: 0px;
}
##The Complete CSS:
/* Note the :target pseudo-selector. */
/* Hide each large image */
.lightboximg > a { /* the container for a large image */
display: block;
min-height: 100%;
width: 100%;
position: absolute;
/*top: -999em; for browsers that can't set top in percentages
see comment from xception below */
top: -101%;
background-color: #222222; /* dark grey - for browsers that can't do rgba */
background-color: rgba(0,0,100,0.4); /* for browsers that can't
set multiple backgrounds */
background: url(Fabric-14.png), rgba(0,0,100,0.4);
opacity: 0;
transition: top 1s ease-in-out, opacity 1s ease-in-out,
z-index 0.5s ease-in-out;
-webkit-transition: top 1s ease-in-out, opacity 1s ease-in-out,
z-index 0.5s ease-in-out;
z-index: -1;
}
/* display the (large image container) anchor elem when it is the target */
.lightboximg > a:target {
top: 0px;
opacity: 1;
transition: top 1s ease-in-out, opacity 1s ease-in-out,
z-index 0.5s ease-in-out;
-webkit-transition: top 1s ease-in-out, opacity 1s ease-in-out,
z-index 0.5s ease-in-out;
z-index: 1001;
}
/* style for the large images */
.lightboximg > a img {
/* centre the image */
display: block;
margin: 0px auto;
/* make it fit into the window */
max-width: 100%;
}
3 Comments
xception
Also a very nice solution, you get my vote for this, but with this you can't have more than one target at a time, mine allows you to combine multiple input states to decide on a rule. Yours however has the advantage that it actually uses links to update the page state. Well done, keep up the good work!
xception
One thing, I just looked over your css and you have this:
top: -999em; /* for browsers that can't set top in percentages */. I'm pretty sure any browser that can't set top in percentages will also not be able to use opacity, transitions or know about the :target css selector.
cobberboy
Thanks @xception . I think you're right. Transitions and opacity are really just extra sugar on here, but of course :target is critical. If a browser cough doesn't support :target, we can just drop in selectivizr to add support. I have a vague memory (hitherto repressed) of a browser not respecting percentage positions. A quick google search showed this , which I can't tell if it applies to this problem. I certainly can't find any other relevant references, so I'll edit out the redundant property.
The best answer demonstrates a lot of cool tricks that can be done with pure CSS, however, it does not demonstrate how to post data to a form using onclick without JavaScript. Most people will tell you that it is not possible, however that is simply not true.
The only way to submit data, without JavaScript, is by using buttons generated with <input type="submit">. The submit buttons can be styled similarly to text, but it's not ideal. Simply make the submit buttons hidden and use <label>s with a corresponding for attribute.
See: JS Fiddle Example
Other events, such as, onchange do require JavaScript, but using submit buttons that are immediately hidden with JavaScript allow the code to work when JavaScript is disabled.
Most developers do not recommend coding for visitors that have client-side scripting disabled because almost everyone has it enabled these days. I disagree. Although it is certainly true that almost everyone has client-side scripting enabled, making a website work with it disabled has a few advantages:
- Forces good coding practices by using JavaScript how it's meant to be, and that is to enhance a website. (Mostly for me, JavaScript is to simply speed up my site by avoiding unnecessary page refreshes).
- Forces me to correctly handle cases where the client uses the back button or refreshes the page. Having client-side scripting disabled always causes a page refresh, so I an forced to handle those cases.
- Prevents a JavaScript bug from breaking the website.
- Encourages good security practices. Some novices incorrectly rely on JavaScript for validation. It's OK to validate client-side to save api calls and for convenience to the client, but it should never be relied upon. Server-side validation is essential, as anything on the client-side can be faked.
Comments
