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:
<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>
After dragging:
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:
Kudos!
Keep hacking!
