I can create infobubbles using the HERE maps Javascript API - eg from their documentation:
function addInfoBubble(map) {
map.set('center', new nokia.maps.geo.Coordinate(53.430, -2.961));
map.setZoomLevel(7);
var infoBubbles = new nokia.maps.map.component.InfoBubbles(),
TOUCH = nokia.maps.dom.Page.browser.touch,
CLICK = TOUCH ? 'tap' : 'click',
container = new nokia.maps.map.Container();
container.addListener(CLICK, function (evt) {
infoBubbles.openBubble(evt.target.html, evt.target.coordinate);
}, false);
map.components.add(infoBubbles);
map.objects.add(container);
addMarkerToContainer(container, [53.439, -2.221],
'<div><a href=\'http://www.mcfc.co.uk\' >Manchester City</a>' +
'</div><div >City of Manchester Stadium<br>Capacity: 48,000</div>');
addMarkerToContainer(container, [53.430, -2.961],
'<div ><a href=\'http://www.liverpoolfc.tv\' >Liverpool</a>' +
'</div><div >Anfield<br>Capacity: 45,362</div>');
}
function addMarkerToContainer(container, coordinate, html) {
var marker = new nokia.maps.map.StandardMarker(
coordinate,
{html: html}
);
container.objects.add(marker);
}
I would like to hook into the close event of the infobubble. I realise I could use jQuery to find the span that contains the close button (examining the markup, I believe it has the class nm_bubble_control_close) and do something when this is clicked. However I thought there would be a built-in event that I could use.
Does anyone know if there is a built-in event that fires when the infobubble is closed? I can't find anything in the documentation.
The InfoBubbles component has a property "openBubbleHandles". It's an OList you can observe to see when bubbles are opened (i.e. added to the list) or closed (removed from the list).
AFAIK there is no built-in event, there's also no related property which may be observed.
Possible workaround:
override the built-in close-method with a custom function:
container.addListener(CLICK, function (evt) {
var b = infoBubbles.openBubble(evt.target.html, evt.target.coordinate),
c = b.close;
b.close = function(){
//do what you want to
alert('bubble will be closed');
//execute the original close-method
c.apply(b)
}
}, false);
For the current HERE Javascript API version (3.x) the working solution can be found here:
HERE Maps - Infobubble close event / hook
Related
I have to show ads on my page and a defaultImage when there is no ads.
googletag.defineSlot('/6355419/Travel', [250, 200], 'ad-slot-2')
.addService(googletag.pubads());
In there a way to record no ads in code in order to show the defaultImage ?
You could use an event listener such as slotRenderEnded (documentation here)
// This listener is called when a slot has finished rendering.
googletag.pubads().addEventListener('slotRenderEnded',
function(event) {
var slot = event.slot;
var isEmpty = event.isEmpty;
if (isEmpty) {
//add your default image
}
}
);
Alternatively, you might be interested in using googletag.content() as detailled here.
I have a use-case where I need to programmatically add/remove the onClick event associated with a panel.
I have tried the following solution but receive a cijCell.addEventListener is not a function error.
function cij_enabled(){
var cijCell = app.pages.Home.descendants.cellFour;
var index = cijCell.styles.indexOf('disabled-card');
if (Report.riskOfLoss === 'High') {
cijCell.styles.splice(index, 1);
cijCell.addEventListener("click", function() {
app.popups.Customer.visible = true;
});
} else {
if (index === -1){
cijCell.styles.push('disabled-card');
cijCell.removeEventListener("click", function() {
app.popups.Customer.visible = true;
});
}
}
}
How can I achieve the desired outcome? Is adding eventlisteners possible in this fashion through app maker?
You can definitely do so and you got it almost right. The only thing you need to understand is that the appmaker widget is not a native html element hence the error:
cijCell.addEventListener is not a function
Fortunately, AppMaker has a way of getting the native html elements associated to a widget. You need to use the getElement() method and then you can use the add/remove event listeners methods. So you should change your code from cijCell.addEventListener... to cijCell.getElement().addEventListener...
Reference: https://developers.google.com/appmaker/scripting/api/widgets#Panel
I'm using meteor and javascript fullcalendar .
I'm trying to get the data from a dbmongo cursor.
But it's seem really randomly when I get the elements and when I don't
Here is my code :
events : function (start, end , timezone, callback) {
var events = [];
var eventsData = Events.find();
eventsData.forEach(function(event) {
events.push(event);
});
callback (events);
}
This sits inside the isClient, in the jquery section.
Sometimes I get all the elements form the database and sometimes I don't.
Anybody have an idea on how to always get them?
Thanks
can we use standard 'InsertCpDialog$initialize()' in our javascript like this , so that i can call other function once it get initializes. I used like below code but it is not working. :(
Type.registerNamespace("Extensions");
Extensions.InsertCpDialog.prototype.initialize = function InsertCpDialog$initialize()
{
alert('hi inside insert');
var p = this.properties;
if(window.document.nameProp == "Name" || window.document.title == "Name") {
var browserName=navigator.appName; // Get the Browser Name
if(browserName=="Microsoft Internet Explorer") // For IE
{
alert('hi inside IE');
//window.onload=init(); // Call init function in IE
}
else
{
if (document.addEventListener) // For Firefox
{
alert('hi inside firefox');
//document.addEventListener("DOMContentLoaded", init(), false); // Call init function in Firefox
}
}
}
}
Original(standard) one is like:
Type.registerNamespace ("Tridion.Cme.Views");
Tridion.Cme.Views.InsertCpDialog = function InsertCpDialog()
{
Type.enableInterface(this, "Tridion.Cme.Views.InsertCpDialog");
this.addInterface("Tridion.Cme.Views.DashboardBase");
};
Tridion.Cme.Views.InsertCpDialog.prototype.initialize = function InsertCpDialog$initialize()
{
}
Edit
hi frank thank you, but already i am using same thing in my code to get the list of componet and template listed on a page under CP tab.
function getbtn() {
//alert('inside getbtn');
var sbtn = document.getElementById ("buttonComponentInsert");
$evt.addEventHandler(sbtn , "click", getListofCPBtnClick);
}
function getListofCPBtnClick(e) {
//code will go here
}
My question is :
I need to get selected Component and template Id from Insert CP window.Earlier i was able to get that by changing the CME extension standard code, but i am not suppose to do that, So first i am trying to initialize the "insert CP window" from my javascript code. I can create event handler for that window, but my question is how to initialize that so that i can call any function once it get initialize. Kindly let me know if i anot clear.
Is your script getting loaded into the dialog?
If not, Albert shows how to do that here: http://albertromkes.com/2012/01/30/tridion-gui-extensions-how-to-load-a-javascript-without-showing-a-gui-element/
He then also shows how to listen to events to accomplish something similar to what you are trying to do.
I have a YUI button defined through HTML markup. I managed to get it loaded and "skinned" properly.
The problem is a custom click event. I have tried a number of approaches all of which links the custom function to the 'click' event, but no matter which way I do it, it ALWAYS triggers upon page loading and then it doesn't fire when clicked. I can't seem to get it to "wait" for a user to click. It just shoots like a virgin on his first date.
Code below....
<script type="text/javascript">
YAHOO.util.Event.onContentReady("submitbutton", onButtonReadySubmit);
YAHOO.util.Event.onContentReady("editbutton",onButtonReadyEdit);
var myTabs = new YAHOO.widget.TabView("demo");
function editDoc(sBaseRef, sUNID) {
var sNewURL = sBaseRef + "/0/" + sUNID + "?EditDocument";
alert("Going to : " + sNewURL);
window.location.href=sNewURL;
}
function onButtonReadySubmit() {
var oSubmitButton = new YAHOO.widget.Button("submitbutton");
}
function onButtonReadyEdit() {
var oEditButton = new YAHOO.widget.Button("editbutton");
YAHOO.util.Event.addListener("editbutton", 'click', editDoc('a URL path goes here' , 'A PageKey goes here'));
}
YUI Button publishes its own click event that you subscribe to on the YUI Button instance, rather than using YAHOO.util.Event.addListener. This is described in detail on the YUI Button landing page: http://developer.yahoo.com/yui/button/#handlingevents.
Your problem is the 3rd argument. That should be a reference to function. What happens in your code is that the 3 argument is a function that is called as the listener is being created, and returns nothing.
You have:
YAHOO.util.Event.addListener("editbutton", 'click', editDoc(
'a URL path goes here',
'A PageKey goes here'
));
Simply what you want is:
YAHOO.util.Event.addListener("editbutton", 'click', editDoc);
However, you also want to pass 'a URL path goes here' and 'A PageKey goes here' to the function at click-time. To do this, use the optional fourth argument to addListener() - an object to pass to the function.
function editDoc (ev, oArgs) {
var sBaseRef = oArgs.url,
sUNID = oArgs.key;
/* code here */
}
YAHOO.util.Event.addListener("editbutton", 'click', editDoc, {
url: 'a URL path goes here',
key: 'A PageKey goes here'
});
See http://developer.yahoo.com/yui/docs/YAHOO.util.Event.html#method_addListener for more.
As Todd mentions, you can also do this as part of the YUI Button creation - but the same issues of function versus function references apply.