CODEWITHSUNDEEP
javascript
Chris Frank
Chris Frank

Reputation: 4452

Target class name but call function on unique ID

Ok I'm going to run this on the slowest ASP box I've ever seen before, so I'm not looking to use jQuery, I know it would make everything a lot easier but I need to keep my code as small as humanly possible. I'm targeting users with the slowest internet I've ever seen and loading the entire jQuery file will be to much for their internet to take. So I'm not looking to use jQuery for this script.

I'm trying to make a script that when the user hovers over the thumbnail the larger image pops up. I'm using the following javascript to achieve this:

var hoverImage  = document.getElementById("largeImage");

function hoverZoom(selector) {
    this.node = document.querySelector(selector);
        if(this.node === null) {
            console.log("Node not found");
    }

    return this.node.id;
}

hoverZoom.prototype.show = function(x, y) {
    var largeImageSrc                   = this.node.name;
    hoverImage.style.display            = "block";
    var largeWidth                      = hoverImage.offsetWidth;
    var largeHeight                     = hoverImage.offsetHeight;
    hoverImage.style.top                = y - (largeHeight / 2) + "px";
    hoverImage.style.left               = x - (largeWidth / 2) + "px";
    hoverImage.style.position           = "absolute";
    hoverImage.style.background         = "url(" + largeImageSrc + ")";
}

hoverZoom.prototype.hide = function() {
    hoverImage.style.display    = "none";
}

hoverZoom.prototype.checkCoords = function(x, y) {
    var id              = document.getElementById(this.node.id);
    var elemTop         = id.offsetTop;
    var elemLeft        = id.offsetLeft;
    var elemHeight      = id.offsetHeight;
    var elemWidth       = id.offsetWidth;
    console.log(x + " " + y + " " + this.node.id + " " + id + " " + elemHeight + " " + elemWidth + " " + elemTop + " " + elemLeft);

    if(x >= elemLeft && x <= elemLeft + elemWidth && y >= elemTop && y <= elemTop + elemHeight) {
        return true;
    }
}

document.body.onmousemove = function(e) {
    e           = e || window.event;
    while(hoverZoomPI.checkCoords(e.clientX, e.clientY) === true) {
        var target  = e.target || e.srcElement,
            offsetX = e.clientX,
            offsetY = e.clientY;

            return hoverZoomPI.show(offsetX, offsetY);
    }
    hoverZoomPI.hide();         
}

var hoverZoomPI = new hoverZoom(".test");

My problem is that when I hover over another image with the same class name nothing happens. But when I hover over the first image with the class name it works.

I've set up a jsFiddle with all my code and an example: http://jsfiddle.net/f7xqF/

Thanks everybody for their help. I can't say enough about how much you guys have helped me over the last few years.

Upvotes: 0

Views: 103

Answers (1)

AbstractProblemFactory
AbstractProblemFactory

Reputation: 9811

You should use document.querySelectorAll instead document.querySelector to get an LIST of all nodes, not just first one. After that u should of course attach callbacks to all of collected elements.

Upvotes: 2

Related Questions