I need to open links with javascript (window.open) when the user clicks on positions in a google-maps map.
How do I make the user understand that it is a link, that he can click it, and where he will end up when he has clicked it?
Among other things, while the user is hovering over a map position, the URL of that position should be shown in the status-bar, just like with a normal link in firefox.
How do I do that?
Thanks
dontomaso
You can create a simple link and then put an onclick listener on it using unobtrusive Javascript techniques. When the user clicks the link you intercept the click event, prevent the default action, read the href attribute and open the window. Kinda like this:
link
$("#myLink").on("click", function(event) {
event.preventDefault();
myFunctionToOpenWindowForUrl(this.href);
});
This is using jQuery, of course you could adapt it to any other JS library you might be using. This way you will also see the original URL in the status bar, because that is the natural thing for a link - no need for extra coding. Also your links will work even without Javascript, which makes this approach way better than styling a span for instance to look like a link and then attach the listener to it.
Ok I don't know much about how google map manage JS code so I try to give you a general help:
you could create a DIV (with width and height of the rectangular area you want) and then put it with background-color transparent positioned in absolute coordinates where you want into the map.
then write onmouseover and onclick handlers for it so when the user goes over on it you do a change to the mouse shape (from pointer to hand) and when it clicks it open the url.
for the status bar when the user over on a map poistion you can do:
window.status = (getURL)
You can modify the cursor to appear as a pointer by using CSS(cursor:pointer;)
Furthermore, you can put the destination into the title tag, so the user will see the destination if he moves the mouse over the element.
try something like this:
link
href="javascript:void(0);" will show link as it should, if you would put here href="#" it would just scroll on top of the page. Href has to be set to have usual link display.
onmouseover="window.status='status bar';" will set status in window on mouse over.
Related
This is my first post - I have searched for the answer in other questions but couldn't find anything so hoping that someone can help with this specific question?
I'm trying to track a link that's sat in a 'floating' bar in the footer of this site:
The link is #browsealoud - which is when you click on Screen reader - which upon clicking opens a pop-up which then reads out text (to assist those with sight problems).
I have set up the Tag and Trigger in Google Tag Manager, and know it works fine as when I insert the below link code in the body content, the Event is tracked in Google Analytics.
However, as this link sits in the floating grey bar in the footer, the trigger doesn't fire and I can't quite work out why. What is the best solution to allow me to track link clicks on this particular link (which appears on all pages)?
<h6>Screen reader</h6>
UPDATE: Screenshot of tag, trigger and variables below, as requested.
screenshot
It looks to me as though you've already fixed this, as I think I can see a GA event firing whenever I click.
In any case, I think your problem is likely that there are two different places that you can click to obtain the same result; the text 'Screen reader' is actually a child of the element that includes the arrow, so clicking it will obtain a different set of attributes.
I woudl set up a custom javascript variable Parent href that reads the href of the parent of the clicked object. For example...:
function() {
return {{Click Element}}.parentElement.href;
}
And then set up a trigger that fires when either Click URL or Parent href is equal to #browsealoud.
Thanks for the screenshots. I believe what you need to do is to simply enable the History listener variables
The reason is because you are trying to track a URL fragment (ie. it has a hash) which GA doesn't track by default but can be tracked through GTM via the history listeners. I would also change your trigger to this:
In another question, someone is suggesting that an image can be made focussable? How can one achieve this?
More information:
In the other question, Quentin says:
var img= $("#my-image-id");
image.click(function() {
// your code here
}
Don't do this. The image will not be focusable (since images are not
designed to be interactive controls). People using (for instance) a
keyboard to navigate through the page (instead of a pointing device
like a mouse) won't be able to navigate to the image and activate the
control.
Someone else says:
In your case that you want to maintain the "focus" (i assume with
tabbing support), if you use a single as a button (with or
without ), you will have to add some JS code to make the image
focusable when the appropriate tab is pressed. So you will have to
write a bit more code to do the same thing.
To make an image (or any element) focusable, just add a tabindex attribute.
<img src="myimage.png" tabindex="1" />
But note that there is no need for any special treatment just to make an image respond to click events.
You can just place an img inside a button.
So, the focus will reach the button, click event can be binded to the button, but it will look exactly like the image has focus.
If I see a link referencing to a website or action, is there a way I can make an external program that can click on that tag without physically having to take my mouse and click on the link? I know their are probably programs that can take your mouse pointer and move the pointer and possibly make them click, but I am looking for something that will click a link without having to worry about your mouse moving. Thank You
in jQuery:
$('a.theOne').click();
Selenium is a server-side testing tool the simulates clicks on the client-side for testing purposes.
Also, if jQuery does it then it is possible with regular javascript, but I'm not sure how. A look through the source code should reveal the secret.
According to this article you simply need to call:
document.getElementById('theSubmitButton').click();
You could get the link href and go to it via window.location.assign()
This is the privacy button that shows on your status updates on your Facebook wall.
When you click on that icon, you get these options.
I am trying to make a Greasemonkey script to automatically click on one of those selections. My script works fine, with the only caveat being that I have to hover my mouse over that icon before running the script, or else it won't work. I don't even have to actually open the dialog by clicking on it, I just have to move my mouse over the icon.
So I'm trying to find a way to use Javascript to hover the mouse over that icon, or click on it, so that I don't have to manually do it. I've tried the .click() and .trigger() methods, but they don't seem to be of any help here.
I think this is the code for the button.
<a rel="toggle" data-tooltip="Your friends; Except: Restricted" data-length="30"
data-label="" aria-haspopup="1" href="#" ajaxify="/ajax/timeline/show_story_options.php?profile_id=707236195&story_fbid=10150597306856196&story_row_time=1331626509&permalink=1&story_div_id=stream_story_4f6620b08c1851b03797773&story_dom_id=stream_story_4f6620b08c1851b03797773&small_icon=1"
role="button" class="uiSelectorButton uiButton uiButtonSuppressed uiButtonNoText"
tooltip-alignh="right" title="" data-hover="tooltip" id="js_1"><i class="mrs defaultIcon customimg img sp_4uwvrx sx_bff9bf"></i><span class="uiButtonText"></span></a>
I tried using jQuery to get the url specified in the ajaxify tag, because I noticed that that's one of the things that happens when I hover my mouse over the button. Even though I can successfully GET the page, it doesn't seem to make any difference either.
How can I use Javascript to make this button do whatever it does when I manually hover my mouse over it?
I think what your after is something like the do click function found int the link below you could mix in with some query.
http://www.codeproject.com/Articles/17241/Capturing-the-Enter-key-to-cause-a-button-click
I'm in a hurry, so I can't in-depth with my answer, but I thought dropping this might be of some help.
There is this module called Selenium that lets you use a browser with javascript to do whatever you want on a webpage.
Guide: https://www.browserstack.com/automate/node
Module: https://www.npmjs.com/package/webdriver
Another Module: https://www.npmjs.com/package/selenium-webdriver
I know this is not a direct answer, but hopefully, it comes in handy.
I am currently using the zclip/jquery code to allow copying to the clipboard. It is currently attached to a span button. It seems to use a swf file over the button to provide the flash based copy to clipboard feature. The problem that I have is that when I dynamically add new elements to the page, the button position moves down but the SWF position stays the same. Is there anything I can do to have the zclip "follow" the button? Zclip snippet below:
$("#copyToClip").zclip({
path:'include/javascript/ZeroClipboard.swf',
copy:function(){return $("#outputtext").text();}
});
The zclip('show') thing actually calls the jquery show method, not the Zclip function.
An other tip would be to trigger the window resize or load event. You can see in the code the reposition function is bound to it.
a(window).bind("load resize", function(){
d.reposition()
})
then everytime, I add/remove element to my page, I call
$(window).trigger('reload');
That does the trick for me.
I beleive you can call the 'show' method to refresh the position:
$('#copyToClip').zclip('show');
The site does say "it may not be 100% reliable in every instance." and although it doesn't sound like it'll be an issue in your case it might be worth noting that it won't resize itself if the button has changed size.