Category Archives: Javascript

How-to for Javascript

Setting Up Eclipse PDT with UniServer for PHP Development (Part 1 of 2)

Eclipse PDT, HTML5, Javascript, jQuery, mySQL, PHP

General Observations

Not the most convenient or intuitive IDE in the world, Eclipse is still a convenient IDE to use if you are not into spending big money on other developers … but, would like some very useful tools for development. If set up correctly, Eclipse PDT can help develop PHP projects with very useful debug options.

Some of the problems with Eclipse PDT include:

  • Setup can be a pain, it is definitely not load and go
  • Extra effort my be needed if you are not using Zend Server
  • You define your projects, but, deleting projects is a nuisance to do

I should mention, I am not an Eclipse expert. Definitely, it was a massive effort to hunt and peck my way through the installation. This article is to help me remember the process the next time I need to go through the process. It has a bit of rambling side information for those of you that find this articles and are curious why I have elected to do some of the setup that I do to use Eclipse. I hope it helps you too.

Preparation to use Eclipse PDT

To use Eclipse PDT, you must have the ability to run PHP. This implies the availability of a Server environment. Preparation suggests you install an AMP environment. In the case of this article, I have a WAMP environment.

I am developing on a WAMP environment; Windows, Apache, MySql & PHP. To maintain the database, I like using phpMyAdmin. To meet my needs for Apache and mySQL, I have tried using Zend Server.

Zend Server is an interesting, having lots of bells and whistles, but, I find that it is a pain to install phpMyAdmin on Zend Server hosted on Windows. Zend Server has a “simple” button press “deployment” of phpMyAdmin on their Zend Server, but, it fails in Windows. Notes around the internet indicate it works in Unix and Linux but, phpMyAdmin does not deploy conveniently on Windows at this time … true.

Even more inconvenient, uninstall of Zend Server does not do a complete uninstall. Zend Server installs IBM DB2 Server, but, does not remove it in the uninstall. This incomplete uninstall leaves the IBM DB server blocking access to port 3306 for other WAMP package installs. If you want to use port 3306, for the database servers with some other WAMP package like Uniserver, Wampserver, UmAmp … you will need to be aware and uninstall the DB2 server separately. Failure to uninstall IBM DB2 results in the failure of other WAMP packages to install completely. In the future, I may try Zend Server again using a Linux environment, but, not on Windows … until they solve their Windows compatibility problem with phpMyAdmin.

On Windows, I find the Uniform Server (UniServer) extremely convenient to install. I have used UniServer for about 10 years and never have had problems with Uniserver. The installation is quick, simple, and always works. UniServer includes mySQL, PHP and phpMyAdmin and meets my development needs nicely. Load and go in a Windows development environment.

If you are looking to use Eclipse, I assume you have an AMP package installed. If you have a AMP package installed, you can skip to Installing Eclipse PDT. If you are using Windows and need a WAMP package, the following two short sections will help.

Find Uniform Server

Uniform Server can be found at http://www.uniformserver.com/. Go on over to the UniServer site and click Download to retrieve the latest version of UniServer.

Installation of UniServer

To install UniServer:

  • Choose a where you would like to install UniServer. Some would choose the “Windows File” directory, but, I prefer to place it elsewhere. Your development files will be placed in a subdirectory below this and I do not like my development files stored below the Windows/Program Files subdirectory.
  • run the unZip for the uniserver package into the chosen . A will be created, but, standard Windows install with registry is not used by the UniServer package. (The name of the server_subdirectory changes with version, so I will call that )
  • Create a shortcut on your desktop to /UniController.exe. This will be your access to the UniServer control panel.

You are now ready to move on to the hard part … installing and configuring Eclipse PDT.

Head on over to the next article to find details of the Eclipse PDT installation and configuration.

Google Map Markers with Labels

Google Map, Javascript

Google Map has a nice support library that allows you to create markers with labels attached. This is nice to let the map visitor have a quick idea what the pins on a map represents. You can make your labels simply digits to number the pins, alpha characters to index the pins, or add a short word or phrase to each pin. Very nice.

If you are looking to add labels to your markers on a Google Map, the following links are important to you:

Use of the library is simple, simply:

  1. Include the markerwithlabel.js library
  2. Make a marker using “new markerwithlabel” (see the example page link above)

    3. QED

Note, the new MarkerWithLabel allows you to add a few new parameters that define the label. Simply replace the old “new marker” declaration with a declaration of the following format:

     var marker = new MarkerWithLabel({
       position: homeLatLng,
       draggable: true,
       raiseOnDrag: true,
       map: map,
       labelContent: "$425K",
       labelAnchor: new google.maps.Point(22, 0),
       labelClass: "labels", // the CSS class for the label
       labelStyle: {opacity: 0.75}
     });

It’s great, use it.

Drupal 7; How to assign custom CSS and JS by node

CSS, Drupal, Javascript, jQuery

If you need to have custom CSS or JS for a node, it is easy to set up.   This can be setup via the template.php file.   To customize available CSS or JS via template.php, modify the THEME_preprocess_node.  For example, if you have a special node type called “directory” in a theme called “boulder,” add the following code to your boulder_preprocess_node function.



  function boulder_preprocess_node(&$variables) {
    if ($variables['view_mode'] == 'full') {
      $node =& $variables['node'];
      if ($node->type == 'directory') {
        $path = drupal_get_path('theme', 'boulder');
        drupal_add_css($path . '/CSS/directory.css');
        drupal_add_js($path . '/js/directory.js', 
            array('type' => 'file', 'scope' => 'header'));
      }
    }
  }

I love this. It’s quick, easy and very useful.

FYI: <script defer

HTML5, Javascript

Are you aware of the script attribute “defer?” If you have and external file, you may use:

  • <script src=”the external file.js” defer=”defer”></script>

If you use a script defer at the top of the file with other script requests, that JavaScript will not be processed until the page has finished parsing. This can be an interesting alternative to placing your JavaScript in footers (as many people seem to do). This assures that all objects exist at the time that the JavaScript is executed …

The defer attribute is supported by all major browsers.

Consider using scripts with external files in the header with defer more frequently!

Tomato Cart Variants My Be a Showstopper for Now

Javascript, Tomato Cart

Well, I like the general concept of the cart Tomato Cart, but, at the moment you may want to avoid Tomato Cart if you need variants on a product. There appear to be a number of problems with the variant in Tomato Cart.

Today, I found a third problem with Tomato Cart variants, and maybe a fourth. On top of a few nuisance problems that are obvious as you start working with variants, this is becoming a significant problem. Other areas of Tomato Cart appear to work, but, if you need variants, you could spend a lot of time eliminating bug and it is not clear how quickly these problems will be resolved by the Tomato Cart developers.

New problems identified with Tomato Cart:

  • It is difficult to match images to variants, the variant image icons are very small and there is no label associated with them. Images that are similar can not be distinguished in the administration area of the variants. Therefore, matching variant images to variants is very tedious.
  • Variant Prices do not always display on the front-end display.
  • Magnified images for variants of products do not match the image associated with the variants. This means my fix to problem 1 would require an extension to my original fix to problem 1.
  • The Tomato Cart forum reports that there are situations where adding product values, product may vanish.
  • Sometimes, creating a variant of a product, a duplicate of the variant is created in the administration area, and though the front-end displays only one variant, that variant does not display the correct information. Deleting the duplicate variant does not help, it is recreated the next time you leave the variant screen.

While Tomato Cart has a lot of potential, and is easier to configure than many carts, the problem with variants may cause you to think twice before trying to use it.