jQuery mobile navigation obscuring "click" events to HTML image map - javascript

I am using jQuery mobile for navigation, including back buttons, so the following is set:
$.mobile.page.prototype.options.addBackBtn = true;
In order to use jQuery mobile navigation to get to pages linked from an HTML image map, I was using the following code, bound to pagecreate:
$(page).find('MAP').bind('click', function(e) {
alert("Map click");
});
$(page).find('AREA').bind('click', function(e) {
alert("Area click");
e.preventDefault();
$.mobile.changePage($(this).attr('href'));
});
What seems to happen is the first time my image map loads, everything works as expected, and when I touch one of the areas, I get both alerts, first "Area click" then "Map click", and then the nice jQuery mobile nav animation takes me where I'm going.
However, whether I use jQuery mobile's back button (enabled by the addBackBtn option above) or the browser's back button to return to the image map, these events no longer seem to fire. The area objects neither cause their original, pre-override behavior of acting like a regular hyperlink, nor do I get any of my alerts.
This is in Webkit browsers on a couple of iOS and Android phones - somehow desktop browsers do not exhibit this issue.
Anyone know the bug/fix/workaround for having my HTML image map continue to work, even after it's been navigated away from and back again by jQuery mobile? All help greatly appreciated.

The issue turns out to be that, when you use jQuery mobile for navigation, it can sometimes end up injecting duplicate IDs into the DOM, which is why they advise you to never use IDs in the first place.
Unfortunately, images must refer to their maps by id (or name), so using the above approach you can end up manipulating one map, while your img tag is pointing at another one with the same ID that is somewhere else in the DOM.
The fix isn't pretty, but it's to set the id of the map to something unique, and then set the usemap attribute of the corresponding image, before trying to update the handlers of each map area.

Related

How can I stop the effects of the users clicks?

I am making a chrome extension to edit properties of images that are clicked on. I am using a package called element picker to select the images (this is triggered through an html button in a popup). The code works and I can change the properties of the image. However the package does not stop whatever action is linked to the image, which can often lead to the user being taken to a new page. How can I stop any of the actions of the users click between the time they press the button in the popup and they have selected an image?
Thank you in advance.
var elementPicker = require('element-picker')
function onClick(elt) {
[.....]
}
elementPicker.init({ onClick })
I don't usually recommend using this but CSS pointer-events can solve this problem. The idea is that any element with pointer-events:none will ignore any interactions. This works to block default HTML interactions like <a> or <button> as well as any javascript actions attached to the element.
This is the technique frequently used with a modal window to prevent clicks from going "through" the area around a modal. It should also work for what you described.
You could either set that style on the image element or on All Elements by using the * {styles...} selector. If you go the "all" route, you'll need to explicitly re-enable pointer-events on any elements in your extension interface that you still need actionable by using the 'auto' property.
Remember to reset pointer events when your extension is finished * {pointer-events: initial;} or you'll leave the page completely in-actionable.
If there is an Event object being passes through to the function then you could use the Event.preventDefault() function.
This function stops any default behavior and allows you to handle the event in your own manner.
Reference: https://developer.mozilla.org/en-US/docs/Web/API/Event/preventDefault

Joomla 3, disable tooltips using javascript

I would like to remove all tooltips - but only when viewed on mobile devices.
I am using javascript to check for windowsize (on load and on re-zize), which is working fine - but I cant seem to figure out how to turn off the tooltips, using javascript.
Is there a tooltip.stop() - or something else that can turn off the tooltips (and possibly turn back on, on resize?)
The reason for my request is that I have tooltips on some of my buttons, and apparently the tooltip fires on first tap, instead of just triggering the button. (The button should fire a javascript).
Only the second tap fires the button javascript. Which is a little annoying.
I wanted to remove tooltips in Joomla's pagination. I targeted the links which have the class "pagination" and removed all their event handlers with:
jQuery(".pagination a").off() ;
You could doubtless find a selector to meet your needs.
The following worked for me, as the script inserted by Joomla keys off the class name hasTooltip.
$(document).ready(function(){
$(".pagenav").removeClass('hasTooltip') ;
});

How to determine when an HTML5 element has been viewed?

I am wondering if there are any HTML5 events associated with whether or not an element has been viewed or "scrolled into view" by the user.
An example could be a longer page with elements at the bottom, which has yet to be scrolled into the users view...
I have seen jQuery solutions to this problem, however I am only interested in figuring out if weather or not this is achievable purely though the use of HTML5 events and JavaScript.
It should be noted that I have already had a look at the "onfocus" event, which (from it's official description) seems to only be applicable if the user selects or "clicks" somewhere on or within the element itself.
In plain JavaScript you can use the event "scroll" along with getBoundingClientRect().bottom <= window.innerHeight to determine if an html element has come into view.
document.addEventListener("scroll", inView);
function inView() {
if (document.getElementById("viewElement").getBoundingClientRect().bottom <= window.innerHeight) {
console.log("in view");
// uncomment below if you only want it to notify once
// document.removeEventListener("scroll", inView);
}
}
The console prints "in view" when the element comes into view.
<div id="viewElement">Hello there!</div>
There are no built-in events that tell you when an entire DOM element has become viewable/visible on the page due to scrolling or window resizing.
The only way to do this is to keep track of resize and scroll events (which can each cause more or less of your page to be visible) and then use the scroll position and window height and DOM element positions to calculate if your entire DOM element is visible.
Some relevant pieces of code you can either consider using or look into how they work (these tend to be jQuery-based because they are harder to share if not based on a common DOM library):
Lazy Load Plugin for jQuery
Element "in view" Event jQuery Plugin
Check if Element is Visible After Scrolling - plain JS
I had to do something similar to this when I built http://f1circle.com.
When the bottom banner becomes visible, I have to show a spotlight to the user asking him to login.
The code that achieves it using angularjs can be viewed at https://github.com/rajegannathan/angularUtilities/blob/master/directives/eagerload.js
Though it is an angularjs directive, the main logic is in plain javascript. Basically I check if the the last feed's bottom edge is visible and then trigger the spotlight.
I can explain more if required.
As already mentioned, there is no "event" but someone already wrote a method to "detect if a DOM Element is Truly Visible" (the title). It doesn't require JQuery. You might want to check for the value on several events like the document load, scroll or window resize.

How to navigate to an element in a page using javascript without changing page hash

I need to navigate to the element 'divElem1', on click of a button. Is it possible?
If we enter this link in browser, http://myUrl#divElem1, browser will navigate to the page and to the DIV element 'divElem1'. The same behavior has to be obtained through javascript.
The hash change will not work in my application, as there are other events will be fired on hash change.
So, the following will not work.
document.button.onclick = function () {
location.hash = "#divElem1";
};
document.getElementById("divElem1").focus() is also not working since the element is a div
You can use scrollIntoView for that:
document.getElementById("divElem1").scrollIntoView()
This doesn't give fine grain control over where exactly the target element will end up but it WILL be moved into the view-port. Even more, if the element is inside a scrollable container, both the container and the element inside it will be moved into a position so they are visible in the view-port.
If you want "plain" Javascript, use scrollIntoView(). But it really jumps to that position, see this question and answer.
Using jQuery, it can be done jumpy or with some easing, as explained here.
Easing is recommended to provide a better user experience and to let visitors see and understand what is happening.

How to trigger event when a specific div is in visible in client window

I have a blog that consists of consecutive entries, ie. divs. I have a separate background image for each entry. I want to change background image when a specific div gets visible in the client window. I couldn't figure out how to trigger it.
I think this is not about :visible or .show, all divs are alredy visible. However the page is long due to consecutive entries and I just want to change background image when the page is scrolled and a div get in sight.
Note: A javascript solution would be better by the way, if exists... rather than jQuery
I think you need to bind a function to the windows scroll event and validate the div's when the event is fired.
$j(document).bind("scroll", function() {
//check here
});
I found where someone is offering a plugin for this sort of thing too: http://remysharp.com/2009/01/26/element-in-view-event-plugin/
--edit--
here is a similar question and answer:
Check if element is visible after scrolling

Categories