|
JavaScript - Gmap2 Driving Directions Drag Polyline
Greetings,
I have a GMAP2 setup on my website that gives driving directions from Point A to Point B. I want to add functionality that allows a user to alter the directions once the polyline has already been plotted. Working Example: Google Driving Directions My Driving Directions: Green Traffic Driving Directions What javascript do I need to tweak to get the line to be draggable? Thanks in advance for any information and / or assistance. Sincerely, Travis Walters Similar TutorialsI'm sorry if this is in the wrong section... I am not sure how to do it... Here is the coding: Code: function displayTitle(name, x, y){
return name + " <a href='#' onClick='showDirectionsDialog(\""+name+"\", "+x+", "+y+")'><img src='images/direction.png' alt='Get driving directions'/></a>";
}
function showDirectionsDialog(name, x, y){
var d=dijit.byId("dialogDirections");
d.set("title", "Get directions to \""+name+"\"");
document.getElementById("txtToX").value=x;
document.getElementById("txtToY").value=y;
d.show();
}
function getDirections(){
var frmX=document.getElementById("txtFrmX").value;
var frmY=document.getElementById("txtFrmY").value;
var toX=document.getElementById("txtToX").value;
var toY=document.getElementById("txtToY").value;
var routeData = new Route;
routeData.routeStops = frmX+","+frmY+";"+toX+","+toY;
routeData.routeMode = "DRIVE";
routeData.avoidERP=0;
routeData.routeOption = "Shortest";
routeData.GetRoute(showDirections);
}
function showDirections(routeResults){
if (routeResults.results=="No results"){
alert("No directions found, please try other location.");
return;
}
}
Here is the coding I have now: Code: function getDirections() {
var routeData = new Route;
routeData.routeStops = document.getElementById('txtTheme').value;
routeData.routeMode = document.getElementById('txtOtptFlds').value;
routeData.avoidERP = document.getElementById('txtExtent').value;
routeData.routeOption = "Shortest";
routeData.GetRoute(showRouteData)
}
function showRouteData(routeResults)
{
if (routeResults.results=="No results"){
alert("No Route found, please try other location.")
return
}
else if (routeResults.results=="Stops more than nine"){
alert("Number of stops exceed than nine");
return;
}
directions = routeResults.results.directions[0];
directionFeatures = directions.features;
var routeSymbol = new esri.symbol.SimpleLineSymbol().setColor(new dojo.Color([0,0,255,0.5])).setWidth(4);
var mergedGeometry = new esri.geometry.Polyline()
mergedGeometry.addPath(routeResults.results.routes.features[0].geometry.paths[0])
OneMap.map.graphics.clear();
OneMap.map.graphics.add(new esri.Graphic(mergedGeometry, routeSymbol));
//Display the total time and distance of the route
document.getElementById("results").innerHTML = "<br /> Total distance: " + directions.summary.totalLength + "<br /> Total time: " + directions.summary.totalTime;
//List the directions and create hyperlinks for each route segment
for (var i=0;i<directions.features.length;i++)
{
var feature=directions.features[i]
document.getElementById("results").innerHTML= document.getElementById("results").innerHTML + '<br><u>' + parseInt(parseInt(i)+1) + ". " + feature.attributes.text + " (" + feature.attributes.length + ", " + feature.attributes.time + ")</u>"
}
}
I am not sure how to integrate my codings into the other codings. There is a name of the place (lets say London) and a clickable icon by the side. When I click the icon, a dojo toolkit dialog box appear for me to enter my location (the other place, London, will be displayed in the dialog box) Click "Go" to get the directions... I wish to have the directions also placed in a dialog box too... Hi, I have a table with FROM and TO columns and a column with MAP/DIRECTIONS link. When a user clicks on the link, it should display Map and Directions on the iframe on the same page. How can I achieve this using Google map and directions API? Thanks Hi, I've had this idea lately that I have a button that when I hover it, drop down menus come out from the left, the right, and below the button. Would this be doable in any way? Thank you. I'm still kinda new at this. Please bear with me..I'm trying to make all imgs move in different directions using the following code. I was givin the code and I need to insert something into it so this will work. I just can't understand it and WANT to ..driving me NUTTY. Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>BUZZ</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<script type="text/javascript">
var widthMax = 0;
var heightMax = 0;
var buzzSpeed = new Array(3);
buzzSpeed[0] = 10;
var xPosition = new Array(3);
xPosition = -20;
var yPosition = new Array(3);
yPosition[0] = 0;
var xDirection = new Array(3);
xDirection[0] = "right";
var yDirection = new Array(3);
yDirection[0] = "down";
function setBug(newStartPoint) {
widthMax = document.documentElement.clientWidth;
heightMax = document.documentElement.clientHeight;
setInterval("flyBug(0)", 30);
}
function flyBug(curBug) {
var activeBug = document.getElementById("bugImage" + curBug);
var activeElement = document.getElementById("bugElement" + curBug);
if (xDirection[curBug] == "right" && xPosition[curBug] > (widthMax - activeBug.width - buzzSpeed[curBug]))
xDirection[curBug] = "left";
else if (xDirection[curBug] == "left" && xPosition[curBug] <= 0)
xDirection[curBug] = "right";
if (yDirection[curBug] == "down" && yPosition[curBug] > (heightMax - activeBug.height - buzzSpeed[curBug]))
yDirection[curBug] = "up";
else if (yDirection[curBug] == "up" && yPosition[curBug] <= 0)
yDirection[curBug] = "down";
if (xDirection[curBug] == "right")
xPosition[curBug] = xPosition[curBug] + buzzSpeed[curBug];
else if (xDirection[curBug] == "left")
xPosition[curBug] = xPosition[curBug] - buzzSpeed[curBug];
else
xPosition[curBug] = xPosition[curBug];
if (yDirection[curBug] == "down")
yPosition[curBug] = yPosition[curBug] + buzzSpeed[curBug];
else if (yDirection[curBug] == "up")
yPosition[curBug] = yPosition[curBug] - buzzSpeed[curBug];
else
yPosition[curBug] = yPosition[curBug];
activeElement.style.left = xPosition[curBug] + document.documentElement.scrollLeft + "px";
activeElement.style.top = yPosition[curBug] + document.documentElement.scrollTop + "px";
}
window.onresize = setBug;
</script>
</head>
<body onload="setBug()">
<div id="bugElement0" style="position:absolute; left:20px; top:0px;">
<img id="bugImage0" src="bug.jpg" alt="buggy" height="48" width="48" /></div>
<div id="bugElement1" style="position:absolute; left:25%; top:75%;">
<img id="bugImage1" src="bug.jpg" alt="buggy1" height="48" width="48" /></div>
<div id="bugElement2" style="position:absolute; left:40%; top:48%;">
<img id="bugImage2" src="bug.jpg" alt="buggy2" height="48" width="48" /></div>
<div id="bugElement3" style="position:absolute; left:58%; top:58%;">
<img id="bugImage3" src="bug.jpg" alt="buggy3" height="48" width="48" /></div>
<div id="bugElement4" style="position:absolute; left:90%; top:75%;">
<img id="bugImage4" src="bug.jpg" alt="buggy4" height="48" width="48" /></div>
</body>
</html>
Hello, I am trying to create multiple google maps with multiple directions that load on one page. I have tried duplicating the var and function names but I haven't been able to get it to work. Does anyone have any ideas? Any help or suggestions would be greatly appreciated! -Topianno Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title>Google Maps JavaScript API Example: Advanced Directions</title>
<script src=" http://maps.google.com/?file=api&v=2.x&key=ABQIAAAAzr2EBOXUKnm_jVnk0OJI7xSosDVG8KKPE1-m51RBrvYughuyMxQ-i1QfUnH94QxWIa6N4U6MouMmBA"
type="text/javascript"></script>
<style type="text/css">
body {
font-family: Verdana, Arial, sans serif;
font-size: 11px;
margin: 2px;
}
table.directions th {
background-color:#EEEEEE;
}
img {
color: #000000;
}
</style>
<script type="text/javascript">
var map;
var map2;
var gdir;
var gdir2;
var geocoder = null;
var geocoder2 = null;
var addressMarker;
var addressMarker2;
function initialize() {
if (GBrowserIsCompatible()) {
map = new GMap2(document.getElementById("map_canvas"));
gdir = new GDirections(map, document.getElementById("directions"));
GEvent.addListener(gdir, "load", onGDirectionsLoad);
GEvent.addListener(gdir, "error", handleErrors);
setDirections("San Francisco", "Mountain View", "en_US");
setDirections2("San Francisco", "Mountain View", "en_US");
}
}
function setDirections(fromAddress, toAddress, locale) {
gdir.load("from: " + fromAddress + " to: " + toAddress,
{ "locale": locale });
}
function handleErrors(){
if (gdir.getStatus().code == G_GEO_UNKNOWN_ADDRESS)
alert("No corresponding geographic location could be found for one of the specified addresses. This may be due to the fact that the address is relatively new, or it may be incorrect.\nError code: " + gdir.getStatus().code);
else if (gdir.getStatus().code == G_GEO_SERVER_ERROR)
alert("A geocoding or directions request could not be successfully processed, yet the exact reason for the failure is not known.\n Error code: " + gdir.getStatus().code);
else if (gdir.getStatus().code == G_GEO_MISSING_QUERY)
alert("The HTTP q parameter was either missing or had no value. For geocoder requests, this means that an empty address was specified as input. For directions requests, this means that no query was specified in the input.\n Error code: " + gdir.getStatus().code);
// else if (gdir.getStatus().code == G_UNAVAILABLE_ADDRESS) <--- Doc bug... this is either not defined, or Doc is wrong
// alert("The geocode for the given address or the route for the given directions query cannot be returned due to legal or contractual reasons.\n Error code: " + gdir.getStatus().code);
else if (gdir.getStatus().code == G_GEO_BAD_KEY)
alert("The given key is either invalid or does not match the domain for which it was given. \n Error code: " + gdir.getStatus().code);
else if (gdir.getStatus().code == G_GEO_BAD_REQUEST)
alert("A directions request could not be successfully parsed.\n Error code: " + gdir.getStatus().code);
else alert("An unknown error occurred.");
}
function onGDirectionsLoad(){
// Use this function to access information about the latest load()
// results.
// e.g.
// document.getElementById("getStatus").innerHTML = gdir.getStatus().code;
// and yada yada yada...
}
</script>
</head>
<body onload="initialize()" onunload="GUnload()">
<h2>Maps API Directions Illustrated</h2>
<form action="#" onsubmit="setDirections(this.from.value, this.to.value, this.locale.value); return false">
<table>
<tr><th align="right">From: </th>
<td><input type="text" size="25" id="fromAddress" name="from"
value="San Francisco"/></td>
<th align="right"> To: </th>
<td align="right"><input type="text" size="25" id="toAddress" name="to"
value="Mountain View" /></td></tr>
<tr><th>Language: </th>
<td colspan="3"><select id="locale" name="locale">
<option value="en" selected>English</option>
<option value="fr">French</option>
<option value="de">German</option>
<option value="ja">Japanese</option>
<option value="es">Spanish</option>
</select>
<input name="submit" type="submit" value="Get Directions!" />
</td></tr>
</table>
</form>
<br/>
<table class="directions">
<tr><th>Formatted Directions</th><th>Map</th></tr>
<tr>
<td valign="top"><div id="directions" style="width: 275px"></div></td>
<td valign="top"><div id="map_canvas" style="width: 310px; height: 400px"></div></td>
</tr>
</table>
<h2>Maps API Directions Illustrated 2nd Map</h2>
<form action="#" onsubmit="setDirections2(this.from.value, this.to.value, this.locale.value); return false">
<table>
<tr><th align="right">From: </th>
<td><input type="text" size="25" id="fromAddress2" name="from"
value="San Francisco"/></td>
<th align="right"> To: </th>
<td align="right"><input type="text" size="25" id="toAddress2" name="to"
value="Mountain View" /></td></tr>
<tr><th>Language: </th>
<td colspan="3"><select id="locale" name="locale2">
<option value="en" selected>English</option>
<option value="fr">French</option>
<option value="de">German</option>
<option value="ja">Japanese</option>
<option value="es">Spanish</option>
</select>
<input name="submit" type="submit" value="Get Directions!" />
</td></tr>
</table>
</form>
<br/>
<table class="directions">
<tr><th>Formatted Directions</th><th>Map</th></tr>
<tr>
<td valign="top"><div id="directions" style="width: 275px"></div></td>
<td valign="top"><div id="map_canvas" style="width: 310px; height: 400px"></div></td>
</tr>
</table>
</body>
</html>
Hi all I am creating a shopping cart in HTML & JavaScript. It's very nearly complete but I've hit a brick wall with trying to delete a single item. Where I list the shopping cart I have a delete button by every item. Here is the code to show that: Code: var buttonnode3= document.createElement('input'); // Create a button for each item to delete
buttonnode3.setAttribute('type','button');
buttonnode3.setAttribute('name','Delete');
buttonnode3.setAttribute("value","Delete('"+ItemName[j]+"');");
buttonnode3.setAttribute("onclick","Delete('"+ItemName[j]+"');"); // for FireFox. This parses through the item name (DelName=item name to delete)
buttonnode3.onclick = function() {Delete(ItemName[j]);}; // for Internet Explorer. Again, this parses through DelName
tr.appendChild(buttonnode3);
(The value name is for testing purposes). As you can see here, it shows fine But when I click delete, I get an 'undefined' error Here is the code for the Delete(); function Code: function Delete(DelName){ // Create function Delete "DelName" parses through item name
alert(DelName); // testing
for (var ind=0; ind<ItemName.length; ind++) { // Loop through array
if(ItemName[ind] == DelName){ // Find item to be deleted
ItemName.splice(ind,1); // Delete first record of item name
Quantity.splice(ind,1); // Delete first record of its quantity
Sum.splice(ind,1); // Delete first record of its sum
alert('You have removed ' + DelName); // Alert user
document.getElementById("div1").innerHTML=""; // Clear the whole shopping cart
document.getElementById("div2").innerHTML="";
document.getElementById("div3").innerHTML="";
ViewShoppingCart(); // Once the cart is cleared, there may still be other items so update it again
}
}
}
I've tried doing this var DelName = ItemName[j]; and then change the buttonnode to show DelName and it works however DelName always gets set to the last Item in the array. For example, you delete Dinosaur but it deletes Firemans hat. Can anyone help me out of this hole? Hi. i,m trying to make a map who show me as position A and a target adress as point B.I have made it so i can choose adress a and adress b from a dropdown but i want to automaticly load my position as possition A then choose position B from a dropdownlist. How can i do this ? Thanks Natrox <!DOCTYPE html> <html> <head> <title>Google Maps JavaScript API v3 Example: Map Geolocation</title> <meta name="viewport" content="initial-scale=1.0, user-scalable=no"> <meta charset="UTF-8"> <link href="http://code.google.com/apis/maps/documentation/javascript/examples/default.css" rel="stylesheet" type="text/css" /> <!-- Include the maps javascript with sensor=true because this code is using a sensor (a GPS locator) to determine the user's location. See: http://code.google.com/apis/maps/doc...ecifyingSensor --> <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=true&language=nb_NO"></script> <!--<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=true&language=nb_NO"> --> <script type="text/javascript"> var map; var directionDisplay; var directionsService; var stepDisplay; var markerArray = []; var initialLocation; //var oslo = new google.maps.LatLng(59.947639, 10.884469); var browserSupportFlag = new Boolean(); function initialize() { directionsService = new google.maps.DirectionsService(); // Create a map and center it on Manhattan. var oslo = new google.maps.LatLng(59.947639, 10.884469); var myOptions = { zoom: 13, mapTypeId: google.maps.MapTypeId.ROADMAP, center: oslo } map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); // Create a renderer for directions and bind it to the map. var rendererOptions = { map: map } directionsDisplay = new google.maps.DirectionsRenderer(rendererOptions) // Instantiate an info window to hold step text. stepDisplay = new google.maps.InfoWindow(); } function calcRoute() { // First, remove any existing markers from the map. for (i = 0; i < markerArray.length; i++) { markerArray[i].setMap(null); } // Now, clear the array itself. markerArray = []; // Retrieve the start and end locations and create // a DirectionsRequest using DRIVING directions. var start = document.getElementById("sart").value; var end = document.getElementById("end").value; var request = { origin: start, destination: end, travelMode: google.maps.DirectionsTravelMode.DRIVING }; // Route the directions and pass the response to a // function to create markers for each step. directionsService.route(request, function(response, status) { if (status == google.maps.DirectionsStatus.OK) { var warnings = document.getElementById("warnings_panel"); warnings.innerHTML = "<b>" + response.routes[0].warnings + "</b>"; directionsDisplay.setDirections(response); showSteps(response); } }); } function showSteps(directionResult) { // For each step, place a marker, and add the text to the marker's // info window. Also attach the marker to an array so we // can keep track of it and remove it when calculating new // routes. var myRoute = directionResult.routes[0].legs[0]; for (var i = 0; i < myRoute.steps.length; i++) { var marker = new google.maps.Marker({ position: myRoute.steps[i].start_point, map: map }); attachInstructionText(marker, myRoute.steps[i].instructions); markerArray[i] = marker; } } function attachInstructionText(marker, text) { google.maps.event.addListener(marker, 'click', function() { // Open an info window when the marker is clicked on, // containing the text of the step. stepDisplay.setContent(text); stepDisplay.open(map, marker); }); } // Try HTML5 geolocation if(navigator.geolocation) { navigator.geolocation.getCurrentPosition(function(position) { var pos = new google.maps.LatLng(position.coords.latitude, position.coords.longitude); var infowindow = new google.maps.InfoWindow({ map: map, position: pos, content: 'Du er her.' }); map.setCenter(pos); }, function() { handleNoGeolocation(true); }); } else { // Browser doesn't support Geolocation handleNoGeolocation(false); } function handleNoGeolocation(errorFlag) { if (errorFlag) { var content = 'Error: The Geolocation service failed.'; } else { var content = 'Error: Your browser doesn\'t support geolocation.'; } var options = { map: map, position: new google.maps.LatLng(60, 105), content: content }; var infowindow = new google.maps.InfoWindow(options); map.setCenter(options.position); } function detectBrowser() { var useragent = navigator.userAgent; var mapdiv = document.getElementById("map_canvas"); if (useragent.indexOf('iPhone') != -1 || useragent.indexOf('Android') != -1 ) { mapdiv.style.width = '100%'; mapdiv.style.height = '100%'; } else { mapdiv.style.width = '600px'; mapdiv.style.height = '800px'; } } google.maps.event.addDomListener(window, 'load', initialize); </script> </head> <body onload="initialize()"> <div style="text-align:center"> <select id="start"> <option value="625 8th Avenue, New York, NY, 10018">Port Authority Bus Terminal</option> <option value="staten island ferry terminal, new york, ny">Staten Island Ferry Terminal</option> <option value="101 E 125th Street, New York, NY">Harlem - 125th St Station</option> </select> <select id="end" onchange="calcRoute();"> <option value="Brubakkveien 14 1083 Oslo">Sigvartsen proffavdeling</option> <option value="Sonja Henies plass 3, 0185 Oslo">Oslo plaza</option> <option value="moma, New York, NY">MOMA</option> <option value="350 5th Ave, New York, NY, 10118">Empire State Building</option> <option value="253 West 125th Street, New York, NY">Apollo Theater</option> <option value="1 Wall St, New York, NY">Wall St</option> </select> </div> <div id="map_canvas"></div> <div id="pos"></div> <div id="warnings_panel"></div> </body> </html> Hi All, I'm new to the CF forums and also to JavaScript. Trying to get a pop-up div to be draggable, but it doesn't seem to be working. Can someone help me out? I'd be very grateful! JavaScript I'm using: Code: //used for dragging div
function agent(v)
{
return(Math.max(navigator.userAgent.toLowerCase().indexOf(v),0));
}
function xy(e,v)
{
return(v?(agent('msie')?event.clientY+document.body.scrollTop:e.pageY):(agent('msie')?event.clientX+document.body.scrollTop:e.pageX));
}
function dragOBJ(d,e)
{
function drag(e)
{
if(!stop)
{
d.style.top=(tX=xy(e,1)+oY-eY+'px');
d.style.left=(tY=xy(e)+oX-eX+'px');
}
}
var oX=parseInt(d.style.left),oY=parseInt(d.style.top),eX=xy(e),eY=xy(e,1),tX,tY,stop;
document.onmousemove=drag;
document.onmouseup=function()
{
stop=1;
document.onmousemove='';
document.onmouseup='';
};
}
//used for pop-up div
function pop(div)
{
document.getElementById(div).style.display='block';
return false
}
function hide(div)
{
document.getElementById(div).style.display='none';
return false
}
Also, here is the HTML: Code: <a href="#" onclick="return pop('myDiv2')">Pop-up div #2</a> - Hidden div shows upon clicking this link, but it won't drag
<div class="bubble" onmousedown="dragOBJ(this,event); return false;">
<div id="myDiv2" class="parentDisable">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
<p><a href="#" onClick="return hide('myDiv2')">Close [X]</a></p>
</div>
</div>
And the CSS: Code:
.parentDisable {
position:absolute;
margin:120px;
padding:20px;
width:400px;
display:none;
z-index:3;
background-color:#DEDEDE;
border:1px solid #DEDEDE;
border-radius:5px; -moz-border-radius:5px; -webkit-border-radius:5px;
}
.bubble { position:fixed; width:400px; top:150px; left:250px; cursor:move; }
This has been driving me crazy all day, cant seem to work out what im doing wrong. Alerts the correct URL Used document.write and it works But the redirect command doesnt initiate automatically on click and im not sure why. Someone help!! Code:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>http</title>
<style>
<!--
p.MsoNormal
{mso-style-parent:"";
margin-bottom:.0001pt;
font-size:11.0pt;
font-family:"Calibri","sans-serif";
margin-left:0cm; margin-right:0cm; margin-top:0cm}
-->
</style>
<script type="text/javascript">
function buildstring(form)
{
var text = form.text.value;
var xmljson = form.choice1.value;
var init = 'localhost:1234/PPTX/tr?service=extract&action=extractAll&text=';
var op = '&op=';
var first = init + text + op + xmljson;
var complete = "http://" + first;
alert (complete);
window.location = complete;
}
</script>
</head>
<body>
<form method="get" id="urlbuild">
<table>
<tr>
<td>
<h2>URL Builder</h2>
</td>
</tr>
<tr>
<td>
<input type="text" size="100" name="text" value="">
</td>
</tr>
</table>
<table>
<tr>
<td>
<select type="one" name="choice1">
<option value="xml"> XML
</option>
<option value="json"> JSON
</option>
</select>
</td>
<td>
<p>Please choose XML or JSON.</p>
</td>
</tr>
</table>
<table>
<tr>
<td>
<input type="submit" onClick="buildstring(this.form)">
</td>
</tr>
</table>
</form>
</body>
</html>
Hi, I read several examples, tried them all out - and nothing works! Driving me crazy - completely insane! Maybe you guys can help My problem is simple: file B.html includes this line: Code: <script type="text/javascript" src="B.js" defer="defer"></script> file B.js is a regular JS file, yet I need to insert a PHP function in it (yeah - I know it will operate server-side before the page reaches the browser). I did something like: Code: (some js code)
var user_id = <?php $a=100; $b=200; $c=$a+$b; echo($c);?>;
alert("Your user ID is:" + user_id);
(some more js code)
(What I expect is the browser to see the line as: var user_id = 300; ) Doesn't work. Renaming B.js to B.php did nothing. What am I doing wrong? Thanks! Hi all, I have a string which contains HTML and *possibly* IMG tags. I am trying to extract part of each IMG tag which may be in the string. The string is part of a chat-box message which may or may not contain smilies. Here is a typical line of text, without processing (note I mis-spell the bbcode "quote" so as not to fool this board): Code: [qoute="Krupski"]<img src="./images/smilies/smile.gif" alt=":smile:" title="smile" /> <img src="./images/smilies/thumbsup.gif" alt=":thumbsup:" title="thumbsup" /> <img src="./images/smilies/thumbsdown.gif" alt=":thumbsdown:" title="thumbsdown" />[/qoute] Notice that each image has an "ALT" attribute which contains the smiley code of the smiley image. THAT is what I want to extract. This is the regex I am using to grab each smiley code: Code: txt = txt.replace(/<img(?:.*?):(.*?):(?:.*?)\/>/gi,':$1:'); The weird thing is, the regex grabs the FIRST and LAST of the three, but not the middle one! I'm sure the stupid mistake is sitting right in front of my face, but I'm not seeing it. Any help will be greatly appreciated! Thanks. -- Roger hi... I'm trying to pass this string and I keep getting the "missing ; before statement error" which I know means I not escaping something or something, but I've tried it every way I can think of and still no dice... any ideas? Code: content='<a href onclick="javascript: document.getElementById('searchbox').style.display='inline'">here<\/a> to enter your address' +'<div id="searchbox" display="hidden"><form action="javascript:getDirections()">' +'<input type="hidden" SIZE=40 MAXLENGTH=40 name="saddr" id="saddr" value="" /><br>' +'<div>';
thanks in advance... There seems to be a lot out there, but I haven't found a javascript for a click and drag that has been bug free. Does anyone have any suggestions? The last one I had didn't work in Safari. Thanks so much for any help. Hello, I have a system where one clicks on an image an a floating calculator appear. <img src="images/groutculatorman.png" width="114" height="85" onclick="showdiv()"/> <div id="demo" style="visibility:hidden"> <div id="calculator" class="drag"> ----- <script type="text/javascript"> function closeCalculator() { document.getElementById("calculator").style.display = "none"; window.location.href = window.location.href;} var ie = document.all; var ns6 = document.getElementById && !document.all; var dragapproved=false; var z, x, y; function move(e) { if (dragapproved) { z.style.left=ns6? temp1+e.clientX-x: temp1+event.clientX-x; z.style.top=ns6? temp2+e.clientY-y : temp2+event.clientY-y; return false; } } function drags(e) { if (!ie&&!ns6) return; var firedobj = ns6? e.target : event.srcElement; var topelement = ns6? "HTML" : "BODY"; while (firedobj.tagName != topelement&&firedobj.className != "drag") { firedobj = ns6? firedobj.parentNode : firedobj.parentElement; } if (firedobj.className == "drag") { dragapproved = true; z = firedobj; temp1 = parseInt(z.style.left+0); temp2 = parseInt(z.style.top+0); x = ns6? e.clientX: event.clientX; y = ns6? e.clientY: event.clientY; document.onmousemove=move; return false; } } document.onmousedown=drags; document.onmouseup=new Function("dragapproved=false"); // --> function showdiv() { var mydiv = document.getElementById("demo"); mydiv.style.visibility=""; mydiv.style.display=""; } </script> ------ PROBLEM I added a drop down function on the image in order to open different calculators. The system works however the calculator won't drop (doesn't deselect). Any ideas. New code. <a href="javascript:;" onMouseOver="MM_showMenu(window.mm_menu_1009090908_0,11,82,null,'image1')" onMouseOut="MM_startTimeout();"> <img src="images/groutculatorman.png" name="image1" width="114" height="85" border="0" id="image1"> </a> <div id="demo" style="visibility:hidden"> <div id="calculator" class="drag"> ------------- <script language="JavaScript1.2">mmLoadMenus();</script> <script type="text/javascript"> <!-- function mmLoadMenus() { if (window.mm_menu_1009090908_0) return; window.mm_menu_1009090908_0 = new Menu("root",135,18,"Verdana, Arial, Helvetica, sans-serif",12,"#FF0000","#FFFFFF","#FFFFFF","#000084","left","middle",3,0,1000,-5,7,true,true,true,0,false,true); mm_menu_1009090908_0.addMenuItem("Baseplate","showdiv()"); mm_menu_1009090908_0.addMenuItem("Tank/Anchorbolt","showdiv2()"); mm_menu_1009090908_0.addMenuItem("Tank/Circumference","showdiv3()"); mm_menu_1009090908_0.hideOnMouseOut=true; mm_menu_1009090908_0.bgColor='#555555'; mm_menu_1009090908_0.menuBorder=1; mm_menu_1009090908_0.menuLiteBgColor='#FFFFFF'; mm_menu_1009090908_0.menuBorderBgColor='#777777'; mm_menu_1009090908_0.writeMenus(); } // mmLoadMenus() </script> function closeCalculator() { document.getElementById("calculator").style.display = "none"; window.location.href = window.location.href;} var ie = document.all; var ns6 = document.getElementById && !document.all; var dragapproved=false; var z, x, y; function move(e) { if (dragapproved) { z.style.left=ns6? temp1+e.clientX-x: temp1+event.clientX-x; z.style.top=ns6? temp2+e.clientY-y : temp2+event.clientY-y; return false; } } function drags(e) { if (!ie&&!ns6) return; var firedobj = ns6? e.target : event.srcElement; var topelement = ns6? "HTML" : "BODY"; while (firedobj.tagName != topelement&&firedobj.className != "drag") { firedobj = ns6? firedobj.parentNode : firedobj.parentElement; } if (firedobj.className == "drag") { dragapproved = true; z = firedobj; temp1 = parseInt(z.style.left+0); temp2 = parseInt(z.style.top+0); x = ns6? e.clientX: event.clientX; y = ns6? e.clientY: event.clientY; document.onmousemove=move; return false; } } document.onmousedown=drags; document.onmouseup=new Function("dragapproved=false"); // --> function showdiv() { var mydiv = document.getElementById("demo"); mydiv.style.visibility=""; mydiv.style.display=""; } </script> Hei, I should start by saying that I am very new in Javascript.. what I need to do is to drag the entire window...any ideas how to do that ? Thanks Hey complete beginner to javascript here so sorry if I'm doing something stupid Basically I've tried to follow this guide to make it so that I can move an image on the page. I have a style tag in the head Code: <style type="text/css">.drag{position: relative;}</style>
I have an image like this: Code: <img src="logo.png" class="drag" alt="logo" /> which is obviously in the body I copied and pasted the code given in the guide: Code: <script language="JavaScript" type="text/javascript">
<!--
var _startX = 0; // mouse starting positions
var _startY = 0;
var _offsetX = 0; // current element offset
var _offsetY = 0;
var _dragElement; // needs to be passed from OnMouseDown to OnMouseMove
var _oldZIndex = 0; // we temporarily increase the z-index during drag
var _debug = $('debug'); // makes life easier
InitDragDrop();
function InitDragDrop()
{
document.onmousedown = OnMouseDown;
document.onmouseup = OnMouseUp;
}
function OnMouseDown(e)
{
// IE is retarded and doesn't pass the event object
if (e == null)
e = window.event;
// IE uses srcElement, others use target
var target = e.target != null ? e.target : e.srcElement;
_debug.innerHTML = target.className == 'drag'
? 'draggable element clicked'
: 'NON-draggable element clicked';
// for IE, left click == 1
// for Firefox, left click == 0
if ((e.button == 1 && window.event != null ||
e.button == 0) &&
target.className == 'drag')
{
// grab the mouse position
_startX = e.clientX;
_startY = e.clientY;
// grab the clicked element's position
_offsetX = ExtractNumber(target.style.left);
_offsetY = ExtractNumber(target.style.top);
// bring the clicked element to the front while it is being dragged
_oldZIndex = target.style.zIndex;
target.style.zIndex = 10000;
// we need to access the element in OnMouseMove
_dragElement = target;
// tell our code to start moving the element with the mouse
document.onmousemove = OnMouseMove;
// cancel out any text selections
document.body.focus();
// prevent text selection in IE
document.onselectstart = function () { return false; };
// prevent IE from trying to drag an image
target.ondragstart = function() { return false; };
// prevent text selection (except IE)
return false;
}
}
function ExtractNumber(value)
{
var n = parseInt(value);
return n == null || isNaN(n) ? 0 : n;
}
function OnMouseMove(e)
{
if (e == null)
var e = window.event;
// this is the actual "drag code"
_dragElement.style.left = (_offsetX + e.clientX - _startX) + 'px';
_dragElement.style.top = (_offsetY + e.clientY - _startY) + 'px';
_debug.innerHTML = '(' + _dragElement.style.left + ', ' + _dragElement.style.top + ')';
}
function OnMouseUp(e)
{
if (_dragElement != null)
{
_dragElement.style.zIndex = _oldZIndex;
// we're done with these events until the next OnMouseDown
document.onmousemove = null;
document.onselectstart = null;
_dragElement.ondragstart = null;
// this is how we know we're not dragging
_dragElement = null;
_debug.innerHTML = 'mouse up';
}
}
//-->
</script>
I have tried putting the javascript in the head and the body but no matter where I put it, I can't drag and drop the image. What am I doing wrong? Thank you for your time Hello, I'm in need of help on my drag and drop code. How can I make 2 images (1 draggable, 1 static) each switch to alternate images when the draggable is dragged over the static?
All I Want To Make Happen Is That If You Drag and Drop A Div Into A Table An Action Happens
hi, i want to drag the div which have a image in it: but i find that if i click on the image, i cannot drag the div, (in FF3.5) any advice would be appreciated. Code: <div id="div1"> <imc src="XXX.jpg"> </div> and i have a JS something like that...: Code: drag();
function drag(){
document.onmousedown = startdrag;
document.onmouseup = enddrag;
}
function startdrag(e){
dragobj=e.target;
alert(dragobj.id);
}
......................
Hi I need a help with my code. When i'm trying to put a picture in empty div it works fine, but when i put the second picture to the div where already is picture, then second picture "disappear". If i have only one div, then everything is ok, but with 2 or more divs i have issue. PHP Code: <div id="drop" ondrop="drop(event)" ondragover="allowDrop(event)"></div> <div id="drop2" ondrop="drop(event)" ondragover="allowDrop(event)"></div> <img id="drag1" src="http://images.photo.bikestats.eu/zdjecie,600,79346,20091201,zdjecia-wiewiorek.jpg" draggable="true" ondragstart="drag(event)" width="80" height="80"> <img id="drag2" src="http://www.tech-blog.pl/wordpress/wp-content/uploads/2011/12/gaba-16-12-2011.jpg" draggable="true" ondragstart="drag(event)" width="80" height="80"> <style> #drop { border: 1px solid black; width:80px; height:80px; } #drop2 { border: 1px solid black; width:80px; height:80px; } </style> <script> function allowDrop(ev) { ev.preventDefault(); } function drag(ev) { ev.dataTransfer.setData("text/html", ev.target.id); } function drop(ev) { ev.preventDefault(); var data = ev.dataTransfer.getData("text/html"); var parent = ev.target.parentNode; if( parent.id == 'drop' ) { parent.removeChild(ev.target); parent.appendChild(document.getElementById(data)); } else ev.target.appendChild(document.getElementById(data)); } </script> |
|||||||