Date: 03/27/10     Keywords: php, browser, html, google

I have a php script that is generating a page with Google maps on it. I've extracted the html and placed it here.


The code I'm trying to figure out is in the initialize function. When the user right clicks on the map, it places a marker there. I've got that working.

What I want to do next is if the user right clicks on another spot, the first marker is removed and a new marker is put into place. What I've got right now doesn't look like it realizes that a marker has already been created.

Here's the code I'm working on:

function initialize() {
if (GBrowserIsCompatible()) {

var map0 = new GMap2(document.getElementById("map_canvas_0"));
map0.setCenter(new GLatLng(31.25044240, -99.25060610), 6);
map0.setUIToDefault();
GEvent.addListener(map0,"singlerightclick", function(point, src, overlay){
var cur_ll = map0.fromContainerPixelToLatLng(point);
if (typeof map_marker0 != "undefined" )
{
removeOverlay(map_marker0)
alert("there's already one marker out there!");
}
var map_marker0 = map0.addOverlay(new GMarker(cur_ll, {draggable: true}));
} );


Also, the listener function for the event is inline because that's how their example is - is it possible to put this function outside of the addListener call?

Source: http://javascript.livejournal.com/170691.html

Date: 03/27/10     Keywords: php, browser, html, google

I have a php script that is generating a page with Google maps on it. I've extracted the html and placed it here.


The code I'm trying to figure out is in the initialize function. When the user right clicks on the map, it places a marker there. I've got that working.

What I want to do next is if the user right clicks on another spot, the first marker is removed and a new marker is put into place. What I've got right now doesn't look like it realizes that a marker has already been created.

Here's the code I'm working on:

function initialize() {
if (GBrowserIsCompatible()) {

var map0 = new GMap2(document.getElementById("map_canvas_0"));
map0.setCenter(new GLatLng(31.25044240, -99.25060610), 6);
map0.setUIToDefault();
GEvent.addListener(map0,"singlerightclick", function(point, src, overlay){
var cur_ll = map0.fromContainerPixelToLatLng(point);
if (typeof map_marker0 != "undefined" )
{
removeOverlay(map_marker0)
alert("there's already one marker out there!");
}
var map_marker0 = map0.addOverlay(new GMarker(cur_ll, {draggable: true}));
} );


Also, the listener function for the event is inline because that's how their example is - is it possible to put this function outside of the addListener call?

Source: https://javascript.livejournal.com/170691.html

Date: 03/10/10     Keywords: java

Hi there!
I need to write some kind of advanced flowchart editor in javascript.  Frankly, I am weak in javascript, so I'm searching for help :) 

I thought of using SVG for graphics and JQuery.svg as support in coding... But still have some troubles.

Maybee you have some examples of realizing flowchart editor (or some kind of graph editor) in javascript? It would really help!
Any kind of algorithms description is welcome too! I mean algorithms of flowchart//graph viewing, not working with data.

p.s.
sorry for bad english :)

Source: http://javascript.livejournal.com/170332.html

Date: 03/10/10     Keywords: java

Hi there!
I need to write some kind of advanced flowchart editor in javascript.  Frankly, I am weak in javascript, so I'm searching for help :) 

I thought of using SVG for graphics and JQuery.svg as support in coding... But still have some troubles.

Maybee you have some examples of realizing flowchart editor (or some kind of graph editor) in javascript? It would really help!
Any kind of algorithms description is welcome too! I mean algorithms of flowchart//graph viewing, not working with data.

p.s.
sorry for bad english :)

Source: https://javascript.livejournal.com/170332.html

Date: 03/02/10     Keywords: java, web

I'm writing my first class using Mootools, building off a class called Drag.Ghost [link] (which itself inherts from Drag.Move; Drag.Ghost -> Drag.Move -> Drag)

Since I want this to be reusable and multi-purpose, I want to define custom behaviors within the class itself rather than within each page which is the usual, idiomatic way. That is, I want to define the drag, drop, move, etc handlers within the class rather than pass them as parameters to an instance of the class

The problem is, I can't manage to set these handlers. They never fire at all (again, the class itself and the idiomatic way works fine)

My version of the class:

Drag.Ghost = new Class({ Extends: Drag.Move, Implements: [Options, Events], initialize: function(el, options) { this.parent(el); this.setOptions(options); }, ....standard code omitted. see link..... drag: function(event) { this.parent(event); }, drop: function(element, droppable, event) { console.log('dropped'); this.parent(event); }, enter: function(element, droppable){ console.log('entered'); this.parent(event); }, leave: function(element, droppable) { console.log('left'); this.parent(event); }

Drag fires, but drop, enter, and leave do not (adding a console.log call to drag produces a message in Firebug. The others do not)

Drag is an event of the base Drag class while drop, enter, and leave are events on Drag.Move, so I'm thinking that might have something to do with it.

I have plenty of experience with OOP and a fair bit with JS specifically, but I'm unclear how things work in Mootools yet. I didn't see any references to, say, needing to explicitly call the superclass, but there's apparently something wrong with this subclass preventing it from passing on events belonging to its direct parent. Or maybe not. I'm stumped.

And here's how I'm calling it in the document HEAD section (which I'm sure is unneeded, but sometimes I miss the simplest things...)

window.addEvent('domready', function() { //TEST: Make all items draggable $$('.rpgitem').each(function(item) { new Drag.Ghost(item, {'opacity': 0.4}); }); });

xpost: javascript webdesign

Source: http://javascript.livejournal.com/170196.html

Date: 03/02/10     Keywords: java, web

I'm writing my first class using Mootools, building off a class called Drag.Ghost [link] (which itself inherts from Drag.Move; Drag.Ghost -> Drag.Move -> Drag)

Since I want this to be reusable and multi-purpose, I want to define custom behaviors within the class itself rather than within each page which is the usual, idiomatic way. That is, I want to define the drag, drop, move, etc handlers within the class rather than pass them as parameters to an instance of the class

The problem is, I can't manage to set these handlers. They never fire at all (again, the class itself and the idiomatic way works fine)

My version of the class:

Drag.Ghost = new Class({ Extends: Drag.Move, Implements: [Options, Events], initialize: function(el, options) { this.parent(el); this.setOptions(options); }, ....standard code omitted. see link..... drag: function(event) { this.parent(event); }, drop: function(element, droppable, event) { console.log('dropped'); this.parent(event); }, enter: function(element, droppable){ console.log('entered'); this.parent(event); }, leave: function(element, droppable) { console.log('left'); this.parent(event); }

Drag fires, but drop, enter, and leave do not (adding a console.log call to drag produces a message in Firebug. The others do not)

Drag is an event of the base Drag class while drop, enter, and leave are events on Drag.Move, so I'm thinking that might have something to do with it.

I have plenty of experience with OOP and a fair bit with JS specifically, but I'm unclear how things work in Mootools yet. I didn't see any references to, say, needing to explicitly call the superclass, but there's apparently something wrong with this subclass preventing it from passing on events belonging to its direct parent. Or maybe not. I'm stumped.

And here's how I'm calling it in the document HEAD section (which I'm sure is unneeded, but sometimes I miss the simplest things...)

window.addEvent('domready', function() { //TEST: Make all items draggable $$('.rpgitem').each(function(item) { new Drag.Ghost(item, {'opacity': 0.4}); }); });

xpost: javascript webdesign

Source: https://javascript.livejournal.com/170196.html

Date: 01/27/10     Keywords: php, html

We have this little image gallery thing built with jquery. It fetches a page that selects some random images and writes some html, then updates the html in the image gallery container. It's supposed to work like this:

- button clicked
- fetch page
- data received
- old stuff fades out
- new stuff fades in

The images loaded are really big (they're coming from a photographer and we have no control over the file size), so what's happening is the "new stuff fades in," event is occurring while the images are still loading, and it looks kind of dumb. This is a simplified version that just loads one random image: