This question already has answers here:
How can I make generated content selectable?
(2 answers)
Closed 7 years ago.
Let's say I have mark up:
<div data-generated="world!">Hello </div>
..with CSS:
div:after {
content: attr(data-generated);
}
This produces the text: Hello world! - FIDDLE
div:after {
content: attr(data-generated);
}
<div data-generated="world!">Hello </div>
BUT...
If I try to select / Copy the text - only the 'hello ' part is selectable.
Is there any way to select css generated text?
NB:
1) I have looked at the spec (here and here) regarding generated content and I haven't seen any reference to this issue.
The spec here and here seems to say that generated content should be selectable
Generated content should be searchable, selectable, and available to
assistive technologies
2) If the answer to this question is 'no - it is not possible' - please link to a credible source which states this.
No, you can't.
See Selecting and manipulating CSS pseudo-elements such as ::before and ::after using jQuery. To repeat what is described there, generated content is not part of the DOM.
In the words of the CSS2.1 spec,
Generated content does not alter the document tree.
Generated content only exists in the visual world of the rendering engine. Selecting is about selecting portions of the DOM. Generated content is not in the DOM, hence cannot be selected. For the same reason, generated counters or list item bullets cannot be selected.
Instead of actually selecting the generated content, you could simulate this with some javascript.
I stumbled over this David Walsh blog,
where he provides code that fetches generated content.
Using that, you can append the generated content to the regular content to simulate selection of the generated content, then you can set the generated content with display:none so that it doesn't appear twice. Like this:
FIDDLE
String.prototype.unquoted = function() {
return this.replace(/(^['"])|(['"]$)/g, '')
}
var element = document.getElementById('div1');
var content = window.getComputedStyle(
element, ':after'
).getPropertyValue('content');
element.innerHTML = element.innerHTML + content.unquoted();
console.log(content.unquoted());
div:after {
content: attr(data-generated);
display: none;
}
<div id="div1" data-generated=" world!">Hello</div>
So why would you ever want to do something like that?
Well, you'd probably never want to do this, but I left a long comment on the question explaining a particular constraint that I once had, where this could have been a solution.
NB: I do realize that this 'solution' doesn't really select the generated content itself, but decided to post this answer in case somebody out there ever needed a workaround.
Do not store content that should be visible and accessible in data attributes, because assistive technology may not access them
Check These links :
http://www.karlgroves.com/2013/08/26/css-generated-content-is-not-content/
https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Using_data_attributes
Related
I am here to ask a couple of questions if I may.
I understand that the CSS is for styling, I have some method which works to a degree i.e text changing but this seems to be limited.
I have about 600 html pages that have some exact content on the pages.
I would have liked to be able to have a CSS or text doc which can be altered to change all html pages in one hit.
Though I am limited to html and css only, other options are not available to me.
I would one like to change blocks of text that is some volume, and images if possible, so I don't have to redo every page as it's very time consuming.
The other issue it needs to be cross browser compatible.
I know there are some great minds out there, I am willing to give any of them a go...
You should be able to use the css rule, "content: <desiredTextOrAttribute>"
https://www.w3schools.com/cssref/pr_gen_content.asp
Suppose you want to be able to set the title on all 600 pages to Company X:
HTML:
<div class="companyName"/>
CSS:
.companyName:after {
content: "Company X"
}
Here is a fiddle: https://jsfiddle.net/onm30rdn/1/
Of course, you won't be able to dynamically change this, and I think Javascript would be a way better solution in general. But this will work.
Assuming you can make your own custom stylesheets with css, you might get some love from pseudo-elements, such as ::before and ::after.
https://www.w3schools.com/css/css_pseudo_elements.asp
Basic idea is that if you can select an html element reliably, you can make a virtual element next to it for the browser to display. The code below would append "hello" before the existing text.
HTML
<body>
<p class="foo">World</p>
</body>
CSS
.foo::before {
content:"Hello ";
}
Result
Hello world
I am creating a small screen plugin that any user can implement on your website. It is similar to those chat rooms like Zopim and tawk.to, where the user takes a certain code javascript and paste on the website importing a box screen.
In my case, I am taking some precautions as:
Creating divs with unlikely names of someone using (id="____Plug___Box")
All the css of sub-divs, must first call the previous div and then the current div #___Plug___Box #BoxInside
But why am I doing this? because I have a little fear of an external CSS affect my plugin.
In my case I say to the user to implement my javascript code always in the bottom of the page (to stay away from that kind of thing), I'm doing the right way? Is there anything else I should implement in my code to prevent any interference of external CSS?
In the case of Zopim he seems to use css-inline, it would be a good thing?
User always can overwrite your code. But you can provide random id prefix and create all elements from js side. Also using inline CSS will help.
var idPrefix = 'myPl'+(Math.rand() * 1000);
$('<div/>', {
style: 'color: red;',
id: idPrefix+'-wrapper',
html: $('<span/>', {'class': idPrefix+'-header'})
});
I suggest using core classes for js manipulation and supporting classes for display that can be overwritten.
<span class="myPl-js-click-for-action myPl-css-color-red">Click this red text</span>
This question already has answers here:
CSS After Element to insert mailto link?
(5 answers)
Closed 8 years ago.
META: This document was marked as a duplicate, and I was suggested to create another post instead, which is what I did here: How to get hyperlinks inside a "pop-up" term reference on mouse-over, and seperate the HTML term from the "pop-up" reference content. I also, then, realized it was a good idea to formulate the goal of the application better.
As a reflection: I think it can be difficult, especially for unexperienced users, to choose a good trade-off between specificity on the 1 hand, and goal-orientation on the other. My apologies for any trouble. Many thanks for the help.
---
Is it possible to have a hyperlink inside the CSS-syntax {content:"..."}? How would one go about creating such a link?
As an example, here is a piece of code I created, to have a term decription on mouse-hover:
HTML
<br><term id="HPV">HPV</term>
CSS
term{text-decoration:underline; text-decoration-style:dotted; -moz-text-decoration-style:dotted}
term:hover{text-decoration:none; color:#aaaaaa}
term#HPV:hover:after{position:relative; padding: 1px; top:-0.9em; left:-5px; border:1px dotted #aaaaaa; color:black}
term#HPV:hover:after{content:"Human papillomavirus."}
My wondering is about how to get "Human papillomavirus." hyperlinked?
"Content added with the pseudo-element doesn't appear in the DOM, so no you can't. But why do you want to do it with CSS ? It is not styling, the right place seems to be directly on the HTML file." Copied from here
There is no solution for this with css. anything inside content will not be html markup, its only text. so you could probably add an html element on hover which links to another url. for example http://jsfiddle.net/naeemshaikh27/1ysyr0tb/2/
$(function(){
$('#HPV').hover(function(e){
$(this).append('click me');;
},function(){
});
});
I'm playing with the isotope js library and I've got the general concept working. My issue occurs when I put normal html/css such as inputs & charts in the isotope div it's not behaving as I expected. This html works as expected outside the isotope div.
When an isotope div is clicked I'm expanding it and showing details for that item, including inputs, charts etc.
My Goal:
Make the table containing the inputs visible in jsfiddle.
Understand why this was happening so I can put whatever content I like in here for the future.
JsFiddle showing answer
Code:
Css that was causing the issue. By adding the asterisk this says applyt he style to all child elements. Hence the reason that my table wasn't showing was that the table, rows, cells, elements were all absolutely positioned.
.containerDiv * {
margin: 0px;
position: absolute;
}
The solution css (apply relative position to the table elements):
#chartFilters * {
position: relative;
}
I've done a quick brush up on CSS and solved my problem - see question for updated fiddle. Was a very simple one in the end, it probably looked hard due to my question hence why there were no answers from the community within the last 24 hours.
I hope my steps help someone else who's new to solving these types of issues, browsers have some great tools built in these days for trouble shooting.
Steps I used for solving:
1.) The first useful step I found was to inspect the element with internet explorer via right click on the page. Then use the right click option in the source it shows to copy element with styles. This gave me a smaller version of the html for testing which I saved into a standalone html.
2.) I started pulling out html elements that appeared unrelated and making the sample simpler. Once I pulled something out I'd refresh the html in IE and check what happened.
3.) When I had a simple html I saw the absolute positioning and the asterisk, I then did a quick google to find this stack question explaining what the asterisk does.
4.) I need to leave the absolute styling in so that isotope works, but I can specify relative positioning inside the isotope, I've done this by using the asterisk myself now I know what it does! :)
#chartFilters * {
position: relative;
}
I have an arbitrary HTML I am outputting to a page inside of a table, and I need to be able to "layer" elements over all of the links (one per link).
My current solution is to search the HTML for the links (which I have in a separate array from another source), then insert a div with a different z-index and position absolute into the HTML. This works some of the time, and breaks bizarrely other times.
Is there something that I'm missing here? I've seen nice implementations of this on various forums, but they are slightly different in that they usually require interaction from the user to come up, I want mine to be up all of the time.
Long question short, is there an easy way to do this?
Using Javascript (and specifically jQuery), yes.
There are many tooltip libraries out there.
http://plugins.jquery.com/project/tooltips
http://flowplayer.org/tools/tooltip/index.html
http://craigsworks.com/projects/simpletip/
I'd say the top one would suit your needs the best. To enable it to be "always on" you'd set the css element .tooltip as follows:
.tooltip {
display:block; // This replaces the "none" they have in the example, but the line itself isn't necessary
font-size:12px;
height:70px;
width:160px;
padding:25px;
color:#fff;
}
Two things come to mind to see if you get getter results. 1) have you tried relative positioning inside the table cells instead of absolute positioning? 2) is your script firing after the table is rendered? If not, be sure it runs after the entire table is rendered.