I go to the TestDome to test my CSS and HTML skill. There is one question that I can't answer. The question is to write a toggle element by html5 without using javascript and css. So, how can I write it
The following structure will do the trick:
<details>
<summary>Epcot Center</summary>
<p>Paragraph</p>
</details>
I think they mean a toggle switch. You can easily use a input checkbox like so <input type="checkbox" />. You can then style the switch.
Related
On my webpage there are DIV's that are created dynamically with the class of jOUT.
I want to change the color of every other iteration of the class.
I'm trying to do it this way:
.jOUT:nth-child(even){
background:#eeefff;
}
.jOUT:nth-child(odd){
background:#cccffe;
}
My HTML is as follows:
<div id="outData">
<input type="hidden" name="outDivider" value="-------">
<div class="jOUT isOpaque">
<!-- ... -->
</div>
<input type="hidden" name="outDivider" value="-------">
<div class="jOUT isOpaque">
<!-- ... -->
</div>
<input type="hidden" name="outDivider" value="-------">
<div class="jOUT">
<!-- ... -->
</div>
</div>
Full HTML here
But it's not working. What's really weird is that using the console in Chrome, when I select each jOUT, it shows ALL of them as having the "even" attribute.
I thought for sure that I had invalid CSS or HTML but I can't find it. It has to be something I'm doing, but what? I guess what I'm asking for is an idea for a place to start looking for the problem. I've verified the CSS using w3c CSS verification, and the HTML using HTML Tidy.
Your current CSS is working as it should, because you're targeting ALL children (including input); which means, in this scenario, all your div.jOUT are even - you should rather use :nth-of-type, which will only target instances of div.jOUT ...
.jOUT:nth-of-type(even){
background:#eeefff;
}
.jOUT:nth-of-type(odd){
background:#cccffe;
}
DEMO fiddle
This would work here:
.jOUT:nth-child(4n){
background:#eeefff;
}
More on that
This is somewhat fragile, though. A better approach is to add an alternative style class on those elements, possibly via your server-side app.
Your input[name="outDivider"] elements are in the way, thus making every jOUT element even. Here's a working pen where I took them out and made the selector work properly. I also changed the colors, so it's easier to see.
Edit: #isherwood beat me to it, but if this input[name="outDivider"] elements are absolutely necessary, his solution works best!
I need to store some hidden HTML for each li element. What's the best way to do this?
I've tried storing it as data on each li element but the hidden HTML tags screw up the li element.
I've managed to do it by storing the data in a hidden text area for each li.
Is this the best way to do it? Or is there a better way.
I'm storing around 200 chars.
Put your hidden HTML in a div / span with a CSS class that has:
display: none;
See the display property.
You can put a hidden field at each li to put the data! I think that hidden fields will work well, and theres no limit for the amount of data.
<input type="hidden" id="myId" value="value here pls..." />
Hopes this help you!
<input type="hidden" value="your hidden stuff here" />
Is your data HTML or is it content? Do you need it for programatic reasons? If it's just a matter of hiding content, as you would for a screen reader when using image-swap, for example, use css:
#my_content {
text-indent: -9999px;
}
Beyond that you could use hidden form fields, or simply use CSS to hide the element entirely.
try this
<div style="display:none;">your html here.....</div>
One way I've recently learned to do this is to use <script> tags. You can add an ID to the script tag, and reference in javascript using that ID to fetch the content and do something with it. I use this for inline templates.
http://www.bennadel.com/blog/2411-Using-Underscore-js-Templates-To-Render-HTML-Partials.htm
<script id="foo" type="text/template">
<p>your text here</p>
</script>
now in real javascript:
<script type="text/javascript">
<!-- assume jquery for the sake of assuming something -->
$(function() {
fooTemplate = $("#foo").clone();
$("#target").append(fooTemplate);
});
</script>
I created a fiddle, but I had to use a div in the HTML area because fiddle doesn't like having an extra script node... The principle is the same -- just change to script in your html in your page.
If your <li> are children of an <ol> element and values you want to store are integers, then you can store them as
<li value="11">DISPLAY ITEM</li>
another approach:
if you want your extra HTML DATA to be present, but you don't want to render it at all (i assume this because you said that you tried to hide them inside a textarea -and thats why im posting this answer) then why not just put it inside comments?
<li> your code....
<!--
<div>my hidden html code of this li, of course i won't have nested comments in here!!!</div>
-->
</li>
Of course this is tricky, and not easy to get this data, but if you need this just for debug it will be ok.
Otherwise i'm in favor of display:none in a wrapped div.
Captain Obvious.
Here are two methods not mentioned in other answers.
The advantage of both methods is that, when you're working in your HTML programming environment, you get normal syntax coloring and error-checking.
Method 1
<template>
<div>Here's my hidden HTML.</div>
</template>
Method 2
<span hidden>
<div>Here's my hidden HTML.</div>
</span>
I am trying to make a textarea content editable and I am failing. I am using this code:
<textarea id='' class='' name='notes' rows='12' cols='67' contenteditable='true' ></textarea>
I am expecting a result like http://html5demos.com/contenteditable
Does anyone have an idea why it's not working?
Edit:
I am doing this because I am trying to do a oneliner to add a control to a form in which (HTML) formatted content can be pasted and retain its formatting. I am trying to do this without fuss and without javascript code. It appears this is not possible. I will close this question in a day if no further input to the contrary is added.
Have you set the right doctype at the top of your page? For HTML5 you need the following doctype:
<!DOCTYPE html>
Also, why a textarea? textareas are already editable.
They are not using a textarea, textareas are already editable. This is what they are using
<section contenteditable="true" id="editable">
<h2>Go ahead, edit away!</h2>
<p>Here's a typical paragraph element</p>
<ol>
<li>and now a list</li>
<li>with only</li>
<li>three items</li>
</ol>
</section>
I don't mean to repeat anything, but I've put together a demo that shows what is happening.
http://gist.github.com/210327
Just run that, edit what you wish and click the 'Output Formatted Content' statement to receive an alert message with an output of the actual html-formatted content in the contenteditable element. As for adding formatting, etc, you'll need to make buttons that call a text-modifying function on whatever is highlighted. Yeah, that part will be fun.
Nonetheless, I hope this helps.
Given your comment responses, I would recommend any of the excellent WYSIWYG editors out there. No need to re-invent the wheel, and I don't think contenteditable wouldn't have met your needs anyway.
My personal favorite is CKEditor, but there are many, many others. TinyMCE is also very popular.
I have been looking at a couple html/css form frameworks like Uni-Form and Formy. They provide easier management of html forms. I was wondering if anyone knows similar ones. I am not looking for css grid frameworks nor Yahoo's YUI.
blueprintCSS has a form plugin (I don't know if it can be used alone, I haven't tried to do that). http://www.blueprintcss.org/
http://www.blueprintcss.org/tests/parts/forms.html
Baseline CSS also has a form system. I haven't personally used it.
just tried formy and uniform..
i want something styled a bit simpler, just to look clean so i can do the rest..
Formalize is another one, quite simple, worth a look.. looked at uniform and jformer and they're both too comprehensive, if that could be used as a reason to ignore them
Formalize
Uniform (different from Uni-Form)
There is also Tacit.
It's a "class-less" CSS framework were you only need a single <link> statement in your HTML and the web page will have a complete look. In particular, for forms, you get a more finished appearance out of the box, just by including the CSS file, and you don't need to attribute specific classes to your form elements. It also guarantees your form will work visually fine both in Desktop and in Mobile.
You can get an overall idea from the demo page.
Here are also a few examples of pages that use Tacit, and the only work put into was including the CSS file: http://filfreire.com/, http://www.jare.io/, https://socatar.com/,
I think uniform is the best solution for forms.
Html is good and understandable, it has a bunch of tricky form examples solved very nicely ad it pays attention to usability much more than other frameworks.
Other seem to insist more on a vertical typographic rythm than common sense and usability. :)
There is also: Formy http://code.google.com/p/formy-css-framework/
I have developer a single class CSS framework just for forms. The class "form" can be added to any form input to style it properly. You can see the examples on the documentation: https://form.js.org
Here an example of mailing list form:
form {
margin: 1rem;
}
<link href="https://cdn.jsdelivr.net/npm/#codolog/form#1.0.0/dist/form.min.css" rel="stylesheet"/>
<form>
<div>
<div>
<input type="email" class="form" placeholder="Enter your email">
</div>
<div>
<button type="button" class="form full">Subscribe</button>
</div>
</div>
<form>
Is it possible to create a tooltip for an html button. Its the normal HTML button and there is no Title attribute as it is there for some html controls. Any thoughts or comments?
Simply add a title to your button.
<button title="Hello World!">Sample Button</button>
both <button> tag and <input type="button"> accept a title attribute..
Use title attribute.
It is a standard HTML attribute and is by default rendered in a tooltip by most desktop browsers.
For everyone here seeking a crazy solution, just simply try
title="your-tooltip-here"
in any tag. I've tested into td's and a's and it pretty works.
A button accepts a "title" attribute. You can then assign it the value you want to make a label appear when you hover the mouse over the button.
<button type="submit" title="Login">
Login</button>
The title attribute is meant to give more information. It's not useful for SEO so it's never a good idea to have the same text in the title and alt which is meant to describe the image or input is vs. what it does. for instance:
<button title="prints out hello world">Sample Buttons</button>
<img title="Hms beagle in the straits of magellan" alt="HMS Beagle painting" src="hms-beagle.jpg" />
The title attribute will make a tool tip, but it will be controlled by the browser as far as where it shows up and what it looks like. If you want more control there are third party jQuery options, many css templates such as Bootstrap have built in solutions, and you can also write a simple css solution if you want. check out this w3schools solution.
If your button still doesn't show anything with title, check if your button is NOT disabled
You should use both title and alt attributes to make it work in all browsers.
<button title="Hello World!" alt="Hello World!">Sample Button</button>