Here’s a quick post to let you know that I moved my blog. So it will be my last post on this blog. I want to experiment with AdSense. I wanted to keep things simple so I started a new one on Blogger where AdSense is easy to activate.
Cheers :)
August 15, 2011
December 28, 2010
Scriptaculous Sortable List Example
In my previous article I built a list where a user is able to move a table row up or down by clicking on a up icon and a down icon associated to the row. The thing is that I want the user to be able to sort a priority list by moving the items in the list. It’s working quite well but I don’t like the fact that the mouse’s cursor don’t follow the row when the up or down icon is clicked. I find it quite disturbing for the user. So I decided to take an other approach.
What are we doing
In this article I will use Scriptaculous to make the items of a list draggable.
The list
I will make the following list draggable.
<ul id="list"> <li>List item 1</li> <li>List item 2</li> <li>List item 3</li> <li>List item 4</li> </ul>
The librairies
To make the items in the list draggable I also need Prototype.
<script type="text/javascript" src="js/prototype.js"></script> <script type="text/javascript" src="js/scriptaculous.js"></script>
Applying the effect
The last thing we need is to create a sortable list with Scriptaculous.
Event.observe(window, 'load', function() {
Sortable.create("list");
});
The complete example
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<script type="text/javascript" src="js/prototype.js"></script>
<script type="text/javascript" src="js/scriptaculous.js"></script>
<script type="text/javascript">
Event.observe(window, 'load', function() {
Sortable.create("list");
});
</script>
</head>
<body>
<ul id="list">
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
<li>List item 4</li>
</ul>
</body>
</html>
It’s pretty straightforward to make a list draggable with Scriptaculous. Now the users can drag and drop the items in the list to sort them the way they want.
Cheers :-)
December 23, 2010
How to move table row up or down with Prototype
What are we doing
I need to build a list where a user should be able to sort the elements by moving up or down an element. To do so I want to present the elements in a table similar to this:
<table> <tbody> <tr> <td>1</td><td class="up">up</td><td class="down">down</td> </tr> <tr> <td>2</td><td class="up">up</td><td class="down">down</td> </tr> <tr> <td>3</td><td class="up">up</td><td class="down">down</td> </tr> <tr> <td>4</td><td class="up">up</td><td class="down">down</td> </tr> </tbody> </table>
To keep things simple I want the user to click on td.up to move the row up or on td.down to move the row down.
Moving the rows
To help me do that I use the Prototype JavaScript library.
<script type="text/javascript" src="js/prototype.js"></script>
So when the page load I attach a function to the click event of each td.up and each td.down.
Event.observe(window, "load", function() {
$$("td.up").each(function(element) {
element.observe("click", up)
});
$$("td.down").each(function(element) {
element.observe("click", down)
});
});
Move up
To move an element up in the table I remove the row before the row the user clicked on and I insert it after the row the user clicked on.
function up(event) {
var element = event.element().ancestors()[0];
var previous = element.previous();
if (previous) {
previous.remove();
element.insert({after:previous});
}
}
Move down
To move an element up in the table I remove the row after the row the user clicked on and I insert it before the row the user clicked on.
function down(event) {
var element = event.element().ancestors()[0];
var next = element.next();
if (next) {
next.remove();
element.insert({before:next});
}
}
The complete example
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
<title></title>
<style type="text/css">
td {
border:1px solid black;
}
td.up {
cursor:pointer;
}
td.down {
cursor:pointer;
}
</style>
<script type="text/javascript" src="js/prototype.js"></script>
<script type="text/javascript">
Event.observe(window, "load", function() {
$$("td.up").each(function(element) {
element.observe("click", up)
});
$$("td.down").each(function(element) {
element.observe("click", down)
});
});
function up(event) {
var element = event.element().ancestors()[0];
var previous = element.previous();
if (previous) {
previous.remove();
element.insert({after:previous});
}
}
function down(event) {
var element = event.element().ancestors()[0];
var next = element.next();
if (next) {
next.remove();
element.insert({before:next});
}
}
</script>
</head>
<body>
<table>
<tbody>
<tr>
<td>1</td><td class="up">up</td><td class="down">down</td>
</tr>
<tr>
<td>2</td><td class="up">up</td><td class="down">down</td>
</tr>
<tr>
<td>3</td><td class="up">up</td><td class="down">down</td>
</tr>
<tr>
<td>4</td><td class="up">up</td><td class="down">down</td>
</tr>
</tbody>
</table>
</body>
</html>
Cheers :-)
September 10, 2010
Taking out the trash
I always wanted to be my own boss. So I refined my skills by buying books on programming. I also added a lot of blogs about programming to my Google Reader. My day job is about programming. With all that I became a pretty descent programmer.
I realized that I was not quite on the right path. Don’t get me wrong. I love to program and it is useful to invest in yourself. But you have to invest in something that will help you achieve your goals.
But what are my goals?
The idea is that I want to build my own business. I need to focus on that. I need to stick around people that can help me. A thing I learned about programming is to fix a problem adequately you need to identify the root cause of the problem.
Why do I wanted to build my own business?
The thing is I want to make more money. I want freedom. I want to be able to live my own lifestyle.
Refocusing
What I needed to do is to take action. I read Getting Thinks Done. I learned to focus on the next action.
I read I Will Teach You To Be Rich. I learned a simple and solid system to handle my money. I discovered the blog of Ramit who inspired me to make some money on the side.
I deleted some programming blog and I added some personal finance blogs and some lifestyle blogs to my Google Reader.
I discovered the blog of Tim Ferriss and I bought his book.
I’m relieved. I got so much energy from those guys. I needed this mental shift.
Now what?
I want to learned how to get into my clients head. I want to help them to get a window on the web. I want to build a business to get a side income. I want to join the earn1k program.
I’m thrilled cause I’m not alone in this. My wife and I are chasing the same dream. I’m very grateful that we can start this together. It will be quite a journey.
May 26, 2010
Minding My Own Business
It’s been a while since I post something in the mood category.
I have been limiting myself to write little posts on how to do this in JavaScript or how to do that in VBScript.
These kinds of posts are quick reminder for me. Hopefully, they’re useful to someone else.
Lately, I had been quite busy.
My wife and I are in the process of building our own company.
After a little bit of drama about her working life, we realized that we should be focusing on something of our own.
We decided to create an Internet company that will provide an affordable website development service.
I will try to write some of my insights about this process.
Stay tuned!
March 31, 2010
VBScript’s default keyword
While I’m digging more and more into VBScript, I learned that you can use the default keyword to mark a default method in a class.
First, we define a class MyClass where is default sub is myDefaultSub.
public class MyClass
public default sub myDefaultSub(p_value)
response.write p_value
end sub
public sub notADefaultSub(p_value)
response.write p_value
end sub
end class
Second, we instantiate MyClass and we use it.
dim objMyClass : set objMyClass = new MyClass
objMyClass("This is calling the default sub.")
objMyClass.notADefaultSub("This is not the default sub.")
Cheers :-)
January 8, 2010
JavaScript isNumeric function
Here is a JavaScript function that defined if a value is numeric or not.
function isNumeric(value) {
return value == parseFloat(value);
}
Cheers :-)
January 7, 2010
JavaScript String.startsWith and String.endsWith implementation
While I was reading Ricky Rosario’s blog I took note of an interesting way to implement the startsWith and the endsWith methods for Strings. It may be useful.
String.prototype.startsWith = function(prefix) {
return this.indexOf(prefix) === 0;
}
String.prototype.endsWith = function(suffix) {
return this.match(suffix + "$") == suffix;
}
Cheers :-)
November 5, 2009
Looping in a form’s elements in JavaScript
Sometime you need to prevalidate some inputs in a form. You could do this by looping in all the elements of the form. Here is a quick example of doing just that.
<html>
<head>
<title>An example.</title>
<script type="text/javascript">
function loopInFormElements(aForm) {
for (i = 0; i < aForm.elements.length; i++) {
alert(aForm.elements[i].name + " = " + aForm.elements[i].value);
}
}
</script>
</head>
<body>
<form onsubmit="loopInFormElements(this);" action="" method="post">
<input type="text" name="value1" value="1" /><br />
<input type="text" name="value2" value="2" /><br />
<input type="text" name="value3" value="3" /><br />
<input type="submit" name="submit" value="submit" />
</form>
</body>
</html>
What happen here is when I submit the form, the loopInFormElements method get called. This function loop in all the form’s elements and show the name and the value of the inputs.
I thought it could be handy.
Cheers :-)
November 4, 2009
A note about standards
Just a quick thought about standards. You should try to keep them simples.
And please, don’t push to hard on best practices. The’re not silver-bullets.
Enough evangelizing for today :-P.
Cheers :-)
