Setting up Play-Scala Project in IntelliJ Idea

The easiest way to setup a Play-Scala project is by using the giter8 template.

Setup the project using by giving the following command in the terminal

$ g8 typesafehub/play-scala
# cd into the newly created directory and run with 'sbt run'

In the sbt console
$ idea

Once this is done, the project can be opened from Idea.

Setting up database for the project

1. Add the database driver in project/Build.scala (throws driver not found error on being skipped)
2. In conf/application.conf specify the database configuration(more on database in play)
3. In conf/evolutions/default create a file 1.sql which has the database schema(more on evolutions)

Prerequisites

1. sbt
2. giter8
3. Play and Scala plugin for IntelliJ Idea

Drag and Resize Images using jQuery UI

Just the other day, I wanted to have the functionality to drag and resize an image on a HTML page using jQuery and jQuery UI.

Surprisingly, calling the usual draggable() and resizable() doesn't work as expected when applied on an img element, although it works perfectly for a div element.

After some digging into the jQuery UI code, I found the reason for this flawed functionality. It is because jQuery UI creates a wrapper div for the elements which cannot hold child nodes if resizable() function is applied on them.

The easiest and simplest way to get around this problem is to call the draggable() function on the implicitly created wrapper div.
The wrapper div’s class name is ui-wrapper.

A similiar solution can be used for canvas, textarea, input, select, button elements. The above solution works for multiple images on the page with class as "drag". 

Another common approach is to create a div element which contains the img element. The div and img elements are bound so that on resize of the div element, the img element is scaled up or down.