Showing posts with label html. Show all posts
Showing posts with label html. Show all posts

Wednesday, September 19, 2018

Using jQuery to Change or Set Background-Color

You can change the background-color of any element easily in jQuery. All you need is any of these...

$(this).css('background-color', 'red'); // red
$(this).css('background-color', '#000'); // black
$(this).css('background-color', '#00FF00'); // green

If you are not dealing with a jQuery event-handler (where "this" is available), you can use a selector to get and adjust any element's background-color, like so...

$("#MyElementId").css('background-color', 'red'); // red
$("#MyElementId").css('background-color', '#000'); // black
$("#MyElementId").css('background-color', '#00FF00'); // green

Not only can you change any background color now, but you can use the same process to adjust any part of an element's style.

Saturday, August 25, 2018

What values are valid for an ID attribute in an HTML element?

When naming id attributes of HTML tags, you do have some limits.

As stated by the HTML4 specification...

>> ID and NAME tokens must begin with a letter ([A-Za-z]) and may be followed by any number of letters, digits ([0-9]), hyphens ("-"), underscores ("_"), colons (":"), and periods (".").

Source: https://www.w3.org/TR/html4/types.html#type-id

HTML5 has more-relaxed specifications...

There are no other restrictions on what form an ID can take; in particular, IDs can consist of just digits, start with a digit, start with an underscore, consist of just punctuation, etc.

Source: https://www.w3.org/TR/html5/dom.html#element-attrdef-global-id

Sunday, August 19, 2018

How to Wrap Text in Pre-Tags in HTML

You can use PRE tags to make text look like code in most computer terminals, which is a monospaced, Courier font.

But the problem with PRE tags is that the text does not wrap automatically. If the user wants to see a long paragraph, they need to scroll RIGHT on their computer screen, instead of DOWN, which is more intuitive.

To make PRE tagged text autowrap, the code is very simple...

pre {
white-space: pre-wrap;
}

All PRE-tags are now wrapped. This solution will work on all modern browsers.

If you want a solution that works on older machines, the code is a bit more complex...

pre {
white-space: pre-wrap; /* css-3 */
white-space: -moz-pre-wrap; /* Mozilla, since 1999 */
white-space: -pre-wrap; /* Opera 4-6 */
white-space: -o-pre-wrap; /* Opera 7 */
word-wrap: break-word; /* Internet Explorer 5.5+ */
}

(Multi-Browser Solution Source: https://longren.io/wrapping-text-inside-pre-tags/ )