PDA

View Full Version : make a link on element click



jundo12
02-12-2016, 01:28 AM
when a widget is clicked, an alert box pops up with the name of a map location in it.
i'd prefer the widget click event to instead go to a link, based on where on the map the widget is located (for example, paris widget click goes to a page about paris). since there's more than one widget location on the map, i need to be able to add more than one link. this first code is from the .js file that deals with what any widget does when you click it (alert pop-up box with a name). but there's also a second .js file that allows you to modify what the alert box of each clicked widget says, so i'm guessing that might be where the actual links would go. this first code is the overall coding. and the second code is the individual alerts.


var $elem = $('<div class="location"></div>');
$elem.appendTo(widget.options.locationsElement);
$elem.click(function() {
alert('Clicked on ' + location.name);

});
location.$element = $elem;
},
onShowLocation: function(location, x, y) {
location.$element.show();
},
onRefreshLocation: function(location, x, y) {
//console.log(x, y);
location.$element.css({
left: x,
top: y
});


var locations = {
obj1: {
alpha: Math.PI / 4,
delta: 0,
name: 'location 1'

},
obj2: {
alpha: 1 * Math.PI / 4,
delta: -2 * Math.PI / 4,
name: 'location 2'
},

jscheuer1
02-17-2016, 07:14 PM
Doesn't really look like there's enough code there to actually do anything. And in fact the first bit of code has a closing brace (highlighted red in the below copy of the code) for which there is no corresponding opening brace. This means either something got left out, or that there's a typo, maybe both.


var $elem = $('<div class="location"></div>');
$elem.appendTo(widget.options.locationsElement);
$elem.click(function() {
alert('Clicked on ' + location.name);

});
location.$element = $elem;
},
onShowLocation: function(location, x, y) {
location.$element.show();
},
onRefreshLocation: function(location, x, y) {
//console.log(x, y);
location.$element.css({
left: x,
top: y
});

In any case, with something like this, it would probably be best if you gave us a link to it so we could have a look.

jundo12
02-17-2016, 09:19 PM
oh here it is!
http://sebastien.drouyer.com/jquery.earth-3d/
how ya doing? haven't seen you on here in awhile

i noticed also when i put a div over the canvas, the texture on the planet disappeared in chrome but not in firefox. chrome doesn't seem to like that there's a z-indexed div over the canvas.

jscheuer1
02-18-2016, 06:59 PM
OK, well say, make up a page that's named the same thing as the location. Make one for each location, example with what you have:

location 1.htm
location 2.htm

etc. Then in the code where it has:


alert('Clicked on ' + location.name);

change that to:


window.location.href = location.name + '.htm';

Now, that might be inconvenient. If so, you can configure a page right with the locations, like here (addition red):


var locations = {
obj1: {
alpha: Math.PI / 4,
delta: 0,
page: 'paris.htm',
name: 'location 1'
},
obj2: {
alpha: 1 * Math.PI / 4,
delta: -2 * M . . .

Do this with each location, and make up that corresponding page for each one. Now instead of switching the alert to:


window.location.href = location.name + '.htm';

make it:


window.location.href = location.page;

and it will go to (in the above case) paris.htm

That's about all I can tell you on that. Can't get the thing thing working well enough to comment on the Chrome browser issue you mentioned. But this answers the first question. Perhaps with this you will not need to overlay the canvas. That's a bad idea generally as, although canvas acts in as many respects as possible like an image, it doesn't always and the differences among browsers can be dramatic. Also, if you do cover the canvas, you can expect that clicks to it might no longer register at all. Oh, and a div is sometimes seen as opaque, sometimes not, regardless as to whether or not there's any background, or anything in it, other factors.

If you don't want every location to have a page, we can use this second method along with a test to see whether or not the location has a page configured for it to decide what to do. But, unless that becomes necessary, let's leave it at this for now.

Something to pay attention to perhaps is that depending upon which example you are using there are two locations objects, one used with:

examples['locations']

and one used with:

examples['flights']

I think they're the same, or roughly the same. The thing is that the data from one is used when only locations are seen on the globe, and the other (flights) is used when both the locations and the flights are shown. If using both examples, and also using the second method I just proposed, then both objects must have these updated pages added to them. Well a universal locations object could be used, but that would take a slightly different approach than already employed in the demo.js file.

jundo12
02-19-2016, 04:26 PM
wow john, thanks! that was so thorough!

the overlay on the canvas is actually an image for the game that acts as a ship interior with a window thru which the spinning earth can be seen, in one example, and the other, a ship interior in which the spinning globe is hovering above a sort of holographic generator. since i don't know canvas, i opted to display the image overlays in a z-indexed div. i've read that it will and won't work if i use negative z-index for the canvas lol. browsers change over time and mess up browser game codes all the time. i actually have one of the spinning globes inside an iframe and the page the iframe is embedded in, is the page with the overlay.

i'm using only locations. i opted to not use flights.

jundo12
02-19-2016, 04:49 PM
p.s. how do i tie the individual unique links to the individual widgets? for example, i have 3 locations, each identified by that circular white widget floating above it. how would i make it so each individual location widget click, had the correct link tied to it ? i notice you had it listed as location 1 for the paris example and i could make additional examples for each one but how do i know they are corresponding to the correct widget click? just trial and error perhaps? and do i copy that javascript snippet:

var locations = {
obj1: {
alpha: Math.PI / 4,
delta: 0,
page: 'paris.htm',
name: 'location 1'
},
obj2: {
alpha: 1 * Math.PI / 4,
delta: -2 * M . . .

each time i want to add a new link location?

oh wait, i see it. you're adding new objects. woot, will give it a try

jscheuer1
02-19-2016, 06:10 PM
The problem with your overlay MIGHT be able to be solved by using 2 or more absolutely positioned divisions as a sort of frame around where the canvas action is taking place. No one of these need be directly over the canvas, each could contain as a background image or as a contained image a part of the framing decoration/image.

As to the coding, in the demo.js, before anything was done, for the locations only example we see:


examples['locations'] = function() {
/* defining locations to display.
Each position must have a key, an alpha and delta position (or x and y if you want to display a static location).
Any additional key can be reached via callbacks functions.
*/
var locations = {
obj1: {
alpha: Math.PI / 4,
delta: 0,
name: 'location 1'
},
obj2: {
alpha: 1 * Math.PI / 4,
delta: -2 * Math.PI / 4,
name: 'location 2'
},
obj3: {
alpha: 2 * Math.PI / 4,
delta: 0,
name: 'location 3'
},
obj4: {
alpha: 3 * Math.PI / 4,
delta: 3 * Math.PI / 4,
name: 'location 4'
},
obj5: {
alpha: 2.2 * Math.PI / 4,
delta: -1.1 * Math.PI / 4,
name: 'location 5'
}
};
$('#sphere').earth3d({
locationsElement: $('#locations'),
dragElement: $('#locations'), // where do we catch the mouse drag
locations: locations
});
};

The highlighted is what is known as a javascript object. It's a construct like a string or an array that can be used to hold data in a particular format for later retrieval. Each individual location (in the above, I've made the second one red) is itself also an object. Each of these locations currently has defined an alpha and a delta, these are their coordinates on the sphere, like longitude and latitude, and are required to tell the main code where to put each one. They each also have a name, like 'location 3'. That's arbitrary, and is used by the other code just to alert the name, perhaps something else, but in any case, it could be 'Bob' or 'xlax', anything you like, but probably should be unique to that set of alpha and delta coordinates. Now, each time one of these is clicked on, it sets off the click handler which was an alert, but which we can change to be any legal javascript command or set of such commands. We had already edited that to change to a page instead of alert. The click handler has available to it the information in the object for that location and can use any of those values for anything it is going to do. There are already 5 locations in the object, we can give them each pages and/or change their names. Now location 1 looks like it's actually in Texas, maybe Houston, 2 is in North Africa, maybe Oran in Algeria, so we could do:


var locations = {
obj1: {
alpha: Math.PI / 4,
delta: 0,
page: 'houston.htm',
name: 'location 1'
},
obj2: {
alpha: 1 * Math.PI / 4,
delta: -2 * Math.PI / 4,
page: 'oran.htm',
name: 'location 2'
},
obj3: {
alpha: 2 * Math.PI / 4,
delta: 0,
name: 'location 3'
},
obj4: {
alpha: 3 * Math.PI / 4,
delta: 3 * Math.PI / 4,
name: 'location 4'
},
obj5: {
alpha: 2.2 * Math.PI / 4,
delta: -1.1 * Math.PI / 4,
name: 'location 5'
}
};

This should be done with each of the other locations, or else they should be removed from the object, or altered to be geographically somewhere else (by changing their alpha and delta), and given a page that corresponds to that locale. Once you have all five defined (did my best, just quickly from mind or a glance at a map):


var locations = {
obj1: {
alpha: Math.PI / 4,
delta: 0,
page: 'houston.htm',
name: 'location 1'
},
obj2: {
alpha: 1 * Math.PI / 4,
delta: -2 * Math.PI / 4,
page: 'oran.htm',
name: 'location 2'
},
obj3: {
alpha: 2 * Math.PI / 4,
delta: 0,
page: 'santacruz.htm',
name: 'location 3'
},
obj4: {
alpha: 3 * Math.PI / 4,
delta: 3 * Math.PI / 4,
page: 'melborne.htm',
name: 'location 4'
},
obj5: {
alpha: 2.2 * Math.PI / 4,
delta: -1.1 * Math.PI / 4,
page: 'natal.htm',
name: 'location 5'
}
};

If you want more, you will have to add them using the same format:


var locations = {
obj1: {
alpha: Math.PI / 4,
delta: 0,
page: 'houston.htm',
name: 'location 1'
},
obj2: {
alpha: 1 * Math.PI / 4,
delta: -2 * Math.PI / 4,
page: 'oran.htm',
name: 'location 2'
},
obj3: {
alpha: 2 * Math.PI / 4,
delta: 0,
page: 'santacruz.htm',
name: 'location 3'
},
obj4: {
alpha: 3 * Math.PI / 4,
delta: 3 * Math.PI / 4,
page: 'melborne.htm',
name: 'location 4'
},
obj5: {
alpha: 2.2 * Math.PI / 4,
delta: -1.1 * Math.PI / 4,
page: 'natal.htm',
name: 'location 5'
},
obj6: {
alpha: 1 * Math.PI / 4,
delta: -1.1 * Math.PI / 4,
page: 'midatlantic.htm',
name: 'location 6'
}
};

That ended up in the middle of the Atlantic, some trial and error may be required to learn the coordinate system, but I think you get the idea.

jundo12
02-20-2016, 09:04 PM
thanks so much, john. learn more from you than any instructional manuals!