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(){
});
});
Related
This question already has answers here:
Is there a CSS selector for text nodes?
(3 answers)
Closed 2 years ago.
I am trying to change the layout of a Wordpress plugin, but I have hit a roadblock.
I can't seem to remove the three dots located at the bottom of the download card. They don't seem to have a selector/tag, even Chrome Developer tools won't let me change them.
Image of the three dots
How do I select these three dots so that I can hide them? I can't change the HTML structure because it is generated by a shortcode from the plugin.
I was really curious about this, so I looked it up and finded this: https://css-tricks.com/forums/topic/how-to-target-only-the-stray-text-inside-a-div/.
It seems that no... you can't target them and therefore you can't hide them. Unless...
I haven't tried anything similar, but maybe a dirty solution could be to target the element containing the dots and set the font-size to 0 (I'm assuming the text inside could dissapear) and then in the child elements set the font-size back to normal.
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
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Questions asking for code must demonstrate a minimal understanding of the problem being solved. Include attempted solutions, why they didn't work, and the expected results. See also: Stack Overflow question checklist
Closed 9 years ago.
Improve this question
Hello I'm a student that is building a site for a friends business and I have learned online how to make radio buttons styled with custom images but i am trying to make a small, medium , large option to make the user able to choose the size. I know java but not much Jquery. I understand if it is not possible and I am open to other ways of accomplishing the task as long as i can make code that can check which option is selected to make it direct them to the right page/shopping-cart product.
---HERE'S AN EXAMPLE OF WHAT I HAVE SO FAR: http://squidsquadgang.com/radiobuttons.html
any help would be much appreciated!
Thank you,
Stephen T.
You have quite a bit of JavaScript doing the work on the radio buttons. The javaScript you are using is actually creating dynamic <span> elements and completely hiding the radiobuttons. While this may support old browsers better, a much more "future-proof" (one might even say "correct") way to do this is through pure CSS. It's simpler, gives you more options and customization, and it will load much faster than that giant JavaScript file.
So, while this may not be exactly what you came here looking for, I encourage you to at least give this a try.
Example: Here's what I've done.
Give it a try: go into your image editor and remove the text. Now, the text displayed on your buttons is in your HTML code. much easier to edit than images, and faster too.
The code explained: Making custom CSS radio buttons
input[type=radio] {
display:none;
}
This selects all the radio buttons on the page and gives them a display:none property. It hides the radio buttons, since you don't want to see those ugly things anymore.
input[type=radio] + label { ... }
This selects all of the radio button labels. In our HTML, we've created labels for each of the <input> elements. It's a built in feature in HTML: when labels are clicked, the radio button is automatically selected. We don't need any javascript here! Don't reinvent the wheel.
Here, we define both the background image and the style of the text to be displayed over the background image (if any). In this case, it's "XS", "S", and "M". I've used display:table-cell to display the buttons side-by-side (like in your link) and make use of the vertical-align property. If there is no text, simply change it do display:inline-block and adjust from there.
input[type=radio]:checked + label { ... }
Finally, we specify the styling for the selected option. In your case, I've moved the background image down 42px (background-position:0 -42px;). Again, you are going to want to remove the text from your image. You can look up other styling you can do - you could make the text "glow" by adding something like:
text-shadow:2px 2px 10px #FF00FF;
You can play around with the details. Even though it's not going to display the images IE8 and before, this will still nicely fall back to whatever text you have in <label>. It will just go to regular old radio buttons. People smart enough to use Chrome or keep IE updated, well, they'll get the extra eye-candy.
I guess you are asking something like this:
http://jsfiddle.net/vybEf/1/
$('.styled').click(function(){
var idS=$(this).attr('id');
var s=idS.substring(5,7);
$('#txt').css({'font-size':''+s+'px'});
$('#txt').html(''+s+'px');
});
This question already has answers here:
Delete destination Url of link on the bottom of browser's page
(2 answers)
Closed 9 years ago.
When you go over a link you'll see a white box with the full link on your left bottom of the browser.
How do you remove this from my website?
Thank you in advance!
That box is inserted by your browser, not the page. You can't remove it, and for good reason -- it's there to help you understand where a link will take you, and anyone wanting to hide that information is up to something dubious.
Just use inline JavaScript:
click here
That's the browser doing that. You can't remove it. It's a good thing too, so the user can see where they're going.
With that said, you can javascript the location to a new page (of course you can style this like a link, if you want).
<span onclick="location.href = 'url';">Click Me!</span>
If you just did this:
click me!
, you'd still get a white box (saying thispage/#) at the bottom because it's still a link. So, if you want to remove that box all together, use the first option.
See Fiddle (Note: This particular example won't work in JSFiddle, but you can still implement it into your own page)
you can remove like using script like:
$("a").attr("href", "#")
or with conditional statement
$("a[href='http://www.google.com/']").attr('href', '#')
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.