Minimal CSS

Last updated: December 6, 2006

Updating list of CSS resources.

Color

Design Templates

Design Showcases & Galleries

Fonts & Typography

Forms

Layouts

Lists

Menus

Positioning

Selectors

Tables

Tips & Resources

Tools

Minimal CSS Read More »

Multiple Versions of Internet Explorer on Windows

Multiple IE'sFor web development testing purposes it would be very handy to have multiple verisions of Internet Explorer (IE) on Windows. Luckily it is possible.

It is possible to run multible versions of Internet Explorer in standalone mode. First Joe Maddalone introduced this in Multiple Version of IE in Windows XP Pro. Manfred Staudinger perfected the standalone versions in Taming Your Multiple IE Standalones by adding IE version numbers to the title bar of the standalone browser window.

Now there are two options to install different versions. You can download readily packaged versions separately from Evolt’s archive. You just have to unzip the packages into your hard drive. Or you can use TredoSoft’s installer which contains IE3 IE4.01 IE5 IE5.5 and IE6.

Multiple Versions of Internet Explorer on Windows Read More »

AlexaRadar – Movers And Shakers by Country

AlexaRadarAlexaRadar’s Fast Traffic is an automatically generated listing of websites getting rapid increase of daily reach in a given geographic area.

AlexaRadar is a great way to have a live view and the trends of the web. Visually most interesting part is AlexaRadar’s Worf Map of Innovation. It plots the movers and shakers on the world map by using the Google Maps API and Amazon Web Services API. Map markers show Alexa traffic graph of that site.

Including World of Innovation AlexaRadar offers four different views of traffic:

  • Movers & Shakers by Country – Fastest growing traffic
  • Fast Growth Matrix – 76 Countries x 5 Websites
  • Daily Reach Comparison Chart – Top 5 Websites
  • World Map of Innovation – See where websites grow

Get side-by-side web traffice comparisons. Analyzes 5-year Alexa Traffic Charts to find websites showing steady growth of daily reach, and categorizes them by country and region. Useful. 5 stars out of 5. — ProgrammableWeb

AlexaRadar is developed by Viktors Rotanovs and it started in September 2006.

AlexaRadar – Movers And Shakers by Country Read More »

Firefox 2 Is Here

Firefox 2Mozilla has released earlier than expected final version of Firefox 2.

Just a couple days after Microsoft released Internet Explorer 7, Firefox releases Firefox 2. As Ars Technica notes, it is available earlier than expected as a ftp download.

Firefox 2 offers some visual and usability improvements, like enhanced search capabilities and improved tabbed browsing, and some useful new features like built-in phishing protection, inline spell checking, browsing session resuming. The Session Restore feature restores windows, tabs, text typed in forms, and in-progress downloads from the last user session. It will be activated automatically when installing an application update or extension, and users will be asked if they want to resume their previous session after a system crash.

Firefox 3 is planned for May 2007.

Firefox 2 Is Here Read More »

Fullscreen Slideshow With Flickr AutoDownloadr

Flickr AutoDownloadrWhile Flickr is lackin the fullscreen slideshow, luckily there are other programs to do that.

Flickr’s own slideshow is fine, but it definately lacks the fullscreen option. It is quite a diffrence between 500 pix and fullscreen slideshow. After noticing that Safari is having a plug in for that (Windows version coming soon) and browsing through the Flickr Tools, there seems to be some web page services and programs to replace this lack. One of them is Flickr AutoDownloadr.

Being a Windows desktop program Flickr AutoDownloadr does a pretty good job as a online service’s “add on”. It downloads the selected fotos to your computer and and displays them as a windowed or fullscreen slideshow. You can select one users or everyones potos by dates, tags, favourites, set and groups and order them as you like. The best thing is that you can make a shortcut to open almost any open page on Flickr as a slideshow. You can also use the program to download photos to your computer without showing slideshow.

Downloading and installing the program is straitforward and the user interface looks clear. Running the program first time it asks if you want to associate the ‘flickrss’ protocol with this program. You’d better to answer yes in order to be able to use the clever option to open the slideshow from the Flickr web page. All you have to do is to bookmark the following link in your web browser: javascript:void(location.href=’flickrss:’+location.href).

Now when you navigate to a page on Flickr and then select this bookmark, those photos will be displayed in a fullscreen slideshow. Slideshow opened this way uses the program settings from last time. Flickr AutoDownloadr can be also used from the command line.

Being an excellent program, there where also some problems during the test run. Sometimes some couldn’t be seen in a slideshow and program only showed the error message: Failed to set image to… Actually selecting sets did this every time. There could also be a button to just save the settings without starting a slideshow.

But anyway, while Flickr is lacking the fullscreen slideshow, this program is an excellent replace for that. And here is the tip: Chage the photo quality setting to high, go to Flickr Last 7 Days Interesting page and start the fullscreen slideshow from the bookmark, sit back and enjoy the show…

Fullscreen Slideshow With Flickr AutoDownloadr Read More »

Minimal How to Use Google Maps API With PHP

Google MapsThe goal of this how to is to easily add multiple markes into the map on your own site using Google Maps API and PHP.

Google Maps API key

  1. If you don’t already have, sign up for the Google Account.
  2. Sign up for the Google Maps API key. Read at least the higlights from the Google Maps API terms. Sign up for your site, forexample http://www.mysite.com/

After sign up you’ll get your key and an example html code. If you lost your key anytime, you can sign up again for the same site and use a new key. You can also sign up for multiple sites keys if needed. You’ll get different key for each site.

JavaScript

To add multiple markers on your map we’ll use some basic PHP code. Google’s example code is a good starting point for this:

<!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">
  <head>
    <meta http-equiv="content-type" content="text/html;
    charset=utf-8"/>
    <title>Google Maps JavaScript API Example</title>
    <script src="http://maps.google.com/maps?
      file=api&amp;v=2&amp;key=ABCDEFGH..."
      type="text/javascript"></script>
    <script type="text/javascript">
    //<![CDATA[
    function load() {
      if (GBrowserIsCompatible()) {
        var map = new GMap2(
        document.getElementById("map"));
        map.setCenter(
        new GLatLng(37.4419, -122.1419), 13);
      }
    }
    //]]>
    </script>
  </head>
  <body onload="load()" onunload="GUnload()">
    <div id="map"
    style="width: 500px; height: 300px"></div>
  </body>
</html>

You have your API key on the html head and JavaScript to load on page load and div element to show the map. With map.setCenter(new GLatLng(37.4419, -122.1419), 13) you define the map’s center point and the zoom level. Here is an example.

To have some controls in the map, add this line into JavaScript load funtion:

map.addControl(new GSmallMapControl());

Add this JavaScript function to make markers:

function createMarker(point, text, title) {
  var marker = new GMarker(point,{title:title});
  GEvent.addListener(marker, "click", function() {
    marker.openInfoWindowHtml(text);
  });
  return marker;
}

Add marker with this code:

var marker = createMarker(
new GLatLng(37.4419, -122.1419),
'Marker text', 'Example Title text');
map.addOverlay(marker);

Note that you can add in the markers any html code like links and images for example. So, the code looks now like this:

<!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">
  <head>
    <meta http-equiv="content-type" content="text/html;
    charset=utf-8"/>
    <title>Google Maps JavaScript API Example</title>
    <script src="http://maps.google.com/maps?
      file=api&amp;v=2&amp;key=ABCDEFGH..."
      type="text/javascript"></script>
    <script type="text/javascript">
    //<![CDATA[
    function load() {
      if (GBrowserIsCompatible()) {
        var map = new GMap2(
        document.getElementById("map"));
        map.addControl(new GSmallMapControl());
        map.setCenter(
        new GLatLng(37.4419, -122.1419), 13);
        function createMarker(point, text, title) {
          var marker =
          new GMarker(point,{title:title});
          GEvent.addListener(
          marker, "click", function() {
            marker.openInfoWindowHtml(text);
          });
          return marker;
        }
        var marker = createMarker(
        new GLatLng(37.4419, -122.1419),
        'Marker text', 'Example Title text');
        map.addOverlay(marker);
      }
    }
    //]]>
    </script>
  </head>
  <body onload="load()" onunload="GUnload()">
    <div id="map"
    style="width: 500px; height: 300px"></div>
  </body>
</html>

Here is an example.

PHP

In order to add multiple markes, we’ll use some PHP to iterate over some marker points. Let’s use an array in this example, but you could get the marker points for example from database or xml file. Put the following lines around marker adding lines:

<?php
$points = Array(1 => "37.4389, -122.1389",
2 => "37.4419, -122.1419",
3 => "37.4449, -122.1449");
foreach ($points as $key => $point) {
?>
var marker = createMarker(
new GLatLng(<?php echo $point ?>),
'Marker text <?php echo $key ?>',
'Example Title text <?php echo $key ?>');
map.addOverlay(marker);
<?php } ?>

And here is the final 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">
  <head>
    <meta http-equiv="content-type" content="text/html;
    charset=utf-8"/>
    <title>Google Maps JavaScript API Example</title>
    <script src="http://maps.google.com/maps?
      file=api&amp;v=2&amp;key=ABCDEFGH..."
      type="text/javascript"></script>
    <script type="text/javascript">
    //<![CDATA[
    function load() {
      if (GBrowserIsCompatible()) {
        var map = new GMap2(
        document.getElementById("map"));
        map.addControl(new GSmallMapControl());
        map.setCenter(
        new GLatLng(37.4419, -122.1419), 13);
        function createMarker(point, text, title) {
          var marker =
          new GMarker(point,{title:title});
          GEvent.addListener(
          marker, "click", function() {
            marker.openInfoWindowHtml(text);
          });
          return marker;
        }
        <?php
        $points = Array(
        1 => "37.4389, -122.1389",
        2 => "37.4419, -122.1419",
        3 => "37.4449, -122.1449");
        foreach ($points as $key => $point) {
        ?>
        var marker = createMarker(
        new GLatLng(<?php echo $point ?>),
        'Marker text <?php echo $key ?>',
        'Example Title text <?php echo $key ?>');
        map.addOverlay(marker);
        <?php } ?>
      }
    }
    //]]>
    </script>
  </head>
  <body onload="load()" onunload="GUnload()">
    <div id="map"
    style="width: 500px; height: 300px"></div>
  </body>
</html>

And here is the final example.

If you have let’s say hundereds or thousands and more markers in your map, you might want to give a try to Clusterer. It is an excellent and easy to use JavaScript library by Jef Poskanzer.

This how to showed only very basic usage of Google Maps API. To learn more Google Maps API has a good documentation and Mike has many excellent examples of the basics and more andvanced stuff.

Minimal How to Use Google Maps API With PHP Read More »

Scroll to Top