I have a .html document that looks like this:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Change color</title>
<style>
.colortext {
color: red;
}
</style>
</head>
<body>
<p>bla bla lbla <span class="colortext">the</span>,
the balfds of .</p>
</body>
</html>
In this document I give to the a red color. But how should I go in order to change color of every thein my huge text? Is there a way to change color in order not to write
<span class="colortext">
for every word, I need?
You can use Javascript to do this. I am not writing the whole code just giving you hints. Get by this var code = document.getElementById("demo") or ByTagName or ByName or any method. Details: https://www.w3schools.com/jsref/met_document_getelementbyid.asp . then replace value "the" with '<span class="colortext">the</span>' using javascript replace method. Details: https://www.w3schools.com/jsref/jsref_replace.asp
Yes with only HTML and CSS that is the only way.
I would use
<font color="red">the</font>
If you want use javascript to achieve this you can use regex like so.
HTML
<p id="sentence">bla bla lbla the,
the balfds of .</p>
Javascript
var sentence = document.getElementById('sentence');
var text = sentence.textContent;
var replaceWord = text.replace(/\bthe\b/g,"<span class='colortext'>$&
</span>")
sentence.innerHTML = replaceWord;
Related
I am looking to create a website that compiles the HTML code that you write it in a text editor.
Here is my code:
<!DOCTYPE html>
<html>
<head><title>HTML editor</title></head>
<body>
<textarea id="textarea">
</textarea>
<iframe id="frame" srcdoc="This is where the code is interpreted. ">
</iframe>
<button onclick="run();"></button>
<script>
function run() {
var x = document.getElementById("textarea").value;
var y = document.getElementById("frame");
y.srcdoc = x;
}
</script>
</body>
</html>
Write now, I have successfully created something that compiles html code. But I want to do the syntax highliting. How do I highlight the text?
Just add the required CSS and JS for Prism.js.
<!DOCTYPE html>
<html>
<head>
...
<link href="https://myCDN.com/prism#v1.x/themes/prism.css" rel="stylesheet" />
</head>
<body>
...
<script src="https://myCDN.com/prism#v1.x/components/prism-core.min.js"></script>
<script src="https://myCDN.com/prism#v1.x/plugins/autoloader/prism-autoloader.min.js"></script>
</body>
</html>
Then add below HTML element
<pre><code class="language-css">p { color: red }</code></pre>
whatever code you write in this element will have syntax highlighting. class="language-css" determines the language for hightlighting, you can change as per your requirement. You can find all supported languages here.
Note: this is a basic example you can start from here and find more info at prism.js usage
I would like to get information when I put buttons, for this I use DOM, but I have errors, how can I solve this problems?
I tried to confirm if name is correct, and search about DOM, but I couldn't figure out it.
<!DOCTYPE html>
<html lang='en'>
<head>
<meta charset="uft-8">
<title>Pomodoro Timer</title>
</head>
<body>
<p class="menu">menu</p>
<p class="timer">0.00</p>
<button data-option='start' class="timer_button" >start</button>
<button data-option='stop' class="timer_button">stop</button>
<button data-option='reset' class="timer_button">reset</button>
<script>
const buttons = document.querySelectorAll('[data-option]');
function test(e){
console.log(e);
}
buttons.forEach(()=>buttons.addEventListener('click',test));
</script>
</body>
I would like to see the results in the console when I put the buttons.
buttons.forEach((button)=>button.addEventListener('click',test))
The buttons is a list. When you iterate over it with forEach you can get each button as the first argument of the method. And that is where you must attach the event handler.
I am coding a C# forms application that lets a user add custom html nodes to a html webpage. I have some javascript code that selects a html node to execute specific code for objects such as a jQuery ui slider.
To identify html nodes, I need to store an attribute in the tag that identifies the tag.
I am new to writing html code, and as such, I would like to ask if there is any reason why I should not use data attributes for tags? Are there any limitations are disadvantages that I should be aware of?
Here is some example code that I have currently working:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div data-customwebpagelayout-name='slider-increments'>
<div data-customwebpageobject-name='slider-increments'></div>
</div>
<p data-customwebpageobject-output-name='slider-increments'>1</p>
</body>
</html>
Thank you.
The common way to identify and select HTML tags is with either class or id.
If there is only going to be one of something on a page, you should use id. It looks like you have multiple of the same thing you want to identify, so I'd use class like so:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div class="customwebpagelayout slider-increments" >
<div class="customwebpageobject slider-increments"></div>
</div>
<p class="customwebpageobject slider-increments">1</p>
</body>
</html>
Then you could select the nodes with javascript like so:
document.getElementsByClassName("slider-increments");
or if you decide to use jQuery:
$(".slider-increments");
Data attributes are more of a pain to work with:
Raw Javascript (code adapted from code in this answer):
var matchingElements = [];
var allElements = document.getElementsByTagName('*');
for (var i = 0, n = allElements.length; i < n; i++){
if (allElements[i].getAttribute('data-customwebpagelayout-name') !== null){
// Element exists with attribute. Add to array.
matchingElements.push(allElements[i]);
}
}
//use matchingElements;
jQuery:
$("*[data-customwebpagelayout-name='data-customwebpagelayout-name']");
let's assume that the content is empty as given below.
<head>
</head>
If I want to change it dynamically to
<head>
<script src="jquery-1.8.0.min.js"></script>
</head>
is there anyway that AppInventor can do that?
You can select it and add to it as normal:
$('head').append('</script>');
JavaScript:
document.getElementsByTagName('head')[0].appendChild( ... );
Make DOM element like so:
script=document.createElement('</script>');
script.src='src';
document.getElementsByTagName('head')[0].appendChild(script);
Some simple javascript to change the innerHtml of document.head will work
document.head.innerHTML = "<script src=\"jquery-1.8.0.min.js\"></script>";
How about:
var HeadScript = document.createElement("SCRIPT")
HeadScript.src = "jquery-1.8.0.min.js"
document.head.appendChild(HeadScript)
How can I create a text area in html where the user can change font style, size and colour. I have spent about an hour searching to no avail. I can find simple text boxes where users can input data, but not where they can change font size style and colour
thanks
Try using TinyMCE text editor with custom configured toolbars (you should turn off toolbar buttons that you dont need)
I think you looking for textarea (WYSIWYG) editors. You can find more by googling. Try these,
CKEditor
Demo: http://ckeditor.com/demo
TinyMCE
Demo: http://www.tinymce.com/tryit/full.php
For More, Check these links for more editors,
http://web.enavu.com/tutorials/14-jquery-and-non-jquery-rich-text-editors/
http://www.webdesignerdepot.com/2008/12/20-excellent-free-rich-text-editors/
At the very most basic, you might need to write some javascript.
You could possibly have a dropdown that shows font size from 4px to 30px, for example. Example:
<textarea id="textarea1">test 123</textarea>
<select onchange="textarea1.style.fontSize = this.value;">
<option value="12px" selected="selected">12px</option>
<option value="4px">4px</option>
<option value="30px">30px</option>
</select>
For changing background color, the onchange code would be textarea1.style.backgroundColor = this.value; with possibly values #ff0000 for red, #00ff00 for green and so on.
For changing style, you might need a few if statements such as:
if(this.value == 'u')
textarea.style.textDecoration = 'underline';
else
textarea.style.textDecoration = '';
if(this.value == 'i')
textarea.style.fontStyle = 'italic';
else
textarea.style.fontStyle = 'normal';
if(this.value == 'b')
textarea.style.fontWeight = 'bold';
else
textarea.style.fontWeight = '';
Though you might need to customize the code above a bit to cater for combined styles such as bold italic.
try this :-
$('btn1').click(function(){
$('textarea').css("font-style","italic");
}
i think you have to create a list of buttons for each style and then change the second parameter of the css method as you want .
try this
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style>
#container {width:100%; text-align:center;}
</style>
</head>
<body>
<div id="container">
<textarea name="mytextarea" cols="10" rows="10" style="font-family:comic sans ms"></textarea>
</div>
</body>
</html>