6 ms·
Highlighter.js
- leeoniya 11y agozooming in on Android 4.4.4 browser prevents scrolling for me
- 720kb 11y agoHi, thanks for reporting the issue, it's still at early stage we need to improve it. Here you can check what's wrong and post new issues https://github.com/720kb/highlighter.js/issues https://github.com/720kb/highlighter.js/issues Any help is appreciated!
- S4M 11y agoI don't get why this requires a special purpose library. Why not create a css class highlighted where the borders of an elements would be in fluorescent green and modify the class of the elements of the DOM one wants to highlight with jquery?
- 720kb 11y agoThis is intended to be used without jQuery :)
- davej 11y agoI agree, most of the code in the library is for element navigation. Why not open-source that and let people define their own CSS props. By the way, I believe it uses the `outline` CSS property as opposed to `border` (border changes layout, outline doesn't).
- 720kb 11y agoYes it's outline, just because it is probably the less used css rule available for the scope. Probably the alternative could be box-shadow. Having to modify borders will probably result in breaking third parties CSS etc.. more troubles guess. The code is already open-source, feel free to open issues, fork and PR also if you want to add new features, the door is open wide!
- gravity13 11y agoYeah, you also have to account for box sizing by adding borders. What I've done for this in the past is use a css &:after pseudo-element and make it absolutely positioned, and set width and height at 100% and position it at left: 0 and top: 0. You can do things like give it a fill with opacity too, to highlight not with just outline but color overlay too. .outlined:after { content: ""; position: absolute; top: 0; width: 0; height: 100%; width: 100%; background-color: green; opacity: 0.3; } .outlined { position: relative; } // this part my be a poor assumption
- 720kb 11y agoHi, yes this is another alternative, probably the best one but it's hard actually to find the real best one because in the end everyone use different styles, different css frameworks, different use cases, in many cases it may break something in many others not, you know :) Anyway appreciated a lot your example and your tips, let's just wait for some feedback from people who use it and make decisions more clear. Thank you really :)
- curiousjorge 11y agoyup, normally I'm all for new projects but this just seems like an overkill. You could achieve this with even just a css. I don't think it's worth it at all to be using a specialized library for it.
- 720kb 11y agoSorry i don't understand the point, CSS is not programmatic
- curiousjorge 11y agoyou don't need to be programmatic because it's so much lightweight and easier to use CSS + a few lines of javascript. You can absolutely highlight an element by adding a class or even hover property. This is like a giant box wrapped in fancy wrappers but when you open the box there's not much substance inside, you spend more time dealing with the wrappers.
- 720kb 11y agoThank you for explanation, how do you skip 50 next elements and select the next element with class="oneclass twoclass" in CSS and then return the element infos in JS? My bet is you are going to need more lines then this https://github.com/720kb/highlighter.js/blob/master/src/js/highlighter.js#L100 https://github.com/720kb/highlighter.js/blob/master/src/js/h... (which is going to be slimmed more)
- TazeTSchnitzel 11y ago> how do you skip 50 next elements and select the next element with class="oneclass twoclass" in CSS Why do you need to do this? That's a solution looking for a problem.
- 720kb 11y agoHi :), sorry you're right, looks like i am going to make it more difficult than it really is. Actually you can also skip elements https://github.com/720kb/highlighter.js#skip-next https://github.com/720kb/highlighter.js#skip-next Use cases are up to your imagination, just for example, think of a html5 game where you want to highlight but skip elements, or move cursor forward and backward... only a trivial example
- err4nt 11y agoNeat little tool, and love the size constraint! I made a little JS bookmarklet a while ago that reveals script, style, and meta tags, and tries to display which tags are used to build the layout: http://www.youtube.com/watch?v=wp2d24t2POI http://www.youtube.com/watch?v=wp2d24t2POI Are there any plans in the future to make your tool so the highlight follows that I tap on mobile? Keep up the great work!
- 720kb 11y agoHi, thank you a lot for supporting, the aim, actually, is to stay lightweight, but for sure you can bind it for your own pourposes and needs, like tap and select, or click and select, why not :) This project was meant to easily surf the nodes and maybe highlight them, but it's still at early stage and any help is much appreciated! Thanks for sharing the video, very interesting :)
- slaction 11y agoPeople were doing this 15 years ago, before all the hipster web designers picked up javascript, opened terminal and called themselves programmers. I"m sure the old JS programmers moved on to a real programming language, but they put you new guys to complete shame, and they didn't need 18 dependencies and a dependency manager to get it done. jQuery was a great invention for web development, but everything since then has been total crap. Angular, React, Node, all of it's crap. The only people who like it are those who aren't smart enough to be real programmers.
- volaski 11y agoWhatever you say old man