|
JavaScript - Urgent: How To Fix Infowindow To A Point So When Map Drag It Won't Move
How to fix a infowindow or a info template to a point so that when i drag the map the infowindow will no change place or move ...what is the code...and where shld i place it at?
this is my code : var stX = "23319.3347409758"; var stY = "28825.7191286444"; var pt= new esri.geometry.Point(stX,stY,map.spatialReference); //var strImage = "http://www.rw-designer.com/i/download48b.png"; var symbol = new esri.symbol.PictureMarkerSymbol(strImage, 25,25); var attr = {"PlaceName":"Peranakan musem of Singapore","PlaceAddr":"addr"}; var infoTemplate = new esri.InfoTemplate(); infoTemplate.setTitle("Building Name:"); infoTemplate.setContent(getInfoContent); var graphic = new esri.Graphic(pt,symbol,attr,infoTemplate); gLayer.add(graphic); } function getInfoContent(graphic){ var bc = new dijit.layout.BorderContainer({style: "font-size: 11pt; height: 520px; width:493px; background: #CCFFFF;"}); var c1 = new dijit.layout.ContentPane({ region: "top", style: "height: 20px width: 100%", content: "hello" }); bc.addChild(c1); //make a tab container var tc = new dijit.layout.TabContainer({ region: "center", style: "height: 65%; width: 100%; " }, dojo.create("div")); //display attribute information var cp1 = new dijit.layout.ContentPane({ //style: " background-color: red; ", title: "<font color= #E4287C><b>detail</font> ", content: "sfdfsdfsdf" }); tc.addChild(cp1); bc.addChild(tc); return bc.domNode; } dojo.addOnLoad(addSymbol); Similar TutorialsHi guys, I am a new poster and new to google maps. I have been working on geocoding and I have a problem, the example below works fine, all rollovers and icons work perfectly. However, the info window will only display for one point. I am assuming I have this line of code in the wrong place. new google.maps.event.addListener(marker, 'click', function() {infowindow.open(map,marker);}); Can anyone please help me? I would be so appriciative. Code: <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
/**
* Data for the markers consisting of a name, a LatLng and a zIndex for
* the order in which these markers should display on top of each
* other.
*/
var MarkersArray = [
['Oceans Eleven Casino', 33.199931,-117.368917, 4, '<div id="">Oceans Eleven Casino - text</div>', 'images/search.chips.small.png'],
['Pala Casino & Resort', 33.359418,-117.10583, 5, '<div id="content">Pala Casino & Resort - text</div>', 'images/search.chips.png'],
['Casino Pauma', 33.333271,-116.990626, 3, '<div id="content">Casino Pauma - text</div>', 'images/search.chips.small.png'],
['Lucky Lady Casino', 32.75844,-117.075513, 2, '<div id="content">Lucky Lady Casino - text</div>', 'images/search.chips.small.png'],
['Palomar Club', 32.75542,-117.13433, 1, 'Palomar Club - text', 'images/search.chips.png']
];
function setMarkers(map, locations) {
// Add markers to the map
for (var i = 0; i < locations.length; i++) {
var MarkersArray = locations[i];
// Marker sizes are expressed as a Size of X,Y
var image = new google.maps.MarkerImage(MarkersArray[5],
// This marker is 20 pixels wide by 32 pixels tall.
new google.maps.Size(60, 50),
// The origin for this image is 0,0.
new google.maps.Point(0,0),
// The anchor for this image is the base of the flagpole at 0,32.
new google.maps.Point(0, 33));
var shadow = new google.maps.MarkerImage(MarkersArray[5],
// The shadow image is larger in the horizontal dimension
// while the position and offset are the same as for the main image.
new google.maps.Size(75, 60),
new google.maps.Point(0,0),
new google.maps.Point(0, 33));
// Shapes define the clickable region of the icon.
var shape = {
coord: [0,0,1,54,59,54,59,0],
type: 'poly'
};
var infowindow = new google.maps.InfoWindow({content: MarkersArray[4]});
var myLatLng = new google.maps.LatLng(MarkersArray[1], MarkersArray[2]);
var marker = new google.maps.Marker({position: myLatLng,map: map,shadow: shadow,icon: image,shape: shape,title: MarkersArray[0],zIndex: MarkersArray[3]});
}
new google.maps.event.addListener(marker, 'click', function() {infowindow.open(map,marker);});
}
function initialize() {
var myOptions = {
zoom: 10,
center: new google.maps.LatLng(32.75542,-117.13433),
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
setMarkers(map, MarkersArray);
}
</script>
Hi, can someone please help me out with this? I've tried it a few time but couldn't get the image scroller into the infoWindow! I want to sort of MERGE this code Code: <html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/prototype/1.6.1.0/prototype.js" type="text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/scriptaculous/1.8.3/scriptaculous.js" type="text/javascript"></script>
<style type="text/css">
#container { text-align: center; }
#imageBox{ margin: auto; width: 360px; border: 1px #000 solid; overflow: hidden; }
#imageBoxInside { width: 10000px; } #imageBox img { float: left; padding: 0px; margin: 0px; }
#imageBox br { clear: both; }
#controls img { border: 0; }
</style>
<script>
function moveToPrevious(){
new Effect.Move('imageBoxInside', { x: 180, y: 0, transition: Effect.Transitions.sinoidal });
}
function moveToNext(){
new Effect.Move('imageBoxInside', { x: -180, y: 0, transition: Effect.Transitions.sinoidal });
}
</script>
</head>
<body>
<div id="container">
<div id="imageBox">
<div id="imageBoxInside">
<img src="C:/Users/L33508/Desktop/Images/sauce.jpg" />
<img src="C:/Users/L33508/Desktop/Images/fish.jpg" />
<img src="C:/Users/L33508/Desktop/Images/pizza.jpg" />
<img src="C:/Users/L33508/Desktop/Images/noodles.jpg" />
<img src="C:/Users/L33508/Desktop/Images/cover.jpg" />
<img src="C:/Users/L33508/Desktop/Images/hotdog.jpg" />
<br/>
</div>
</div>
<div id="controls">
<a href="javascript:void(0);" onclick="moveToPrevious(); return true;"><img src="C:/Users/L33508/Pictures/left_arrow.jpg"/></a>
<a href="javascript:void(0);" onclick="moveToNext(); return true;"><img src="C:/Users/L33508/Pictures/right_arrow.jpg"/></a>
</div>
<div>
</body>
</html>
into this one shown he Code: <%@ Page Language="vb" AutoEventWireup="false" MasterPageFile="~/MasterPage.Master" CodeBehind="PeranakanMain.aspx.vb" Inherits="Peranakan_SG.PeranakanMain"
title="" %>
<asp:Content ID="Content1" ContentPlaceHolderID="HeadContent" runat="server">
<script type="text/javascript">
function addSymbol(){
var map=OneMap.map;
if(map.getLayer("symbolLayer")==null){
map.addLayer(gLayer);
//dojo.connect(omap.map.infoWindow, "onShow", setInfoContent);
map.infoWindow.resize(525,252);
map.infoWindow.setFixedAnchor(esri.dijit.InfoWindow.ANCHOR_UPPERRIGHT);
}
gLayer.clear();
alert("Do you know where Peranakan food can be found?? Take a look here!!!!");
var stX = "23319.3347409758";
var stY = "28825.7191286444";
var pt= new esri.geometry.Point(stX,stY,map.spatialReference);
//var strImage = "http://www.rw-designer.com/i/download48b.png";
var strImage = "images/museum.png";
var symbol = new esri.symbol.PictureMarkerSymbol(strImage, 25,25);
var attr = {"PlaceName":"Peranakan musem of Singapore","PlaceAddr":"addr"};
var infoTemplate = new esri.InfoTemplate();
infoTemplate.setTitle("Building Name:");
infoTemplate.setContent(getInfoContent);
var graphic = new esri.Graphic(pt,symbol,attr,infoTemplate);
gLayer.add(graphic);
}
function setInfoContent(){
infoWindow.setContent(getInfoContent());
}
function getInfoContent(graphic){
var bc = new dijit.layout.BorderContainer({style: "font-size: 11pt; height: 520px; width:493px; background: #CCFFFF;"});
var c1 = new dijit.layout.ContentPane({
region: "top",
style: "height: 20px width: 100%",
content: "hello Peranakan!! Here is a brief description"
});
bc.addChild(c1);
//make a tab container
var tc = new dijit.layout.TabContainer({
region: "center",
style: "height: 65%; width: 100%; "
}, dojo.create("div"));
//display attribute information
var cp1 = new dijit.layout.ContentPane({
//style: " background-color: red; ",
title: "<font color= #E4287C><b>1900 - 1930</font> ",
content: "<table><tr><td>Images <u>(add image)</u></td></tr></table><table><tr><td><img src='images/left_arrow.jpg'/></td><td><img src='images/batik_heritage1.jpg'/></td><td><img src='images/batik_heritage2.jpg'/></td><td><img src='images/batik_heritage3.jpg'/></td><td><img src='images/right_arrow.jpg'/></td></tr></table>"
});
tc.addChild(cp1);
var cp2 = new dijit.layout.ContentPane({
title: "<font color= #E4287C><b>1931 - 1960</b></font>",
content: "<table><tr><td>Events <u>(add event)</u></td></tr></table><table width= 400 height = 120 ><tr><td width=150><a href='childpage1.htm' rel="nofollow" target='foo'>1970</a><br/><a href='childpage2.htm' rel="nofollow" target='foo'>1980</a></td><td><img src='images/timelineImg.jpg'/><td><iframe src='childpage1.htm' width='350' height='150' font-size='10pt' name='foo'></iframe></td></tr></table>"
});
tc.addChild(cp2);
var cp3 = new dijit.layout.ContentPane({
//style: " background-color: red; ",
title: "<font color= #E4287C><b>1961 - 1990</b></font> ",
content: "<table><tr><td>Links <u>(add link)</u></td></tr><tr><td><a href = 'http://peranakan.org.sg/'>Peranakan Association</a></td></tr><tr><td><a href='http://www.google.com.sg'>Google</a></td></tr></table>"
});
tc.addChild(cp3);
var cp4 = new dijit.layout.ContentPane({
//style: " background-color: red; ",
title: "<font color= #E4287C><b>1990 - 2011</b></font> ",
content: "<table><tr><td>Images <u>(add image)</u></td></tr></table><table><tr><td><img src='images/left_arrow.jpg'/></td><td><img src='images/batik_heritage1.jpg'/></td><td><img src='images/batik_heritage2.jpg'/></td><td><img src='images/batik_heritage3.jpg'/></td><td><img src='images/right_arrow.jpg'/></td></tr></table><br/><table><tr><td>Events <u>(add event)</u></td></tr></table><table width= 400 height = 120 ><tr><td width=150><a href='childpage1.htm' rel="nofollow" target='foo'>1970</a><br/><a href='childpage2.htm' rel="nofollow" target='foo'>1980</a></td><td><img src='images/timelineImg.jpg'/><td><iframe src='childpage1.htm' width='350' height='150' font-size='10pt' name='foo'></iframe></td></tr></table><br/><table><tr><td>Links <u>(add link)</u></td></tr><tr><td><a href = 'http://peranakan.org.sg/'>Peranakan Association</a></td></tr><tr><td><a href='http://www.google.com.sg'>Google</a></td></tr></table>"
});
tc.addChild(cp4);
bc.addChild(tc);
return bc.domNode;
}
dojo.addOnLoad(addSymbol);
</script>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="NavigationContent" runat="server">
</asp:Content>
<asp:Content ID="Content3" ContentPlaceHolderID="MainContent" runat="server">
<div dojotype="dijit.layout.BorderContainer" design="headline" gutters="false"
style="width: 955px; height: 490px; margin: 0 0 0 0px;">
<div id="map" dojotype="dijit.layout.ContentPane" region="center" position=""
style="height: 498px; width: 1004px; margin-left: 63px;" ></div>
</div>
</div>
</asp:Content>
I'm still new & learning, any kind souls willing to help me out? P.S. When I insert the 2 script sources from the first sample into the second, my icon on the map disappears! Any idea why too? Based on a selected country and date a list of results will show up on the map. The placements of markers with html data in them works fine, the problem I have is handling the cases with duplicate markers. I found a way to check for duplicate ones, but I would like to be able to modify the content in the infowindow of the one already present. So that I can add the content of the duplicate marker to the existing marker that stands in the same location. The problem I'm having is that I can't find the right way to access the data in the existing infowindow for the duplicate one. If I do alert(infoWindow.getContent());, then I just get "undefined". I also tried markers[i].getContent(), but that also didn't do anything. Any idea's, or suggestion on how I can access the infowindows of previously added markers, get their content with getContent(), and add the data of the duplicate one to it? Code:
var marker = new google.maps.Marker({
map: map,
position: latlng
});
for (var i=0; i<markers.length; i++) {
if (markers[i].getPosition().equals(marker.getPosition())) {
alert('duplicate found');
alert(infoWindow.getContent());
} else {
google.maps.event.addListener(marker, 'click', function() {
infoWindow.setContent(html);
infoWindow.open(map, marker);
});
}
}
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; }
I am well versed in ActionScript and I have done a lot of this already in As3.0 using XML Node Object. However my client wants this application to be more friendly with iphones/ipads. So we are going to have to restart this and go with Javascript which we know very little about. Basically the internet application is going to be a 'Build your own Itinerary' for a huge rock event, where we have to sort each band selected by the user based on [Date:4th or 5th of July] and [Time Playing]. Those are the only two nodes we need to check, the [date] is obviously going to split it into two groups, and the [Time] is when the band is playing in that group and there will need to be an if/then to check for conflicts. other nodes like [Name] would be used to just add each of the bands selected to that list with .append() I guess. And [Stage] is a somewhat irrelevant node stored and displayed with each item. So. In the professional opinion of those on this board... Where is a good place for a group of 'AS3.0 wise guy hacks' to start cracking at this with JavaScript? What would you suggest for rookies like us making an emergency jump to HTML/Javascript? Thanks so much in advance for the assistance. Hi im wanting to know how does the computer know whos scored more in a game? Thanks, Paul Hello I need to do a portfolio of paintings and i found a site similar of what i have in mind. The site is http://www.pikaboo.be/ It's great because its using javascript only. I just don't know how to start my reserach for that transitions and moving objects and that stuff Anyone can give me a few tips on how to start? I have been looking at jquery and mootools it does some stuff taht it's on this site but the movement of objects and the way as they appear on the screen one by one and all that pretty stuff i have no idea how to search. Anyone can help me on where to start and how to do something like this? THank you 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 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?
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 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);
}
......................
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. All I Want To Make Happen Is That If You Drag and Drop A Div Into A Table An Action Happens
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> I read somewhere (I think from Douglas Crockford) that void is a completely useless operator. What is its actual purpose? Is there anything it's good for? I see lots of javascript:void(0) hyperlinks all over the place. From what I gather, it just disables the link's default behavior...buy why not just make the href="#" or return false from an onClick handler? Can anyone enlighten me? Hey, I was wondering if it is possible to make an image change whenever an anchorpoint on my page reaches the center or the side of the screen... Thanks for your help! Hello all, How to set decimal point in javascript ? e.g. var num1=23.12345; I want output as 23.12 How can i do this ? Please, guide me. Thanks Hi, I am currently working in mail client project. The mails are displayed in the html table. I have an requirement to drag and drop the mails from the Inbox to another folder. Can you please suggest how to proceed with this. Thanks in advance. Regards, Anne. Hi everyone I am having a bit of trouble with a question that I have been given for my Javascript assignment. I was given a web page with a series of boxes (created by <div> tags) which could be dragged and dropped anywhere on the web page, and they were dragged by holding the mouse down and dragging, and released when the mouse button was released. The web page can be viewed at http://adamr.hitwebs.net/dragDropOriginal.html and the source can be viewed at http://adamr.hitwebs.net/dragDropOriginal.js. The assignment was to make any other element drag-and-droppable, so I chose to make a jigsaw puzzle and hence make images drag-and-droppable, but with minimal changes to the script (simply changing the class name and id of my images), the dragging and dropping process is visually very different (the images appear to "stick" to the cursor on mouse up, and you have to actually click a second time to drop the image). Can someone please help me to fix this so that the drag and drop looks like what the boxes did (an example of what I want is exactly how the smiley faces are dragged-and-dropped at http://elouai.com/javascript-drag-and-drop.php). My jigsaw puzzle can be viewed at http://adamr.hitwebs.net/drag&Drop.html and the source can be downloaded from http://adamr.hitwebs.net/dragDrop.js. As you will see, apart from the large sections of script that I added, I only changed about two or three words of the original script, and it stopped working properly as soon as I started using images, which was long before I made my own additions to the script. Also note that there are A LOT of comments in my code because this is an assignment, and I have to note every change that I made to the original code, as well as put explanatory comments in my own code. P.S. Please don't tell me to use the script on the smiley face web page that I have provided, as this would not be useful to me. I must amend the script that I was originally given with the boxes. As for the assignment, I have checked this with the teacher, and I will not lose any marks for the terrible drag-and-drop effect as it does not appear to be my fault. This post is purely for my curiosity and because I hate not being able to solve a problem, and to me, this is a problem. Thanks heaps, - Adam |
|||||||