0

I'm trying to implement this in WordPress: https://stackoverflow.com/questions/11461913/making-axis-guide-lines-over-an-image-that-follow-the-mouse-pointer

I created this script in my theme folder (/js/guidelines.js):

jQuery('#imageholder img').on('mousemove', null, [jQuery('#horizontal'), jQuery('#vertical')],function(e){
    e.data[1].css('left', e.offsetX==undefined?e.originalEvent.layerX:e.offsetX);
    e.data[0].css('top', e.offsetY==undefined?e.originalEvent.layerY:e.offsetY);
});
jQuery('#imageholder').on('mouseenter', null, [jQuery('#horizontal'), jQuery('#vertical')], function(e){
    e.data[0].show();
    e.data[1].show();
}).on('mouseleave', null, [jQuery('#horizontal'), jQuery('#vertical')], function(e){
        e.data[0].hide();
        e.data[1].hide();
});

Added this to functions.php:

add_action( 'wp_enqueue_scripts', 'add_guidelines' );
function add_guidelines() {
    wp_enqueue_script(
        'guidelines', // name your script so that you can attach other scripts and de-register, etc.
        get_template_directory_uri() . '/js/guidelines.js', // this is the location of your script file
        array('jquery') // this array lists the scripts upon which your script depends
    );
}

And added the CSS to additional CSS in the theme customizer:

#imageholder div{ background-color:black;position:absolute; }
#imageholder{;position:relative;display:inline-block;overflow:hidden; }
#horizontal{width:100%;height:1px;}
#vertical{width:1px;height:100%;}

But when I try to implement these guidelines on a graph:

<div id="imageholder">
    <div id="horizontal"></div>
    <div id="vertical"></div>
    <img src="https://www.elesa.com/siteassets/low/ELESA/DWG/TechData_web/AV_ACC_DIAGRAM_EN.jpg">
</div>

... the guidelines are not dynamic and stay at the top left corner: enter image description here

Maybe someone can help me with this problem. I don't know what's wrong here.

2

1 Answer 1

0

I just had to wrap document ready function around:

jQuery(document).ready(function( $ ) {

    $('#imageholder img').on('mousemove', null, [jQuery('#horizontal'), jQuery('#vertical')],function(e){
        e.data[1].css('left', e.offsetX==undefined?e.originalEvent.layerX:e.offsetX);
        e.data[0].css('top', e.offsetY==undefined?e.originalEvent.layerY:e.offsetY);
    });
    $('#imageholder').on('mouseenter', null, [jQuery('#horizontal'), jQuery('#vertical')], function(e){
        e.data[0].show();
        e.data[1].show();
    }).on('mouseleave', null, [jQuery('#horizontal'), jQuery('#vertical')], function(e){
            e.data[0].hide();
            e.data[1].hide();
    });

});

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.