Image mapster 'rebind' not working

» javascript » Image mapster 'rebind' not working

By : Ohmycosh

Date : November 17 2020, 11:55 AM

I hope this helps . So basically you need different maps for different images and use different DIV tags for different image. So here is how I solved it.

code :

 <div id = "l1" style="position: absolute; z-index:100; visibility: hidden; left: 150px; top: 109px;"><img src="line1.jpg" id = "box1" alt="box1" name="box1" width="800" max-height:"100%"  usemap="#map1" />
  <map name="map1" id ="map1" >
    <area id="A" shape="rect" state= "A"  coords="143,135,202,265" href="#" />
    <area id="B" shape="rect" state= "B"  coords="205,136,343,267" href="#" />
    <area id="C" shape="rect" state= "C"  coords="346,136,472,265" href="#" />
    <area id="D" shape="rect" state= "D"   coords="475,136,593,269" href="#" />
    <area id="E" shape="rect" state= "E"  coords="596,137,716,266" href="#" />
    <area id="F" shape="rect" state= "F"   coords="594,266,715,300" href="#" />
    <area id="G" shape="rect" state= "A"  coords="34,352,796,372" href="#" />
    <area id="H" shape="rect" state= "B"  coords="34,373,795,396" href="#" />
    <area id="I" shape="rect" state= "C"  coords="34,396,797,437" href="#" />
    <area id="J" shape="rect" state= "D"  coords="34,439,796,462" href="#" />
    <area id="K" shape="rect" state= "E"  coords="33,466,795,574" href="#" />
    <area id="L" shape="rect" state= "F"  coords="32,578,796,627" href="#" />
  </map>
</div>

<div id = "L2" style="position: absolute; z-index:100; visibility: hidden; left: 150px; top: 109px;">
<img src="line2.jpg" id = "box2" alt="box2" name="box2" width="800" max-height:"100%"  usemap="#map2" />
<map name="map2" id ="map2" >
  <area id="A" shape="rect" state2= "A"  coords="143,135,202,265" href="#" />
  <area id="B" shape="rect" state2= "B"  coords="202,135,331,266" href="#" />
  <area id="C" shape="rect" state2= "C"  coords="332,135,453,266" href="#" />
  <area id="D" shape="rect" state2= "D"   coords="453,134,714,264" href="#" />
  <area id="E" shape="rect" state2= "E"  coords="799,135,968,256" href="#" />
  <area id="F" shape="rect" state2= "F"   coords="455,268,713,298" href="#" />
  <area id="G" shape="rect" state2= "A"  coords="34,349,796,369" href="#" />
  <area id="H" shape="rect" state2= "B"  coords="33,371,797,409" href="#" />
  <area id="I" shape="rect" state2= "C"  coords="32,411,797,429" href="#" />
  <area id="J" shape="rect" state2= "D"  coords="33,431,797,549" href="#" />
  <area id="K" shape="rect" state2= "E"  coords="1036,324,1803,342" href="#" />
  <area id="L" shape="rect" state2= "F"  coords="34,553,797,598" href="#" />
</map>
</div>

 if ((buttons.value) == "Line1")
 {
    Hide();
    L1.style.visibility = "visible";
     $('#Line1').bind('click',function()
        {
    var img1 = $('#box1');
    var options = {
         mapKey: 'state',
        fillColor: 'd42e16',
        fillOpacity: 0.3
            };

    img1.mapster(options);

}); 

}
else if ((buttons.value) == "Line2")
{
Hide();
    L2.style.visibility = "visible";
    $('#Line2').bind('click',function()
        {

    var image2 = $('#box2');

    var options = {
         mapKey: 'state2',
        fillColor: 'd42e16',
        fillOpacity: 0.3
            };

    image2.mapster(options);


});

Share :

jquery rebind() disable events for a specific time, then rebind them

By : Ritesh Patel

Date : March 29 2020, 07:55 AM

Any of those help After click on a button my script loads new content. As long as it is loading I don't want a list of elements to be clickable. , Based on your answers i wrote the following plugin:

code :

(function($){
    $.fn.rebind = function(){
        var init = 'init-rebind';
        return this.each(function() {
            var is_init = $(this).data(init);
            if (!is_init){
                $(this).data(init, true);
                $(this).bind('click.rebind mouseenter.rebind mouseleave.rebind', function(e){
                    if ($(this).hasClass('disabled')){
                        e.stopImmediatePropagation();
                        e.preventDefault();
                    }
                });
            }
        });
    };
})(jQuery);

jQuery, trying to save click event, unbind and rebind, unable to rebind

By : D.Zanetti

Date : March 29 2020, 07:55 AM

To fix this issue You can make use of the .die() method in jQuery (added in 1.4.1). Any handler that has been attached with .live() can be removed with .die().
Ref for .die() : http://api.jquery.com/die/

code :

<div id="myElement">Testing save event</div>

<script type="text/javascript">
    $(document).ready(function() {


     function ClickEventHandler()
     {
        alert('abc');
     }

     $('#myElement').live('click', ClickEventHandler);


     function GetClickEventHandler(selector)
     {
        for(var i = 0 ; i < $._data(document).events.live.length ; i++)
        {
            if( $._data(document).events.live[i].selector == selector )
            {
                return $._data(document).events.live[i].handler;
            }
        }   
        return null;
     }

     var myFn = GetClickEventHandler('#myElement');

     $('#myElement').die();


     $('#myElement').live('click', myFn );
    });
</script>

JQuery image.mapster with other jquery version clash

By : 方瑞高

Date : March 29 2020, 07:55 AM

I wish this helpful for you If you inspect img#vegetables while zooming you will see your code to scale it is actually running. However, Mapster has set the opacity of the image to 0. The image you're looking at is the one created by Mapster with class="mapster_el".
I think you can get the functionality you want by scaling .mapster_el instead of #vegetables:

code :

$('.mapster_el').stop(true, true).animate({
//etc...

Mapster Adpat not working

By : Mymy Chhy

Date : March 29 2020, 07:55 AM

To fix the issue you can do I`m trying to make a select in form-control. , At startup Startup place the following code :

code :

using Mapster; //Reference your package


namespace YourApplication
{
    public class Startup
    {
        public Startup(IHostingEnvironment env)
        {
           //His previous codes ...

           //Place this code
            TypeAdapterConfig.GlobalSettings.Scan(Assembly.GetEntryAssembly());
        }
    }
}

jQuery Image Mapster: Highlight Areas prior to selecting

By : OTI nnovations

Date : March 29 2020, 07:55 AM

I wish this helpful for you I'm really liking the jQuery addin Image Mapster. However, I've really reached a brick wall I could use some help climbing. , Several comments: