So here's a sample I receive from CMS content:
<p>
First Name
<br />
Location
</p>
Is it possible to add styling to specific content from before/after the <br> tags?
For instance, every text before the <br> tag I want color: red and anything afterwards I want color: purple
Just wrap the text in a span with a class name and style it with CSS. You can do this as much as you want to get the desired results.
The HTML
<p>
<span class="name">First Name</span>
<br>
<span class="location">Location</span>
</p>
The CSS Classes
.name{
color:red;
}
.location{
color:purple;
}
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<style type="text/css">
.red {
color: red;
}
.purple {
color: purple;
}
</style>
</head>
<body>
<p>
First Name
<br/>
Location
</p>
<p>
First Name Bis
<br/>
Location Bis
</p>
</body>
<script>
var p = $( "p" ).has( "br" ); /* select all p tag with a br tag inside */
var regex = /<p>([\s\S]*?)<br>([\s\S]*?)<\/p>/g; /* regex, i'm not rly familiar but this one select the part between <p> and <br> (group 1) and <br> to </p> (group 2)*/
var i;
for(i = 0; i < p.length; i++){ /* foreach the selected elt */
var newStr = "";
while ((match = regex.exec("<p>" + p[i].innerHTML + "</p>")) !== null) { /* adding <div class = "red">(group 1 contents)</div> same with purple */
newStr += "<div class = \"red\">" + match[1] + "</div><br>";
newStr += "<div class = \"purple\">" + match[2] + "</div>";
p[i].innerHTML = newStr;
}
}
</script>
</html>
The below would accomplish what you're looking to do but it's not a great answer (very brittle).
<p><br></p>
p::before {
content: "First Name";
color: red;
}
p::after {
content: "Location";
color: purple;
}
Related
I am trying to create simple jquery App, but i ran over small problem, which i can't solve, I want to search in textarea box form input field, if input form value will match textarea value, i want to marked matched text, picture below shows what i want to done, any suggestion?
$('#search').on('input', function(e) {
e.preventDefault();
var searchTxtBox = $('#search');
searchTxtBox.val(searchTxtBox.val().replace(/(\s+)/, "(<[^> ]+>)*$1(<[^> ]+>)*"));
var textarea = $('#editor');
var enew = '';
if (searchTxtBox.val() != '') {
enew = textarea.html().replace(/(<mark>|<\/mark> )/igm, "");
textarea.html(enew);
var query = new RegExp("(" + searchTxtBox.val() + ")", "gim");
newtext = textarea.html().replace(query, "<mark>$1</mark>");
newtext = newtext.replace(/(<mark>[^<>]*)((<[^> ]+>)+)([^<>]*<\/mark>)/, "</mark><mark>");
textarea.html(newtext);
} else {
enew = textarea.html().replace(/(<mark>|<\/mark> )/igm, " ");
textarea.html(enew);
}
});
mark {
background-color: red;
color: black;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input placeholder='search' id='search'>
<div id="editor" rows="4" cols="50">
</div>
The simplest way I can think of is positioning a transparent element behind the textarea
and adding the results there:
Key features to program this:
The elements must render the same (size, font, line ect..)
The textarea must have a transparent background.
Whenever the textarea is changed (resized) we need to match the size of the result container.
Here is my implementation:
$(function(){
//Simple helper function to match the size of the elements:
function matchSize($base, $target) {
$target.css({
width : $base.outerWidth(),
height : $base.outerHeight()
});
}
//Attach whenever serach field changed run the query:
$("#search").keyup(function(){
let $search = $(this),
$input = $('#input');
let $result = $input.prev('code');
//Match size:
matchSize($input, $result)
//Search
let marked = $input.val().replace(
new RegExp("(" + $search.val().trim() + ")", "g"),
"<mark>$1</mark>"
);
//Set marked transparent text:
$result.html(marked);
});
//textarea can be resized so always match the size:
$('#input').bind('mouseup', function(){
let $input = $('#input');
let $result = $input.prev('code');
matchSize($input, $result)
});
});
.wrap {
position: relative;
display:block;
}
/* match the two */
.wrap code,
.wrap textarea {
position:absolute;
text-rendering: auto;
letter-spacing: normal;
word-spacing: normal;
text-transform: none;
text-indent: 0px;
text-align: start;
appearance: textarea;
flex-direction: column;
white-space: pre-wrap;
overflow-wrap: break-word;
margin: 0em;
font: 400 13.3333px Arial;
border-width: 1px;
border-style: solid;
padding: 2px;
background-color:transparent;
z-index: 2;
box-sizing: border-box;
}
.wrap code {
z-index: 1;
top:0;
left:0;
border-color:transparent;
color:transparent;
background-color: white;
}
.wrap code mark {
color: transparent;
background-color: yellow;
padding:0;
margin:0;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="wrap">
<code></code>
<textarea id="input">the easiest way to do this and the quickest.</textarea>
</div>
<br/><br/><br/><br/>
Search: <input id="search" placeholder='Search' />
I am working on a website.
I have a div block
<div id="table_and_dqinfo" class="table_and_dqinfo">
<div id="dqdiv" class="dqinfo">
<h4 class="centertext">Information Pane</h4>
<div id="dqdiv_volgraph"></div>
</div>
</div>
dqdiv_volgraph is an image block which has the image link.
Instead of putting the div block above into the CSS to show the image directly on the website, I want to put a CSS button, so that only after I press the button, it would open the div block above to show the image on the website.
Could anyone give me some hints about how to do it?
Is this what u want?
I used checkbox and label as a button.
When you click on label, it checks the checkbox, then using sibling selector (+) of CSS
input:checked + #dqdiv_volgraph{
display:block;
}
I toggle the visibility of the #dqdiv_volgraph div
Feel free to style the label tag and make it look like a button according to your project
Note that the for attrib of label and id of the input should
be same
input,
#dqdiv_volgraph {
display: none;
}
label {
border: 1px solid black;
padding: 5px;
cursor: pointer;
}
input:checked+#dqdiv_volgraph {
display: block;
}
<div id="table_and_dqinfo" class="table_and_dqinfo">
<div id="dqdiv" class="dqinfo">
<h4 class="centertext">Information Pane</h4>
<input id="checkb" type="checkbox">
<div id="dqdiv_volgraph">
<h1>Put image here</h1>
<img src="https://placehold.it/200x200">
</div>
<label for="checkb"> Click me</label>
</div>
</div>
Alternatively, you could also use JavaScript to solve this particular issue.
function showImage(n) {
var Images = document.getElementsByClassName("table_and_dqinfo");
//Get all elements with class "table_and_dqinfo"
var i = 0;
if (Images[n].style.display == "block") {
Images[n].style.display = "none";
return;
}
//Checks to see if the selected Image is already visible. If so it
//switches it makes it invisible
for (i = 0; i < Images.length; i++) {
Images[i].style.display = "none";
}
//Make the other Images invisible.
Images[n].style.display = "block";
//Change selected Image to visible
}
function showAll() {
var Images = document.getElementsByClassName("table_and_dqinfo");
var i = 0;
for(i = 0; i < Images.length; i++) {
if (Images[i].style.display == "block") {
Images[i].style.display = "none";
continue;
}
Images[i].style.display = "block";
}
}
.table_and_dqinfo {
display: none;
background-color: blue;
color: white;
}
.button {
border: 1px solid black;
cursor: pointer;
margin: 20px;
}
<span class="button" onclick="showImage(0)"> Button for Image 1 </span>
<span class="button" onclick="showImage(1)"> Button for Image 2 </span>
<span class="button" onclick="showAll()"> Button to show all Images </span>
<div class="table_and_dqinfo">
<div>
<h4>Image 1</h4>
<div></div>
</div>
</div>
<div class="table_and_dqinfo">
<div>
<h4>Image 2</h4>
<div></div>
</div>
</div>
Style the button as you please. You can also put whatever you want inside the <div class="table_and_dqinfo">
Hello everyone and happy Friday night,
I would like to have the following sentence in the same line and not in two lines:
echo "- About $foundnum results - <div class='feedback-search'><a href=''>Give us Feedback about this result</a></div><p><br>";
The problem is that by applying the css div class='feedback-search' it creates a new line and put the text below. How can I make everything in one line?
Below you find the entire code of my page:
Thank you so much in advance
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>CLIHELP - Help for Command Line Interface</title>
<meta name="description" content="Help for Command Line Interface">
<meta name="author" content="clihelp.org">
<style>
.navmenu {
background-color: #FFFFFF;
}
.navmenu ul {
margin: 0;
padding: 0;
list-style-type: none;
display: flex;
align-items: center;
}
.navmenu li:last-child {
margin-left: auto;
}
.navmenu ul li a {
text-decoration: none;
margin: 4px;
padding: 5px 20px 5px 20px;
color: #FFFFFF;
background: #4285F4;
display: inline-block;
}
.main-content {
padding: 5px 20px 5px 20px;
}
.feedback-search {
font-size: 13px;
}
.title {
font-size: 20px;
}
.title a {
text-decoration: none;
}
.title a:hover {
text-decoration: underline;
}
.tags {
color: #006621;
}
</style>
</head>
<body>
<div class="navmenu">
<ul id=menu>
<li>Clihelp</li>
<li>GitHub</li>
<li><form action='q.php' method='GET'>
<input type='text' size='25' name='search'>
<input type='submit' name='submit' value='Search' >
</form></li>
</ul>
</div>
<div class="main-content">
<?php
$button = $_GET ['submit'];
$search = $_GET ['search'];
if (!$button)
echo "you didn't submit a keyword";
else {
if (strlen($search) <= 1)
echo "Search term too short";
else {
echo "<p>Your search - <b>$search</b> ";
mysql_connect("localhost", "username", "password");
mysql_select_db("dbname");
$search_exploded = explode(" ", $search);
foreach ($search_exploded as $search_each) {
$x++;
if ($x == 1)
$construct .= "(CONCAT(code,cliCommandId) LIKE '%$search_each%' OR os LIKE '%$search_each%' OR title LIKE '%$search_each%' OR tags LIKE '%$search_each%' OR script LIKE '%$search_each%') ";
else
$construct .= "AND (CONCAT(code,cliCommandId) LIKE '%$search_each%' OR os LIKE '%$search_each%' OR title LIKE '%$search_each%' OR tags LIKE '%$search_each%' OR script LIKE '%$search_each%')";
}
$construct = "SELECT * FROM cliCommand WHERE $construct";
$run = mysql_query($construct);
$foundnum = mysql_num_rows($run);
if ($foundnum == 0)
echo "- did not match any documents.</br></br>Suggestions:</br></br>- Make sure all words are spelled correctly.</br>- Try different keywords.</br>- Try more general keywords.</br>- Search by id.";
else {
echo "- About $foundnum results - <div class='feedback-search'><a href=''>Give us Feedback about this result</a></div><p>";
while ($runrows = mysql_fetch_assoc($run)) {
$cliCommandId = $runrows ['cliCommandId'];
$code = $runrows ['code'];
$os = $runrows ['os'];
$title = $runrows ['title'];
$tags = $runrows ['tags'];
$script = $runrows ['script'];
echo "
<div class='title'><a href=''>$title</a></div>
<div class='tags'>$tags</div>
$script<br>
<p>
";
}
}
}
}
?>
</div>
</body>
</html>
Change the div to span:
echo "- About $foundnum results - <span class='feedback-search'><a href=''>Give us Feedback about this result</a></span><p><br>";
^ ^
//Notice the span instead of div --| (here) ------------------------------------------------------------------------| (and here)
The reason that this happens:
The reason why this splits onto two lines is that a <div> is a block level element by default which means that its display value is block.
Block level elements by default expand to fit the width of their container, which in your case is the width of the line. This pushes the following content down to the next line.
A <span> element is an inline element, which by default expands in width to fit its contents.
See this post for a visual explanation on the difference between inline, block and inline-block elements.
I have the following Layout:
<!doctype html>
<html lang="en">
<head>
<style>
html{
font-family: "Trebuchet MS", Helvetica, sans-serif;
color: white;
}
.outer{
/*Maybe something here?*/
}
.inner_1{
background-color: aquamarine;
display: inline-block;
width: 400px; /*(For testing)*/
}
.inner_2{
background-color: mediumaquamarine;
display: inline-block;
width: 400px; /*For testing*/
}
/*or Something like this?*/
/*inner_1:below{
background-color:red;
}*/
</style>
</head>
<body>
<div class="outer">
<div class="inner_1">
<p>This is inner_1. Some Content goes here</p>
</div>
<div class="inner_2">
<p>This should be red if it is <b>below</b> inner_1</p>
</div>
</div>
</body>
</html>
Is there a pure CSS way to select the second div only if it is below the first div? (Which is the case when the viewport-size drops below 800-ish px)
I want to apply color (or any CSS attribute) to the second div only if its below the first div.
I know I could use media-queries to put one div below the other and aplly styles to it but I don't know how much content will be in the div's so thats not an option.
Any ideas? please let me know.
EDIT I'm talking about visual representation.
Yes you can. Use the + selector in CSS
.inner_1 + .inner_2 p {
border: solid red 1px;
}
See this demo
The element+element selector is used to select elements that is placed immediately after (not inside) the first specified element.
http://www.w3schools.com/cssref/sel_element_pluss.asp
you can do it easily using :nth-child() selector
.outer div:nth-child(2){background:red !important;}
<!doctype html>
<html lang="en">
<head>
<style>
html{
font-family: "Trebuchet MS", Helvetica, sans-serif;
color: white;
}
.outer{
/*Maybe something here?*/
}
.inner_1{
background-color: aquamarine;
display: inline-block;
width: 400px; /*(For testing)*/
}
.inner_2{
background-color: mediumaquamarine;
display: inline-block;
width: 400px; /*For testing*/
}
/*or Something like this?*/
.outer div:nth-child(2){background:red;}
</style>
</head>
<body>
<div class="outer">
<div class="inner_1">
<p>This is inner_1. Some Content goes here</p>
</div>
<div class="inner_2">
<p>This should be red if it is <b>below</b> inner_1</p>
</div>
</div>
</body>
</html>
I am now using javascript.
Complete solution can be found here
function GetAllElementsAt(x, y) {
var $elements = $("body *").map(function() {
var $this = $(this);
var offset = $this.offset();
var l = offset.left;
var t = offset.top;
var h = $this.height();
var w = $this.width();
var maxx = l + w;
var maxy = t + h;
return (y <= maxy && y >= t) && (x <= maxx && x >= l) ? $this : null;
});
return $elements;
}
I need to place a star, ★, on a Web page, repeatedly. Is there a way to specify a symbol and how many times it should appear, in HTML or CSS? E.g., something like this, but not necessarily the same syntax, in which an item is specified, along with a quantity:
<repeat n="5">★</repeat>
This will result in:
★★★★★
You could place the star as a repeating background image of an element; and tweak the width of the element via CSS. Something like:
.stars {
display: inline-block;
width: 13px;
height: 13px;
background-image: url(https://i.stack.imgur.com/KaEDC.png);
}
.stars-2 {
width: 26px;
}
.stars-3 {
width: 39px;
}
.stars-4 {
width: 52px;
}
.stars-5 {
width: 65px;
}
<span class="stars"></span><br>
<span class="stars stars-2"></span><br>
<span class="stars stars-3"></span><br>
<span class="stars stars-4"></span><br>
<span class="stars stars-5"></span>
Use content property like this:
Note: that using repeat is not recommended in your case its not a valid html tag, use div, span or a.
Demo
Use SCSS or LESS to generate style sheet like this.
CSS:
<style>
repeat {
display:block;
}
repeat[n="1"]:before {
content: "★";
}
repeat[n="2"]:before {
content: "★★";
}
repeat[n="3"]:before {
content: "★★★";
}
repeat[n="4"]:before {
content: "★★★★";
}
repeat[n="5"]:before {
content: "★★★★★";
}
</style>
HTML:
<repeat n="1"></repeat>
<repeat n="2"></repeat>
<repeat n="5"></repeat>
If you are willing to use jQuery (or just javascript but different code), you could do:
$(document).ready(function() {
$('[repeat]').each(function() {
var toRepeat = $(this).text();
var times = parseInt($(this).attr('repeat'));
var repeated = Array(times+1).join(toRepeat);
$(this).text(repeated).removeAttr('repeat');
});
});
Then when you have
<span repeat="5">★</span>
It will become
<span>★★★★★</span>
Try:
body{
counter-reset: Counter;
}
sameTypeElement::after{
counter-increment: Counter;
content:counter(Counter) " ★";
}
or simpler:
sameTypeElement::after{
content:'★';
}
sameTypeElement siblinging is unknown for different browsers, but must work with any level of nesting tiying to type of selector
If you just want to print the star a certain number of times you can use JavaScript:
for (var i = 0; i < 5; i++) {
document.write("★");
}
Will result in: ★★★★★
If you want to be able to access a particular star, you will need to wrap each star in a span and give it a unique id:
for (var i = 0; i < 6; i++) {
document.write("<span id=\"star" + i + "\">★</span>");
}
This will result in:
<span class="star0">★</span>
<span class="star1">★</span>
<span class="star2">★</span>
<span class="star3">★</span>
<span class="star4">★</span>