Articles tagged 'javascript'

Blog Projects

HTML5 Drag and Drop Multiple File Upload

Previously I experimented with drag and drop file upload with Google Gears. Recently FireFox 3.6 (codenamed Namoroka) was the first to implement File API. It enables JavaScript to interact with local files.

Correction: Ionut G. Stan pointed out that File API was actually available already in FireFox 3.0. What Namoroka introduced is the drag and drop interface for the files. Sorry for the confusion.

Here is how you can implement drag and drop multiple file upload with native JavaScript. No plugins needed. Just plain old new HTML5. Again there is a working demo. You will need FireFox 3.6 to test it. Full source code can be at GitHub.

Continue reading >>


Drag and Drop File Upload With Google Gears

Google Gears is an extension which adds new features to you browser. It lets your browser to interact with the desktop. You can store data locally to an SQLite based database. Browser will also have a worker pool for running JavaScript code on the background.

Update 20091007: I updated the tutorial and demo to support dragging and dropping multiple files for uploading simultaneously.

Below is how you can do basic drag and drop file upload. Gears, PHP and jQuery are needed. If you want to try there is a working demo. All source code for the demo can be found from GitHub.

Continue reading >>


Infowindows With Google Static Maps

Note! Code shown is now included in Simple Static Maps PHP class. This blog entry is still good for understanding how it was done. Demo code can be considered deprecated.

Previously I showed you how to make a Google Static Map with clickable markers. Several people emailed me to ask how to show infowindow (or infobubble) when marker is clicked. Technique I explain below still needs JavaScript. It is used to open the infowindow. I use jQuery library in the examples.

Image above is just a screenshot. There is a separate page for working demo. Full source code is also available.

Infowindow HTML

First thing we need is HTML code for the infowindow. I wanted it look exactly the same as in Google Maps. I opened a random map and copied the HTML using FireBug inspect console.

Continue reading >>


WYSIWYG Inline Edit with Jeditable

Latest custom input for Jeditable uses jWYSIWYG editor by Juan M Martinez. This code has been almost ready for a while. This week I finally had time to fix some outstanding FireFox bugs.

If you are interested in writing your own Jeditable custom inputs read the introduction. You might also be interested in MarkItUp! custom input which is similar to jWYSIWYG input.

To test see the working demo and then download the source.

Usage

First include all needed JavaScript and CSS in your HTML.

<script src="jquery.js"" type="text/javascript"></script>
<script src="jquery.wysiwyg.js" type="text/javascript"></script>
<script src="jquery.jeditable.js" type="text/javascript"></script>
<script src="jquery.jeditable.wysiwyg.js" type="text/javascript"></script>
<link rel="stylesheet" href="jquery.wysiwyg.css" type="text/css">

Now you can use input type wysiwyg. Set onblur to ignore. Otherwise clicking menubar will cause editing to quit. You should also include atleast submit and cancel parameters. All jWYSIWYG settings can be passed using wysiwyg parameter. Check documentation from Juan’s webpage.

Continue reading >>


PUT Support for Jeditable

Until now Jeditable only supported submitting edited data using POST method. This was against REST principles. POST should be used for creating new objects. PUT should be used for updating existing objects.

Most browsers do not natively support PUT method. Jeditable does it Rails way by using POST method but submitting additional variable called _method with value put.

Jeditable now has basic unit tests covering most configuration parameters. If you find any failing tests drop me a line. Download latest as source, minified or packed.

Changes Since 1.6.0

Submit method can now be POST (default) or PUT.

$(".editable").editable("http://www.example.com/save.php", { 
    method : "PUT"
});

Continue reading >>


Jeditable and TinyMCE

I have been working with Sam Curren lately improving Jeditable custom input API. At the same time Sam has been working with his TinyMCE custom input.

Inline editing with TinyMCE has been requested several times in mailinglists and forums. After MarkItUp! and WYSIWYG (beta) it is now third content editor plugin for Jeditable.

TinyMCE input needs Jeditable 1.6.0 to work. Download it as source, minified or packed.

Changes Since 1.5.0

You can now call function when onblur is triggered.

$(".editable").editable("http://www.example.com/save.php", { 
    onblur : function(value, settings) {
        console.log(this);
        console.log(value);
        console.log(settings);
    }
});

Continue reading >>


Clickable Markers With Google Static Maps

HEADS UP! This article was written in 2008. Information provided might not be valid anymore and should be taken with a grain of salt.
NOTE! Code shown is now included in Simple Static Maps PHP class. This blog entry is still good for understanding how it was done. Demo code can be considered deprecated.

Static map is one big image. Markers are embedded inside the image. You can not use traditional <a href="#"> tags around separate markers. Binding onclick event to separate marker images wont work either. There are no separate markers. Just one large image.

With imagemaps you can specify arbitary areas inside an image which links to given url. Area can be circle, rectangle or polygon. Simple imagemap could look like following:

<map name="marker_map">
  <area shape="circle" coords="75,103,12" href="#">
  <area shape="circle" coords="122,105,12" href="#">
</map>

With imagemaps we can create clickable markers for Google Static Maps. We need to position an imagemap area over each marker. Problem is how to calculate x and y pixel coordinates for each marker.

Continue reading >>


Google Maps Without JavaScript Part 2

HEADS UP! This article was written in 2008. Information provided might not be valid anymore and should be taken with a grain of salt.
NOTE! Code shown is now included in Simple Static Maps PHP class. This blog entry is still good for understanding how it was done. Demo code can be considered deprecated.

In previous part we made a Google Map with sidebar navigation which works even JavaScript turned off. Marker locations and sidebar were parsed from two KML files. Beginning Google Maps Applications is a great book to learn about KML and Google Maps in general.

In this second part of tutorial I show you how to add zoom and pan controls. Again, they work without JavaScript. Be sure to read tutorial part one first. Also check the live demo.

Before going forward I would like to answer a question which has been asked more than once:

Q: What is the point?
A: Two reasons. Websites should degrade gracefully. Page should still have understandable content even if JavaScript is turned off. Second reason is just because it is cool.

Add controls to static map

First we add arrows and plus and minus images on a separate layer. This layer is positioned over the static map. I use Google provided images. Mapki has list of all available images.

Continue reading >>


Howto Show Markers Within Specific Zoom

Google Maps API offers several nice but relatively unknown shortcuts. One of them is new GMarkerManager class. It enables you to easily control at what zoom levels markers are shown.

In the map above if you zoom in twice a marker appears. Zoom in another two times and the marker disappears. This effect can be achieved by using managers addMarker() method. Instead of using something like:

 var marker  = new GMarker(new GLatLng(latitude, longtitude));
 map.addOverlay(marker);

you must use:

 var marker  = new GMarker(new GLatLng(latitude, longtitude));
 var manager = new GMarkerManager(map);
 manager.addMarker(marker, min_zoom, max_zoom); 

Continue reading >>


Google Maps Without JavaScript

HEADS UP! This article was written in 2008. Information provided might not be valid anymore and should be taken with a grain of salt.

We recently did a small Google Maps application for ERGO insurance. It consisted of submitting all their offices to Google Maps. KML export of office data was used to create map at ERGO autoabi campaign site. First version used all JavaScript approach to create the sidebar and map on the page. I was not happy with it. Map page was empty for browsers with JavaScript disabled. Page also took too long to render. Two problems I could not ignore.

Second version was mixture of PHP, JavaScript and new static maps API. Map now works without JavaScript. It renders much faster too. Check the working demo to see yourself.

Importing KML

Google offers GGeoXML library for KML parsing. That I ditched in the beginning. It was impossible to create sidebar navigation with it. First I ended up using EGeoXML. It got the job done but as I said earlier was too slow.

To speed things up I parsed KML files and outputted sidebar HTML with PHP. Simplified HTML and PHP below. Do not mind about # hrefs. They will be replaced with something meaningfull later.

Continue reading >>


MarkItUp! for Jeditable

In the heels of autogrow textarea comes next custom input for Jeditable. This time we will use markItUp! universal markup editor by Jay Salvat.

If you are not familiar with Jeditable custom inputs read the introduction. Also see autogrow and timepicker tutorials.

If you are just looking for the code download it here.

Creating custom input

Throughout the tutorial we will be using following code to trigger Jeditable. Note variable called markitupHTML . It holds configuration of used markItUp! tagset. In this example I use slightly modified HTML tagset. For more information on tagsets see markItUp! documentation.

$(".edit").editable("http://www.example.com/save.php", { 
    type      : "markitup",
    submit    : 'OK',
    cancel    : 'Cancel',
    tooltip   : "Click to edit.",
    onblur    : "ignore",
    markitup  : markitupHTML
});

Again we start by adding custom input type called markitup.

Continue reading >>


Autogrow Textarea for Jeditable

HEADS UP! This article was written in 2008. Information provided might not be valid anymore and should be taken with a grain of salt.

Previously i showed you how to create inline timepicker for Jeditable. This time we will create autogrowing textarea. This custom input will adjust its height while you type. Code uses excellent Autogrow jQuery plugin by Chrys Bader. If this is your first encounter with Jeditable custom inputs you might want to read an introduction to them.

If you are just looking for the code download it here.

Creating custom input

Throughout the tutorial we will be using following code to trigger Jeditable.

$(".edit").editable("http://www.example.com/save.php", {
    type      : "autogrow",
    submit    : 'OK',
    cancel    : 'Cancel',
    tooltip   : "Click to edit.",
    onblur    : "ignore",
    autogrow : {
        lineHeight : 16,
        maxHeight  : 512
    }
});

We start by adding custom input type called autogrow.

Continue reading >>


Creating Inline Timepicker with JavaScript and jQuery

HEADS UP! This article was written in 2008. Information provided might not be valid anymore and should be taken with a grain of salt.

Inline editing is not only limited to text and textarea inputs. In this tutorial you will learn how to make inline timepicker with JavaScript. We will be using the usual tools: jQuery and Jeditable.

Before continuing you might be interested in reading introduction to custom input types for Jeditable.

Available methods for creating custom input

When creating custom input type you want to define one or several of following methods. None of them are mandatory.

$.editable.addInputType('example', {
    element : function(settings, original) { },
    content : function(string, settings, original) { },
    buttons : function(settings, original) { },
    submit  : function(settings, original) { },
    plugin  : function(settings, original) { },
    reset   : function(settings, original) { }
});

All methods receive two parameters. Settings is Jeditable settings hash. Original is the original element which was clicked. Method content() also receives third parameter string which is the value input should be set to. Inside all methods this represents the form.

For this example we will be using three methods.

Continue reading >>


Delayed Loading of Images

HEADS UP! This article was written in 2008. Information provided might not be valid anymore and should be taken with a grain of salt.
Latest version of Lazy Load is not a drop in replacement to your webpage. New browsers load image even if you remove the src attribute with JavaScript. Now you must alter your html code. Put placeholder image into src attribute of your img tag. Real image url should be stored data-original attribute.

<img data-original=“img/example.jpg” src=“img/grey.gif”>
Good thing is you can now put all your JavaScript to the end of the page. If you want to support non JavaScript browsers there is an extra step. You must include original image inside <noscript> tag. For more information read the documentation.

Several people have asked me to add timeout option to Lazy Load plugin. As before, only images inside viewport would be loaded and page will come to ready state faster. However browser would load rest of the images automatically after specific amount of time.

I do not think it is necessary to add another configuration option for it. It all can be done with few lines of JavaScript.

Custom events

By default Lazy Load binds to scroll event. When window is scrolled plugin checks if any new images have become visible. For this case we want to use something different. We could use any of the normal jQuery events such as click or dblclick. But lets invent our own event. We will name it sporty.

  $(document).ready(function() {
     $("img:below-the-fold").lazyload({
         placeholder : "img/grey.gif",
         event : "sporty"
      });
 });

Continue reading >>


Style File Inputs With jQuery (and CSS)

HEADS UP! This article was written in 2007. Information provided might not be valid anymore and should be taken with a grain of salt.

Frontend coders have a life lasting problem. How to explain art director file inputs can not be styled? File Style to the rescue! It is a jQuery plugin which enable you to do just that. Style file inputs.

Code is inspired by work of Shaun Inman with one main difference. This version mimics vanilla file input by showing what file user has chosen.

How does it work?

Plugin wraps vanilla file input with div. This div has button as background image. Image button is aligned with file inputs browse button. File input is then hidden by setting opacity to zero. Chosen file is shown in normal text input which mimics file input. This text input also inherits file inputs class. Use this class to style the text input.

Continue reading >>


New Version of Editable Plugin

HEADS UP! This article was written in 2007. Information provided might not be valid anymore and should be taken with a grain of salt.

Alert! Alert! Another boring new release is out blog entry ahead. If you are bored already go ahead and download...

Continue reading >>


Custom input types for edit in place

I have received many feature requests lately. Most of them have been worth of adding. People have different needs. But I have been worrying about Jeditable becoming feature creep. Thats why I figured out another aproach.

For those in hurry. Check the custom input types demo for some proof on concept inputs.

Write your own input types

Sometimes you need multiple selects. Your form might need special third button which is not submit or cancel. Sometimes you want to use some other plugin such as Date Picker for editing.

There is no point adding separate parameter for all of these. Code would become bloated. Thus I have been working on enabling other developers to add new input types. Think of it as plugins for in place editor plugin.

Continue reading >>


Pass Data to Edit In Place With Function

HEADS UP! This article was written in 2007. Information provided might not be valid anymore and should be taken with a grain of salt.

Small update to jQuery eip plugin. Data parameter is now more flexible. Bug with callback function launching too early is fixed.

In earlier versions you could use functions for two things. To submit edited data to function which takes full control of Ajax request. You could also define optional callback function. This function is called after submitting edited data. Starting from 1.3.1 release you can also use functions as data property. Instead of passing static string you can pass function which generates the data.

Continue reading >>


In Place Edit With Callback

HEADS UP! This article was written in 2007. Information provided might not be valid anymore and should be taken with a grain of salt.

jQuery in place edit is now close to have all features it needs. Add some more and it will become feature creep. Most features are configurable. You can even get full control on Ajax request. Just write your own function for submitting and post to this function instead of URL. Smartypants!.

As usual, download latest source or test online.

Using callback function

Now you can define optional callback function. This function is called after form has been submitted. Callback function receives two parameters. Value contains submitted form content. Settings contain all plugin settings. Inside function this refers to the original element.

 $(".editable").editable("http://www.example.com/save.php", {
     type    : "textarea",
     submit  : "OK",
 }, function(value, settings) {
     console.log(this);
     console.log(value);
     console.log(settings);
 });

Continue reading >>


In Place Editing With Selects

HEADS UP! This article was written in 2007. Information provided might not be valid anymore and should be taken with a grain of salt.

Several people already asked support for selects and possibility to pass CSS class or styles as parameter to jQuery inplace editor. Here they are.

Big thanks goes to Mathias Henze for providing patches and ideas making this release possible!

For those in hurry: test and grab the latest source.

NOTE! JUST FOUND OUT THIS RELEASE HAS PROBLEMS WITH IE. WILL RERELEASE IN FEW HOURS AND KICK MYSELF THREE TIMES FOR NOT DEBUGGING IN WINDOWS!

How to use selects?

You can use selects by giving type parameter value of select. Select is built from JSON encoded array. This array can be given using either data parameter or fetched from external URL given in loadurl parameter. Array keys are values for <option> tag. Array values are text shown in pulldown.

Continue reading >>


Jeditable 1.1.1 - Minor Bugfixes

HEADS UP! This article was written in 2007. Information provided might not be valid anymore and should be taken with a grain of salt.

Latest release of javascript in place editor plugin has some minor bugfixes. In near future postload and getload

Continue reading >>


Debugging PHP With Firebug

HEADS UP! This article was written in 2007. It exists mostly for historical reasons. You might want to check modern solutions such as Clockwork extension for Chrome.

Logging PHP and JavaScript errors to same window makes debugging easier. It also might be the cure to cancer and bring world peace. In general

Continue reading >>


Jeditable 1.1.0 - Compatible with jQuery 1.1

HEADS UP! This article was written in 2007. Information provided might not be valid anymore and should be taken with a grain of salt.

New release adds inplace editing capabilities for recently released jQuery 1.1.

In addition to compatibility...

Continue reading >>


CATEGORIES
Built using the awesome Flat UI Pro framework by Designmodo.

Mika Tuupola is a Member of the Leanpub Affiliate Program.

© 2014 Mika Tuupola.