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
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>
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;
}`;
I recently started working on UI. So I am using angularjs with html. I have one doubt regarding Internet Explorer css styling. I am using a angular call to decide a background color of a div based on a field value. It is working fine in chrome and firefox. But in IE it is giving some error as below
This is my HTML code
<div class="row" style="border-bottom: 1px solid black; border-top: 1px solid black; padding-top: 5px; padding-bottom: 5px;margin-right:5px;margin-left:5px; margin-bottom: 5px; margin-top: 5px; clear: both; background-color: {{get_color(system.status)}}; position: relative">
This is my angular function
$scope.get_color = function(val){
if (val == '0'){
return 'rgb(245,215,215)';
}
else{
return 'rgba(211,211,211,0)';
}
}
Any Idea what am I missing?
Your background-color is set to an Angular expression of {{get_color(system.status)} but it should be {{get_color(system.status)}}. Notice the missing } at the end.
Try changing your HTML to this:
<div class="row" ng-style="get_color(system.status)" style="border-bottom: 1px solid black; border-top: 1px solid black; padding-top: 5px; padding-bottom: 5px;margin-right:5px;margin-left:5px; margin-bottom: 5px; margin-top: 5px; clear: both; position: relative">
And in your get_color function, do something like this:
$scope.get_color = function(val){
if (val == '0'){
return { "background-color": 'rgb(245,215,215)' };
}
else{
return { "background-color": 'rgb(211,211,211,0)' };
}
}
To summarize, use ng-style and have your function return an object containing the style(s) you want to use.
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 8 years ago.
Improve this question
I have a list of items contained in a dynamically created div. Unfortunately when the list is too long, it overflows the div. Is there a way to get a newline when the list overflows?
CSS:
div.StdDiv{
width: 30%;
background-color: #ffcc00;
text-align: center;
font-size: 100%;
color: #000000;
padding: 0.5em;
border: 1px solid #ccc;
margin-bottom: 1px;
}
ul.boxy {
list-style:none;
padding: 0px;
margin: 0px;
height: auto;
text-align: center;
}
ul.boxy li {
cursor:move;
display:inline;
margin-right: 2px;
margin-bottom: 2px;
padding:2px 6px 2px 6px;
border: 1px solid silver;
background-color: #eee;
font-size: 100%;
}
HTML:
<div id="divListMots" class="StdDiv">
<span id="ListMots">la la lere</span>
</div>
JavaScript:
var numlist = ['0','1','2','3','4','5','6','7','8','9'];
var textlist = ['li0','li1','li2','li3','li4','li5','li6','li7','li8','li9'];
var ListMots ='';
var ListOfWordsStart = '<ul class="boxy" id="ul"> ';
var ListOfWordsEnd = '</ul>';
var LiWordStart = '<li id="box' ;
var LiWordEnd = ' " class="">' ;
var LiWord ='';
var sep = ' ';
var Output = '';
for (var k=0; k<numlist.length; k++) // pour tous les trous
{
var num = numlist[k];
var WordText = textlist[num];
LiWord = LiWordStart + num + LiWordEnd + WordText +'</li>' + sep;
Output = Output + LiWord ;
}
ListOfWords = ListOfWordsStart + Output + ListOfWordsEnd;
document.getElementById('ListMots').innerHTML = ListOfWords;
jsfiddle
Question in english:
Hello,
I have a list of items contained in a dynamically created div.
Unfortunately when the list is too long, it overflows the div. Is there
a way to get a newline when the list overflows?
The easiest way to accomplish this would be to use
display: inline-block;
instead of
display: inline;
New CSS:
ul.boxy li {
cursor:move;
display:inline-block;
margin-right: 2px;
margin-bottom: 2px;
padding:2px 6px 2px 6px;
border: 1px solid silver;
background-color: #eee;
font-size: 100%;
}
Updated jsFiddle
You should note, however, that this may not work with older browsers.
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 9 years ago.
Improve this question
why this problem occurs.I am added a tag element(number) in Hoursdiv through
dynamically.but the problem is:- element is not added in proper way.after added 6
element, space created.
javascript code:-
for(var i=1 ; i<=12; i++) {
(function () {
var cc=i;
if(cc<=9)
cc='0'+i;
var _id1 = "time"+cc;
str1 += "<a id='"+_id1+"' class='hournum a_Cal' >"+cc+"</a>";
}());
}
css code (h2ooooooo edit note: I have no idea if 'a_cal' is actually in the css file, but I've kept it here in case):
'a_cal'
.a_Cal{
text-decoration: none;
color: black;
width: 18%;
height: 11%;
float: left;
border-radius: 4px;
}
.hournum{
padding:5px;
}
.hoursdiv{
border: 1px solid #6699FF;
position: absolute;
top: 25%;
left: 4%;
text-align: center;
color: red;
width: 45%;
height: 52%;
background-color: white;
}
Hm, I feel dirty looking at your code.
If your problem is that space on the right side of the container then let me explain what's going on.
The reason that space is there is because the 6th element is too wide to stay on the same "row", and it gets pushed down to the next row. The reason it's too wide is because of the combined use of %-width and padding in your css, which never ends well.
Illustration
I've constructed an example of how I think you want it to look.
I also cleaned your code a little ;)
Example | Code
In this example I use absolute values instead of percentages. The benefit from this is that I can calculate the exact width required for my container.
A link's width is the sum of the width + padding + margin + border:
40 + (5*2) + (2*2) + (1*2) = 56 px
And we want 5 links per "row"
56 * 5 = 280 px
So the container's width has to be at least 280px to fit 5 links per row.
CSS
.hournum{
text-decoration: none;
color: black;
width: 40px;
float: left;
padding: 0px 5px;
text-align: center;
color: red;
border-radius: 3px;
border: 1px solid black;
margin: 2px 2px;
}
.container{
position: absolute;
top: 10px;
left: 10px;
width: 280px;
background-color: white;
border: 1px solid #6699FF;
padding: 2px;
}
Javascript
var str = "";
for(var i=1 ; i<=12; i++){
var cc = i;
var row
if(i <= 9) cc = "0" + i
str += ''+cc+"";
}
document.body.innerHTML = '<div class="container">'+str+"</div>";
Result