Saturday, 14 February 2015

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:

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">
<meta charset="utf-8">
<title>jQuery UI Draggable - Default functionality</title>
<link rel="stylesheet" href="//">
<script src="//"></script>
<script src="//"></script>
<link rel="stylesheet" href="/resources/demos/style.css">


#draggable { width: 250px; height: 250px; padding: 0.5em; background-image: url(; }
$(function() {
$( "#draggable" ).draggable();
<div id="draggable" class="ui-widget-content" f>
<p> #Valentine's Day!</p>


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:


Keep hacking!

No comments:

Post a Comment

Outreachy experience and application tips

One of the best experiences of my student life was to make it to this list: