I wrote my first computer program in a data processing class at Merritt College in Oakland, CA, taught by Mr. Wilson Price, in 1969. It was in Fortran and I was hooked.
Over the years I’ve learned many more computer languages, some of which I made a great living with, and there always seemed to come a point in the process where I ended up developing techniques that made the language logical and simple.
That’s happened recently in my long web coding learning process involving HTML, CSS, Javascript, JQuery and PHP, and it’s very cool so I thought I would share it here.
The normal way to approach an interactive app is to define elements in HTML, give them a name in the form of an ID, define the visual properties of each ID using CSS and then determine what actions to take with each using Javascript and JQuery.
I won’t dwell on my old way of doing this here, instead I’d like to show you how I do it now, so let’s dive right in!
First we define the elements in the HTML page:
div class="tool" data-switch="g" data-title="GeoSearch On/Off">GeoSearch
div class="tool" data-switch="s" data-title="Satellite View">Satellite
div class="tool" data-switch="m" data-title="Google Map">Google Map
div class="tool" data-switch="w" data-title="Current Weather">Weather
The tool class provides a means to handle each one using JQuery and the data-switch and data-title are HTML5 attributes that you can access with javascript, like this:
$('.tool').on("mouseenter", function() {
tooltip.html( $(this).data('title') ) // Set tooltip content
tooltip.show(); // Activate tooltip
// Whatever else you need on mouseenter...
}).on("mousemove", function(e) {
tooltip.css({ // Handle tooltip position as the user moves his mouse
top: e.pageY - top: e.pageY - Math.round((th2.height()/2)+5),
left: e.pageX - (container.width()-274)
});
}).on("mouseout", function(){
tooltip.hide();
}).on("click", function() {
tooltip.hide();
switch( $(this).data('switch') ) {
case "g":
... Geosearch on/off code here
break;
case "s":
... Satellite view code here
break;
case "m":
... Google map code here
break;
case "w":
... Current weather code here
break;
default:
}
});
This is my new code magic and I plan on using it from now on. Obviously the tooltip needs CSS styling and other stuff but hopefully you can get how it works.
btw… My new app that puts it all to work is called GLHip.