Archive: JavaScript

There have been a ton of helpful and interesting tips posted to Tipster recently, so I thought we’d pull a few out for you all (and give the submitters a bit of well-deserved publicity).

Topics that we’re covering are: MySQL, CSS, JavaScript, PHP, JQuery, life hacks and server admin.

MySQL Geo Search

Here’s a MySQL statement to search for nearest objects to you in a database, ‘lat’ & ‘lng’ are fields in the ‘items’ table with the location of object and $latitude & $longitude are the users location. The distance field will be the calculated distance in Km between the user and the object:

SELECT *,(((acos(sin((".$latitude."*pi()/180)) * sin((`lat`*pi()/180))+cos((".$latitude."*pi()/180)) * cos((`lat`*pi()/180)) * cos(((".$longitude."- `lng`)*pi()/180))))*180/pi())*60*1.1515*1.609344) as distance FROM `items` ORDER BY distance;

By: Sam Machin
Vote on this tip

Transparent background images – PNG fix for IE6 – a few reminders

When using the MS filter (via The AlphaImageLoader) to fix PNG transparency for IE6 — in your CSS, remember to:

1. Set width and height for the element/s containing the transparent background image.
2. First set background to none — then apply filter for background image.
3. Apply ‘position: relative;’ to any contained links to ensure functionality

(Also, bear in mind that the background images can no longer be tiled or positioned via ‘background-position’).

By: Prisca
Vote on this tip

Address Longitude and Latitude in Google Maps

Google maps does not show the Longitude and Latitude of an address you search. To get this information, enter this piece of JavaScript into you browsers address bar and hit enter:

javascript:void(prompt('',gApplication.getMap().getCenter()));

A little window will then pop-up displaying the Longitude and Latitude for you. Bingo!

[Editor's note: If you add this to your bookmarks toolbar, it's even easier to use. Just click it whenever you're on Google Maps. Hat tip to Phil Balchin.]

By: Pete Roome
Vote on this tip

Custom Details in Code Hints – Zend Studio for Eclipse

Zend Studio is a brilliant platform for PHP development. In my view, well worth the cost. One of the best things about it now being built on Eclipse is the project-wide code hinting.

When you see the built-in code hints and highlight an option, you get loads of lovely details regarding the functions and classes that you are about to use… as you would expect from most modern IDEs. However, Zend Studio for Eclipse takes this further for your own classes and functions!

When you have written your classes and functions, start placing a multi-line comment just above the opening line, i.e. /**, hit Return and Studio will prompt you for data types and descriptions for your method variables.

This is invaluable in understanding those classes you wrote at 3:47am, 3.5 years ago and haven’t used since!

By: Simon Hamp
Vote on this tip

Use a Print Stylesheet

Print stylesheets allow you to change the style of your page when printing, without having to provide a separate “print version” of the markup.

You specify a print CSS by adding “media=’print’” as an attribute to the link tag.

<link rel="stylesheet" type="text/css" media="print" href="print.css"/>

In the print CSS you should remove unnecessary elements such as sidebars, menus, background colours, presentational images, etc so as not to waste ink and paper on parts which don’t need to be printed. You can also change the font and size to make sure the text is clear on the printed page.

You can even add some CSS to show the URLs of links on the page, which wouldn’t normally be seen when printing.

a[href]:after { content: " (" attr(href) ") "; }

By: Rich Adams
Vote on this tip

Make your links easier to read

Instead of using { text-decoration: underline; } on your links (as browsers do by default) use:

{ border-bottom: 1px solid; }.

This makes your links easier to read, as there will be more space between the text and the line underneath, so the line will no longer cross through your ‘y’s and ‘g’s.

You can also then style your underline with all the usual border stylings, much more exciting than a plain underline :)

By: Laura Kalbag
Vote on this tip

Manual filmstrips in jQuery

Really simple manual photo film-strip in jQuery. Used to swap a large image on a page with that of a thumbnail elsewhere on the page, such as different photos of a product in an e-commerce store.


$(document).ready(function(){
imageSwapper(".thumbnails a");
});



function imageSwapper(link) {
$(link).click(function(){
$('#largeimage').attr('src', this.href);
return false;
});
};


Just link the thumbnails to their larger versions and pop them in a div or paragraph of class thumbnails, and give the large image an ID of large image, and you are good to go!

By: Michael Peacock
Vote on this tip

Store user passwords as salted hashes

Just using a hash of the user password is not strong enough. If two users have the same password, they’ll have the same hash. Dictionary attacks are also still possible as the attacker can have a list of dictionary word hashes. Using a salted hash involves generating a random string of characters, which you then concatenate with the password before hashing. Two users with the same password will then have different hashes, and the stored hash will never just be a hash of a common word if the user chose a weak password. You then store the salt, and the hashed value in your database.

hash_to_store = sha1(salt + real_pass)

There are many different methods you could use too, such as concatenating the salt with a hash of the password and then hashing that, etc.

hash_to_store = sha1(sha1(real_pass) + ...

By: Rich Adams
Vote on this tip

CD/DVD stuck in Macbook

Having gotten a DVD stuck inside my Macbook the other day, i found the only way to force eject it was to hold down the trackpad button on reboot. DVD popped right out.

By: Pete Roome
Vote on this tip

Photo credit: flickr.com/photos/mance

We all know that people don’t like filling out forms online, including the folks who design and build them. Most good web designers working today know to keep them as concise and painless as possible. A minimalist sign up process on your shiny new web app is sure to produce a higher sign up rate than one that asks for a dozen pieces of irrelevant information.

Sometimes, however, you’ll want to develop a form that truly benefits from a large number of options. Let’s design a search form for a fictional used automobile site. Presenting every option in your database would probably be messy and intimidating. Just one section might look something like this:

An Alternative Presentation

There may be times when keeping all of the available options visible makes the most sense. Let’s assume for the time being, however, that you want to package the search options into a neater display.

Using this technique, we’re able to save valuable screen real-estate and the user is, hopefully, less frightened by all those checkboxes. In addition, you’ll have much more freedom to style your dropdown controls to match the look and feel of your application.

Building the Widget

This technique doesn’t require a fancy graphics treatment. You could easily use vanilla HTML elements and wire up the interaction elements with Javascript (as we’ll discuss below) and you’ll be good to go. However, if you’re wanting that little extra flair, let’s jump into Photoshop (or your graphics editor of choice).

I’ve built my widget to a fixed width with the idea that it’ll be smart enough to grow taller to accommodate longer text. Here’s how the plain widget looked:

And with the dropdown “trigger”:

As I mentioned, we want the widget to be able to expand vertically so that longer text doesn’t dangle outside it. We’ll split our image into top and bottom pieces and stretch the top one out so it’s tall enough to hold the fullest possible amount of text.

Top Piece

Bottom Piece

Be sure you don’t simply resize the image to be tall enough since it will distort your masterpiece. Simply select one horizontal row, copy it, paste it, and use the transform tool to create the “filler” region.

Styling and Wiring

Now it’s time to create the HTML, CSS, and Javascript needed to make your widget come to life. In its most basic form, there is a wrapper container:

<div class="dd_wrapper">
<div class="dd_bottom"></div>
</div>

The dd_wrapper class will contain our top background image and dd_bottom will contain the bottom one.

.dd_wrapper {
  color: #fff;
  width: 169px;
  background: url(../images/dd_top.gif) top left no-repeat;
  font-size: 11px;
  padding: 11px 30px 10px 14px;
  position: relative;
  line-height: 1.3em;
  min-height: 17px;
}

.dd_bottom {
  width: 213px;
  height: 18px;
  position: absolute;
  bottom: -1px;
  left: 0;
  background: url(../images/dd_bottom.gif) top left no-repeat;
  z-index: 0;
}

There’s nothing too fancy going on here. The width of dd_wrapper is accounting for the image width minus the left and right padding (213 – 30 – 14 = 169). The right padding is larger to allow room for the dropdown trigger graphic. The position attribute is set to relative so that we can absolutely position our other elements within in. The dd_bottom class is anchored to the bottom left of the parent container and its width is left at 213px since there is no padding for it. We specify a height of 18px to match that of the bottom image so that it doesn’t collapse and disappear due to having no inner content.

Next, let’s add our dropdown trigger and a span wrapper for our text label.

<div class="dd_wrapper">
<span class="inner">
Engine <span class="light">(6 cylinder, 8 cylinder)</span>
</span>
<a href="#" class="dd_toggle" title="Change">
<img src="../images/dd_toggle.gif" alt="Change" />
</a>
<div class="dd_bottom"></div>
</div>

The inner class will hold our text and the dd_toggle link is positioned on the right hand side.

.dd_wrapper .inner {
  position: relative;
  z-index: 100;
}

a.dd_toggle {
  position: absolute;
  top: 11px;
  right: 13px;
  z-index: 10;
}

.dd_wrapper .light {
  color: #a3bfe9;
}

The inner class is relatively positioned so that the z-index rule works properly. These are used to keep the text above the background image of the dd_bottom container.

Now it’s time to add our dropdown panel. It will be hidden by default and the dd_toggle link will call a Javascript function to handle the showing and hiding of the panel.

<div class="dd_wrapper">
  <span class="inner">
    Engine <span class="light">(6 cylinder, 8 cylinder)</span>
  </span>
  <a href="#" onclick="toggleDropdown('engine_options');return false;" class="dd_toggle" title="Change"><img src="../images/dd_toggle.gif" alt="Change"/></a>
  <div class="dd_bottom"></div>
  <div id="engine_options" class="dd_option_panel" style="display:none;">
    <p>Select which engine options you are interested in.</p>
    <ul>
    <li><input type="checkbox" id="engine_4" />
      <label for="engine_4">4 cylinder</label>
    </li>
    <li><input type="checkbox" id="engine_6" checked="checked" />
      <label for="engine_6">6 cylinder</label>
    </li>
    <li><input type="checkbox" id="engine_8" checked="checked" />
      <label for="engine_8">8 cylinder</label>
    </li>
    <li><input type="checkbox" id="engine_10" />
      <label for="engine_10">10 cylinder</label>
    </li>
    <li><input type="checkbox" id="engine_12" />
      <label for="engine_12">12 cylinder</label>
    </li>
    <li><input type="checkbox" id="engine_hybrid" />
      <label for="engine_hybrid">Hybrid</label>
    </li>
    <li><input type="checkbox" id="engine_elec" />
      <label for="engine_elec">Electric</label>
    </li>
    </ul>
    <p class="buttons">
      <input type="image" src="../images/save_choices.gif" onclick="toggleDropdown('engine_options');return false;"/>
    </p>
  </div>
</div>

The toggleDropdown() function will toggle the requested panel and it will also ensure that all other panels are hidden. This way, if one panel is open and the user clicks the trigger on another dropdown widget, only the newest panel will appear as open. I am using the Prototype Javascript library here, but this could easily be adapted to any other implementation.

function toggleDropdown(panel)
{
// toggle the requested one
Element.toggle(panel);

// then hide all of the others so that only
// one (at most) is open at a time
$$('body .dd_option_panel').each(function(node){
if (node != $(panel)) {
Element.hide(node);
}
});
}

The Requisite IE Hacks

You can always count on Internet Explorer to keep you on your toes. If you choose to align your dropdown widgets vertically like I have in my example, you’ll notice that the higher dropdown panels render behind the lower widgets. This is due to IE’s z-index implementation that is documented extensively elsewhere. The fix is to wrap each dropdown container with an additional div element whose sole purpose is to force a proper z-index stack.

Also, keep observers may have noticed my use of min-height for the dd_wrapper container. IE6, of course, doesn’t support this attribute but I’ve had success using Dustin Diaz’s Min-Height Fast Hack.

.dd_wrapper {
  ...
  min-height: 17px;
  /* IE6 min-height hack: http://www.dustindiaz.com/min-height-fast-hack/ */
  height: auto ! important;
  height: 17px;
}

<div style="position:relative;z-index:60;">
<div class="dd_wrapper">
...
</div>
</div>

<div style="position:relative;z-index:50;">
<div class="dd_wrapper">
...
</div>
</div>

Final Touches

My example includes a save button that could be used to make an AJAX call. This would be useful if your search updated the results on the fly as search options were changed. If your form was going to be submitted normally, this button could be removed.

Keep in mind that you aren’t limited to checkbox fields in your dropdown panels. You could use radio buttons or anything else. With these types of hidden panels, you will be able to include some additional helper text for your users when it makes sense, but try to keep it short and to the point.

The final thing you’d want to add is some code to handle the updating of the text label when the options are updated. Depending on your implementation, there are various ways to handle this. For example, the result of an AJAX request might determine how the label gets updated. You might want to have your toggleDropdown() function include some logic to update those DOM elements.

My final advice would be to put a little extra thought into making the text labels smart enough to show a concise view of the selections. For example, if your user selects all of the options for Fuel, “Any Fuel” is easier to read (and actually indicates an all-inclusive selection) than “Fuel (Gasoline, Diesel, Alternative)”.

Hopefully this article gives you some ideas that you can incorporate into your next project. The overall idea is quite simple, but there are endless ways that you could expand and improve upon it!

View the completed demo.

In this presentation, Matt Biddulph, CTO at Dopplr discusses how they worked with Facebook and also JavaScript (using JQuery) to create the social widgets and plug-ins that are essential to Dopplr’s make-up.

Matt also spoke about other critical stages in the development of Dopplr – including how they used the internet as a platform, and how they deal with user identities.

This session is from Future of Web Apps London 2007, hosted by Carsonified. You can listen to the entire MP3 and download Matt’s presentation at the FOWA past events page.

The next FOWA is in Miami this February 28th – more details at the usual place!