I'm trying to make a basic FAQ of sorts using a simple click on element to reveal the answer to the FAQ. Spoiler..
I have found a really handy piece of coding, but everything I try I cannot prevent the mouse hover from making the answer disappear.
I need the answer to remain on the page until the user is ready to click the next FAQ.
I hope someone can help, thank you very much.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
<p><b>This is an FAQ</b><br />
<p>This is also FAQ click below for the answer</p>
<div class=spoiler><div>
My hidden text
</div></div>
</body>
</html>
.spoiler { display: relative; cursor: pointer; margin-bottom: 10px; margin-top: 10px; }
.spoiler:before { content: "Answer:"; position:absolute; cursor: pointer; font-weight: bold; color: #2C3635; }
.spoiler > div { cursor: default; top: 0px; display: none; position: relative; right: 10px; top: 20px; border: #A6B2A6 1px solid; background: darkgrey; padding: 0px 10px 15px 10px; border-radius: 4px; }
.spoiler > div:before { content: ""; display: block; width: 100%; height: 20px; margin-top: -20px; }
.spoiler:active > div { display: block; }
.spoiler > div:hover { display: block; }
https://jsfiddle.net/g9b3ugzh/
The HTML details and summary elements are perfect for this. The basics without any CSS required are as follows:
<details>
<summary>Answer:</summary>
<p>My hidden text</p>
</details>
JSFiddle demo
You could give the code, it is a JavaScript solution, in the JSFiddle a go.
var spoiler = document.getElementsByClassName('spoiler');
var showSpoiler = function() {
this.classList.add("show-spoiler");
}
for (var i = 0; i < spoiler.length; i++) {
spoiler[i].addEventListener("mouseover", showSpoiler);
}
Had to disable and amend some CSS too though, to make it work:
Took off position: absolute; from .spoiler:before
Took off top declarations from .spoiler > div
Removed the :hover and :active states on .spoiler
Related
How can I decrease the delay that occurs before advisory information is displayed via the html title attribute, without scripting?:
<p>
Hover over the icon at the end of this sentence
and notice the delay that occurs before the
advisory information is displayed.
<span title="Any way to make this instant?">ⓘ</span>
</p>
This would be a nice feature of HTML, if you could:
Adjust the delay.
Also display upon click (instead of just on hover).
I know how to achieve this with Javascript, so I'm only interested in HTML and CSS solutions.
To reduce the delay and show title instantly, you can do this with CSS ::after selector.
HTML: (Change title attribute to data-title)
<p>
Hover over the icon at the end of this sentence
and notice the delay that occurs before the
advisory information is displayed.
<span data-title="Anyway to make this instant?">ⓘ</span>
</p>
CSS:
span
{
position: relative;
}
span:hover::after
{
content: attr(data-title);
padding: 5px;
width: 250px;
border: 1px solid #000;
position: absolute;
top: 5px;
left: 5px;
background: #dc143c;
color: white;
}
Demo:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
span
{
position: relative;
}
span:hover::after
{
content: attr(data-title);
padding: 5px;
width: 250px;
border: 1px solid #000;
position: absolute;
top: 5px;
left: 5px;
background: #dc143c;
color: white;
}
</style>
</head>
<body>
<p>
Hover over the icon at the end of this sentence
and notice the delay that occurs before the
advisory information is displayed.
<span data-title="Anyway to make this instant?">ⓘ</span>
</p>
</body>
</html>
it can be achieved using label with hidden checkbox and using animation to control the delay, that'd trigger showing it on both click and hover, when clicked you need to click it again to hide it.
input {
display: none;
}
.tooltip-contents {
opacity: 0;
user-select: none;
}
input:not(:checked) + label:hover .tooltip-contents,
input:checked + label .tooltip-contents {
opacity: 1;
user-select: initial;
}
label:hover .tooltip-contents {
animation-name: show;
animation-duration: 1s;
}
#keyframes show {
0% {
opacity: 0;
}
99% {
opacity: 0;
}
100% {
opacity: 1;
}
}
<input type="checkbox" id="tooltip-1">
<label for="tooltip-1">
click or hover here for tooltip
<p class="tooltip-contents">add your title text here</p>
</label>
I have a list of links on the left hand side of the page.
I would like to improve this list so that when I put the cursor over an item in this list, some sort of label appears which gives a brief description about what the link is pointing to. The html in question is generated automatically using Antora from AsciiDoc sources and, as far as I can see, all I am able to do is to add a css class or id for the different parts of the link text which are in bold. I cannot add any Javascript or nested css classes.
So here is my attempt:
<!DOCTYPE html>
<html>
<head>
<style>
#Bob.tooltip {
position: relative;
display: inline-block;
border-bottom: 1px dotted black;
}
#Bob.tooltiptext {
font-size: 5px;
}
#Bob.tooltiptext:hover {
visibility: visible;
width: 120px;
background-color: black;
color: #fff;
text-align: center;
border-radius: 6px;
padding: 5px 0;
font-size: 10px;
/* Position the tooltip */
position: absolute;
z-index: 1;
}
</style>
<title>Page Title</title>
</head>
<body>
<a href="http://www.bob.com" class="searchEngineLink" >
<strong id="Bob" class="tooltip">Bob</strong>
<strong id="Bob" class="tooltiptext">What a great guy!</strong>
</a>
</body>
</html>
This does not achieve what I want obviously. All it does is have one bit of text in a small font that, when I roll over it, increases into a larger font in a kind of box.
If anyone can think of some way to have a label pop up over some link in a page, even using some completely different approach that I have not thought of, I would be grateful. Note that I will have about 200 links so if I can have a solution that does not require me to have a set of css properties for every different id for each link, that would be preferable.
If any of the this question is not clear, please feel free to ask me.
Simple tooltip can be achieved by usi title attribute: The information is shown as a tooltip text when the mouse moves over the element.
<a href="http://www.bob.com" class="searchEngineLink" title="What a great guy!">
<strong id="Bob" class="tooltip">Bob</strong>
</a>
You can also make your own custom tooltip, by using content property to insert generated content. (description of each link).
.searchEngineLink {
display: inline;
position: relative;
}
.searchEngineLink:hover:after {
background: #eee;
border-radius: 5px;
bottom: -34px;
color: black;
content: attr(gloss);
left: 20%;
padding: 5px 15px;
position: absolute;
z-index: 98;
width: auto;
white-space:nowrap;
}
.searchEngineLink:hover:before {
border: solid;
border-color: #ddd transparent;
border-width: 0 6px 6px 6px;
bottom: -4px;
content: "";
left: 40%;
position: absolute;
z-index: 99;
}
<a class="searchEngineLink" gloss="What a great guy" href="http://www.bob.com">Bob</a>
<a class="searchEngineLink" gloss="What a smart guy" href="http://www.bob.com">Bob2</a>
<br>
<a class="searchEngineLink" gloss="What a handsome guy" href="http://www.bob.com">Bob3</a>
I have an issue creating a title for a web page.
Here is title:
<!DOCTYPE html>
<html>
<head>
<style>
.title {
border-top: 2px solid grey;
color: grey;
text-size:20px;
}
</style>
</head>
<body>
<div class="title">Düsseldorf markets</div>
</body>
</html>
I need to move the market word to the bottom and it should be displayed like that:
Düsseldorf
markets
Any idea how can I do it with the help of CSS only(i.e how can I change title CSS class to get desired view)?
You can use a CSS hack to acheive this if you really want to use CSS only. First, make the text disappear by setting it to the color of the background. Then use the before and after selectors to rerender the content.
However, easier would be to use span tags in your HTML, then make each of them have display: block to get a line break.
Example:
<!DOCTYPE html>
<html>
<head>
<style>
:root {
--font_size: 20px;
--text_col: grey;
--text_margin: 10px;
}
.title {
border-top: 2px solid grey;
font-size: var(--font_size);
color: white;
}
.title:before {
content: "Düsseldorf";
color: var(--text_col);
position: absolute;
left: 10px;
top: var(--text_margin);
}
.title:after {
content: "markets";
color: var(--text_col);
position: absolute;
left: 10px;
top: calc(var(--font_size) + var(--text_margin));
}
</style>
</head>
<body>
<div class="title">Düsseldorf markets</div>
</body>
</html>
You can use padding-right with calculation. padding-right: calc(100% - 10ch); This is very simple, no complex.
.title {
border-top: 2px solid grey;
color: grey;
font-size: 20px;
padding-right: calc(100% - 10ch); /* Düsseldorf is 10 character */
box-sizing: border-box;
}
<div class="title">Düsseldorf markets</div>
A simple way to approach this - use a width property on a element. Then, by word-break rule (which is 'normal' by default and you don't need to specify this) words will be auto-wrap on next line, when there is no free place on container
here is demo
P.S. And you have a typo - did you mean font-size except for text-size?
I created a on/off button using html/css. When on or off button is clicked it will link to python script using href tag. But i dont want buttons to appear seperate. so what i am trying is When ON button is clicked, off button should go invisible or hidden and vice-versa. When one button is clicked it should swap its position with another button. So it will appear as single button.
<!DOCTYPE html>
<head>
title>{{ title }}</title>
<style type="text/css">
body {
padding: 0;
margin: 0;
}
.large_button {
position: absolute;
width: 32%;
height: 23%;
text-align: center;
text-decoration: none;
font-size: 400%;
}
#On {
background-color: #ffe4c4;
color: #000000;
top: 1;
tect-shadow: 1px 1px 10px #5C4E17;
}
#On {
background-color: #ffe4e1;
color: #66cd00;
left: 34%;
top: 1;
text-shadow: 1px 1px 10px #5C4E17;
}
#Off {
background-color: #ffe4e1;
color: #66cd00;
left: 68%;
top: 1;
text-shadow: 1px 1px 10px #5C4E17;
}
</style>
</head>
<body>
<h1>
ON
</h1>
<h1>
OFF
</h1>
</body>
If i understand your question correctly, Something like this might help.
Calling a javascript function on click.
<script>
var hidden = false;
function action() {
hidden = !hidden;
if(hidden) {
document.getElementById('ON').style.visibility = 'hidden';
} else {
document.getElementById('OFF').style.visibility = 'visible';
}
}
</script>
You can add Jquery based on id and class like below
<body>
<h1>
ON
</h1>
<h1>
OFF
</h1>
</body>
$(document).ready(function ()
{
$('#On').hide();
$('#Off').click(function () {
if ($('#Off').hasClass('off_class'))
$('#off').removeClass("off_class").addClass("large_button");
});
});
I'm applying the strikeout tag:
<s>$5,000,000</s>
But the line is too low.. .it's about 1/4 from the bottom rather than through the middle. Any way I can modify this so it goes a bit more through the middle?
You can't do it with the strike tag OR the text-decoration:line-through style. The line position is built-in. You could roll your own style for that, but it would be a huge PITA.
I've cooked up this code which gives you total control over strike-through position and style:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
<title>Test</title>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<style type="text/css">
.mark {
border-bottom: 1px solid #000;
top: -9px; /* Tweak this and the other top in equal, but opposite values */
position: relative;
}
.offsetMark {
position: relative;
top: 9px; /* Tweak this and the other top in equal, but opposite values */
}
</style>
</head>
<body>
<div>
<p class="strikethrough">This is an <span class="mark"><span class="offsetMark">example</span></span> of how I'd do it.</p>
</div>
</body>
</html>
Eleven years later it is quite simple task:
s{
text-decoration: none;
position: relative;
}
s::before{
content: '';
width: 100%;
position: absolute;
right: 0;
top: calc( 50% - 1.5px );
border-bottom: 3px solid rgba(255,0,0,0.8);
}
old price: <s>$99.95</s>
Not with the strike tag, no. It's part of the rendering engine of the browser. For me (in Chrome) the line is rendered just above the middle.
This solution allows for padding, and uses the csss line-through property
It works for firefox, and chrome/ safari does it right anyway.
div.hbPrice span.linethroughOuter {
padding: 0 10px 0 0;
text-decoration: line-through;
position: relative;
}
div.hbPrice span.linethroughInner {
position: relative;
}
/* Firefox only. 1+ */
div.hbPrice span.linethroughOuter, x:-moz-any-link { bottom: 2px; }
div.hbPrice span.linethroughInner, x:-moz-any-link { top: 2px; }
and the mark up is something like...
<div class="hbPrice"><span class="linethroughOuter"><span class="linethroughInner">£1,998</span></span> £999</div>
The other solution is to add a background image of a line, and make it the same colour as the text.
2021 Solution
Normally, you would use text-decoration: line-through, but you currently can't change the position of a "line-through" line.
But fortunately, you can change the position of an "underline" thanks to the new CSS property text-decoration-offset.
Here is how it works:
.strike {
text-decoration: underline;
text-underline-offset: -.4em;
}
<p>Only <span class="strike">$199.99</span> $99.99!</p>
Although you may notice that the line seems a bit choppy. That's due to the relatively-new text-decoration-skip-ink which tries to hide the underline in places where it would overwrite the text. It's great for underlining, but fails as a strikethrough.
Luckily, we can turn that feature off, and along with some additional nice color and thickness properties, here's the final result:
.strike {
text-decoration: underline;
text-underline-offset: -.4em;
text-decoration-skip-ink: none;
text-decoration-color: red;
text-decoration-thickness: 2px;
color: gray;
}
<p>Only <span class="strike">$199.99</span> $99.99!</p>
Browser support is widespread with the current exception of Safari.
You could do something like this:
<div class="heading"><span>Test heading</span></div>
.heading {
position: relative;
text-align:center;
}
.heading:before {
background-color: #000000;
content: "";
height: 1px;
left: 0;
position: absolute;
right: 0;
top: 50%;
}
.heading span {
background-color: #fff;
display: inline-block;
padding: 0 2px;
position: relative;
text-align: center;
}
http://codepen.io/anon/pen/cLBls