Sample code:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Get elements number</title>
</head>
CSS Codes
Type: Posts; User: Rain Lover; Keyword(s):
How to get the number of elements with a non-empty class name
Sample code:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Get elements number</title>
</head>
How to change part of the border color
Here's a sample navigation menu:
nav {
border-top: 5px solid;
}
nav a {
font-size: 12px;
padding: 1em;
Actually you can do it even in Chrome: copy and...
Actually you can do it even in Chrome: copy and paste some text into the input fields.
Reset form invalid values
Here’s a sample form:
<form>
<input type="number">
<input type="number">
<button type="button">Reset</button>
</form>
Cross-browser font height
As you see the outline is collapsed in the following sample:
var input = document.getElementById('input');
var output = document.getElementById('output');
input.addEventListener('input',...
Get the number of edited inputs
Scenario
Every semester my students need to take at least one test. The following form gives the right average grade of a student:
<!DOCTYPE html>
<html lang="en">
<head>
...
Content background cut off
Scroll to the right and you'll see the background is truncated:
div {
width: 300px;
overflow: auto;
}
p {
background: green;
How to get a .swf file URL loaded on a web page
Here's a webpage on which a flash/swf file is loaded. How can I download this swf file/eBook? I looked at the page source, but couldn't find anything. Does the whole eBook have a single .swf URL, or...
Checkbox toggle in Chrome and Opera
Steps to reproduce the issue:
In your browser Settings select Continue where you/I left off under On startup.
Navigate to the demo.
Check the checkbox.
Edit the text.
Close your browser...
Data type of object style property value
Consider this:
main {
width: 400px;
height: 100px;
border: 1px solid #C3C3C3;
display: flex;
}
main div {
Thanks for the answer, but would you mind...
Thanks for the answer, but would you mind teaching me something: I don't understand return. What does it do in JavaScript? Does it mean "Do nothing"?
Firefox fires on choose, not on change
Consider this:
<input type="file" id="filePicker">
<script>
document.getElementById('filePicker').onchange = function() {
alert('Hi!');
};
</script>
Thanks for the suggestions! :)
Thanks for the suggestions! :)
The point is enough space differs from browser to...
The point is enough space differs from browser to browser. In addition, Google might change the form style and size in the future, which is out of my control.
That leaves unwanted space below the iframe in...
That leaves unwanted space below the iframe in Chrome and some other browsers.
Cross-browser Iframe Height
I have a Google form embedded into my blog:
http://tmblrlabs.tumblr.com/contact
Simplified demo:
https://jsfiddle.net/kexgcd0a/
It looks ideal on Chrome — neither an extra scrollbar nor...
onbeforeunload event parameter and empty return value
Q1: I have seen the following code in most sources:
window.onbeforeunload = function () {
return 'You might lose your data!';
};
For example:
Attribute Default Value
Can you get an attribute default value so you don't have to repeat it in the following example:
<p title="foo" id="p">Hello, world!</p>
<input type="text" id="i">
<script>
var p =...
padding:initial vs. padding:0
Does padding:initial have any advantage over padding:0? Example:
<style>
textarea {
padding: 0;
}
</style>
<textarea>Hello, world!</textarea>
Comparison with 0 and JSLint error
Here's the code:
<input type="number" value="0" id="input">
<script>
if (document.getElementById('input').value == 0) {
alert('Hello, world!');
}
</script>
HTML Pencil: an online HTML editor with real-time preview
HTML Pencil is an online HTML editor created for modern browsers.
Please review the source code and provide feedback:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
Target=“_blank” vs window.open
I'm working on an application where users enter some input and they shouldn't leave the page when clicking on share links, e.g. a Facebook share link:
<a...
Thanks for the explanation! I finally decided to...
Thanks for the explanation! I finally decided to use two separate functions.
One element, multiple events
In jQuery you can easily do it like this:
$("#foo").focus(function () {
// Do this.
}).blur(function () {
// Do that.
});
Can we do something similar in JavaScript so we don't...
Yes, it seems to be working with no problem....
Yes, it seems to be working with no problem.
Thanks, anyway!