My friend Klas has had an animated Christmas tale on the internet since 1996! It’s now available as an iPad app in the app store. Check it out! 
There’s a new home 3D printer in town: Printrbot. It’s simple to build and easy to use. I want want one. I’ve been checking the Makerbot and Ultimaker, but they’re both a bit to pricey for me.
Here are some videos of the Printrbot.
I’ve started tinkering with Arduino. My first real project was to connect a DS18B20 temperature sensor to Arduino. I have an ethernet shield on the arduino that uploads data to pachube.com.
The temperature sensor is protected by an old film case and is right outside my window. I wanted to have a web site where I can check the outside temperature so I found a small jQuery script that takes JSON data from my Pachube feed and outputs it on a small web site.
Here’s the pachube feed, and here’s the mobile web site. Get the code here.
My friend Emil studies at the Oslo national academy of the arts. If you like photography be sure to check out his portfolio.
I found a great web site the other day. WP-Snippets collects a bunch of useful snippets for WordPress devs. Check it out!
The past months I’ve been wanting to learn a bit more about web programming, so I set out to make some sort of game. What I thought would be easy was to make a text based adventure game. It didn’t turn out to be easy, but I’ve learnt a lot.
The game is very similar to the old text based adventure games, but the difference is that you don’t do any typing while playing. You click and drag items to interact. It makes it easier to play the game (people have less patience nowadays) and it is easier to play it on mobile devices.
My plan is to develop the game a bit more with feedback from the internets and also make a website with a WYSIWYG editor so people can create their own stories and share them with friends.
The game uses regular HTML and CSS for displaying the stories. The functionality is javascript (jQuery). Stories are stored in a mySQL database and are transmitted via JSON. The community web site will be built using CodeIgniter.
Oh, I almost forgot… you can play the game here.
This is an updated version of the localscroll tutorial I wrote a year ago. I hope you find it helpful. If you have any questions, please write them in the comments below and I’ll try to help you
In this tutorial you’ll learn how to make anchor links that scrolls the page smoothly using jQuery, scrollTo and localScroll.
Here’s a demo of what the end result will be.
Start with an empty html file. Give it any name you want, as long as it ends with .html or .htm.
Double click the code window to make the code easier to copy.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>My jQuery scrollTo & localscroll Demo</title> </head> <body> </body> </html>
Inside the head tags we will have to load jQuery, scrollTo and localscroll. It’s important to do it in the order I just wrote. Since scrollTo and localscroll are plugins of jQuery, they first need jQuery to be loaded for them to work.
Copy this code into your head tag of your html document.
<!-- Load jQuery --> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script> <!-- Load ScrollTo --><script type="text/javascript" src="http://flesler-plugins.googlecode.com/files/jquery.scrollTo-1.4.2-min.js"></script> <!-- Load LocalScroll --> <script type="text/javascript" src="http://flesler-plugins.googlecode.com/files/jquery.localscroll-1.2.7-min.js"></script>
We’re now loading jQuery and the plugins directly from google. You can also save them to your computer and load them locally. If you want your html file to work offline, this is a must. Now we’re going to set up links and divs to scroll to. Pase the following into the body tag of your html document.
</pre> <h3>Links to colored boxes</h3> <pre> </pre> <div id="box-links"><a href="#box1">Link to box #1</a> <a href="#box2">Link to box #2</a> <a href="#box3">Link to box #3</a> <a href="#box4">Link to box #4</a></div> <pre> </pre> <div id="box1" class="box">Box #1</div> <pre> </pre> <div id="box2" class="box">Box #2</div> <pre> </pre> <div id="box3" class="box">Box #3</div> <pre> </pre> <div id="box4" class="box">Box #4</div> <pre>
Let’s set up the actual script that will enable the smooth scrolling. Paste this code inside your head tag at the very bottom (above “</head>”).
<!-- javascript that will initiate jQuery and the LocalScroll plugin --><script type="text/javascript">// <![CDATA[
// When the document is loaded...
$(document).ready(function()
{
// Scroll the whole document
$('#box-links').localScroll({
target:'body'
});
});
// ]]></script>
Your document probably looks a bit dull now. Only text. We need some CSS! Put this code in your head tag as well:
<style type="text/css">
/* CSS for the big boxes */
.box {
width: 300px;
height: 300px;
color: #fff;
padding: 10px;
margin: 100px 0 0 0;
}
#box1 {
margin: 300px 0 0 0;
background: blue;
}
#box2 {
background: red;
}
#box3 {
background: green;
}
#box4 {
background: gray;
}
/* CSS for the small boxes that will scroll inside a div */
#small-box-container {
border: 1px solid black;
padding: 20px;
width: 300px;
height: 200px;
overflow: scroll;
}
.small-box {
color: #fff;
padding: 10px;
width: 200px;
height: 200px;
margin: 0 0 50px 0;
}
#small-box1 {
background: blue;
}
#small-box2 {
background: red;
}
#small-box3 {
background: green;
}
</style>
Now, when you click on a link. Your whole document should smoothly scroll down to a colored box.
Here’s the whole code for the html document. I’ve also added a div where you scroll to boxes inside.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery scrollTo & localscroll Demo</title>
<!-- Load jQuery -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
<!-- Load ScrollTo -->
<script src="http://flesler-plugins.googlecode.com/files/jquery.scrollTo-1.4.2-min.js"></script>
<!-- Load LocalScroll -->
<script src="http://flesler-plugins.googlecode.com/files/jquery.localscroll-1.2.7-min.js"></script>
<!-- Some CSS -->
<style type="text/css">
/* CSS for the big boxes */
.box {
width: 300px;
height: 300px;
color: #fff;
padding: 10px;
margin: 100px 0 0 0;
}
#box1 {
margin: 300px 0 0 0;
background: blue;
}
#box2 {
background: red;
}
#box3 {
background: green;
}
#box4 {
background: gray;
}
/* CSS for the small boxes that will scroll inside a div */
#small-box-container {
border: 1px solid black;
padding: 20px;
width: 300px;
height: 200px;
overflow: scroll;
}
.small-box {
color: #fff;
padding: 10px;
width: 200px;
height: 200px;
margin: 0 0 50px 0;
}
#small-box1 {
background: blue;
}
#small-box2 {
background: red;
}
#small-box3 {
background: green;
}
</style>
<!-- javascript that will initiate jQuery and the LocalScroll plugin -->
<script>
// When the document is loaded...
$(document).ready(function()
{
// Scroll the whole document
$('#box-links').localScroll({
target:'body'
});
// Scroll the content inside the #scroll-container div
$('#small-box-links').localScroll({
target:'#small-box-container'
});
});
</script>
</head>
<body>
<h1>A very simple jQuery LocalScroll Demo</h1>
<h3>Scroll inside a div</h3>
<div id="small-box-links">
<a href="#small-box1">Link to small-box #1</a>
<a href="#small-box2">Link to small-box #2</a>
<a href="#small-box3">Link to small-box #3</a>
</div>
<div id="small-box-container">
<div id="small-box1" class="small-box">Small-Box #1</div>
<div id="small-box2" class="small-box">Small-Box #2</div>
<div id="small-box3" class="small-box">Small-Box #3</div>
</div>
<hr>
<h3>Links to colored boxes</h3>
<div id="box-links">
<a href="#box1">Link to box #1</a>
<a href="#box2">Link to box #2</a>
<a href="#box3">Link to box #3</a>
<a href="#box4">Link to box #4</a>
</div>
<div id="box1" class="box">Box #1</div>
<div id="box2" class="box">Box #2</div>
<div id="box3" class="box">Box #3</div>
<div id="box4" class="box">Box #4</div>
</body>
</html>
I hope you found this tutorial useful. If you have trouble getting it to work, please write your questions in the comments below. Cheers!
When moving this site, I used WordPress DBmanager plugin to back up my database. I had trouble finding the path to mySQL and the mysqldump.
The path to the “files” are as follows.
To mysqldump: /Applications/MAMP/Library/bin/mysqldump
To mysql: /Applications/MAMP/Library/bin/mysql
Hope it will help someone
My friend (and former boss) Soichiro and Karin are making Swedish meatballs. Soichiro visited my home town of Hudiksvall last weekend. We had a great time
