JavaScript - Using Javascript To Write Location Of An Image Within A Table?

Hey,

I have a location lookup tool that pulls data from a Google Fusion table. User's type their address in and it drops a pin and info window at the place / result that matches their location. It works great with one location, but now I need it to display multiple results / drop multiple pins if they match the criteria

Here's the working code that drops one pin (sorry it's a lot):

Code:

 google.load('visualization', '1', {'packages':['corechart', 'table', 'geomap']});

var FusionTableID = 'tableid';
    var map = null;
    var geocoder = null;
    var infowindow = null;
    var marker = null;

function initialize() {


  geocoder = new google.maps.Geocoder();
  infowindow = new google.maps.InfoWindow({size: new google.maps.Size(150,50) });
  // create the map
  var myOptions = {
    zoom: 7,
    center: new google.maps.LatLng(41.9908, -93.4208),
    mapTypeControl: true,
    mapTypeControlOptions: {style: google.maps.MapTypeControlStyle.DROPDOWN_MENU},
    navigationControl: true,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  }

  map = new google.maps.Map(document.getElementById("map_canvas"),
                                myOptions);

  layer = new google.maps.FusionTablesLayer({
    query: {from:FusionTableID},
    styles: [{
      polygonOptions: {
              fillColor:'#000000',
              fillOpacity: 0.01,
              strokeColor:'#000000',
              strokeOpacity: 0.01
      }
    }],
    suppressInfoWindows:true
  });
  layer.setMap(map);


  google.maps.event.addListener(layer, "click", function(e) {
    var content = "<b>"+e.row['name'].value+"</b>";
    infowindow.setContent(content);
    infowindow.setPosition(locationgeocode);
    infowindow.open(map);
  });

  document.getElementById('submit').onclick = function() {
      document.getElementById("submit").value = "Searching";
  };
}


function showAddress(address) {

  var contentString = address+"<br>Outside Area";

  geocoder.geocode( { 'address': address}, function(results, status) {
      if (status == google.maps.GeocoderStatus.OK) {
      var point = results[0].geometry.location;
      contentString += "<br>";
      // query FT for data
      var queryText ="SELECT 'County', 'Name', 'Location Name', 'Location Address', 'Location City', 'Location State', 'Location Zip', 'geocode'  FROM "+FusionTableID+" WHERE ST_INTERSECTS(\'geometry\', CIRCLE(LATLNG(" + point.toUrlValue(6) + "),0.01));";
      // document.getElementById('FTQuery').innerHTML = queryText;
      queryText = encodeURIComponent(queryText);
      var query = new google.visualization.Query('http://www.google.com/fusiontables/gvizdata?tq='  + queryText);

      //set the callback function
      query.send(openInfoWindowOnMarker);

      } else {
        alert("Geocode was not successful for the following reason: " + status);
      }
  });
}

function openInfoWindowOnMarker(response) {
  if (!response) {
    alert('no response');
    return;
  }
  if (response.isError()) {
    alert('Error in query: ' + response.getMessage() + ' ' + response.getDetailedMessage());
    return;
  }
  FTresponse = response;
  //for more information on the response object, see the documentation
  //http://code.google.com/apis/visualization/documentation/reference.html#QueryResponse
  numRows = response.getDataTable().getNumberOfRows();
  numCols = response.getDataTable().getNumberOfColumns();
  var content = "<b>Outside of Iowa</b><!--";
  var unionBounds = null;
//  alert(numRows);
  for (var i=0; i < numRows; i++) {
     var county = FTresponse.getDataTable().getValue(i,0);
     var precinct = FTresponse.getDataTable().getValue(i,1);
     var locationname = FTresponse.getDataTable().getValue(i,2);
     var locationaddress = FTresponse.getDataTable().getValue(i,3);
     var locationcity  = FTresponse.getDataTable().getValue(i,4);
     var locationstate = FTresponse.getDataTable().getValue(i,5);
     var locationzip = FTresponse.getDataTable().getValue(i,6);
     var locationgeocode = FTresponse.getDataTable().getValue(i,7);
//     var kml =  FTresponse.getDataTable().getValue(i,1);
     // create a geoXml3 parser for the click handlers
     content = "<b>"+locationname+"</b><br />"+locationaddress+"<br />"+locationcity+locationstate+" "+locationzip+"<br/><a href='http://maps.google.com/maps?daddr="+locationaddress+" "+locationcity+" IA "+locationzip+"' target='_blank' >Click here for Directions</a><br /></br></p><!--";
/*
     var geoXml = new geoXML3.parser({
                    map: map,
            zoom: false
                });
//   alert(kml);
     geoXml.parseKmlString("<Placemark>"+kml+"<\/Placemark>");
     geoXml.docs[0].gpolygons[0].setMap(null);
     if (!unionBounds) unionBounds = geoXml.docs[0].gpolygons[0].bounds;
     else unionBounds.union(geoXml.docs[0].gpolygons[0].bounds);
*/
   }



  // zoom to the bounds
  // map.fitBounds(unionBounds);
  setTimeout(function() {
    google.maps.event.addListener(marker, 'click', function() {
      infowindow.open(map,marker);
    });
    infowindow.setContent(content+marker.getPosition().toUrlValue(6));
    google.maps.event.trigger(marker, 'click');
    document.getElementById("submit").value = "Search";
  }, 150);
  geocoder.geocode( { 'address': locationaddress+","+locationcity+locationstate+" "+locationzip}, function(results, status) {
    if (status == google.maps.GeocoderStatus.OK) {
      var point = results[0].geometry.location;
      map.setCenter(point);
      map.setZoom(12);
      if (marker && marker.setMap) marker.setMap(null);
      marker = new google.maps.Marker({
          map: map,
          position: point
      });
    };
  });
}

I basically need it to drop multiple pins if multiple queries match var queryText ="SELECT 'County', 'Name', 'Location Name', 'Location Address', 'Location City', 'Location State', 'Location Zip', 'Hours', 'geocode' FROM "+FusionTableID+" WHERE ST_INTERSECTS(\'geometry\', CIRCLE(LATLNG(" + point.toUrlValue(6) + "),0.01));";

Any thoughts, fixes, or even a point in the right direction would be incredibly helpful. I'm really stuck on this one and have been trying at it for a couple of days now. Even something like getting it to print a second query that I can mark in the table as a second location would be helpful. Something like a second pin that matches:
Code:

  var queryText2 ="SELECT  'County', 'Name', 'Location Name', 'Location Address', 'Location City', 'Location State', 'Location Zip',  'Hours', 'geocode'  FROM "+FusionTableID+" WHERE ST_INTERSECTS(\'geometry\', CIRCLE(LATLNG(" + point.toUrlValue(6) + "),0.01)); AND locationname = 'Location 2'";

Thanks!!

I was debugging my code looking for a loop. So in the process I added a confirm request and if the user clicked cancel I coded location.replace("Kill.html"). Problem was that the JAVASCRIPT continued to run until either it finished or I used the Task Manager to end the session. There3 was a small difference in browsers: Firefox put up the new screen while continuing to run the JAVASCRIPT while IE didn't put up the new screen until after the JAVASCRIPT was finished. I could tell the JAVASCRIPT was still running because the confirm messages kept popping up.

Probably a trivial question, but after a quick search I could not find the answer.

I link a .js file in my .html, the .js might be in the same directrory as the .html or somewhere else.

within the .js file, I'd like to find out with which path the .js was loaded by the .html.

So, if the .html contains
Code:

script src="path/here/there/myscript.js" type="text/javascript"

I'd like to have a way, in the file myscript.js to gather "path/here/there/"

How to do that?

Thanks.

There are 2 images, and 2 locations, lets named it img1, img2, loc1, and loc2. What im trying to do is drag and drop img1 to loc1, which mean i don't want img1 to be drop in loc2, i want the specific image drop on specific location.

Code:

function dropIn(evt)
{
    var root = document.getElementsByTagName("body")[0];
    evt.preventDefault();
    var id = evt.dataTransfer.getData("text");

     if(ev.target.getAttribute('data-drop') == id)
        ev.target.appendChild(document.getElementById(id));
}

<div id="box1"  style="position: absolute; top: 220px; left: 220px;" ondragover="dragIn();" ondrop="dropIn();" >
<img id="img1" class="resize" src="wreck.jpg" ondragstart="dragBegin()" draggable="true" style="cursor:move;"/></div>
<div id="loc1" data-drop="img1" style="border:1px solid black; position:absolute;  left:400px; top:150px; width:160px; height:200px;"ondragover="dragIn();" ondrop="dropIn();" ></div>

<div id="box2"  style="position: absolute; top: 220px; left: 300px;" ondragover="dragIn();" ondrop="dropIn();" >
<img id="img2" class="resize" src="nah.jpg" ondragstart="dragBegin()" draggable="true" style="cursor:move;"/></div>
<div id="loc2" data-drop="img2" style="border:1px solid black; position:absolute;  left:560px; top:150px; width:160px; height:200px;"ondragover="dragIn();" ondrop="dropIn();" ></div>

so far the code above allow me to achieve what i want, but its not perfect, when i drop img1 to loc2, it did nothing. What i really want is when i drop img1 to loc2, the img1 is still dropped on the loc1. No matter where the img1 will be drop by user, the result of img1 will still be dropped on loc1, and same goes to img2, it will always be dropped on the loc2.

I tried this but its not working

Code:

if(evt.target.getAttribute('data-drop') == id){

      evt.target.appendChild(document.getElementById(id));
      } 
      else{
          evt.target.appendChild(document.getElementsByAttribute('data-drop'));
      }

is there any soloution for me? Thanks alot

Code:

<script language="JavaScript" type="text/javascript">
function confirmDelete(url){
	
	var decision = confirm("Click OK to delete this post.");
		if(decision == true){
			window.location = url;
		}
}
</script>


<!--HTML LATER ON -->
<a onclick="confirmDelete('deletePost.php?id=17')" href=''><img src='delete.png' alt='' title='Delete this post' /></a>

I get absolutely nothing out of this. The confirm box pops up, but a the URL never changes when I click OK. I have no clue what's going wrong here. I'm using Google Chrome to test this out if that helps. Also does not work in Firefox.

how can I write on a picture with javascript?

Filename: front.htm
Supporting files: ads1.jpg - ads5.jpg, ads.js, fp.jpg, front.htm, logo.jpg, random.js,
styles.css
-->
<title>The Ridgewood Herald Tribune</title>
<link href="styles.css" rel="stylesheet" type="text/css" />

<script src="random.js" type="text/javascript"></script>

<script src="ads.js" type="text/javascript"></script>
</head>

<body>

<div id="links">
<h1>Contents</h1>
<p class="section">Main</p>
<p class="linksub">
<a href="#">Home</a><br />
<a href="#">Subscriptions</a><br />
<a href="#">Contact Us</a><br />
<a href="#">News Sources</a><br /><br />
</p>
<p class="section">News</p>
<p class="linksub">
<a href="#">Local</a><br />
<a href="#">National</a><br />
<a href="#">International</a><br />
</p>

<p class="section">Sports</p>
<p class="linksub">
<a href="#">Baseball</a><br />
<a href="#">Basketball</a><br />
<a href="#">Football</a><br />
<a href="#">Golf</a><br />
<a href="#">Hockey</a><br />
<a href="#">Miscellaneous</a><br />
</p>

<p class="section">Opinion</p>
<p class="linksub">
<a href="#">Editorials</a><br />
<a href="#">Columnists</a><br />
<a href="#">Letters</a><br />
</p>

<p class="section">Classifieds</p>
<p class="linksub">
<a href="#">Employment</a><br />
<a href="#">For Sale</a><br />
<a href="#">Personals</a><br />
<a href="#">Real Estate</a><br />
<a href="#">Wanted</a><br />
</p>

<p class="section">Other</p>
<p class="linksub">
<a href="#">Business</a><br />
<a href="#">Weather</a><br />
<a href="#">Entertainment</a>
</p>
</div>

<div id="main">
<div id="ads">
<script type="text/javascript">
/*
generate a random integer from 1 to 5
*/
var rNumber = randInt(5);

/*
description of the random ad
*/
var rAd = adDescription(rNumber);

/*
URL of the random ad
*/
var rLink = adLink(rNumber);

document.write('<a href="'+rLink+'">');
document.write(rLink+"'ads'"+rNumber+"'.jpg'" alt="'rAd'" />);
document.write(adLink);
document.write("</a>");
</script>

</div>

<div id="request"><a href="#">Contact us today to place your ad</a></div>

<p id="logo">
<img src="logo.jpg" alt="Ridgewood Herald Tribune" />
</p>

<p id="fp">
<img src="fp.jpg" alt="" />
</p>

<h2>Park Opens</h2>
<p id="intro">The <i>Adventure Island</i> theme park opened its doors on
Monday near Ridgewood. The park, one of the biggest in New Jersey, drew
large crowds, but the long lines didn't deter anyone. "I've been watching
them put up the rides over the last year, it's really exciting to finally
get inside the gates!" said Ridgewood resident, Denise Brooks.</p>

<p class="cont"><a href="#">story continues on page 2...</a></p>

<address id="footer">
<b>Ridgewood Herald Tribune</b> &nbsp;°&nbsp; 10010 Atwood Ave.
&nbsp;°&nbsp; Ridgewood, NJ &nbsp; &nbsp; 07451<br />
Phone: (201)555-1101 &nbsp;°&nbsp; Fax: (201)555-1102
</address>
</div>

</body>
</html>

write a function that when called will ask the user for a series of numbers to be entered 1 at a time and then calculates their sum,their average,and their average rounded up then output the results.

for example the average of a series of numbers is found by adding the numbers together and dividing by the amount of numbers entered (so the average of 2,5,1 and 7 is equal to (2+5+1+7)/4=15/4=3.75).

how do i write a recursive program to calculate the factorial of a number between 0 and 6.if the user enters a number greater than 6 you should prompt the user again to input another number or -1 to exit the program.how do i write the pseudo code and the javascript code for this program?
i have no idea of how to do this and have been trying to figure it out since the last hour

I need javascript to read height of an static multiline text and write height value into the var value?

Is it possible?

Hi everyone. I do all of my writing and editing in notepad but can't figure out how to use characters from different charsets in the same script-block.

For example if I wanted to write

Code:

if ( CharInput=="ش" ) { N = 1;}
if ( CharInput=="厜" ) { N = 2;}

I've found the unicode the number for ش is 0634 and 厜 is 539C. But I don't know how to use them. My question is how do I modify the above piece of code so it works in something like notepad?

I can't cut and paste them in because in plain text files like that of notepad the formating is lost and I'm pretty sure html wouldn't allow that anyway.

Thanks for reading

I have am currently taking over as the developer for this web site, and the developer who left the project unfinished wrote a script. What it does is takes posts from vBulletin forums, for instance News posts, and then it grabs the posts by ID and Title and writes the title on the home page of the web site. The problem right now that I have is the test wraps, you can see what I mean here http://www.netcodeilluminati.com/v2

If you look on the left, I want to make the text cut off after a certain amount of characters with "..." at the end as if there is more to the title but you can't see it.

Here is the script:


for (x = 0; x < 5; x++)

{

document.write("<li><div class=\"li_icon\"><img src=\"images/icons/text.png\" alt=\"text\" /></div><div class=\"li_text\">");

document.write("<a href=\"../forums/showthread.php?t="+threads[x].threadid+"\">"+threads[x].title+"</a></div></li>");

}


I was wondering how I could go about doing this.

Thanks for any future help.

-Kevin

Without elaboration plz see my code:
Code:

<body>
<script>
var b="s";
</script>

<button target="_blank" onclick="window.open('http://......php?b="javascript:document.write(b);"&id=2&q=<?php print $_GET['q']; ?>','1','');return false;">xyz</button>
</body>

i don understand why this javascript:document.write(b); doesnt work in url...
i know its simple yet it make my hair out of my head. plz count it..

Hello:
I have two input boxes on a form which receive the first and last name of a user. I want to be able to use charAt() to get the first letter in each box and pass it to a third box on the same form. Is this doable? May I request some help?
I was thinking something like the function below would be the starting point --I stand correct, as it is not working.

Code:

<script type=\"text/javascript\">
var str=\"Mossa\";
<!--document.write(str.charAt(0));-->
document.write('<INPUT TYPE=text size=2 VALUE=\"str.charAt(0);\">');
var str=\"Barandao\";
document.write('<INPUT TYPE=text VALUE=\"str.charAt(0)\">');
<!--document.write(str.charAt(0));-->

</script>

Any thoughts!
Mossa

I've written the following html,
<html>
<head>
<script type="text/javascript">
function createpage(){
var first = document.getElementById('first').value
var second = document.getElementById('second').value
var third = document.getElementById('third').value
var j = window.open('random');
var new_page = '<html><head><script type="text/javascript">function open_win() { window.open(first) window.open(second) window.open(third) } </script></head><body onLoad = "open_win()"></body></html>';
j.document.write(new_page);
j.document.close();
}
</script>
</head>
<body>
<form action="">
<p>
First Link: <input type="text" id="first" name="first"/>
Second Link: <input type="text" id="second" name="second"/>
Third Link: <input type="text" id="third" name="third"/>
<input type=BUTTON value="Submit" name="mySubmit" onClick="createpage();return false;">
</p>
</form>
</body>
</html>

With the intention to eventually implement it into a website that "mashes" several URLs together into a tinyurl that, upon being opened, creates several tabs of the content the creator wanted in the single URL. Does that make sense?
In order to best do this I figured a page with a random character string (I haven't yet implemented this part, for now 'random' holds the place of the new page/link) would have to be created that would launch all the tabs and then close itself.

Here's what it should do...
1) User enter 3 URLs into three forms:
First Link: <input type="text" id="first" name="first"/>
Second Link: <input type="text" id="second" name="second"/>
Third Link: <input type="text" id="third" name="third"/>

2) User clicks Submit button that calls "createpage()" function that's declared in the <head>er. The first part of this function declares the links that were inputted as variables first, second, and, third.
<script type="text/javascript">
function createpage(){
var first = document.getElementById('first').value
var second = document.getElementById('second').value
var third = document.getElementById('third').value
3) "createpage()" function then declares a new window named 'random' to variable j (I have random.html stored in the same folder as this project. It is empty.)
var j = window.open('random')


4) Next "createpage()" creates a variable that stores a full page's html code that includes a script that launches each link individually with window.open().
var new_page = '<html><head><script type="text/javascript">function open_win() { window.open(first) window.open(second) window.open(third) } </script></head><body onLoad = "open_win()"></body></html>';

5) "createpage()" writes the code (stored in variable 'new_page') to document 'random' with j.document.write(new_page);

6) "createpage()" closes the document.