I am making a source code display which supports line folding. While it's easy enough with CSS to ensure that the replacement text ("N lines hidden") is not selectable, I would like the hidden source code to still be selected, so the user can just select a chunk of code and not worry about whether part of it is missing due to a fold. Is there a (not-too-hacky) way to do this?
Elements with opacity: 0 can be selected, although they're invisible.
.hidden-selectable {
display: inline-block;
width: 1px;
opacity: 0;
}
<div>Visible<span class='hidden-selectable'>selectable</span></div>
In the above snippet, the 'selectable' string will be present in the selection and the copy-pasted text when the elements around it are selected.
The element needs to have a non-zero width and height, otherwise it doesn't appear in the selection. Also, it has to be inside the element flow (i.e. it can't have position: absolute), otherwise, again, it's not going to appear in the selection. Therefore I give it some very small but non-zero width, so that it doesn't affect flow visibly, but is still "visible enough" to be selectable.
Here's the fiddle.
Here's what else I've tried that doesn't work:
display: none
visibility: hidden
If you have the following structure:
<html>
<body>
<div>before</div>
<div class="folded">this is the hidden source code</div>
<div class="info">N lines hidden</div>
<div>after</div>
</body>
</html>
You should be good with this CSS:
.folded {
overflow: hidden;
height: 0px;
}
.info {
-moz-user-select: none;
//add other browsers' variation
}
EDIT: another option (untested in Chrome)
HTML:
<html>
<body>
<div>before</div>
<div class="folded">this is the hidden source code</div>
<div class="info" data-lines='5'> </div>
<div>after</div>
</body>
</html>
CSS:
.folded {
overflow: hidden;
height: 0px;
}
.info:before {
content: attr(data-lines) " lines hidden."
}
Related
Here I'm trying to change the CSS variable's value (visibility) when the button is clicked on (using :focus) to show/hide the images, without using Javascript.
CSS
img {
width: 200px; height: 200px; margin-left: 40px; margin-top: 30px;
}
:root {
--c1-vsb: none; --c2-vsb: none;
}
a.c1-imgs {
visibility: var(--c1-vsb);
}
a.c2-imgs {
visibility: var(--c2-vsb);
}
#C1:focus {
background-color: red;
--c1-vsb: hidden;
}
#C2:focus {
background-color: red;
--c2-vsb: hidden;
}
HTML
<html>
</head>
<body>
<div id="left-panel">
<button class="lp-btn" id="C1">SEAL 1</button><br>
<button class="lp-btn" id="C2">SEAL 2</button><br>
</div>
<div id="right-panel">
<a class="c1-imgs"><img src="https://files.worldwildlife.org/wwfcmsprod/images/HERO_harbor_seal_on_ice/hero_full/87it51b9jx_Harbor_Seal_on_Ice_close_0357_6_11_07.jpg"></a>
<a class="c2-imgs"><img src="https://www-waddensea-worldheritage-org.cdn.gofasterstripes.download/sites/default/files/styles/inline_image_full_width/public/20-11-09_habour%20seals%20report_TTF_5200.JPG?itok=YZs9c_dH"></a>
</div>
</body>
</html>
But for some reasons, when I clicked on the button to set visibility to hidden, the images do not get hidden away.
Previously, I tried hiding the images with css pseudo classes and display:none, z-order... but got stuck. In the end, I thought this should have been the simple way out.
Could you suggest a solution to this problem I'm having? I'm not too sure if this is the correct approach.
Thank you!
When you declare #C1:focus { --c1-vsb: hidden; }, the new value of --c1-vsb only applies to #C1, not the entire HTML document.
As MDN states: "[...] the selector given to the ruleset defines the scope that the custom property can be used in".
With css, you can only Show/hide with mouse handle. You don't change 2 state (Show/Hide) when click into button.
I have a page with a large products table. Each product is represented by an image.
I would like to make each product name searchable using the browser's "search in page" feature. When searching for a product name, the user should end up at the respective image.
I can not add a product name that is visible as text (the name is already very prominently on each image) but can add text elements that are not visible.
Is there a robust way to do this?
How about hiding some text behind the image? Something like this.
<div class="image-block">
<div class="img-description">Some text.</div>
<img>
</div>
.image-block {
position: relative;
}
.img-description {
position: absolute;
top: 0;
left: 0;
z-index: -1;
}
.image-block img {
position: relative;
}
Basically, this will put the image over the img-description element, so you can still search and find it.
Using z-index, you can hide the text behind the image. This lets it be searched for with Chrome, Safari and Firefox (unfortunately can't test in IE).
<html>
<body>
<style>
.product-image {
position: relative;
width: 100px;
height: 100px;
display: block;
overflow: hidden;
}
img.product {
position:absolute;
height: 100px;
width: 100px;
}
div.product {
z-index: -1;
position: absolute;
}
</style>
<table>
<tr><td><div class="product-image"><img src="product-image.png" class="product"></img><div class="product">name 1</div></div></td></tr>
<tr><td><div class="product-image"><img src="product-image.png" class="product"></img><div class="product">something else...</div></div></td></tr>
<table>
</body>
</html>
It works well in FF & Chrome, however in Safari it pulls the text out from behind the image, which your users may find jarring.
The solutions here have the problem that the user can't tell they've found something, since the text they're searching for is hidden behind the image. If there's 12 images on screen, it's not obvious which one has matched their search.
I do something similar, but I just have transparent text above the image. <p style="color:transparent">My product title</p>.
That way when the browser scrolls to the right region, the user can also see a blue selection growing around the text as they type it.
(In Chrome at least, the "transparent" text becomes visible once it's selected)
I have some code which displays images from imgur.
When hovering over an image, I want the title attribute to appear at the top of the image.
I have achieved all of this, but when the text becomes visible, it only appears on one line and writes over itself when it runs out of space, as in the image.
I would like the text to start on a new line once it reaches the end of it's container.
I have tried adding word-wrap: break-word; to each of the CSS selector below, as well as to a P selector (as the link is wrapped in a p-tag).
Any advice on how to resolve this is much appreciated!
I have the following html:
<section id='photos'>
<p>
<a class='hovertext' href='http://i.imgur.com/gallery/eWlGSdR.jpg' title='Opened my window shade while flying over Japan, noticed a volcano was erupting. (OC) [2448x2448]'>
<img src='http://i.imgur.com/eWlGSdR.jpg' alt=''>
</a>
</p>
And the following CSS:
a.hovertext {
position: relative;
text-decoration: none !important;
text-align: left;
}
a.hovertext:before {
content: attr(title);
position: absolute;
top: -1;
padding: 0.5em 20px;
width: 90%;
text-decoration: none !important;
color: red;
opacity: 0.0;
}
a.hovertext:hover:before, a.hovertext:focus:before {
opacity: 1.0;
}
As Dinesh said in the comments, this was caused by poor code awareness, as elsewhere in the code, I was calling 'line-height:0;' on the #photos element.
Removing this solved the problem.
i think you coul use some java script on this, if you only want to make it add a extra line to it, correct me if im wrong.
Here's an example what i think you mean:
First add this text next your class="hovertext" :
id="HoverText"
Add this part after your body or paste the code between script into a .js file and call it with
<script src="filename.js"></script>
<script>
HoverText=document.getElementById("HoverText");
HoverText.onclick=function(){ClickToShowText()};
function ClickToShowText(){
HoverText.innerHTML+="<br>New line with text";
}
</script>
just use the break tag at the end of the text that's supposed to be on the first line.
</br>
easy
I came to know that we cannot have an alt for a css generated image.There are solutions that say by having title atribute we can get the alt effect only on hovering on the image,however when we disable the css we will not able to see that text in place of the image.In my case I need the text to be appeared even when the css is disabled .Is there any workaround for getting the text visible when the css is disabled.
<span class="myimageclass">
hi
</span>
<style>
.myimageclass
{
height: 100px;
width: 200px;
background-image:url('http://cdn.osxdaily.com/wp-
content/uploads/2011/10/NSTexturedFullScreenBackgroundColor.png');
color:red;
overflow: hidden;
text-indent: -9999px;
}
</style>
Thanks,
Balaji.
You can use text-indent and overflow: hidden.
This is not flexible method but I hope you can use it.
.image {
width: 200px;
height: 100px;
display: block; /* it needs for inline elements like span */
background: url(http://cdn.osxdaily.com/wp-content/uploads/2011/10/NSTexturedFullScreenBackgroundColor.png);
overflow: hidden;
text-indent: -9999px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="image js-image">
Image alt
</div>
<button class="js-button">On/Off styles</button>
<script>
$('.js-button').click(function() {
$('.js-image').toggleClass('image');
});
</script>
#balaji, this is already an SO thread that takes care of CSS in a page, you can pick something from here and fine tune for your needs: How to determine if CSS has been loaded?
I'd like to have something that looks and behaves as hyperlink inside larger rectangle (full page wide) which is also hyperlink. Below there is ASCII-art representation of what it should look like:
|-------------------------------------------|
| Some text [_link_] |
|-------------------------------------------|
The whole outer rectangle (block element) is to be hyperlink. Inside this rectangle there should be some text, and at the end of this text there should be another link.
Unfortunately nesting links (A elements) is illegal in (X)HTML:
12.2.2 Nested links are illegal
Links and anchors defined by the A element must not be nested;
an A element must not contain any other A elements.
(from http://www.w3.org/TR/html401/struct/links.html#h-12.2.2), so the most natural way of implementing above
<a href="xxx" style="display: block">
Some text
link
</a>
is not valid HTML. What is even worse is that some web browsers in some cases enforce this requirement by moving inner link element just outside closing element of outer link element. This of course utterly breaks layout.
So what I'd like to ask is how to arrive at layout presented above using HTML and CSS (but no JavaScript), but without nested link elements in HTML source. It would be nice if behaviour was as close as possible to the one with nested link elements (for browsers which are not overly strict in implementing HTML standard).
Edit (16-01-2009)
Clarification: Solutions which use more than two link elements are perfectly acceptable
<a href="xxx" ...>Some text</a>
<a href="yyy" ...>Link</a>
<a href="xxx" ...>& nbsp;</a>
...
You could try something like this:
div.a {
position: relative;
background-color: #F88;
z-index: 0;
}
a.b {
position: relative;
z-index: 2;
}
a.b:hover {
background-color: #8F8;
}
a.c {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1;
}
a.c:hover {
background-color: #88F;
}
a.c span {
display: none;
}
<div class="a">
foo
bar
<span>baz</span>
</div>
Perhaps this would work?
div.parentBox {
position:relative;
height:100px;
}
a.someLink {
position:absolute;
top:0;
left:0;
height:100px;
}
// Now just position the two spans
<div class="parentBox">
<span class="someText">Some Text</span>
<a href="#" class="someLink">
<span class="linkText">Link Text</span>
</a>
</div>
What I have done in the past is use Javascript to attach the proper functionality to the div (assuming that is the parent element) so that when it is clicked, window.location is ran opening the .href attribute of the child link.
Something like this perhaps.
// jQuery Code
$(".parentDivLink").click(function(){
window.location = $(this).find("a.mainLink").attr("href");
});
<div class="parentDivLink">
Click Me
</div>
Just place on onclick event handler on the outer element which when clicked calls "window.location ='yourURLhere';"
You could add a style attribute - "cursor:pointer" to get the hand cursor when mouse over.
You could also have a css hover code block to get the colour changes.
EDIT: just realised no javascript, so in that case, keep the 'a' tag and simply define a style for it in css, that way you can give it height, width, etc.
A float with negative margins should work as well.
Tested (in IE6 only):
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head><title>Link within link</title>
<style type="text/css">
.Parent {
width: 500px;
background-color: yellow;
}
.sub {
float: left;
margin-left: -300px;
}
.foo {
display:block;
float: left;
text-decoration: none;
}
</style>
</head>
<body>
<div class="Parent">foo </div>
<div class="sub">Link text</div>
</body>
</html>
You do realize the great potential for user confusion.