Groups | Search | Server Info | Keyboard shortcuts | Login | Register [http] [https] [nntp] [nntps]

Groups > comp.lang.javascript > #34099 > unrolled thread

How to add horizontal/vertical lines that follow mouse pointer on every picture?

Back to article view | Back to comp.lang.javascript

Contents

  How to add horizontal/vertical lines that follow mouse pointer on every picture? zljubisic@gmail.com - 2017-10-06 01:15 -0700
    Re: How to add horizontal/vertical lines that follow mouse pointer on every picture? "Evertjan." <exxjxw.hannivoort@inter.nl.net> - 2017-10-06 13:44 +0200
      Re: How to add horizontal/vertical lines that follow mouse pointer on every picture? zljubisic@gmail.com - 2017-10-06 04:55 -0700
        Re: How to add horizontal/vertical lines that follow mouse pointer on every picture? "Evertjan." <exxjxw.hannivoort@inter.nl.net> - 2017-10-06 14:18 +0200
          Re: How to add horizontal/vertical lines that follow mouse pointer on every picture? zljubisic@gmail.com - 2017-10-06 05:38 -0700
            Re: How to add horizontal/vertical lines that follow mouse pointer on every picture? "Evertjan." <exxjxw.hannivoort@inter.nl.net> - 2017-10-06 14:43 +0200
              Re: How to add horizontal/vertical lines that follow mouse pointer on every picture? zljubisic@gmail.com - 2017-10-06 06:18 -0700
                Re: How to add horizontal/vertical lines that follow mouse pointer on every picture? zljubisic@gmail.com - 2017-10-06 06:32 -0700
                  Re: How to add horizontal/vertical lines that follow mouse pointer on every picture? "Evertjan." <exxjxw.hannivoort@inter.nl.net> - 2017-10-06 16:10 +0200
                    Re: How to add horizontal/vertical lines that follow mouse pointer on every picture? zljubisic@gmail.com - 2017-10-07 07:30 -0700
    Re: How to add horizontal/vertical lines that follow mouse pointer on every picture? "Michael Haufe (TNO)" <tno@thenewobjective.com> - 2017-10-06 07:55 -0700

#34099 — How to add horizontal/vertical lines that follow mouse pointer on every picture?

I have a basic html page (that is served by python bottle) that shows one or more pictures. 
Html code is very general and literally looks like this:


            <table>
                    <tr>
                        <td>
                             <img src="ta_T.png" >
                        </td>
                    </tr>
                    <tr>
                        <td>
                             <img src="ta2_T.png" >
                        </td>
                    </tr>
            </table>


As pictures are showing diagrams with axes, I would like to have vertical/horizontal lines that follow mouse pointer in order to be able to read scales on axes for each data point.
I have found something that could work 

https://stackoverflow.com/a/11462689/3225309

but I don't know how to implement it in my html code.
Can someone help, please?

[toc] | [next] | [standalone]

#34100

"Evertjan." wrote on 06 Oct 2017 in comp.lang.javascript:
> zljubisic@gmail.com wrote on 06 Oct 2017 in comp.lang.javascript:
>> but I don't know how to implement it in my html code.
>> Can someone help, please?
> 
> No need for this JQuery-nonsense,
> try this: [..]

A bit more complete, with px readout:

<http://hannivoort.org/test/coords.asp>

-- 
Evertjan.
The Netherlands.
(Please change the x'es to dots in my emailaddress)

[toc] | [prev] | [next] | [standalone]

#34101

> A bit more complete, with px readout:
> 
> <http://hannivoort.org/test/coords.asp>
> 
> -- 
> Evertjan.
> The Netherlands.
> (Please change the x'es to dots in my emailaddress)

This solution works only on pictures in the first row.
Other rows are not working. There is a problem with the horizontal line.

Regards

[toc] | [prev] | [next] | [standalone]

#34102

zljubisic@gmail.com wrote on 06 Oct 2017 in comp.lang.javascript:

>> A bit more complete, with px readout:
>> 
>> <http://hannivoort.org/test/coords.asp>

> This solution works only on pictures in the first row.

It is not ment as a 'solution', 
it is just part of a discussion.

> Other rows are not working. There is a problem with the horizontal line.

'Works' fine here on Chrome and Edge in Windows 10.

"The nth line" depends on your[!] actual window-width in my code.

Please debug your problem.

Anyway, 
'not working' and 'there is a problem' aren't usefull explanations.

Remember, 
comp.lang.javascript is not a help-desk, 
nor a Google-group,
but a Usenet discussion-group.


-- 
Evertjan.
The Netherlands.
(Please change the x'es to dots in my emailaddress)

[toc] | [prev] | [next] | [standalone]

#34103

> It is not ment as a 'solution', 
> it is just part of a discussion.
> 
> > Other rows are not working. There is a problem with the horizontal line.
> 
> 'Works' fine here on Chrome and Edge in Windows 10.
> 
> "The nth line" depends on your[!] actual window-width in my code.
> 
> Please debug your problem.
> 
> Anyway, 
> 'not working' and 'there is a problem' aren't usefull explanations.
> 
> Remember, 
> comp.lang.javascript is not a help-desk, 
> nor a Google-group,
> but a Usenet discussion-group.
> 
> 
> -- 
> Evertjan.
> The Netherlands.
> (Please change the x'es to dots in my emailaddress)

When I come home, I will try both suggestions.
Thanks for now. I will report back my findings.

Regards.

[toc] | [prev] | [next] | [standalone]

#34104

zljubisic@gmail.com wrote on 06 Oct 2017 in comp.lang.javascript:

> 
>> It is not ment as a 'solution', 
>> it is just part of a discussion.
>> 
>> > Other rows are not working. There is a problem with the horizontal
>> > line. 
>> 
>> 'Works' fine here on Chrome and Edge in Windows 10.
>> 
>> "The nth line" depends on your[!] actual window-width in my code.
>> 
>> Please debug your problem.
>> 
>> Anyway, 
>> 'not working' and 'there is a problem' aren't usefull explanations.
>> 
>> Remember, 
>> comp.lang.javascript is not a help-desk, 
>> nor a Google-group,
>> but a Usenet discussion-group.

[please do not quore signatures on Usenet. Remmoved.]

> When I come home, I will try both suggestions.
> Thanks for now. I will report back my findings.

What I also ment was you to state your browser and machine.

Mouseover following like this is, for instance, 
not ment for touch-screen touches.

-- 
Evertjan.
The Netherlands.
(Please change the x'es to dots in my emailaddress)

[toc] | [prev] | [next] | [standalone]

#34105

> What I also ment was you to state your browser and machine.
> 
> Mouseover following like this is, for instance, 
> not ment for touch-screen touches.

Chrome Version 61.0.3163.100 (Official Build) (64-bit)
Windows 10, no touch screen

[toc] | [prev] | [next] | [standalone]

#34106

I have just tried your the first solution. It works but lines are to short. I have extended them by changing last two lines:

                .imageholder { 
                        position:relative; 
                        display:inline-block; 
                        margin-left:100px; 
                        width:1920px; 
                        height:1080px; 
                        } 

Is it possible to have lines as wide as image (in my case images are in resolution 1800 x 1150). 
Lines are now OK, but if I use horizontal/vertical scrollbar, then lines are shifted from mouse pointer respectively. 

Now my web page source for one picture looks like this:



            <style type='text/css'> 
                .imageholder { 
                        position:relative; 
                        display:inline-block; 
                        margin-left:100px; 
                        width:1920px; 
                        height:1080px; 
                        } 
                .horizontal, .vertical { 
                        position:absolute; 
                        background-color:red; 
                        } 
                .horizontal { 
                        width:100%; 
                        height:1px; 
                        } 
                .vertical { 
                        width:1px; 
                        height:100%; 
                        } 
                </style> 
                
                <script type='text/javascript'> 'use strict' 
                
                function moMove(e,t) { 
                        t.querySelector('.horizontal').style.top = 
                         (e.clientY - t.offsetTop)  + 'px'; 
                        t.querySelector('.vertical').style.left = 
                         (e.clientX - t.offsetLeft) + 'px'; 
                }; 
                
                function crVisib(t,w) { 
                        t.querySelector('.horizontal').style.visibility = w; 
                        t.querySelector('.vertical').style.visibility   = w; 
                } 
            
            </script> 
        
        
            <table>
                    <tr>
                        <td>
                            <div class = "imageholder" 
                                    onmousemove  = 'moMove(event,this)' 
                                    onmouseenter = 'crVisib(this,"visible")' 
                                    onmouseleave = 'crVisib(this,"hidden")'> 
                            <div class = "horizontal"></div> 
                            <div class = "vertical"></div> 
                            <img src="ta_D.png" >
                            </div> 
                             
                        </td>
                    </tr>
            </table>

[toc] | [prev] | [next] | [standalone]

#34107

zljubisic@gmail.com wrote on 06 Oct 2017 in comp.lang.javascript:

> .imageholder { 
>  width:1920px; 
>  height:1080px; 
>                         } 
> 
> Is it possible to have lines as wide as image (in my case images are in
> resolution 1800 x 1150).

The imageholder and img sizes should be exactly the same.

Did you try to understand the code?

Without understanding it seems folly to change values, methinks.

Without understanding, you are using this NG as a helpdesk,
and I urge you to use it as a learning platform.

-- 
Evertjan.
The Netherlands.
(Please change the x'es to dots in my emailaddress)

[toc] | [prev] | [next] | [standalone]

#34109

> Did you try to understand the code?
> 
> Without understanding it seems folly to change values, methinks.
> 
> Without understanding, you are using this NG as a helpdesk,
> and I urge you to use it as a learning platform.

I am not familiar with the javascript, but I needed it to get lines on graphs for my small personal free time project. 
Anyway, I managed to change your code a bit in order to get the functional feature that works excellent. Thank you very very much for your help.

Code that works is below. Thanks again.

            <style type='text/css'> 
                .imageholder { 
                        position:relative; 
                        display:inline-block; 
                        margin-left:100px; 
                        width:100%; 
                        height:100%; 
                        } 
                .horizontal, .vertical { 
                        position:absolute; 
                        background-color:red; 
                        } 
                .horizontal { 
                        width:100%; 
                        height:1px; 
                        } 
                .vertical { 
                        width:1px; 
                        height:100%; 
                        } 
                </style> 
                
                <script type='text/javascript'> 'use strict' 
                
                function moMove(e,t) { 
                        var xOffset=Math.max(document.documentElement.scrollLeft,document.body.scrollLeft);
                        var yOffset=Math.max(document.documentElement.scrollTop,document.body.scrollTop);
                        t.querySelector('.horizontal').style.top = 
                         (e.clientY + yOffset - t.offsetTop)  + 'px'; 
                        t.querySelector('.vertical').style.left = 
                         (e.clientX + xOffset - t.offsetLeft) + 'px'; 
                }; 
                
                function crVisib(t,w) { 
                        t.querySelector('.horizontal').style.visibility = w; 
                        t.querySelector('.vertical').style.visibility   = w; 
                } 
            
            </script> 
        
        
            <table>
                    <tr>
                        <td>
                            <div class = "imageholder" 
                                    onmousemove  = 'moMove(event,this)' 
                                    onmouseenter = 'crVisib(this,"visible")' 
                                    onmouseleave = 'crVisib(this,"hidden")'> 
                            <div class = "horizontal"></div> 
                            <div class = "vertical"></div> 
                            <img src="ta_D.png" >
                            </div> 
                             
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <div class = "imageholder" 
                                    onmousemove  = 'moMove(event,this)' 
                                    onmouseenter = 'crVisib(this,"visible")' 
                                    onmouseleave = 'crVisib(this,"hidden")'> 
                            <div class = "horizontal"></div> 
                            <div class = "vertical"></div> 
                            <img src="ta_12H.png" >
                            </div> 
                             
                        </td>
                    </tr>
            </table>

[toc] | [prev] | [next] | [standalone]

#34108

zlju...@gmail.com wrote:
> I have a basic html page (that is served by python bottle) that shows one or more pictures. 
> Html code is very general and literally looks like this:
> 
> 
>             <table>
>                     <tr>
>                         <td>
>                              <img src="ta_T.png" >
>                         </td>
>                     </tr>
>                     <tr>
>                         <td>
>                              <img src="ta2_T.png" >
>                         </td>
>                     </tr>
>             </table>
> 
> 
> As pictures are showing diagrams with axes, I would like to have vertical/horizontal lines that follow mouse pointer in order to be able to read scales on axes for each data point.
> I have found something that could work 
> 
> https://stackoverflow.com/a/11462689/3225309
> 
> but I don't know how to implement it in my html code.
> Can someone help, please?


Maybe something like this? (Minus the scale numbers at the moment)

<https://codepen.io/mlhaufe/pen/xXYVPo>

off-the-cuff, but it's a start. The layout was inspired by Evertjan's solution


caveat: I'm using some relatively recent standards in this solution so your mileage may vary depending on target audience

Tested in Firefox 56 and Brave 0.18.36

Inline for future reference:

<style>
article {
  background-image: url(http://placehold.it/320x280);
  display: inline-block;
  height: 280px;
  margin: 10px;
  overflow: hidden;
  position: relative;
  width: 320px;
}

[data-ch]{
  cursor:none;
}

[data-ch]::before {
  background-color: red;
  content: "";
  display: none;
  height: 100%;
  position: absolute;
  width: 2px;
}
[data-ch]:hover::before {
  display: block;
}

[data-ch]::after {
  background-color: red;
  content: "";
  display: none;
  height: 2px;
  position: absolute;
  width: 100%;
}
[data-ch]:hover::after {
  display: block;
}
</style>

<script>
function getRuleWithSelector(selector) {
  return Array.from(document.styleSheets, sheet =>
    Array.from(sheet.cssRules).find(rule => rule.selectorText === selector)
  )[0]
}

//finding the selector is expensive, so do it once
var beforeRule = getRuleWithSelector("[data-ch]::before"),
    afterRule = getRuleWithSelector("[data-ch]::after")

document.addEventListener("mousemove",function(e){
  var cross = e.target.closest("[data-ch]")
  if(cross) {
    let mx = e.pageX - cross.offsetLeft,
        my = e.pageY - cross.offsetTop,
        sheet = document.styleSheets[0]
    beforeRule.style.left = mx + 'px'
    afterRule.style.top = my + 'px'
  }
});
</script>

<article data-ch></article>
...

[toc] | [prev] | [standalone]

Back to top | Article view | comp.lang.javascript

csiph-web