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:

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!




No comments:

Post a Comment

HIGH FIVE ~ Programming tips [C#]

Hello World! Over my tenure as an engineer I got a lot of insights into the C# language (which BTW is Microsoft's own language :D ...