jquery - Axis guidelines over an image

admin管理员组

文章数量:1202791

I'm trying to implement this in WordPress:

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=".jpg">
</div>

... the guidelines are not dynamic and stay at the top left corner:

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

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:

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

• jquery

Share Improve this question asked Mar 26, 2022 at 12:53 FLXFLX 10111 bronze badge 2

• Did you check your console? Are there any errors? Did you confirm the JS was loading? Are you in a child theme or custom theme? – rudtek Commented Mar 26, 2022 at 16:28
• @rudtek I enabled WP_DEBUG and got no errors. JS is loading, I use it also here: flimmerzimmer.eu/berechnung-des-sitzabstandes-zur-leinwand I'm using only one main theme. I published a site with this problem here: flimmerzimmer.eu/korrektur-des-raumes – FLX Commented Mar 26, 2022 at 16:53

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 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();
    });

});

本文标签： jqueryAxis guidelines over an image