Permalink
Browse files

Playing with the display of the code examples.

  • Loading branch information...
1 parent 0b9c08e commit 23e8083a9d9febb3af2e3aafa84891c4bdc8a274 @tjvantoll committed Feb 19, 2013
@@ -22,25 +22,41 @@
border-radius: 5px;
margin-bottom: 1.5em;
overflow-x: auto;
+ position: relative;
h6 {
@extend .striped_bg;
position: relative;
top: -1px;
- color: $custom_header_color;
- padding: 0.2em 1em;
- border-bottom: 1px solid $custom_header_color;
+ color: black;
+ padding: 0.2em 1em 0.2em 0.5em;
+ border-bottom: 1px solid black;
font-size: 1em;
a {
position: absolute;
top: 0.2em;
- right: 1em;
- font-size: 0.7em;
+ right: 0.5em;
+ font-size: 0.8em;
+ font-weight: normal;
color: white;
}
}
+ &::after {
+ position: absolute;
+ right: 1px;
+ bottom: 1px;
+ content: 'Demo';
+ background: white;
+ color: black;
+ border-color: black;
+ border-width: 1px 0 0 1px;
+ border-style: dotted;
+ font-size: 0.8em;
+ padding: 0.2em 0.3em;
+ border-radius: 5px 0 0 0;
+ }
}
@media all and (max-width: 500px) {
.code_example {
@@ -30,7 +30,7 @@ How will the browser handle this?
All browsers will prevent entry of additional characters, but they do not trim excess characters already present. Additionally, all browsers will allow a form containing the above input to submit. *Note: Opera is the only browser to set the `validity.tooLong` property to `true` in this situation. Despite this, it does not prevent form submission.*
-Why is submission not prevented? The key is in the [specificationn](http://www.whatwg.org/specs/web-apps/current-work/#concept-input-value-dirty-flag):
+Why is submission not prevented? The key is in the [specification](http://www.whatwg.org/specs/web-apps/current-work/#concept-input-value-dirty-flag):
> Constraint validation: If an element has a maximum allowed value length, its dirty value flag is true, its value was last changed by a user edit (as opposed to a change made by a script), and the code-unit length of the element's value is greater than the element's maximum allowed value length, then the element is suffering from being too long.
@@ -46,10 +46,10 @@ So let's take another approach. What happens if you have the same input:
<div class="code_example">
<h6>
- Demo - Triggering tooLong Errors
+ Triggering tooLong Errors
<a href="/demos/2012-10-17/tooLong.html" target="_blank">Open in New Window</a>
</h6>
- <iframe style="width: 100%; height: 110px;" frameborder="0" src="/demos/2012-10-17/tooLong.html"></iframe>
+ <iframe style="width: 100%; height: 130px;" frameborder="0" src="/demos/2012-10-17/tooLong.html"></iframe>
</div>
Upon edit IE10 and Chrome will set the `validity.tooLong` property to `true` and prevent form submission. If the user attempts to submit a form after removing the "C" they will see the following in those browsers:
@@ -75,10 +75,10 @@ And here's the result:
<div class="code_example">
<h6>
- Demo - jQuery UI Vertical Tabs
+ jQuery UI Vertical Tabs
<a href="/demos/2012-11-08/verticalTabs.html" target="_blank">Open in New Window</a>
</h6>
- <iframe style="width: 100%; height: 265px;" frameborder="0" src="/demos/2012-11-08/verticalTabs.html"></iframe>
+ <iframe style="width: 100%; height: 275px;" frameborder="0" src="/demos/2012-11-08/verticalTabs.html"></iframe>
</div>
Feel free to use this or modify it to your liking.

0 comments on commit 23e8083

Please sign in to comment.