I'm writing a source code highlighter, and I'd like to highlight and make clickable a non-standard piece of code area.
For example, I'd like all the colored areas to be separately clickable.
As I understand it, implementing this with CSS is impossible. Though I can dynamically assign equal CSS classes to each span which belongs to same area (and modifying those via class selector). But then I have a problem, that each of those spans must be clickable. So I should also attach JS events to each span.
Overall this sounds like a zillion of spans with zillion of events, am I correct? Is there better solution?
Related
Is it possible to highlight text in an HTML document using without wrapping it with <span> or any other tag for that matter?
For example, in the HTML code <p>The quick fox</p> I would like to highlight quick but without adding a DOM element around it. Adding a DOM element to a parent element is fine.
Thanks!
No, it is not possible.
You can't tell the browser to render a piece of text differently without inherently changing the DOM, regardless of whether you do it statically or dynamically (with Javascript, for example, as a post processing step).
It is possible if you use an absolutely positioned element with a transparent repeating background image or a transparent background color (using rgba or hsla) and position it over the selected area.
Another way to do it would be to have an absolutely positioned canvas element without a background that takes up the whole browser viewport and draw a transparent rectangle over the selection.
It's not possible.
If you just want no tags in the original source code, it might be possible by adding tags later using Javascript magic. You could do something like
<p highlight="quick">The quick fox</p>
and write a JQuery/Prototype/plain JS function to highlight it on the fly, but what for and why? If you elaborate a bit, someone may come up with an idea.
The only way to do this than I can imagine would be to use the <canvas> element, and render absolutely everything by hand.
I essentially need to have a user online click drag with the mouse or fingers on a picture of the human body to highlight the selected area red. Basically they're selecting areas of the body that hurt.
Then I need to store this information, and use it as needed.
Looking online I just seem to find how to highlight an area on hover like JQuery's maphighlight feature, which isn't what I want.
I'm very new to coding but am learning as I go along.
There are more pseudo-classes than hover. In this case, active or visited.
You could simply change the selected image section to a highlighted version of the same image.
Or add a border CSS property on :visited
To store information use either a made up data-[whatever] attribute,
or use a regular JavaScript variable. Since you'll need JavaScript to use the given variable anyways.
There are fancier solutions.
MAP is great for selecting shapes within an image, but doesn't have a way to highlight that selection.
I'm seeking to emulate the on-clickable input forms that pops up when an user clicks on the blue bar as shown above. My experience with front-end development is limited so I don't know what to call these elements exactly, but let's say they are on-clickable input forms contained in a box, which can lead to other on-clickable forms like the date picker as shown.
How do I do this in Javascript? Preferably with AngularJS, since the app I'm working on uses that. I don't mind using JQuery though.
I'm not looking for detailed step-by-step instructions (which I don't mind), but hints to get me started on cloning these features.
Thanks.
The pop-ups you see are going to be HTML elements, probably <div>s. The page will use JavaScript to create event listeners on the bars to hide/show them when the bars are clicked/moused over. The "pop-ups" are really just like any other element in the page, but with a higher Z-index and using CSS positioning (most likely absolute) to make it appear as a pop-up. It also looks like they're using the CSS arrow trick to draw the speech bubble pointer, though it could also be accomplished with images.
If I were to develop this, I'd break it down into stages like this:
Get my pop-up into my HTML page, and make sure it's not appearing anywhere.
Make it show/hide when I wanted it to (either when the blue bar is clicked, or when the user mouses in/mouses out of the blue bar).
Make it show/hide where I want it to (near the blue bar)
Make it look better (work on the CSS and get the pointer to work properly)
Convert that work into a second-level popout. The second level is going to be the exact same technique, but maybe the CSS classes are going to be different so the second bubbles look different and have the pointer at a different position.
Of course, you don't have to develop this functionality yourself. There are also a number of jQuery plugins you could use, as well as Bootstrap's popover component.
I'm working on a browser script that scans a page for keywords, highlights them, and when the user hovers over them - creates a tooltip that gets filled using AJAX and PHP. The only problem I've run into is that the CSS of the website the tooltips are displayed on is interfering with the CSS of the tooltip content.
The tooltip uses an <img>, <p> and <table> with <tr> and <td>. My PHP file echoes these elements back with ID's which I have styled in my CSS file. My CSS displays properly on some sites like Wikipedia, but others mess up the padding/margins/alignment. For example, certain websites may align <td> center, while I would like it aligned left. I have already added "!important" to many of the ID's used.
Question: How do I keep a website's CSS from interfering with the styles of my tooltip?
One thing you could do is to use a id for your tooltip container.
You just need to keep in mind that id have to be unique. So you must not have two tooltips on your page.
<div id="my-tooltip-2986234">
the content of the tooltip
</div>
Then for your css file your create something like this:
#my-tooltip-2986234 * {
/*reset all style properties here (you can take this of a css reset script)*/
}
Because id a have a higher weight then rules without an id this should overwrite all stylings of the foreign page inside of your tooltip container.
You will also need to prefix all your rules for the tooltip with that id.
#my-tooltip-2986234 a {
/*style for your a*/
}
You indeed could still have problems with !important rules of the foreign site. But creating your styling code that way would minimize the conflicts. Your can still think of adding !important rules to your rules. But at least for the things I created prefixing the rules with an id was sufficient.
Another solution - but not as elegant as the one above - is to create an iframe container where you write your content to. That way you would have complete sandboxing of your css rules. But because I didn't use iframe for a long time I don't know right now where the pitfalls in the various browsers are (You need to create an iframe without a src, because of cross domain policies, which used to cause problems in some browsers).
Lets say I had an element with multiple classes, one of these classes has a hover pseudo-class. Lets say this will change the colour.
So what I want to do is find out what colour the element will change to when hovered over. Then I want to override this with Javascript/jQuery.
The animateToSelector jQuery plug-in seems to do what you want.
I found that plug-in through another question on StackOverflow. Also have a look at this question to see there isn't really any other way to do it but by going through document.styleSheets.