document.querySelector( "style" ).innerHTML +=
"html {" +
" background-color: #0dd;" +
"}";
html {
background-color: #fff;
font-family: Arial;
}
body {
display: flex;
justify-content: center;
}
td {
background-color: #fafafa;
}
th:first-child, td:first-child {
border-left-style: none;
}
th:last-child, td:last-child {
border-right-style: none;
}
th:first-child {
border-top-left-radius: 1rem;
}
th:last-child {
border-top-right-radius: 1rem;
}
tr:last-child td {
border-bottom-style: none;
background-color: #efefef;
}
tr:last-child td:first-child {
border-bottom-left-radius: 1rem;
}
tr:last-child td:last-child {
border-bottom-right-radius: 1rem;
}
<html>
<head>
<style>
::selection {
background-color: #0df; color: #0df;
}
table, th, td {
padding: 1rem;
border-style: solid;
border-color: #eee;
border-collapse: collapse;
}
table {
margin-top: 1rem;
border-style: none;
}
th {
border-top-style: none;
border-color: #111;
background-color: #222;
color: #fff;
border-bottom-color: #fff;
}
</style>
</head>
<body>
<table>
<tr> <th>One</th><th>Two</th><th>Three</th> </tr>
<tr> <td>four</td> <td>five</td><td>six</td> </tr>
<tr> <td>seven</td> <td>eight</td><td>nine</td> </tr>
</table>
</body>
</html>
document.querySelector( "style" ).innerHTML +=
"html {" +
" background-color: #0dd;" +
"}";
I have large contents of HTML/CSS files that I want to "inject" into parts of a webpage like what I'm doing with the style tag in this example.
I would prefer to keep these files unchanged like this:
document.querySelector( "style" ).innerHTML += "
html {
background-color: #0dd;
}
";
Without having to wrap every JavaScript line in quotation marks and adding a + operator at the end of each line.
Do I have to convert all of my code into this format? Or is there a way within JavaScript to add this HTML/CSS code into an element as is; without having to change the format of the original code on a line by line basis?
And The specific CSS and HTML code here is irrelevant. I'm using it just as an example.
You can use Template literals
Template literals are string literals allowing embedded expressions. You can use multi-line strings and string interpolation features with them.
Using normal strings, you would have to use the following syntax in order to get multi-line strings:
console.log('string text line 1\n' +
'string text line 2');
// "string text line 1
// string text line 2"
Using template literals, you can do the same like this:
console.log(`string text line 1
string text line 2`);
// "string text line 1
// string text line 2"
In you case:
document.querySelector( "style" ).innerHTML +=
`html {
background-color: #0dd;
}`;
Related
I want to colorize my text and I'm using these signs to do it
() and || and ++
if a text is between | signs then it will be blue and etc...
Here is the code in action:
const text = "|Working on the| ideas |above|, and if you're working " +
"with a form, you can define a hidden input and assign it a " +
"value |of the last| focused input Working on the ideas above, " +
"and if you're working with a form, you can define a hidden |input " +
"and assign| it a value of the last focused input Working " +
"on the ideas above, and if you're working with a |form,| " +
"you can define a hidden input and assign it |a| value of the " +
"last |focused input|";
const contentArea = document.getElementById('contentArea')
let render = '';
render += getColored(text);
contentArea.innerHTML = render;
function getColored(text) {
let result = text;
result = result.replace(/\|([^|]+)\|/g, '<span class="blue-string">$1</span>');
result = result.replace(/\(([^|]+)\)/g, '<span class="red-string">$1</span>');
result = result.replace(/\+([^|]+)\+/g, '<span class="orange-string">$1</span>');
return result;
}
.blank {
display: inline-block;
border-bottom: 4px dotted red;
width: 150px;
}
.blue-string {
font-family: "Vazir";
color: #7e7cff;
display: inline-block;
text-shadow: 0px 0px 1px #010076;
}
.red-string {
font-family: "Vazir";
color: #ff005e;
display: inline-block;
text-shadow: 0px 0.5px 1px #e40053;
}
.orange-string {
font-family: "Vazir";
color: #ffb000;
display: inline-block;
text-shadow: 1px 1px 1px #b46a00;
}
<div id="contentArea"></div>
As you see everything works fine with | sign highlights But for () and ++ signs if I have more than one occurrence of using them distortions occur have a look at this:
const text = "|Working on the| ideas |above|, and if you're working " +
"with a form, you can define a hidden input and assign it a " +
"value |of the last| focused input Working on the ideas above, " +
"and if you're working with a form, you can define a hidden |input " +
"and assign| it a value of the last focused input Working " +
"on the ideas above, and if you're working with a |form,| " +
"you can define a hidden input and assign it |a| value of the " +
"last |focused input|";
const contentArea = document.getElementById('contentArea')
let render = '';
render += getColored(text);
contentArea.innerHTML = render;
function getColored(text) {
let result = text;
result = result.replace(/\|([^|]+)\|/g, '<span class="blue-string">$1</span>');
result = result.replace(/\(([^|]+)\)/g, '<span class="red-string">$1</span>');
result = result.replace(/\+([^|]+)\+/g, '<span class="orange-string">$1</span>');
return result;
}
.blank {
display: inline-block;
border-bottom: 4px dotted red;
width: 150px;
}
.blue-string {
font-family: "Vazir";
color: #7e7cff;
display: inline-block;
text-shadow: 0px 0px 1px #010076;
}
.red-string {
font-family: "Vazir";
color: #ff005e;
display: inline-block;
text-shadow: 0px 0.5px 1px #e40053;
}
.orange-string {
font-family: "Vazir";
color: #ffb000;
display: inline-block;
text-shadow: 1px 1px 1px #b46a00;
}
<div id="contentArea"></div>
Note that I used two occurrences of using () signs...
As I did both this in a same approach for | and () and ++, why I get this unexpected behavior and how to fix this?
NOTE: for + sign the same distortion occurs.
Typo in your regex. For |...| delimiters, you set \|([^|]+)\| (all non-pipe between pipes), which is correct.
For +...+ delimiters, you set \+([^|]+)\+ (all non-pipe between pluses), which is incorrect. Should be \+([^+]+)\+.
For (...) delimiters, you set \(([^|]+)\) (all non-pipe between parenthesis), which is incorrect. Should be \(([^)]+)\).
const text = "(Working on the ideas above), and |if| you're +working+ with a form, you can define a hidden input and assign it a value of the last focused input Working on the ideas above, and if you're working with a form, you can define a hidden input and assign it a value of the last (focused) input Working on the ideas above, and if you're working with a form, you can define a hidden input and assign it a value of the last focused input";
const contentArea = document.getElementById('contentArea')
let render = '';
render += getColored(text);
contentArea.innerHTML = render;
function getColored(text) {
let result = text;
result = result.replace(/\|([^|]+)\|/g, '<span class="blue-string">$1</span>');
result = result.replace(/\(([^)]+)\)/g, '<span class="red-string">$1</span>');
result = result.replace(/\+([^+]+)\+/g, '<span class="orange-string">$1</span>');
return result;
}
.blank {
display: inline-block;
border-bottom: 4px dotted red;
width: 150px;
}
.blue-string {
font-family: "Vazir";
color: #7e7cff;
display: inline-block;
text-shadow: 0px 0px 1px #010076;
}
.red-string {
font-family: "Vazir";
color: #ff005e;
display: inline-block;
text-shadow: 0px 0.5px 1px #e40053;
}
.orange-string {
font-family: "Vazir";
color: #ffb000;
display: inline-block;
text-shadow: 1px 1px 1px #b46a00;
}
<div id="contentArea"></div>
You can use a lazy quantifier ? to match as little characters as needed. So the regex can match the next symbol pair
const text = "(Working on the ideas above), and if you're |working| with a form, you can define a hidden input and assign it a value of the last focused input Working on the ideas +above+, and if you're working with a form, you can define a hidden +input+ and____ assign it a value of the last (focused) input +Working on the ideas above+, and if you're working with a form, you can define a |hidden input and assign| it a value of the last focused input";
const contentArea = document.getElementById('contentArea');
const getColored = text => text.replace(/\|(.+?)\|/g, '<span class="blue-string">$1</span>')
.replace(/\((.+?)\)/g, '<span class="red-string">$1</span>')
.replace(/\+(.+?)\+/g, '<span class="orange-string">$1</span>')
.replace(/_+/g, " <span class='blank'></span> ");
contentArea.innerHTML = getColored(text);
.blank {
display: inline-block;
border-bottom: 4px dotted red;
width: 150px;
}
.blue-string {
font-family: "Vazir";
color: #7e7cff;
display: inline-block;
text-shadow: 0px 0px 1px #010076;
}
.red-string {
font-family: "Vazir";
color: #ff005e;
display: inline-block;
text-shadow: 0px 0.5px 1px #e40053;
}
.orange-string {
font-family: "Vazir";
color: #ffb000;
display: inline-block;
text-shadow: 1px 1px 1px #b46a00;
}
<div id="contentArea"></div>
I have used the following javascript and I was able to copy the text, but I would like to add the following to be copied but it should not be visible in the html page.
function copy(that){
var inp = document.createElement('input');
document.body.appendChild(inp)
inp.value =that.textContent
inp.select();
document.execCommand('copy',false);
inp.remove();
}
and used the following text in the table to copy the content inside tag
<td onclick=\"copy(this)\">yeci0192</td>";
The above script is working,
but, I would like to add "File=" before "yeci0192" but it should not be displayed in the html.
On click File=yeci0192
should get copied.
function copy(that){
var inp =document.createElement('input');
document.body.appendChild(inp)
inp.value = "File=" +that.textContent
inp.select();
document.execCommand('copy',false);
inp.remove();
}
This will then just append th "File= " partot he copied string
is that what you are looking for ?
[edit] changing on Purushothaman remarks
const onCopy = document.querySelector('#toCopy')
document.querySelectorAll('.toCopy').forEach(d=>
{
d.onclick=_=>
{
let copyText = 'File='+d.dataset.info
navigator.clipboard.writeText(copyText )
onCopy.textContent = copyText + ' -> copied !'
onCopy.classList.add('show')
setTimeout(()=>{ onCopy.classList.remove('show')}, 2000);
}
})
.toCopy {
display: inline-block;
padding: .2em .3em;
cursor:pointer;
background-color:white;
font-size: 2em;
border: 1px solid grey;
border-radius: .2em;
}
.toCopy:hover {
background-color:yellow;
font-weight: bold;
}
#toCopy {
display: none;
background-color: orange;
border: 1px solid grey;
border-radius: .2em;
padding: .2em .3em;
position: fixed;
top:70px;
left:10px;
}
#toCopy.show {
display: inline-block;
}
<div class="toCopy" data-info="yeci0192">®</div>
<div class="toCopy" data-info="hot.coffee">☕</div>
<div id="toCopy"></div>
I have an HTML table:
<tbody>
<tr>
<td> <ul id="element"></td>
</tr>
</tbody>
The values in the table are passed from the database using jquery:
element += '<li>' + valueOfElement.ELEMENTNAME + '</li>'
I want to show some information related to the element name in a dialog box when user clicks the element name. I am new to JavaScript so I don't know how to make a dynamic value clickable and how to open a dialog box on click of the element.
You can add an anchor tag around your element.
element += "<li><a href='javascript:void(0)' onclick='myDialogFunction()'>" + valueOfElement.ELEMENTNAME + "</a></li>";
To answer your styling question, just add this CSS rule to affect all anchor tags
a {
text-decoration: none;
color: #000;
}
or you can assign your links a class
<html>
<a class='mystyledlink' />
</html>
<style>
.mystyledlink {
text-decoration: none;
color: #000;
}
</style>
Using jquery you can bind a click event to the elements that will show the dialog box. Without seeing your dialog box or what all that entails I can't really include it but you could do something like this.
$('tbody').on('click','li',function(){
var value = $(this).text();
//do something with value and show dialog box
})
This approach is in vanilla JavaScript. You could try something like this: Make use of addEventListener to listen for click events on all your clickable cells. You could make use of document.querySelectorAll like I did to access all cells.
var tdGroup = document.querySelectorAll( 'td' ),
i;
for( i = 0; i < tdGroup.length; i++ ){
tdGroup[ i ].addEventListener( 'click', messages )
}
function messages(){
alert( 'you clicked' + this.textContent );
}
* {
box-sizing: border-box;
}
html,
body {
height: 100%;
margin: 0;
}
html {
font-family: sans-serif;
overflow: hidden;
}
body {
display: flex;
}
table {
margin: auto;
border-collapse: collapse;
position: relative;
top: 2rem;
}
th {
text-transform: uppercase;
}
th,
td {
padding: 1rem;
border: 1px #000 solid;
text-align: center;
transition-property: background;
transition-duration: 1s;
}
td:hover {
cursor: pointer;
background-color: #eee;
color: #333;
}
td:active {
background-color: #ddd;
color: #444;
transition-duration: 0.25s;
}
p {
width: 100%;
padding: 1rem;
text-align: center;
background-color: #000;
color: #eee;
position: absolute;
top: 0;
left: 0;
}
<p>Click a secondary item of the table for more information</p>
<table>
<tr>
<th>
Technology Field
</th>
<th>
Language
</th>
<th>
Resources
</th>
<th>
Related technologies
</th>
</tr>
<tr>
<td id="front-end">
Front End
</td>
<td id="javaScript">
JavaScript
</td>
<td id="stack">
StackOverflow
</td>
<td id="hcs">
HTML, CSS, SASS
</td>
</tr>
</table>
I am trying to add a hover over effect on my boxes but it doesn't seem to show when you add a background color. I have added a border to the a: hover tag and when you hover over any box it does something odd. I was told that it is working, but for some reason its just hidden. The problem seems to be in my onlineBorders() function or css code.
Here is the link: http://codepen.io/duel_drawer8/pen/QNxyNq?editors=0001
CSS:
body {
background-color: #FF7A5A;
}
#rectangles {
margin: 3px;
}
.container {
margin: 0px auto;
width: 700px;
}
.name {
width: 80px;
padding-top: 25px;
font-weight: bold;
color: #00AAA0;
}
.img-responsive {
height: 70px;
}
#rectangles img {
margin-left: -15px;
}
.description {
padding-top: 25px;
color: #FCF4D9;
}
.topHeader {
border: 2px solid black;
margin: 10px;
}
.topOnline #rectangles {
background: #FFB85F;
}
.middleOffline #rectangles {
background: #462066;
}
.bottomClosed #rectangles {
background: #462066;
}
#allTypes {
background:
}
a:hover{
border: 2px solid;
}
Javascript:
function onlineBorders(url, format, status, displayLogo, displayName, infoStreaming) {
$(format).append('<div id="profilePic" class="col-xs-2">' + '<img class="img-responsive" src=' + displayLogo + '>' + '</div><div class="col-xs-3 text"><p class="name">' + displayName + '</p>' + '</div>' + '<div class="description col-xs-7">' + infoStreaming + '</div></div>' + '')
}
So if you are just trying to add a hover to the rectangles all you need to do is replace
a:hover{
border: 2px solid;
}
with
#rectangles:hover{
background-color: white;
border: 2px solid blue;
box-sizing: border-box
}
You can check it out here: http://codepen.io/gogojojo/pen/aZoxYq
Also I would try avoiding using ids when you have more than one of type of whatever. It would make much more sense to add a class rectangles to all of the boxes instead of an id.
You weren't very clear about what is "weird," but I think you just need to add this to your CSS:
a {
display:block;
}
Anchors are inline elements, so you need to make then block or inline-block for the border to display properly.
To clean up the style a little more, you can try:
a {
display:block;
padding:5px;
}
a:hover{
border: 2px solid;
padding:3px;
}
As Joseph mentioned, you have the same ID used for several elements in your HTML, which is not valid markup. An ID must be unique for the page.
My CSS above works by selecting all the anchors to apply the style, but you may consider adding a new CSS class to apply the style with.
<!DOCTYPE html>
<html>
<title>W3.CSS</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">
<body class="w3-container">
<h2>Buttons</h2>
<input type="button" class="w3-btn w3-hover-aqua" value="Input Button">
<button class="w3-btn w3-hover-red">Button Button</button>
<a class="w3-btn w3-hover-blue" href="#">Link Button</a>
<h2>Links </h2>
Hover on the link
</body>
</html>
As it currently stands, this question is not a good fit for our Q&A format. We expect answers to be supported by facts, references, or expertise, but this question will likely solicit debate, arguments, polling, or extended discussion. If you feel that this question can be improved and possibly reopened, visit the help center for guidance.
Closed 9 years ago.
So I have a Javascript array of CSS selectors:
array is like the following: '.header', '#footer', '#nav', etc
I also have a div containing my site CSS as text (12,000 lines long):
<div id="all">
#nav
{
border: 1px solid;
color: black;
}
#footer
{
display: block;
}
</div>
I need to take each selector from the array and for its match in $('#all'), remove everything from the start of the selector to it's end bracket.
i.e.
// for each from the array
$('#all').find($(this));
// removes everything from selector to its end bracket
Can anyone advise? It's to remove unused site CSS. I've been stuck for a while. Appreciated!
Update: Added debug mode, input, and output.
Okay, I guess you have a bunch of CSS and you wanna remove a few rules. Let me assume these:
Each row has only one selector.
Each row starts with that selector.
Each row has one complete rule. i.e., selector {property: value;}
If the third option is not succeeding, there are a lot of CSS compressors, and you can use them to make this CSS:
#footer
{
display: block;
}
Into:
#footer { display: block; }
Now once you have this in a text file, you can do the manipulation using PHP or some good programming language. I do not recommend client side one. Say if you have PHP, and you have the set of rules here:
#nav { border: 1px solid; color: black; }
#footer { display: block; }
And you have your array:
$remove = array('.header', '#footer', '#nav');
You can use something like this:
<pre><?php
$debug = false;
$rules[] = ".header { border: 1px solid; color: black; }";
$rules[] = "#nav { border: 1px solid; color: black; }";
$rules[] = "#footer { display: block; }";
$rules[] = "#header { border: 1px solid; color: black; }";
$rules[] = ".nav { border: 1px solid; color: black; }";
$rules[] = ".footer { display: block; }";
$remove = array('.header', '#footer', '#nav');
$final = array();
foreach ($rules as $rule)
{
if ($debug) echo "Debug: ", var_dump(strpos($rule, " ")) . "\n";
if ($debug) echo "Debug: ", var_dump(substr($rule, 0, strpos($rule, " "))) . "\n";
if ($debug) echo "Debug: ", var_dump(in_array(substr($rule, 0, strpos($rule, " ")), $remove)) . "\n";
if ($debug) echo "---\n";
if ( !in_array(substr($rule, 0, strpos($rule, " ")), $remove) )
$final[] = $rule;
}
echo implode("\n", $final);
?></pre>
The above script includes a debug. If you set $debug to true, you can see the different stuffs being checked.
The input given to this is:
.header { border: 1px solid; color: black; }
#nav { border: 1px solid; color: black; }
#footer { display: block; }
#header { border: 1px solid; color: black; }
.nav { border: 1px solid; color: black; }
.footer { display: block; }
The output is:
#header { border: 1px solid; color: black; }
.nav { border: 1px solid; color: black; }
.footer { display: block; }
Fiddle: http://phpfiddle.org/main/code/ehd-z4j