details, summary { display: inline; }
summary { cursor: pointer; user-select: none; }
summary::marker { content: ''; }
<div>foo<details>
<summary>*</summary>
bar</details>
</div>
Why doesn't searching foo* work with Ctrl + F on your keyboard and is there a way to make it searchable?
Another test:
div, summary {
display: inline;
}
<div>foo<div>*</div></div>
<div>foo<summary>*</summary></div>
Experiment with textContent: https://jsfiddle.net/0u2y1ozt/
Only the first foo* is searched. So it seems that summary is a special element when it comes to searching.
Related
I want to shrink my paragraph into a couple of read more, without the need to read less.
I only manage to do it once and 'm now lost.
.bio {
font-family: monospace;
}
#check {
display: none;
}
#check:checked~.more {
display: block;
}
.more {
display: none;
}
label {
color: rgb(0, 0, 0);
cursor: pointer;
font-weight: bold;
text-decoration: underline;
}
<div class="bio">
<input type="checkbox" id="check">
<p>craftsman</p> *original display*
<div class="more">
<p>since birth has always had a love/hate relationship</p> *first readmore*
</div>
<label for="check"> more</label>
<div class="more">
<p>She had half-survived blahblahblah.</p> *second readmore*
</div>
</div>
Make all elements with the class more hidden by using: .more { display: none }
Create a class to make elements visible again: .d-block { display: block }
Create a Node List in JS with all elements with the class more: let bio_sections = document.querySelectorAll('.more')
Create a variable at 0 as index: let bio_index = 0
Add a click-eventListener linked to the button: button-element.addEventListener('click', () => { ... })
Within the function create an if-condition to ensure that the actual function is only as often run as you have elements with the class more as otherwise, you will create an error after every further button click: if (bio_index < bio_sections.length)
select the element out of the Node List with the current index: bio_sections[bio_index]
Add that previously created class to that element: .classList.add('d-block')
Increase the index to jump to the next element within your Node List: bio_index++
let button = document.querySelector('.bio button');
let bio_sections = document.querySelectorAll('.bio .more');
/* index to iterate */
let bio_index = 0;
//trigger to check for button clicks
button.addEventListener('click', function() {
// ensures JS errors as otherwise elements going to be called that does not exist
if (bio_index < bio_sections.length) {
// makes the section visible
bio_sections[bio_index].classList.add('d-block');
//increases the index onclick
bio_index++;
}
})
.more {
display: none;
}
.d-block {
display: block;
}
button {
display: block;
margin-top: 2em;
}
<div class="bio">
<p>craftsman</p> *original display*
<div class="more">
<p>since birth has always had a love/hate relationship</p> *first readmore*
</div>
<div class="more">
<p>She had half-survived blahblahblah.</p> *second readmore*
</div>
<button>Read more about craftsman</button>
</div>
I'm trying to initially hide parts of inline text (spoilers) that will show once clicked. I added a pseudo element to the hidden text to add another text indicating that it covers the spoiler ('show spoiler').
This is what I've got so far:
$(document).ready(function(){
$('.spoiler').attr('title', 'show spoiler').click(function() {
$(this).toggleClass('noSpoiler spoiler');
var title = 'hide spoiler' ;
if( $(this).hasClass('spoiler')){
title = 'show spoiler';
};
$(this).attr('title', title);
});
});
.spoiler {
position: relative;
color: transparent;
background: red;
}
.spoiler:before {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: .25em;
content: 'show spoiler';
color: blue;
text-overflow: ellipsis;
overflow: hidden;
}
.spoiler:hover {
cursor: help;
}
.noSpoiler {
background: rgba(255, 0, 0, .3);
}
.noSpoiler:hover {
cursor: not-allowed;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
The lysine contingency - it’s intended to <span class=spoiler>prevent the spread of the animals in case they ever got off the island</span>. Dr. Wu inserted a gene that makes a single faulty enzyme in protein metabolism. The animals <span class=spoiler>can’t manufacture the amino acid lysine</span>. Unless they’re continually supplied with lysine by us, they’ll slip into a <span class=spoiler>coma</span> and die.
Is there a way to show the text in the pseudo element when the spoiler spans multiple lines, but also truncate text in pseudo elements that are too short to show it all?
I hope I understood you right. Your problem was the „position: absolute”. You can leave it static. Because the pseudo elements are always before and behind.
If it was wrong maybe you can explain it a little bit more :-)
Have Fun!
$(document).ready(function(){
$('.spoiler').attr('title', 'show spoiler').click(function() {
$(this).toggleClass('noSpoiler spoiler');
var title = 'hide spoiler' ;
if( $(this).hasClass('spoiler')){
title = 'show spoiler';
};
$(this).attr('title', title);
});
});
.spoiler {
position: relative;
color: transparent;
background: red;
}
.spoiler:before {
position: static;
content: 'show spoiler';
color: blue;
text-overflow: ellipsis;
overflow: hidden;
display: inline-block;
min-width: 100px;
vertical-align: -4px;
margin-left: 5px;
}
.spoiler:hover {
cursor: help;
}
.noSpoiler {
background: rgba(255, 0, 0, .3);
}
.noSpoiler:hover {
cursor: not-allowed;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
The lysine contingency - it’s intended to <span class=spoiler>prevent the spread of the animals in case they ever got off the island</span>. Dr. Wu inserted a gene that makes a single faulty enzyme in protein metabolism. The animals <span class=spoiler>can’t manufacture the amino acid lysine</span>. Unless they’re continually supplied with lysine by us, they’ll slip into a <span class=spoiler>coma</span> and die.
I'm happy to hear that. Sorry for not checking it right before posting. In Chrome everything looked well, but not in Firefox ;-). I just replaced the „vertical-align” with margin-bottom. This worked in both browsers :-).
$(document).ready(function(){
$('.spoiler').attr('title', 'show spoiler').click(function() {
$(this).toggleClass('noSpoiler spoiler');
var title = 'hide spoiler' ;
if( $(this).hasClass('spoiler')){
title = 'show spoiler';
};
$(this).attr('title', title);
});
});
.spoiler {
position: relative;
color: transparent;
background: red;
}
.spoiler:before {
position: static;
content: 'show spoiler';
color: blue;
text-overflow: ellipsis;
overflow: hidden;
display: inline-block;
min-width: 100px;
margin: 0 0 -5px 5px;
}
.spoiler:hover {
cursor: help;
}
.noSpoiler {
background: rgba(255, 0, 0, .3);
}
.noSpoiler:hover {
cursor: not-allowed;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
The lysine contingency - it’s intended to <span class=spoiler>prevent the spread of the animals in case they ever got off the island</span>. Dr. Wu inserted a gene that makes a single faulty enzyme in protein metabolism. The animals <span class=spoiler>can’t manufacture the amino acid lysine</span>. Unless they’re continually supplied with lysine by us, they’ll slip into a <span class=spoiler>coma</span> and die.
#hello{
font-size: 4em;
}
div.about{
display: none;
}
#hello:hover div.about {
display: block;
}
<pre id="hometext"><span id="hello">Hello!</span></pre>
<div class="about" id="about"><p>hello</p></div>
First of all, I am new to stackoverflow. Secondly, I want to over a specific part of a paragraph, the span, and then let this div appear. But it doesnt seem to work..
You dont have to use javascript:
#hometext:hover + #about { display:none; }
I am not quite sure if this is what you asked for, but you can utilize the span element's onmouseover and onmouseout attributes.
With a little bit of javascript, you can achieve what I think you want to do:
function hideDiv() {
document.getElementById("divToHide").style.visibility = 'hidden';
}
function showDiv() {
document.getElementById("divToHide").style.visibility = 'visible';
}
#divToHide {
height: 100px;
width: 100px;
background: red;
}
#hoverMe {
cursor: pointer;
}
<div id="divToHide">
</div>
<br />
<p>
This is a paragraph. If you hover <span id="hoverMe" onmouseover="hideDiv()" onmouseout="showDiv()">here</span>, it will hide the red box.
</p>
I think you need some javascript there:
function showOtherDiv() {
document.getElementById("about").style.display = "block";
}
function hideOtherDiv() {
document.getElementById("about").style.display = "none";
}
#hello {
font-size: 4em;
}
div.about {
display: none;
}
#hello:hover div.about {
display: block;
}
<pre id="hometext">
<span id="hello" onmouseover="showOtherDiv()" onmouseout="hideOtherDiv()">Hello!</span>
</pre>
<div class="about" id="about">
<p>hello</p>
</div>
Here is a codepen
<div class="data-row data-has-detail">
...
</div>
After expanding the div class becomes
<div class="data-row data-has-detail data-detail-shown">
...
</div>
I am trying to change the chevron on toggle with css but it doesn't work
<div class="btn-actions">
<span class="show-detail-new toggle-detail text-primary chk-move-down">
<span class="span-show-details"><i class="fa fa-2x fa-chevron-circle-down"></i></span>
<span class="span-hide-details"><i class="fa fa-2x fa-chevron-circle-up"></i></span>
</span>
</div>
less code
.data-has-detail {
.show-detail-new {
span.span-show-details {
display: block;
}
span.span-hide-details {
display: none;
}
}
}
.data-has-detail .data-detail-shown {
.show-detail-new {
span.span-show-details {
display: none;
}
span.span-hide-details {
display: block;
}
}
}
Toggle with css not working
When an element has multiple classes, you select them like so:
.data-has-detail.data-detail-shown
(No space - the space tells it it's a child element, no space says "this element has both classes)
Update - with LESS
Since you are using LESS, then the primary issue is the one I mentioned about spaces between selectors. In LESS you solve that with the & symbol, like so:
.data-has-detail {
.show-detail-new {
span.span-show-details {
display: block;
}
span.span-hide-details {
display: none;
}
}
/** the & will cause it to be ".data-has-detail.data-detail-shown" **/
&.data-detail-shown {
.show-detail-new {
span.span-show-details {
display: none;
}
span.span-hide-details {
display: block;
}
}
}
}
As an observation under the heading of "maintainable code", and for performance, I'd suggest finding a way to simplify this. Something like this would be a bit less verbose, and should work:
.show-detail-new {
.span-show-details {
display: block;
}
}
.show-detail-new {
.span-hide-details {
display: none;
}
}
.data-detail-shown {
.span-show-details {
display: none;
}
}
.data-detail-shown .span-hide-details {
display: block;
}
(Currently, your selectors blow out into a huge selector when compiled by LESS, so your CSS stylesheet is probably larger than it needs to be:
.data-has-detail .data-detail-shown .show-detail-new span.span-show-details {
display: none;
}
.... etc for other rules ...
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>