How to enable dynamic links to open thickbox in Google Map balloon? - asp.net

I'm using following code to open thickbox for dynamically generated anchor tags, but it doesn't work for the first time, but second time it works.
function createMarker(point, InnerAddress) {
//Other Code
var strFBUserID = new GMarker(point, markerOptions);
GEvent.addListener(strFBUserID, "click", function() {
strFBUserID.openInfoWindowHtml(InnerAddress.split('$$')[0]);
tb_init('a.gmapthickbox');//works second time
});
allmarkers.push(strFBUserID);
return strFBUserID;
}
It seems tb_init fires before, openInfoWindowHtml, any way to solve this issue? I tried setTimeOut but no success. Any help will be greatly appreciated.

Try listening to the infowindowopen event on your map instance before calling tb_init. It should be fired once the content is ready in the DOM.
http://code.google.com/apis/maps/documentation/javascript/v2/reference.html#GMap2.infowindowopen

Related

Disable click event while using other events

I am using Aframe 0.7.0. and it working great! My application has camera with cursor and the raycaster intersect with entities.
I want to disable click event that is emitted by intersection of cursor and any entity, but at same time I want other events to work just fine, like mouseenter, etc.
How can I achieve this? Please let me know if I am missing any information required for this question.
Thanks
If i'm correct about Your idea, You should be able to do something like this.
Activate clicking on stuff using the addEventListener("click", handler)
Deactivate clicking on stuff using the removeEventListener("click", handler)
Having those in Your component,
AFRAME.registerComponent("foo", {
addListeners: function() {
this.el.addEventListener("click", this.handler);
},
removeListeners: function() {
this.el.removeEventListener("click", this.handler);
},
handler: function() {
// whatever response from clicking
}
});
You can enable clicking by using el.components.foo.addListeners and disable using el.components.foo.removeListeners from any other method.
Check out my example here. right box enables, disables the click event on the left one. Check it out in the console.

Event listeners on the IFrame with ExtJS4.1.2

I am using 'uxiframe' component to load a separate application into a modal window (ExtJS4.1x).
Cross domain issues clearly do not allow me to access any part of the IFrame contents. However same domain app's Document in the IFrame is accessible from the parent via iframe.getDoc()
The question is this: Is there a way for me to setup DOM listeners on the elements inside the IFrame from the parent modal window?
Thanks and a simple example would be appreciated.
Update Thanks to #lontiviero for a tip to get me started. Here is what I ended up with:
var bodyEl=Ext.get(iframe.getDoc().body); //this gives me an Ext.dom.Element object
bodyEl.on('click',
function(event, el,opts){
console.log("<p> clicked");
},
this, //scope
{delegate:'p'} //options
);
With this code i was able to attach an event to the iframeĀ“s body element.
Ext.EventManager.on(iframe.contentDocument.body, 'mouseover', function() {
alert('hello');
});
Take a look at it in jsfiddle: http://jsfiddle.net/XApQU/

Keypress events stopped working outside of "input" elements in Meteor after update to 0.5.2

I just found out that after upgrading to Meteor 0.5.2 (from 0.5) event handling for key events ('keypress', 'keydown', keyup') stopped working for me. Other events like ('click' & 'blur') work just fine.
Even in sample apps the code like this doesn't do anything:
Template.someTemplate.events = {
'keydown' : function(e) {
console.log(e);
}
};
The interesting thing is that this code does work (function fires) for keypresses in I'm typing inside an input type="text" or a textarea.
But elsewhere - nothing happens.
I'm testing on the latest Crome in Ubuntu 12.10.
Has anybody else experienced the issue?
Thanks,
George
The keydown event works for me for html that is editable. Input fields or contenteditable tags fire the keydown event.
But if you're asking how to handle keydown events on the body, this thread might help:
You can take a look at this thread: https://groups.google.com/forum/?fromgroups=#!topic/meteor-talk/uHy--xIGH8o.
Basically, for now, you can attach an event handler to the body element directly. In the example in the above link, he waits until the template is rendered, and then used jQuery to attach the handler:
Template.myTemplate.rendered = function() {
// Assuming you're using jQuery
$('body').on('keydown',function() {
console.log('key pressed');
});
}
The Meteor team is apparently going to include better support for attaching body level events soon.
You could have simply enclosed
$('body').on('keydown',function() {
console.log('key pressed');
});
in meteor.startup function

Jquery code on load not firing

I have the following JQuery code in a external JS file linked into a
usercontrol in .Net 1.1 webapp.
The usercontrol is a timesheet.
When the page loads it calls MonthChange and works fine in one page.
But now I want to load the timesheet/usercontrol into aother
webpage that pops up a in a new browser window for printing.
Problem is my MonthChange is not firing.
Any ideas why???
$(function() {
MonthChange();
//TestData();
$('[class^=TSGridTB]').blur(function() {
var day = GetDay($(this).attr('id'));
var date = GetRowDate(day);
var bgcolor = GetInputFieldColor(date, false);
$(this).css("background-color", bgcolor);
$(this).parent().css("background-color", bgcolor);
//CalcHours($(this).get(0));
});
$('[class^=TSGridTB]').focus(function() {
var day = GetDay($(this).attr('id'));
var date = GetRowDate(day);
var bgcolor = GetInputFieldColor(date, true);
$(this).css("background-color", bgcolor);
$(this).parent().css("background-color", bgcolor);
});
$('[id$=lstMonth]').change(function() {
MonthChange();
});
});
without seeing further code, ensure that the selector is correct for the control in the new page.
The problem may be that the DOM has changed for the new page/window and JQuery does not yet know about it.
The change event
fires when a control loses the input
focus and its value has been modified
since gaining focus.
You might want to use the live event:
Binds a handler to an event (like
click) for all current - and future -
matched element.
When you bind a "live" event it will
bind to all current and future
elements on the page (using event
delegation). For example if you bound
a live click to all "li" elements on
the page then added another li at a
later time - that click event would
continue to work for the new element
(this is not the case with bind which
must be re-bound on all new elements).
Did you make sure that the new web page has jQuery script includes?
ensure you're using:
$(document).ready(
);
around your entire code block. The $ alone often does not do the trick.

Call onresize from ASP.NET content page

I have a JavaScript method that I need to run on one of my pages, in particular, the onresize event.
However, I don't see how I can set that event from my content page. I wish I could just put it on my master page, but I don't have the need for the method to be called on all pages that use that master page.
Any help would be appreciated.
Place the following in your content page:
<script type="text/javascript">
// here is a cross-browser compatible way of connecting
// handlers to events, in case you don't have one
function attachEventHandler(element, eventToHandle, eventHandler) {
if(element.attachEvent) {
element.attachEvent(eventToHandle, eventHandler);
} else if(element.addEventListener) {
element.addEventListener(eventToHandle.replace("on", ""), eventHandler, false);
} else {
element[eventToHandle] = eventHandler;
}
}
attachEventHandler(window, "onresize", function() {
// the code you want to run when the browser is resized
});
</script>
That code should give you the basic idea of what you need to do. Hopefully you are using a library that already has code to help you write up event handlers and such.
I had the same problem and have come across this post :
IE Resize Bug Revisited
The above code works but IE has a problem where the onresize is triggered when the body tag changes shape. This blog gives an alternate method which works well
How about use code like the following in your Content Page (C#)?
Page.ClientScript.RegisterStartupScript(this.GetType(), "resizeMyPage", "window.onresize=function(){ resizeMyPage();}", true);
Thus, you could have a resizeMyPage function defined somewhere in the Javascript and it would be run whenever the browser is resized!

Resources