javascript - jQuery image map responsive only one way -
i have responsive image map overlay.
but resizes when make browser window smaller, when resize big browser window again, keeps smallest size have been down to. doing wrong?
when resized follows width of .page_content, responsive , works great on resizing. use imagemapster.
heres code:
jquery('#apartment-map').mapster(initial_opts) .mapster('snapshot') .mapster('rebind',basic_opts); var resizetime = 0; var resizedelay = 25; function resize(maxwidth,maxheight) { var image = jquery('#apartment-map'), imgwidth = image.width(), imgheight = image.height(), newwidth=0, newheight=0; if (imgwidth/maxwidth>imgheight/maxheight) { newwidth = maxwidth; } else { newheight = maxheight; } image.mapster('resize',newwidth,newheight,resizetime); } function onwindowresize() { var curwidth = jquery(".page_content").width(), curheight = jquery(".page_content").height(), checking=false; if (checking) { return; } checking = true; window.settimeout(function() { var newwidth = jquery(".page_content").width(), newheight = jquery(".page_content").height(); if (newwidth === curwidth && newheight === curheight) { resize(newwidth,newheight); } checking=false; },resizedelay ); } jquery(window).bind('resize',onwindowresize); onwindowresize(); });
solved editing
if (imgwidth/maxwidth>imgheight/maxheight) {
to
if (imgwidth/maxwidth>imgheight/maxheight || imgwidth/maxwidth<imgheight/maxheight) {
Comments
Post a Comment