How to make the image map clickable on mobile-safari? - javascript

I'm using jQuery and qTip2 to make Geo information on an image map visible. You can see the demo here on JSFiddle | Fiddle Screen result
On Desktop Browsers everything works fine. on-hover you see the tooltip and on-click you go to the URL defined by href tag.
But on mobile safari (ipad/iphone) it is impossible to get the link to the URL. Every time you click on the map it is like you hover on pc, but never a click.
The image is created with standard html:
<img src="http://i.stack.imgur.com/6z2Z9.png" usemap="mapname">​
also the map is created with standard html but with additional attribute tooltip(1):
<map name="mapname">
<area shape="poly" href="?content=meteo&abm=ALL" tooltip="ABM Alland" coords="664,243, 662,240, 664,237, 667,235, 669,232, 671,229, 671,225, 669,222, 669,214, 672,213, 673,227, 676,228, 679,231, 685,231, 692,232, 695,231, 697,228, 700,227, 703,228, 704,234, 705,241, 703,244, 700,246, 697,247, 694,249, 691,251, 688,253, 683,254, 680,253, 677,252, 672,249, 669,247, 664,243"></map>
The jQuery is very tiny with(2):
$(document).ready(function() {
$('area').each(function() {
$(this).qtip({
content: { text: $(this).attr('tooltip') },
position: {
my: 'bottom left',
target: 'mouse',
viewport: $(window)
},
hide: { fixed: true },
style: { classes: 'ui-tooltip-tipsy ui-tooltip-shadow'}
});
});
});​
So how could i solve this problem?
(1) I know this attribute should be data-tooltip. this will be changed soon.
(2) Based on the imagemap demo

This is logical. Ever tried hovering on a touchscreen? :-D
Since mobile devices lack the ability to hover, you need to adapt the way you are presenting your data, to fully support them.
For mobile device users, you need to make absolutely clear where a :hover action on desktop browsers would take place. Make the places "pop out of the map", so they know without hovering, where to retrieve information.
You need to substitute every :hover action with an adequate touchscreen action. For example provide the tooltips on tap and put the Link inside the tooltip to compensate for the missing hover action.
In return you could make use of "touchscreen-only" interactions to compensate.
A startingpoint on how to adapt you webcontent for mobile devices can be found in Apples Developer Library. (Especially §5 of this article).

Related

How to prevent Pinch IN Zooming of Image using Pinchzoom.js

So I have this scenario where I am using Pinchzoom.js library for zooming images. It is perfectly working and the library is very good. But I have a scenario where the PINCH IN gesture (on mobile) also makes the image zoom OUT. To see a working demo, you can refer to their working demo link. When you will PINCH IN, you will observe that the image zooms OUT but after the gesture has ended, it retains its original size. I wanted to ask if there is a way to disable this zooming out effect? My PinchZoom settings are as:
Array.from(document.querySelectorAll('.myimages')).forEach(function (el) {
new PinchZoom.default(el, {
tapZoomFactor: 5,
maxZoom: 10,
use2d: true,
verticalPadding: 1,
draggableUnzoomed: false
});
});
Try setting the property minZoom to 1.
This effect happens because it allows you to zoom out to a size that is smaller than your screen, so the browser scale it back so it fits the whole phone width.
You need to add the property which will tell the minimum zoom size. In Pinchzoom.js library there is minZoom property for that.
So if you don't want your image to be zoomed out on pinch-in then set minZoom:1.
I tried this settings by adding minZoom property to the demo link and it was working correctly.
Array.from(document.querySelectorAll('.myimages-container')).forEach(function (el) {
new PinchZoom.default(el, {
tapZoomFactor: 5,
maxZoom: 10,
minZoom:1,
use2d: true,
verticalPadding: 1,
draggableUnzoomed: false
});
});
If this solution is not working for you then maybe this is the problem is with your element selection.
Use container <div> as the parent of your every image and then apply settings to that parent <div>.
<div class="myimages-container">
<img src="my_image.jpg"></img>
</div>

autoPanMargin in Openlayers is not working in IE

I have an overlay in openlayers and I am providing the autoPanMargin of 100 pixels. It will work fine Chrome but in IE 11 if we click on the right side it will not work.
According to the API, autoPanMargin is the margin (in pixels) between the overlay and the borders of the map when autopanning.
So here is the overlay how I am using in the code
var overlay = new ol.Overlay(/** #type {olx.OverlayOptions} */ ({
element: container,
autoPan: true,
autoPanMargin : 100
}));
Here is the sample. Check this in both chrome and IE by clicking on the right side of the screen. In Chrome it will pan. But in IE it will not. May I know the reason and possible solution for this behaviour.
Thanks for asking. This is a bug. I just created a fix, which will be included in the next release (> v4.0.1).

click on mobile/tablet, hover on other devices (future-proofing)

need an idea, I am stuck in quite the conundrum. I am building a responsive future proof webdesign.
On desktop and similar devices: I have a menu which on hover does a css animation to desplay a description of what hides behind the link and on click navigates to a new page.
On mobile devices: I wish to have a touch-event that triggers the hover (thus desplaying the description) and on touch number 2 it should then navigate to the new page.
the above is doable, but how to do it without checking user-agents, this is my situation. How does one go about future proofing the above.
Any great ideas are more then welcome. :)
Use Javascript to add a class on the touchstart/touchend events. Browsers won't issue these events:
Javascript:
document.querySelector("#myMenu").addEventListener("touchstart", function() {
this.classList.add("mobileHovered ");
});
document.querySelector("#myMenu").addEventListener("touchend", function() {
this.classList.remove("mobileHovered");
});
CSS:
#myMenu:hover,
#myMenu.mobileHovered {
/* CSS styles */
}

jQuery Waypoint Plugin troubles

I'm having slight troubles with the jQuery Waypoint plugin, and any information/help is appreciated.
Ok, so to define what I want to do: I have images, that are hidden prior to being in the view area. I want them to do an animation effect once in the view area. That is the final result, for now, I'm still in testing as I am generally new to jQuery but getting better.
So I started out doing the shake on a single div, and it worked great once the once it was in view. I used the following code:
HTML:
<div class="shown">Shake it</div>
jQuery
jQuery(document).ready(function($){
$(".shown").waypoint(function(direction) {
$(this).effect("shake");
}, { offset: '95%', triggerOnce: true });
});
Then I made two instances of the class='shown' in my HTML (one at top, and one at the bottom), and when I scrolled to them, they both worked great. Plus, they both worked at separate times, which is what I'm trying to gain.
Here's the trouble
When I tried to 'display:none' and then animate to show on scroll, it animates BOTH, instead of just the single at a time.
This is what I'm using
HTML
<div class="shown" style="display: none;">
jQuery
jQuery(document).ready(function($){
$(".shown").waypoint(function(direction) {
$(this).fadeIn( 10000, function() {
// Animation complete
});
}, { offset: '95%', triggerOnce: true });
});
Ok, so just to clarify one more time :D (to be safe)
I want to be able to use the same class for MULTIPLE instances, that will only display once THAT element is in view. Right now it's displaying ALL elements once 1 instance is in view.
Again, any information/help is appreciated. You guys have a great community here, I'm glad I could join!

Code from scratch an image cropper AND resizer (at same time) in jQuery/javascript?

We are coding a rather simple Javascript (jQuery) image cropper & resizer. Basically, for now, only features needed are indeed crop and resize.
I have been checking a few jQuery plugins like JCrop etc. and it seems there's no plugins doing both things at same time. Lots of croppers OR resizer, but not the two features on a same "natural" image view at same time. By natural I mean that examples like this (bottom right) are not very nice visually for users :
http://jsfiddle.net/opherv/74Jep/33/
Although I guess this would be a possible way to go to have the two features at same time. Though you can see this example only zooms too currently and it is qualified as using "ugly hacks" by the author himself to do so :
function changeZoom(percent){
var minWidth=viewport.width();
var newWidth= (orgWidth-minWidth)*percent/100+minWidth;
var newHeight= newWidth/orgRatio;
var oldSize=[img.width(),img.height()];
img.css({ width: newWidth+"px", height: newHeight+"px" });
adjustDimensions();
//ugly hack :(
if (img.offset().left+img.width()>dragcontainer.offset().left+dragcontainer.width()){
img.css({ left: dragcontainer.width()-img.width() +"px" });
}
if (img.offset().top+img.height()>dragcontainer.offset().top+dragcontainer.height()){
img.css({ top: dragcontainer.height()-img.height() +"px" });
}
}
We are rather looking for the possibilty to use a cropper frame/zone (as we see the most often on the web) + a zoom/de-zoom option on the image (handles on the border of the image for example)
Since we only need those two features we thought we would code this from scratch or almost as we don't want to add other javascript files/plugins which will be overkill anyway being packed with other features we will not need (at least for now).
The question is: is there a specific difficulty at trying to code the display of an image re-sizable by straightforward handles & croppable by a frame/zone selection (which would also be re-sizable on its own and draggable around so a user can fine tune which part of the image he wants)?
Are we definitely better separating the two features ?
Thanks a lot for your help.
Tried this plugin??
http://code.google.com/p/resize-crop/
It does both crop and resize

Categories

Resources