i'm using GoogleMap API in my project where the position of a particular vehicle is rendered by using data in the DB, i have already implemented this, MY question is if its possible to get numbers on the Markers,e.x Vehicle A has been in 100 places from 1 to 2 of Decembre, i would like having numbers starting from 1 to 100 kinda showing its path,This is the create marker function of my Google API:
function createMarker(point, IMEI, Velocity, Ora, Data) {
var marker = new GMarker(point, iconBlue);
var html = "<b>" + "Ora: " + "</b>" + Ora + "<br/>" + "<b>" + "Data: " + "</b>"+ Data + "<br/>" + "<b>" + "Velocità: " + "</b>" + Velocity + " km/h" ;
GEvent.addListener(marker, 'click', function() {
marker.openInfoWindowHtml(html); });
return marker;
}
Thanks for your time!
I think you need to generate markers for those values. You could do this easily with a php script that would write numbers over your base marker.
Here's an article on how to extend marker to add a label. It's pretty old though, so I'm not sure if it works with current version of GMaps.
Related
I'm pretty new to web programming so, making a logic for a web-page, I made a mistake and now I'm in trouble.
I named some divs like "Dv_1.2.1.3" (without knowing the problems linked to using the dot) and I have issues trying to clone (via jquery called by button) some of these.
The button id contains the id of the div I want to clone, so, my logic is:
1) extract the id of the div;
2) get the div and clone it (giving a new id).
I'm stuck with getting the div because of the dots in the id.
The below code is what I've done so far:
$('.CloneDiv').click(function () {
var SplittedId = (this.id).split('_');
if (SplittedId[0]=='Clone'){
alert('SplittedId 1 =' + SplittedId[1]);
//Modify id to use it to find the div to clone
var UsableId = SplittedId[1].replace(/\./g, '\\\\.');
alert('UsableId =' + UsableId);
//Count existing elements
var ClonedNum = $('#' + 'Dv_' + UsableId + '_').length;
ClonedNum++;
var OrigElem = $('#' + 'Dv_' + UsableId).length;
alert('OrigElem =' + OrigElem); //THIS IS 0
//NO ELEMENTS FOUND BUT THE ELEMENT EXISTS
//Clone the element and give new id
var ClonedElem = $('#' + 'Dv_' + UsableId).clone().attr('id', function( i, val ) {
return val + '_' + ClonedNum;
});
ClonedElem.find("input").val("");
if (ClonedNum > 1){
ClonedNum--;
var AnteId = '#' + 'Dv_' + UsableId + '_' + ClonedNum;
alert(AnteId);
$(AnteId).after(ClonedElem);
}else{
var AnteId = '#' + 'Dv_' + UsableId;
alert('AnteId = ' + AnteId);
$(AnteId).after(ClonedElem);
};
}else if(SplittedId[0]=='Del'){
alert(SplittedId[0]);
alert('Del');
}else{
//error
};
});
Might these help: developer.mozilla.org/en-US/docs/Web/API/CSS/escape , Polyfill: github.com/mathiasbynens/CSS.escape/blob/master/css.escape.js
Currently, I am using this for server monitoring :
http://bl.ocks.org/d3noob/9692795
The problem is, I am not getting how to add buttons (start, stop) in a tooltip.
I have gone through d3js tooltip doc:
http://www.d3noob.org/2013/01/adding-tooltips-to-d3js-graph.html
But not able to do this. Can anyone help me please.
Current Code:
// Enter any new nodes at the parent's previous position.
var nodeEnter = node.enter().append("g")
.attr("class", "node")
.attr("transform", function(d) {
return "translate(" + source.y0 + "," + source.x0 + ")"; })
.on("click", click)
// add tool tip for ps -eo pid,ppid,pcpu,size,comm,ruser,s
.on("mouseover", function(d) {
div.transition()
.duration(200)
.style("opacity", .9);
div .html(
"PID: " + d.name + "<br/>" +
"Command: " + d.COMMAND + "<br/>" +
"User: " + d.RUSER + "<br/>" +
"%CPU: " + d.CPU + "<br/>" +
"Memory: " + d.SIZE
)
.style("left", (d3.event.pageX) + "px")
.style("top", (d3.event.pageY - 28) + "px");
})
.on("mouseout", function(d) {
div.transition()
.duration(500)
.style("opacity", 0);
});
The problem is that the tooltip doesn't respond to mouse events (pointer-events: none; in the CSS). This is done to avoid triggering the mouseout event on the node as soon as the tooltip appears above it. (Normally, the element on top would capture the mouse event, by turning off pointer-events the mouse movements are passed through to the elements underneath).
If you want the tooltip to be interactive, with buttons or links, you'll need to remove that CSS line and figure out a different way of closing/hiding the tooltip. For example, you could hide the tooltip when the tooltip <div> is moused-out, or you could add a dedicated close button on the tooltip.
I am making a simple jQuery mobile app, where one of the pages is about a restaurant.
On that page, I want to have a button that, when clicked, saves the information of the restaurant to a database.
I already have a php code that can save data to my database, and i have this javascript code that works together with it.
Though this is used for saving data from a google maps infowindow when closed. I just need a on click button.
var url = "phpsqlinfo_addrow.php?name=" + name + "&address=" + address + "&description=" + description + "&lat=" + latlng.lat() + "&lng=" + latlng.lng();
downloadUrl(url, function (data, responseCode) {
if (responseCode == 200 && data.length <= 1) {
infowindow.close();
document.getElementById("message").innerHTML = "Location added.";
}
}
What is the easiest approach to this?
Thanks.
EDIT:
Is it possible to do like this, if i create a button with id #btn_save :
$(document).ready(function() {
$(document).on("click","#btn_save",function() {
"phpsqlinfo_addrow.php?name=" + john + "&address=" + lolstreet 12 +
"&description=" + this is restaurant john + "&lat=" + xx.xx() +
"&lng=" + yy.yy();
}); });
Sorry, i know i should be learning the basics first.. :/
If I understood correctly, you need to add button onClick event handler? If so, here you go (using jquery 1.9+):
$(document).ready(function() {
//onClick event handler for button with id "btn_save"
$(document).on("click","#btn_save",function() {
//Your code here
});
});
I'm creating list dynamically in javascript. I want to break the long word in as dot dot dot(.....). For example, if the word is "Software life cycle development" I want to change it as "Software life cycl....".
And I used "WORD-BREAK:BREAK-ALL;white-space:normal;"
My current output is:
Software life cycle
development.
Can anyone tell, how to fix this? thanks in advance.
var parent = document.getElementById('searchlistview');
var listItem = document.createElement('li');
listItem.setAttribute('id', 'listitem_' + listId);
listItem.setAttribute('data-icon', 'false');
listItem.innerHTML = "<img src=" + imagesrc + " class='ui-li-icon ui-li-has-icon'></img>
<a target='_black' data-role='button' href='#' id=" + listId + " name= " + url + " data-theme ='c' rel='external'
data-inline='true' style='margin-left:0em; WORD-BREAK:BREAK-ALL;white-space:normal; ' >" + searchName + "<p style='margin-top:1px;margin-left:1px;'>
File size: " + fileSize + "</p></a>";
parent.appendChild(listItem);
You can try this css
text-overflow:ellipsis;
It would put ... when the text overflow. see this page for your reference.
see if css ellipsis can help you. You can find more details at
http://www.w3schools.com/cssref/css3_pr_text-overflow.asp
http://mattsnider.com/css/css-string-truncation-with-ellipsis/
style="text-overflow: ellipsis;"
will solve the problem.
Try:
function wbr(str, num) {
return str.replace(RegExp("(\\w{" + num + "})(\\w)", "g"), function(all,text,char){
return text + "<wbr>" + char;
});
}
Source: http://ejohn.org/blog/injecting-word-breaks-with-javascript/
I have been searching for hours and it is probably just me being a novice but I am having a very hard time figuring out how to dynamically enter text into a sqlite3 query as they do not accept variables (or so I believe).
Here is what I am attempting to do:
A user can currently view recipes in my TideSDK app - the content of the recipe is generated from a file called recipes.db
This code loads an individual recipe into the main screen:
function doMainChange70() {
var db = Ti.Database.openFile(Ti.Filesystem.getFile(Ti.Filesystem.getApplicationDataDirectory(), 'recipes.db'));
var rows = db.execute("SELECT * FROM recipe WHERE number = '70'");
while (rows.isValidRow()) {
$('#foodFoto').empty();
$('#titleArea').empty();
$('#servings').empty();
$('#tagline').empty();
$('#ingredients').empty();
$('#directions').empty();
$('#nutrition').empty();
$('#foodFoto').append("<img src='foodPics/r" + rows.fieldByName('number') + ".jpg' />");
$('#titleArea').append("<p>" + rows.fieldByName('title') + '</p>');
$('#servings').append("<p>" + rows.fieldByName('servings') + '</p>');
$('#tagline').append("<p>" + rows.fieldByName('tagline') + '</p>');
//$('#ingredients').
$('#directions').append("<p>" + rows.fieldByName('directions') + '</p>');
$('#nutrition').append("<p>" + rows.fieldByName('nutrition') + '</p>');
$('#editBtn').remove();
$('#mainBtns').append("<a href='#' id='editBtn'" + 'onclick=' + 'editRecipe' + rows.fieldByName('number') + "()><img src='RecipeButton5.png' /></a>");
rows.next();
rows.close();
db.close();
return false;
}
}
I would now like the user to be able to edit the recipe. Currently when the edit button is clicked all of the fields of the recipe change to input tags and the user can edit:
function editRecipe70() {
$('#editBtn').removeAttr('onclick');
var db = Ti.Database.openFile(Ti.Filesystem.getFile(Ti.Filesystem.getApplicationDataDirectory(), 'recipes.db'));
var rows = db.execute("SELECT * FROM recipe WHERE number = '70'");
while (rows.isValidRow()) {
$('#editBtn').html("<img src='saveRecipeButton.png' />");
$('#formContainer').empty();
$('#formContainer').append("<form id='sendEdit'><textarea type='text' name='title' id='title'>" + rows.fieldByName('title') + "</textarea><br>" + "<textarea type='text' name='servings'>" + rows.fieldByName('servings') + "</textarea><br>" + "<textarea type='text' name='tagline'>" + rows.fieldByName('tagline') + "</textarea><br>" + "<textarea type='text' name='directions'>" + rows.fieldByName('directions') + "</textarea><br>" + "<textarea type='text' name='nutrition'>" + rows.fieldByName('nutrition') + "</textarea><br>" + "<input type='submit'></form>");
}
My problem is that at this point I can't figure out a way to capture what the user has placed in the input fields (or more accurately textareas) and place it into the sqlite3 query string.
I am able to query the db in js with something like this:
UPDATE recipeTable SET title='best recipe ever' WHERE number='70';
But nothing like this (which is what I need):
UPDATE recipeTable SET title = '[formValueForTitle]' WHERE number = '70';
Hopefully I am making sense, I do apologize it is my first question. I have looked at many posts here on the site and the immediate solution would seem to be preprocessing the form values using php but I have read the php module in TideSDK doesn't have sqlite3 support right now and I have been unable to bring the processed code back into the index.html to run in js.
So long and short, I would like to figure out a way to let users edit recipes and I am totally stuck. Any direction would be much appreciated!
Thank You
This is how I'd do it:
var inputfromform = 'I got this back from the form';
var number = 7;
db = Ti.Database.open(dbname); // or openFile etc
db.execute("BEGIN IMMEDIATE TRANSACTION;");
db.execute("UPDATE recipeTable SET title = ? WHERE number = ?;", inputfromform, number);
db.execute("COMMIT TRANSACTION;");
db.close();
Hope this helps