How can I make the my infoWindows have tabbed content? I tried things like:
google.maps.event.addListener(this, "domready", function(){ $("#info").tabs() });
*also tried to use infoWidnwow, infowindow, and iw instead of this keyword
and
.ready(function(){ $("#info").tabs();});
and
.bind('domready', function(){ $("#info").tabs(); });
None of these worked.
Code for creating markers and infowindows:
$('#map').gmap(mapOptions).bind('init', function(){
$.post('getmarkers.php', function(json){
var theMarkers = json;
$.each(theMarkers, function(i, element) {
$.each(element, function(object, attributes){
$('#map').gmap('addMarker', {
'position': new google.maps.LatLng(parseFloat(attributes.Lat), parseFloat(attributes.Lng)),
'bounds':true } ).click(function(){
$('#map').gmap('openInfoWindow', { 'content':'<div id="info"><ul><li><a href="#tab1">Tab1</li><li><a href="#tab2">Tab2</li></ul><div id="tab1"><h1>'+attributes.productName+'</h1></div><div id="tab2"><h2 style="color: grey"><h1>'+attributes.productPrice+'</h1></div></div>' }, this);
});
});
});
});
});
Somehow I need to tell this part:
$('#map').gmap('openInfoWindow', { 'content':'<div id="info"><ul><li><a href="#tab1">Tab1</li><li><a href="#tab2">Tab2</li></ul><div id="tab1"><h1>'+attributes.productName+'</h1></div><div id="tab2"><h2 style="color: grey"><h1>'+attributes.productPrice+'</h1></div></div>' }, this);
To tab the content that I pass to openInfoWindow.
There is a free jquery plugin that takes care of multiple tabs, positioning of each and styling i just found that has an intuitive interface for customization. Here is a demo
https://github.com/googlemaps/js-info-bubble/blob/gh-pages/examples/example.html
Remove the first three snippets you posted and use this:
$('#map').gmap(mapOptions).bind('init', function() {
$.post('getmarkers.php', function(json) {
var theMarkers = json;
$.each(theMarkers, function(i, element) {
$.each(element, function(object, attributes) {
$('#map').gmap('addMarker', {
'position': new google.maps.LatLng(parseFloat(attributes.Lat), parseFloat(attributes.Lng)),
'bounds': true
}).click(function() {
var ts = $.now();
$('#map').gmap('openInfoWindow', {
"<div id='" + ts + "info'>... your tab content ..."
}, this);
$('#' + ts + 'info').tabs();
});
});
});
});
});
I created a unique string and used it to give the div a unique id, then used that to make the tabs.
Related
I was trying to create draggable function from jquery ui but its not working. I think its have something wrong with my jquery coding. Can you guys check it out for me?
todo.init = function (options) {
options = options || {};
options = $.extend({}, defaults, options);
$.each(data, function (index, params) {
generateElement(params);
});
$.each(codes, function (index, value) {
$(value).droppable({
drop: function (event, ui) {
var element = ui.helper,
css_id = element.attr("id"),
id = css_id.replace(options.taskId, ""),
object = data[id];
// Removing old element
removeElement(object);
// Changing object code
object.code = index;
// Generating new element
generateElement(object);
// Updating Local Storage
data[id] = object;
localStorage.setItem("todoData", JSON.stringify(data));
// Hiding Delete Area
$("#" + defaults.deleteDiv).hide();
}
});
});
$("#" + options.deleteDiv).droppable({
drop: function(event, ui) {
var element = ui.helper,
css_id = element.attr("id"),
id = css_id.replace(options.taskId, ""),
object = data[id];
// Removing old element
removeElement(object);
// Updating local storage
delete data[id];
localStorage.setItem("todoData", JSON.stringify(data));
// Hiding Delete Area
$("#" + defaults.deleteDiv).hide();
}
})
};
var generateElement = function(params){
var parent = $(codes[params.code]),
wrapper;
if (!parent) {
return;
}
wrapper = $("<div />", {
"class" : defaults.todoTask,
"id" : defaults.taskId + params.id,
"data" : params.id
}).appendTo(parent);
$("<div />", {
"class" : defaults.todoHeader,
"text": params.title
}).appendTo(wrapper);
$("<div />", {
"class" : defaults.todoDate,
"text": params.date
}).appendTo(wrapper);
$("<div />", {
"class" : defaults.todoDescription,
"text": params.description
}).appendTo(wrapper);
$("." + defaults.todoTask).draggable();
wrapper.draggable({
start: function() {
$("#" + defaults.deleteDiv).show();
},
stop: function() {
$("#" + defaults.deleteDiv).hide();
},
revert: "invalid",
revertDuration : 200
});
};
This is a Todo Application, like on the pic provided. I want the notes on Pending to be draggable to In Progress.
JsFiddle link
note: the code seems can't be process here while in my localhost it works well except that dragging function.
My problem is solved. I did search for jquery ui not working and i found out that because of compatibility. So they told me to use touch point to make it work. and it did :) Therefore it's not about my coding for it matters.. here's the link for my solution touchpunch.furf.com
just a quick question.. I have this map and need to add more fields *Confirmed=seen in the json file... cheers!!
$.getJSON( 'geojson/test.json', function(data) {
$.each( data.features, function(i, marker) {
$('#map_canvas').gmap('addMarker', {
'position': new google.maps.LatLng(marker.latitude, marker.longitude),
'bounds': true
}).click(function() {
$('#map_canvas').gmap('openInfoWindow', { 'content': (marker.donor)}, this);
});
});
});
index-->http://gk5tudio.cu.cc/bin/json/index.html and
json -->http://gk5tudio.cu.cc/bin/json/test.json
I suggest putting the information in some div elements and then adding that to content value.
.click(function() {
var html = '<div>' + marker.donor + '</div><div>Confirmed: ' + marker.confirmed + '</div>';
$('#map_canvas').gmap('openInfoWindow', { 'content': html }, this);
});
is your question how to add marker.confirmed to the infobox ?
try:
$('#map_canvas').gmap('addMarker', { 'position': new google.maps.LatLng(marker.latitude, marker.longitude),'bounds': true }).click(function() { $('#map_canvas').gmap('openInfoWindow', { 'content': (marker.donor+''+marker.confirmed)}, this); }); });
I have tried the following code. Please let me know how can i change zoom level inside the autocomplete of the textbox.
var mobileDemo = { 'center': '57.7973333,12.0502107', 'zoom': 6 };
$('#places').live('pageinit', function() {
demo.add('places_1', function() {
$('#map_canvas_3').gmap({'center': mobileDemo.center, 'zoom': mobileDemo.zoom, 'disableDefaultUI':true, 'callback': function() {
var self = this;
console.log(self);
var control = self.get('control', function() {
$(self.el).append('<div id="control"><div><input id="places-search" class="ui-bar-d ui-input-text ui-body-null ui-corner-all ui-shadow-inset ui-body-d ui-autocomplete-input" type="text"/></div></div>');
self.autocomplete($('#places-search')[0], function(ui) {
self.clear('markers');
self.set('bounds', null);
$("#map_canvas_3").gmap({'zoom':15});
$('#map_canvas_3').gmap('refresh');
//self.set('zoom', 15);
//self.gmap('refresh');
self.placesSearch({ 'location': ui.item.position, 'radius': '5000' }, function(results, status) {
if ( status === 'OK' ) {
$.each(results, function(i, item) {
self.addMarker({ 'id': item.id, 'position': item.geometry.location, 'bounds':true }).click(function() {
self.openInfoWindow({'content': '<h4>'+item.name+'</h4>'}, this);
});
});
}
});
});
return $('#control')[0];
});
self.addControl(new control(), 1);
}});
}).load('places_1');
});
I have taken this code from
http://jquery-ui-map.googlecode.com/svn/trunk/demos/jquery-google-maps-mobile.html#places
I meant i have to change zoom level dynamically.
Thanks in advance.
I believe that mapname.setZoom(zoom) should work where mapname is the name you gave the map when you created it and zoom the zoom level you want the map to have. For future reference, check out the google maps api reference (it's not particularly great, but it'll tell you stuff like that once you've got used to using the API).
I have the following code which loads a JSON feed and creates all the HTML needed for the jCarousel to work. However, I'm not sure how to preload the images. Anyone have any idea's how to do this?
$(".banner ul").jcarousel({
itemLoadCallback:loadTopBanner,
auto: 6,
wrap: 'circular',
scroll: 1,
animation:1000,
itemFallbackDimension:10
});
function loadTopBanner(carousel, state){
$.getJSON("get_top_banner.php", function(data){
carousel.size( data.length );
$.each(data, function(i){
carousel.add(i, makeTag(this.imageURL, this.URL));
});
});
}
function makeTag(img, url){
return "<a href='" + url + "'><img src='" + img + "'></a>";
}
This should do the trick, however, it is untested, and can be further optimised:
function loadTopBanner(carousel, state) {
$.getJSON("get_top_banner.php", function(data) {
carousel.size(data.length);
// make array of elements to which load events can be attached
var imgs = [];
$.each(data, function(i) {
var img = $("<img/>").attr("src", this.imageURL);
imgs.push(img);
});
// init a load counter
var loadCounter = 0;
$.each(imgs, function() {
$(this).one("load", function() {
loadCounter++
// when all have loaded, add to carousel
if (loadCounter == data.length) {
$.each(data, function(i) {
carousel.add(i, makeTag(this.imageURL, this.URL));
});
}
});
if(this.complete) $(this).trigger("load");
});
});
}
May not be a good solution but you can try to load the images somewhere on the page in a hidden div so that they will get cached before you make a ajax call and use them in loadTopBanner method. This way the carousel will not show any delay in loading the images.
If you really want to preload images, you don't need to put them in a hidden div -- you can use the Image object:
var image = new Image();
image.src = "images/foo.jpg";
Is there any way to combine all of this to reduce the amount of javascript?
$(document).ready(function() {
$(".individualImagebox img").bind("click", function()
{
var src = $(this).attr("src");
if (src.search(/Red\.jpg$/) >= 0) return;
// Removes the red overlay from the images folder
$('.individualImagebox img').attr( "src", function () {
var thisSRC = $(this).attr( "src");
return thisSRC.replace(/Red\.jpg$/, ".jpg");
});
// Adds the red overlay from the images folder
$(this).attr( "src", src.replace(/\.jpg$/, "Red.jpg") );
});
});
function ShowHide(index) {
var itemSelector = ".name:eq(" + index + ")";
$(".name .bio").fadeOut();
$(".name").not(itemSelector).fadeOut();
$(itemSelector).animate({"height": "show"}, { duration: 500 });
$(itemSelector + " .bio").animate({"height": "show"}, { duration: 500 });
}
$(function() { // $(function(){}) is a shortcut of $(document).ready(function(){})
var $activeImg; // Maintain a reference to the last activated img
$(".individualImagebox img").click(function(){
if (!!$activeImg) {
$activeImg.attr("src", function(i, src){
return src.replace(/(.+)Red\.jpg$/, "$1.jpg");
});
}
$activeImg = $(this).attr("src", function(i, src){ // replace attribute and updates active img reference
return src.replace(/(.+)\.jpg$/, "$1Red.jpg");
});
});
});
I don’t know exactly what you are trying to do but if possible, you should toggling a class instead of modifying the src attribute.
Combining methods won't save you space. Take a look at
http://developer.yahoo.com/yui/compressor/