2 ms·

Sorry i don't understand the point, CSS is not programmatic

by 720kb 11y ago

curiousjorge 11y ago
you 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 ago
  Thank 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 ago
      Hi :), 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
      - curiousjorge 11y ago
        I know you are attached with it since it's your creation but I was just looking for what problem it could possibly solve and I failed to see any use cases where javascript + xpath couldn't solve. If you want to skip to the next element, you can absolutely do this with the nextSibling or any iterative function that returns the next DOM element. With xpath you can drill down into the exact element by using the indice like `//a[50]` to select the 50th element directly. To support older browsers you could use something like xpaths.js but safari, chrome, firefox all support document.evaluate() and manipulating the element is a no brainer just do addClass(). https://github.com/andrejpavlovic/xpathjs https://github.com/andrejpavlovic/xpathjs Despite being a jQuery fan (I've used it to build 4k line jquery chrome extension) I find it much easier to just look up the javascript equivalent, more than often, it's worth knowing since it frees you from using library. But keep at it, I think maybe if you could build something that does a very good job of highlighting dom elements on mouseover/mouseout with some intelligent highlighting (simply attaching event handlers to all elements on the dom page produces a jerky) I could see that being quite useful. All in all, take my view with a grain of salt, just because I failed to see a use case and think it's more cost effective to know the DOM manipulations with javascript directly, does not mean that somebody out there might justify it's use. Good stuff!
        720kb 11y ago
        Thanks for the suggestions, there is no problem, this library was made to be used on another project where we needed some kind of "joystick" for elements of the DOM. We did not find anything and we thought of writing it directly. Obviously it's open source so anyone can use it and do and suggest changes, we are curious to see even the possible use cases that others have. Probably using what you say would be the best is not easy to say so on the spot, it should be seen in any detail.
- robgibbons 11y ago
  You could add a tabindex to each element in your filtered set. Then you could have :focus as your highlight selector, and it would give you keyboard accessibility for free.
  - 720kb 11y ago
    hi, for the keyboard we would prefer to not touch or change the DOM elements other than the outline css rule. You could end up having various problems adding tabindex, many people use tabindex attribute.

Sorry i don't understand the point, CSS is not programmatic

by 720kb 11y ago

Sorry i don't understand the point, CSS is not programmatic

you 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 ago
Thank 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 ago
    Hi :), 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
    - curiousjorge 11y ago
      I know you are attached with it since it's your creation but I was just looking for what problem it could possibly solve and I failed to see any use cases where javascript + xpath couldn't solve. If you want to skip to the next element, you can absolutely do this with the nextSibling or any iterative function that returns the next DOM element. With xpath you can drill down into the exact element by using the indice like `//a[50]` to select the 50th element directly. To support older browsers you could use something like xpaths.js but safari, chrome, firefox all support document.evaluate() and manipulating the element is a no brainer just do addClass(). https://github.com/andrejpavlovic/xpathjs https://github.com/andrejpavlovic/xpathjs Despite being a jQuery fan (I've used it to build 4k line jquery chrome extension) I find it much easier to just look up the javascript equivalent, more than often, it's worth knowing since it frees you from using library. But keep at it, I think maybe if you could build something that does a very good job of highlighting dom elements on mouseover/mouseout with some intelligent highlighting (simply attaching event handlers to all elements on the dom page produces a jerky) I could see that being quite useful. All in all, take my view with a grain of salt, just because I failed to see a use case and think it's more cost effective to know the DOM manipulations with javascript directly, does not mean that somebody out there might justify it's use. Good stuff!
      - 720kb 11y ago
        Thanks for the suggestions, there is no problem, this library was made to be used on another project where we needed some kind of "joystick" for elements of the DOM. We did not find anything and we thought of writing it directly. Obviously it's open source so anyone can use it and do and suggest changes, we are curious to see even the possible use cases that others have. Probably using what you say would be the best is not easy to say so on the spot, it should be seen in any detail.
robgibbons 11y ago
You could add a tabindex to each element in your filtered set. Then you could have :focus as your highlight selector, and it would give you keyboard accessibility for free.
- 720kb 11y ago
  hi, for the keyboard we would prefer to not touch or change the DOM elements other than the outline css rule. You could end up having various problems adding tabindex, many people use tabindex attribute.