I was looking at an API provided by Google and I needed to translate it to jQuery, so I did. In Google's code, Google defined the created elements, but it works without defining them in jQuery mobile. I'm new to programming, so I'm unsure about if this matters or not? The code works without errors on the console log, without defining.
Google:
google.maps.event.addListener(panoramioLayer, 'click', function(photo) {
var li = document.createElement('li');
var link = document.createElement('a');
link.innerHTML = photo.featureDetails.title + ': ' +
photo.featureDetails.author;
link.setAttribute('href', photo.featureDetails.url);
li.appendChild(link);
});
jQuery:
google.maps.event.addListener(panoramioLayer, 'click', function(photo) {
$(document.createElement("a")).html("photo.featureDetails.title + ': ' + photo.featureDetails.author");
$("a").attr("href", photo.featureDetails.url);
$("li").append("a");
});
Something like this should work:
google.maps.event.addListener(panoramioLayer, 'click', function(photo)
{
var $link = $(document.createElement("a")).html(photo.featureDetails.title + ': ' + photo.featureDetails.author);
$link.attr("href", photo.featureDetails.url);
$("<li/>").append($link);
});
You need to store the created link tag, so that you don't change ALL a tag's hrefs
The correct conversion should be like this :-
google.maps.event.addListener(panoramioLayer, 'click', function(photo) {
var anchor=$("<a/>").html(photo.featureDetails.title + ': ' + photo.featureDetails.author).attr("href", photo.featureDetails.url);
$("<li/>").append(anchor);
});
Related
I'm trying to create tooltips with title attribute and jQuery but can't find method to show dynamically added element.
HTML
some page
CSS
.tooltip {
…
display: none; /* I's needed for hard coded tooltips */
…
}
jQuery
$(function () {
if (window.matchMedia('(min-width: 980px)').matches) {
$('.dfn').hover(
function () {
var el = $(this);
var txtTitle = el.prop('title');
el.append('<p class="tooltip">' + txtTitle + '</p>');
//That's it. My tooltip has been created, but it has not been shown
$(el + ' .tooltip').show('fast');
el.data('title', el.prop('title'));
el.removeAttr('title');
}, function () {
$(el + ' .tooltip').hide('fast').remove();
el.prop('title', el.data('title'));
}
);
}
});
As mentioned by others, $(el + ' .tooltip').show('fast'); is probably wrong.
The el is an object, not a string to concat', one way is to use el.find('.tooltip').show().
The other way is to use the context option: $('.tooltip', el).show();
You need to have correct code to find new element:
$('.tooltip', el).show('fast');
Your current one probably endup searching for something like [object] .tooltip or similar string depending on how JavaScript decides to convert HTML element to string.
As others have mentioned el.find('.tooltip').show() and el.find('.tooltip').hide().remove(); solve the problem.
Also, in HandlerOut function, you el was not declared. Fiddle here
$(function () {
//if (window.matchMedia('(min-width: 980px)').matches) {
$('.dfn').hover(
function () {
var el = $(this);
var txtTitle = el.prop('title');
el.append('<p class="tooltip">' + txtTitle + '</p>');
//That's it. My tooltip has been created, but it has not been shown
el.find('.tooltip').show()
el.data('title', el.prop('title'));
el.removeAttr('title');
}, function () {
var el = $(this);
el.find('.tooltip').hide().remove();
el.prop('title', el.data('title'));
}
);
//}
});
I am trying to use the Marvel API to display a list of events a character has been involved in. Here is my script:
$(".heroSubmit").click(function() {
var heroName = $(".hero").val();
$.getJSON("http://gateway.marvel.com:80/v1/public/characters?name=" + heroName + "&apikey=", function (json) {
$(".name").html(json.data.results[0].name);
$(".description").html(json.data.results[0].description);
$(".image").attr("src", json.data.results[0].thumbnail.path + "/detail.jpg");
$(".comics").html(json.data.results[0].comics.available);
$.each( json.data.results[0].events.items, function(i, item) {
$(".events").html("<li>" + item.name + "</li>");
});
});
Everything works fine except for the each section. Right now, it is only displaying the last event name (item.name). I need for all of the events to display.
This is because you rewrite events' content in each iteration. To avoid this replace html() with append():
$.each( json.data.results[0].events.items, function(i, item) {
$(".events").append("<li>" + item.name + "</li>");
});
Im using cordova phonegap 2.5.0 I had a really hard time getting the URL from the new inAppBrowser. For some reason only this code workes ---
client_browser = window.open(authorize_url, '_blank', 'location=yes');
function iabLoadStop(event) {
alert(event.type + ' - ' + event.url);
}
client_browser.addEventListener('loadstop', iabLoadStop);
The code above works perfect. However the code we will see returns undefined every time! I cant figure out why? can somebody please explain?
client_browser.addEventListener('loadstop', function() { alert('stop: ' + event.url); });
Your inline function should accept the parameter event
client_browser.addEventListener('loadstop', function(event) { alert('stop: ' + event.url); });
I have a little Google Maps app that draws markers with an Info Window. I'd like to be able to edit the info in the window and submit if. I can do this - but only once. I looked here Adding event to element inside Google Maps API InfoWindow which helped a bit, but with my code the submit event doesn't seem to fire.
Here is my code:
// get the data
$.getJSON( 'csvToJson.php', function(data) {
// Loop through it
$.each( data, function(i, m) {
// Add the marker
var title = m.Namn + ': ' + m.Meddelande;
$('#map_canvas').gmap('addMarker', {
'position': new google.maps.LatLng(m.Lat, m.Lng),
'bounds':false,
'title': title }
).click(function() {
// Initialise the info window
var divName = "detail" + m.id; // come back to this?
var infoWindowContent = [
"<form id='detail_form' action='bib.php' method='post'>",
"Namn: <br><input type='text' name='Namn' value='" + m.Namn + "'></input>",
"<br>Meddelande: <br>" + m.Meddelande,
"<br><input type='submit' value='Spara ändringar'></input></form>"
].join("");
var info = new google.maps.InfoWindow({
content: infoWindowContent
});
google.maps.event.addListener(info, 'domready', function() {
$(document).off("submit");
$(document).on("submit", (function() {
console.log("Hi");
})); // end addEvent
}); // end addListener
$('#map_canvas').gmap('openInfoWindow', info, this);
}); // end addMarker click(function)
}); // end $.each
}); // end $.getJSON
All help appreciated.
Mini
there is no jQuery-method addEvent, use on instead
you open the infoWindow before you add the domready-handler, so it may happen that the domready-event already has been fired when you apply the listener. Move the line:
$('#map_canvas').gmap('openInfoWindow', info, this);
...to the end of the click-listener
Below you can see that I store the results of the jquery selector in an array. I then use this array to perform other functions. This example here doesn't seem to work, it's behaving as if the var/array is a live selector, not the results when they were instantiated.
function flipIt(elementId){
if (window.jQuery){
var thisVisibleArray = $('#' + elementId + ' div:visible');
var thisInvisibleArray = $('#' + elementId + ' > div:visible');
$(thisInvisibleArray).slideDown("fast");
$(thisVisibleArray).slideUp("fast");
/*
if ($('#flip1').is(":visible")){
$('#flip1').slideUp("fast", function(){
$('#flip2').slideDown();
});
} else {
$('#flip2').slideUp("fast", function(){
$('#flip1').slideDown();
});
}*/
}
}
In order to select the invisible div elements you have to use not and not ">". And also the 2 variables you defined are already jquery element array so you dont have to use $(). Try this
function flipIt(elementId){
if (window.jQuery){
var thisVisibleArray = $('#' + elementId + ' div:visible');
var thisInvisibleArray = $('#' + elementId + ' div:not(:visible)');
thisInvisibleArray.slideDown("fast");
thisVisibleArray.slideUp("fast");
/*if ($('#flip1').is(":visible")){
$('#flip1').slideUp("fast", function(){
$('#flip2').slideDown();
});
} else {
$('#flip2').slideUp("fast", function(){
$('#flip1').slideDown();
});
}*/
}
}
You are storing the selected elements in a variable, and then you are trying to get a jQuery object out of another jQuery object. Just do:
thisInvisibleArray.slideDown("fast");
thisVisibleArray.slideUp("fast");
Also, they are not arrays, but jQuery objects.