Nils Lande

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: