Skip to main content

Beginning with jQuery

As a demand of upcoming project and a desire to try my hands on some front-end tools, here is my first post on UI designing.

I would be experimenting with jQuery.

Oops my XAMPP is not installed, I remember the recent system crash I had.
Anyways, go to this site:

http://irishlightandcolour.blogspot.in/2013/10/install-xampp-for-linux-on-ubuntu-1204.html

Install XAMPP.
Give rights that is sudo chmod 577 to the executable file you just downloaded and then do sudo  ./<filename> as described in the link.

Once done, start the server.
Why did you do this?

Because to run php scripts we need a server, xampp help us create a local host where we can test our website/ scripts.


 Click on "Go to application". Open Google Chrome manually if some error comes.
You will see this screen:


Now what? Write a script, php one or may be some html page.

Cool. Now navigate to opt> lampp> htdocs > xampp
Code your first php script/ html page here.

I tried using simple jQuery draggable component.
Code this:

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Draggable - Default functionality</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.3/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.3/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css">

<style>

#draggable { width: 250px; height: 250px; padding: 0.5em; background-image: url(http://icons.iconarchive.com/icons/double-j-design/origami-colored-pencil/256/red-heart-icon.png); }
</style>
<script>
$(function() {
$( "#draggable" ).draggable();
});
</script>
</head>
<body>
<div id="draggable" class="ui-widget-content" f>
<p> #Valentine's Day!</p>
</div>
</body>
</html>

#Source: http://jqueryui.com/draggable/

Play with this code now. And do the required changes. You are done with your first draggable user interface! This is how it looks like in my case:

 After dragging:



Kudos!

Keep hacking!




Comments

Popular posts from this blog

Duh - Saves you the trouble to correct your command

Duh.

This is no more an expression for me but a command now. Thanks to the hack I have been doing for past couple of days.

What's it about? Well, here it goes.

How many times it happens that we screw up commands on terminal?
A typo, a syntax mistake or jumbled up arguments. The command doesn't run and then we spend time retyping it ensuring everything is in place this time.
Quite time consuming, eh?




My laziness simply denied me such a behaviour. So I coded up a powershell cmdlet which can do this for me.
Now if I mess up a command, I just have to type 'Duh' and the right command will be displayed on the prompt for you to check and execute (press ENTER).

How Duh operates internally?
Well, guess what. Answer lies in the "tries".
We have a trie and we do closest match using Leveinshtein Distance.
In short, how to figure out how close two strings are?  Find the no of letters you need to remove/insert/replace in order to attain string 2 from string 1.
This is wha…

How would you make an HTML Parser?

Hola folks,

Here we will be walking through how html is being parsed by a widely popular parser: Angle Sharp
You can find it here !
This is just a walkthrough and gives an idea on the breadth of issues  one has to deal with while designing a parser.

Let's sneak peek into what kind of data structures are used and how is the code structured.


It all begins with this line:
var parser = new HtmlParser();
We have folowing variations in constructing the HtmlParser object:

  public HtmlParser()
            : this(Configuration.Default)
        {
        }

        /// <summary>
        /// Creates a new parser with the custom options.
        /// </summary>
        /// <param name="options">The options to use.</param>
        public HtmlParser(HtmlParserOptions options)
            : this(options, Configuration.Default)
        {
        }

        /// <summary>
        /// Creates a new parser with the custom configuration.
        /// </summary&…

What emotions run through your playlist?

Hola !!

Long time. So I was upto creating this application one night , I named: "Playlist Emotions" , "What does the song says" :P , "PlayWithEmotions" and what not, each project of a failed experimentation.

Duh.

The project took way too long. Thanks to the noble idea of making and deploying it as a GWT application and then to improve upon the GUI of the app.
FYI , I tried but done neither of the things above. My Google Console developers trial account  supposedly has some issues with this app, yet to be resolved. So before the entire idea behind the app and the excitement of results it displays fades out , I thought, lemme write a blog post on the same.


So what is this all about?

The idea originated from a candid discussion with my friend on how songs influence our moods and also how our emotions affect the type of songs we listen to.

Being fascinated about knowing what kinds of songs I listen to, I thought of creating an application where I would just e…