Javascript in Google Maps Info Window - doesn't work in IE - javascript

First off this is my - Test Site
This is my testing playground for Google maps, I am not concerning myself with aesthetics. What I am having trouble with is getting some jQuery to fire when I click on a link inside of the info window. If you are familiar with Google Maps this is where I create my infowindow:
GEvent.addListener(marker,"click", function() {
map.openInfoWindow(point,'<div class="infoWindow">'+windowText+'\
'+<a href='#' class='showme' onclick='return false;'>Show Comments</a>+'\
</div>');
/*On click, show all the comments*/
$('.showme').live('click', function(){
//alert('hey');
$('.comment').toggle('slow');
});
});
To understand how it works, it might be easier just to view the source on the page. Originally I had instead of using a "live event" been doing a normal "on click" which did not work. I was assuming because the info window was its own environment apart from the main window.
This was wrong I believe when I tried the "live event" and it began to work in Chrome and FF. So now I am trying to understand why the click event doesn't work in any browser, and why the live event would work in everything but IE.
Does anyone have any input?
Thanks,
Levi
Edit:Sorry, if it wasn't clear the "show comments" link in the info window is where my trouble lies.

It seems there are some issues with using jquery's live() functionality with IE. There was a recommendation here to try bind instead. I've read in some other places that using a different mouse event can work as well, such as mouseup or mousedown. It definitely seems like an IE bug, though.

The livequery plugin seems to work in info windows with IE.
$('.showme').livequery(function(){
$(this).click(function(){
$('.comment').toggle('slow');
});
});

Changing the live('click',...) to live('mouseup', ...) fixed it in my case.

Related

Click function not working using jquery on tablet device inside document ready

I am not a JS developer, I am just a Web Designer dealing with simple JS interaction most of the time.
I am using jquery-1.11.3 and jquery.mobile v1.4.5 with just core features and slider capability.
As tablet I have a kindle with the firefox (beta) browser and an ipod with safari browser.
I am having a problem in understanding some JS behaviours of tablets and browsers regarding the click event function and document ready
$(function(){
$('.menu-ham').click(function(){
alert("test")
});
});
the click event doesn't work on tablets but it works perfectly on web browsers.
Instead if use this outside the document ready
$(document).on('click', '.menu-ham', function(){
alert("test")
})
it works like a charm. Only that I am not sure if this it would create problem with the browser because not inside document.ready
I tried to use as well
$(function(){
$('.menu-ham').on('click', function(){
alert("test")
});
});
inside or outside the document ready and nothing works.
"menu-ham" it is a button with that class. I read about a lot of topics, who said to use cursor:pointer, who said to use ".on('click'" instead of the normal click event, or vclick, or bind or touchstart but none really worked a part the solution that I offered, and now I am very confused about the whole thing on why is working and the other are not when I read a lot of comments that the other solution should work.
Any help would be very much appreciated, thank you!
I found the problem! it was all fault of Phalcon debugbar. On the mobile devices was generating an error that it wasn't happening on the normal browser. This error was making any jquery or selectors working.
Thank you for your help and support!

Hammer JS v2.0.4 not recognizing 'panstart' or 'panmove' in Chrome 37.0 only

I wanted to learn Hammer JS by building a simple program to drag an element around the screen, pretty much just like the same on the Hammer homepage.
I used the code posted on the Hammer github page, which seems to be the same code used on the homepage. I was testing the work in Chrome (37.0 / OSX). After working with it for a while and being unable to get the element to move, I opened the same page in Safari and FF. It worked perfectly in both of those browsers.
To pare things down, I added just the required to code to see an event trigger:
var mover = document.getElementById("mover");
var mc = new Hammer.Manager(mover);
mc.add(new Hammer.Pan({ threshold: 0, pointers: 0 }));
mc.on("panstart panmove", function(ev) {
console.log(ev);
});
Nothing gets logged in Chrome, but I get proper logging as expected in Safari and FF. I extended the event listener to include 'pan, panend, pancancel, panleft, panright, panup, pandown'. These events WOULD log in Chrome, so it seems like only panstart and panmove were being ignored.
So this code will run on the hammer.js page in Chrome, so clearly Chrome does see the panstart and panmove events in that browser, it's just not happening in my code. Which means somehow I am missing something, despite copying the code over from their site. I checked we were on the same Hammer version, but I am not sure sure what else from here I need to check.
Has anyone else encountered and solved this problem? Or perhaps knows what I am doing wrong to create this issue?
Thanks.
In the Hammer site say clearly "for better performance on slower devices your should try to keep you callbacks as simple as possible." I think that's the same with Browsers!
Maybe your problem is
var mover = document.getElementById("#mover");
Why do you type "#mover" instead of "mover"? The "#" sign it's for JQuery and you are using plain javascript. It confuses me that in some browsers this works, so I imagine your ElementID start in fact with the "#"...
Let me know if it helped, please!

typeahead.js iOS Safari vs Standalone Web App Differences

I understand that typeahead.js does not support mobile yet.
Even though it works in mobile browsers (mobile Safari), does anyone have an idea as to why it might not work once the form is viewed through a 'standalone' version of the web page?
The problem that is occurring is that when I try to 'click/touch' the suggestion dropdown, it does not fill the input with that entry in the standalone version, where as the safari version does work.
Is this type of behavior documented anywhere or known for iOS?
Thanks.
Addition: I added a jquery delegated click listener to .tt-suggestion to show an alert, which works in mobile safari, but not in the standalone version (I think the delegation event is not attaching).
$(document).on('click', '.tt-suggestion', function(e) {
alert('clicked');
});
I realized I was also using the FastClick library, which messes up the delay between dropdowns and the selected option.
To work around it, bind a dom mutation listener and add the needsclick class to each <p> class under each <div class="tt-suggestion">:
$('.tt-dropdown-menu').bind('DOMNodeInserted', function(e) {
$(e.target).find('.tt-suggestion').children('p').addClass('needsclick');
});
You might also be able to try using a listener:
$('input.typeahead').change(function(e) {
$(this).closest('.tt-dropdown-menu').find('.tt-suggestion').children('p').addClass('needsclick');
});
Or using an event delegator:
$('.tt-dropdown-menu').click(function(e) {
$(e.target).children('p').addClass('needsclick');
});
Note: functions are untested, they are based off memory.

Show Javascript functions in real-time

Is there any tool or addon which can be used for testing or identifying Javascript functions in real time (i.e. on click or some events )..
e.g. on a website, I want to know after clicking on a link, which all JS functions are being called/executed..I know sometimes it is stragightforward from the code, but in case it uses JS libraries like jQuery, the actual function call is made from otside..
How can I do that?
*I'll really appreciate if, alongwith the addon, you just write a short description as to where can I find the Javascript finction tracking in that **
Thank you.
Try Firebug. It's one of the most useful firefox addons. Grab it here:
http://getfirebug.com/
Dragonfly (Opera), or Firebug extension for Firefox, or any other good javascript debugger
See Visual Event. It is a bookmarklet that overlays element event handler information.
FireQuery is available as a firefox plugin which adds handler information inside of firebug.
Firebug includes a JavaScript profiler. Give it a try.
http://getfirebug.com/javascript
In Chrome, right click the page and choose Inspect element, go to the console, start javascripting! Choose the scripts tag to get debugger functionality.

Simple dashboard application

I am trying to have some fun with dashboard widgets, so I tried a simple application :
There will be a button over the widget which when clicked will open
StackOverflow website in safari.
To implement it, I tried this:
Created a custom dashboard widget.
Added a button to it from library.
Associated gotoStackOverflow handler with onclick event.
in body of function gotoStackOverflow, I wrote this code:
window.open('https://stackoverflow.com/','Stackoverflow','width=400, height=300');
When I 'Run' the application I found no browser window appearing on click of the button.
Can anyone suggest me where I may be wrong or/ and some useful links to play with dashcode and dashboard widgets?
Your code runs fine, when I recreate it. Maybe you have pop-ups blocked in Safari?
have you added
<key>AllowNetworkAccess</key>
<true/>
to the plist? if not the outside world will not be available.
I have used following code to solve my problem:
function gotoStackOverflow(event)
{
widget.openURL("http://stackoverflow.com/");
}
cheers... :)
Miraaj

Categories

Resources