3

I've created a method that makes a black bar appear on the side of an image on mouseover. It's all well and good when it's only one image but when applied to multiple images the black bar appears on both images in the event of mouse over.

Is it possible to to get each image to act independently from each other so that the mouseover event only activates the black bar for that particular image?


jsFiddle - http://jsfiddle.net/7kw8z/11/


I call the method via $("img.edit").panzoom();

And This is the method:

!function($){


$.fn.panzoom = function() {
    var $this = $(this);
    this.imagesLoaded(function(){

        $this.wrap('<div class="img_wrapper" />');

        var imgEl = $this.parent(".img_wrapper");

        imgEl.width($this.width());
        imgEl.height($this.height());
        //imgEl.offset({top:$this.offset().top,left:$this.offset().left});

        imgEl.append('<div class="img_menu" />');
        menuEl = imgEl.children(".img_menu");


        imgEl.hover(function() {
            $(menuEl).css("visibility", "visible");
        },  function() {
            $(menuEl).css("visibility", "hidden");
        });

    });
}

}(window.jQuery);
3
  • 2
    Use $(this) instead of $(menuEl) in the hover() method? And incidentally menuEl is already a jQuery object, you don't need to rewrap it. Jun 12, 2013 at 14:19
  • In the context of plugins this refers to the jQuery object, so no need to rewrap it either
    – cfs
    Jun 12, 2013 at 14:22
  • I know you're asking about jquery, but I accomplished more or less the same thing with pure CSS: jsfiddle.net/paulprogrammer/Xcsrv/2 Your javascript didn't work for me at all (chrome). Jun 12, 2013 at 14:25

4 Answers 4

5

you can do

$.fn.panzoom = function() {
return this.each(function(){
    var $this = $(this);
    $this.imagesLoaded(function(){
        $this.wrap('<div class="img_wrapper" />');

        var imgEl = $this.parent(".img_wrapper");

        imgEl.width($this.width());
        imgEl.height($this.height());

        imgEl.append('<div class="img_menu" />');
        var menuEl = imgEl.children(".img_menu");

        imgEl.hover(function() {
            menuEl.css("visibility", "visible");
        },  function() {
            menuEl.css("visibility", "hidden");
        });
    });
});
}     

http://jsfiddle.net/7kw8z/21/

1
  • Ah so this doesn't act as each individual element but an array of elements? Thanks!
    – Ryan King
    Jun 12, 2013 at 14:44
3

The scope of the mouseenter/leave is the current element so you can use $(this). You can than use find, to get element you are trying to show/hide.

    imgEl.hover(function() {
        $(this).find(".img_menu").css("visibility", "visible");
    },  function() {
        $(this).find(".img_menu").css("visibility", "hidden");
    });
1

Not sure why you're doing this all in js, can you use CSS? Just remove

    imgEl.hover(function() {
        $(menuEl).css("visibility", "visible");
    },  function() {
        $(menuEl).css("visibility", "hidden");
    });

and you can add

.img_wrapper:hover .img_menu {
    visibility: visible;
}

http://jsfiddle.net/7kw8z/14/

If you really do need javascript, you need to realize your menuEl is not an element but is a group of element*s*, as denoted by imgEl.children.

1
  • It's a small simplified problem that's a part of a much larger script. I need js, thanks though.
    – Ryan King
    Jun 12, 2013 at 14:29
0

People beat me to it but heres my answer, creating a plugin here is the ideal way to go!

$.fn.panelize = function (initState) {

  // set a default show state
  var show = initState || false;

  var animation = {
    duration: 300,
    easing:   'linear',
  };

  return this.each(function() {
    _this = $(this);

    var element = {
      show:    $('.show', _this),
      close:   $('.close', _this),
      content: $('.panel-content', _this),
    };

    var hidePanel = function () {
      _this.animate({
        bottom: -(element.content.height()),
      }, 
      animation.duration, 
      animation.easing, 
      function () {    
        element.show.show();
        element.close.hide();
      })
    };

    var showPanel = function () {
      _this.animate({
        bottom: 0,
      }, 
      animation.duration,
      animation.easing,
      function () {
        element.close.show();
        element.show.hide();
      })
    }

    // search for the show button within this context
    element.show.on('click', function () {
      showPanel();
    }) 

    // search for the close button within this context.
    element.close.on('click', function () {
      hidePanel();
    }); 

    // hide panel initally, if configured
    if (!show) hidePanel();

  });
}

// reduced to a single class
$('.infoToggle').panelize();

Html can now look like this.

   <div class="infoToggle">
        <div class="panel-controller">
            <div class="tab-controller">
                <span class="close">CLOSE</span>
                <span class="show">MORE INFO</span>
            </div>
        </div>
        <div class="panel-content">
            Content goes here
        </div>
    </div>

    <div class="infoToggle">
        <div class="panel-controller">
            <div class="tab-controller">
                <span class="close">CLOSE</span>
                <span class="show">MORE INFO</span>
            </div>
        </div>
        <div class="panel-content">
            Content goes here
        </div>
    </div>

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.