Nils Lande: 2014

Wednesday, September 10, 2014

I may have caught...

Anyway, I was able to create the layout that I want. Each section has two divs ('divitis' ?). One as the outer container and one inner one for content. The reason for this is that I want to be able to add margin, borders, padding and so on to the content-div without ruining the layout.

Thanks to Jennifer for this post: http://webdesign.about.com/od/csstutorials/f/set-css-height-100-percent.htm

The thing I has missed until I read this was the setting of the height for the html- and the body-element.

The HTML:

The CSS:

Sunday, August 17, 2014

Add a common menu-bar

After playing around with an iFrame-element I decided to go for a pure JavaScript/CSS solution for the menu-bar on my site (nils-lande.appspot.com).

I call the init() function of the menu-module directly from the onload-event and use a div-element as a container for the menu.

 <body class="page" onload="menu.init(document.getElementById('menuContainer'));">  
   <div id="menuContainer"></div>

The menu is put in its own JavaScript module:

 var menu = (function() {  
      return {  
           init: function(element) {  
             var menuHTML = "<ul class='menu'>";  
                     menuHTML += "      <li class='menuItem1'><a href='/index.html'>Nils Lande</a></li>";  
                     menuHTML += "     <li class='menuItem'><a href='/html/HelloWorld.html'>Hello World!</a></li>";  
                     menuHTML += "     <li class='menuItem'><a href='/html/WhereAreYou.html'>Where are you?</a></li>";  
                     menuHTML += "     <li class='menuItem'><a href='/html/About.html'>About</a></li>";  
                     menuHTML += "</ul>";  
                     element.insertAdjacentHTML("BeforeEnd", menuHTML);  
                     return;  
           }  
      };  
 }) ();

The CSS I have used isn't very polished yet, but I have included it below anyway:

 .menuItem, .menuItem1 {  
      margin: 0px;  
      padding: 0px;  
      width: 200px;  
      height: 40px;  
      line-height: 40px;  
      float: left;  
      font-family: verdana;  
      vertical-align: bottom;  
 }  
 .menuItem1 {  
      font-size: 20px;  
 }  
 .menu {  
      list-style-type: none;  
      margin: 0px;  
      padding: 0px;  
      overflow: hidden;  
      background-color: lightgrey;  
      vertical-align: bottom;       
 }  
 .menuItem a, .menuItem1 a {  
      /*display: block;*/  
      width: 60px;  
      color: black;  
 }  
 .menuItem a:link, .menuItem1 a:link {  
      text-decoration: none;  
 }

For this post I used http://codeformatter.blogspot.no/ for formatting the code.

Wednesday, August 13, 2014

Google App Engine

Trying out the Google App Engine.
Using Python with the Django framework.
Initially I'll set it up for serving static files (html, css, images and JavaScript) as described in this article: http://www.csarchive.net/2012/03/host-website-on-google-application.html

You can find my site here: nils-lande.appspot.com

Tuesday, August 5, 2014

Google Code, Git and Hotlinking

(If you click the button above Chrome will log this error message: Refused to execute script from 'https://code.google.com/p/nilslande-blogger-code/source/browse/blog-posts/Post_10/js/HelloGoogleCode.js' because its MIME type ('text/html') is not executable, and strict MIME type checking is enabled. ).

Putting my JavaScripts on Google Code seemed like a good idea after reading this:

http://www.problogtricks.com/2014/02/host-css-javascript-files-on-google-code.html

but not if you read this:

https://github.com/blog/1482-

or this:

http://blog.sucuri.net/2013/05/who-really-owns-your-website-please-stop-hotlinking-my-easing-script-use-a-real-cdn-instead.html

Friday, July 25, 2014

GeoLocation in Opera (Win 8)

Testing the GeoLocation functionality in the Opera browser using my previous post http://nilslande.blogspot.no/2014/06/google-earth-part-2-where-are-you.html .

When I press the button to get my position Opera asks for my position with this dialog:

When I press allow I am also asked to accept Google's terms of service:

The fact that the web-page is using my position is shown with a little Location-symbol in left part of the address field:

If I press the Location-symbol I can clear the permission:

This is very similar to the functionality in Chrome, as expected.

The settings for Geolocation is also quite good in Opera:

I especially like the Geolocation exceptions dialog where you can see all permissions that have been granted or refused:

Tuesday, July 8, 2014

Hello Post 7

My previous post had a static class. Lets see if we can use that class in this post.
The button below has 2 different behaviours:

If my previous post (referred to as 'Post7') is visible the Post7.sayHello() function will be called and the message counter will be updated.
If only this post is shown, then an alert message is shown and no message counter is incremented(since it does not exist).

The code: <head> <script type="text/javascript"> // Constructor function. The object is called 'Post8' to make it unique // on my blog (when all posts are shown). function Post8(){}; // Static method. // If the static calss from the previous post is defined, // we call the sayHello() method on it. If not, we show an // alert. Post8.sayHelloToPost7 = function(helloText) { console.log("sayHelloToPost7 ()"); // Have to use the typeof here to not get 'Undefined' exception. if(typeof Post7 === 'undefined') { window.alert('Post7 is not here...'); }else{ Post7.sayHello(helloText); } }; </script> </head> <body> <p>Text omitted. </p> <p><button onclick="Post8.sayHelloToPost7('Hello from Post8')">Hello Post7!</button></p>

Sunday, July 6, 2014

Static variables and methods (more JavaScript)

Another post for experimenting with JavaScript. This really started when I made my second Google Earth post and relized that my Google Earth object (named 'ge') was global. This caused a lot of strange behaviour when more than one blog-post was shown at the same time.

This post contains my soultion to this problem; I will put my variable and functions into an object for each post.

-- hello ? --

The code:

Object Literal (JavaScript)

This is another one of my small JavaScrpt test posts. Since I am a novice in JavaScript and HTML this may not be that interseting for others.

This post is a small variation of my earlier Hello world post. This post uses an object literal that contains a single method. The method is called from two buttons, one directly and one indirectly using a onClick function.
The object and all globals (variable names, functions HTML element IDs) have a number appende to them to avoid naming clashes with my other posts.

The code:
<head> <script type="text/javascript"> var Post6 = { sayHello: function(helloText) { console.log("sayHello()"); window.alert(helloText); } }; function onClick_6() { console.log("onClick()"); Post6.sayHello("Hello world."); }; </script> </head> <body> <p> Blog text omitted. </p> <p> <p><button onclick="onClick_6()">Say hello!</button></p> <p><button onclick="Post6.sayHello('Hello again')">Say hello again!</button></p> <br /> <p>

Friday, June 27, 2014

Google Earth Part 2 - Where are you?

Introduction

The Geolocation API enables a web-page to get the current position of the user, provided that the user has given the browser permission to disclose the position.
This post prints the position returned as latitude and longitude coordinates as well as the accuracy of the position.

The post also uses the position returned to place the camera in Google Earth.

I was actually a bit suprised (scared?) when the camera zoomed in exactly on my house (the accuracy returned by the Geolocation API is 30 meters). My laptop does not have a GPS, so how does it now my position so accurately?

While writing this post I got into trouble with my first Google earth post. While it looked OK when the post was shown alone it did not work correctly in the main window any more. In the main window all all my posts are shown and there my first post had two instances of the Google Earth plugin, instead of one. It took a while before I realized that the id-attribute of the div-element was identical in the two posts. When both posts are shown in the same page this causes a problem since the id-attribute is no longer unique on the page. Reading this is also a good idea: http://stackoverflow.com/questions/1841916/how-to-avoid-global-variables-in-javascript

The Geolocation API

Most of the code used for this sample is copied directly from here.

Press the button to get your position, your browser will prompt you for permission. I have included some screenshots from the Google Chrome browser below.

- position will appear here -

When a page tries to get the current position the browser will ask for the users permission trough som kind of prompt or through some privacy seting.

In Chrome a location icon in the address field shows that the page has requested you location. A red cross is shown if permission was denied.

Using the location in Google Earth

The button below sets the camera in Google Earth using the position returned by the Geolocation API.
It can actually be a bit scary; the geek in me said 'wow', while the citizen thought: 'what the ....'.

Furher reading:

Mark Pilgrim has written this excellent article on the Geolocation API: “You Are Here (And So Is Everybody Else).”

Tuesday, June 24, 2014

Google Earth Part 1

The Google Earth plugin. This will only work on a PC or a Mac, no tablet or phone. This test only includes built-in functionality. Try to double click left and right mouse button, drag using the mouse, click '+' and '-' buttons, etc. The code is included in the textarea under the globe, 'down-under' so to speak.

The code (minus the text):

Monday, June 23, 2014

The second..

The second...

The second post must be to test if I can run JavaScript in a post.
Lets try a button

Here is the complete code for this post (inside a HTML ~~pre-element~~ textarea-element):
<head> <script type='text/javascript'> //<![CDATA[ function sayHello() { window.alert('Hello world!'); } //]]> </script> The second... </head> <p>The second post must be to test if I can run JavaScript in a post. <br> Lets try a button <button onclick="sayHello()">Say hello!</button> <br> </p> <p> Here is the complete code for this post (inside a HTML <strike>pre-element</strike>): <br> </p>

The first...

writing HTML on the iPad is not ideal. Better stick to text.

Well, editing on the iPad turned out to be completely impossible, so I had to rely on M$ to get the serious work done.

I'll add my LinkedIn profile as well Nils Lande on LinkedIn