Centered message fade into focus

This will fade website to black, and show a centered message.

JavaScript:

var heroHTML = '

Ferie!

Jeg har tatt ferie og er tilbake i august. God sommer!

Kontakt meg på epost

'; var blackHTML = '
'; $(document).ready(function(){ $('body').append(heroHTML); $('body').append(blackHTML); $('.black').fadeTo(1000, 0.5); setTimeout(function(){ $('.hero-unit').fadeTo(1000, 1); }, 1000); $('.hero-unit').css('margin-top', ($(window).height() - $('.hero-unit').outerHeight())/2 + 'px' ); $('.hero-unit').css('margin-left', ($(window).width() - $('.hero-unit').outerWidth())/2 + 'px' ); $(window).resize(function(){ $('.hero-unit').css('margin-top', ($(window).height() - $('.hero-unit').outerHeight())/2 + 'px' ); $('.hero-unit').css('margin-left', ($(window).width() - $('.hero-unit').outerWidth())/2 + 'px' ); }); $('body').on('click', function(){ if ($('.black').length){ $('.black').fadeTo(1000, 0); $('.hero-unit').fadeTo(1000, 0, function(){ $(this).remove(); $('.black').remove(); }); } }); });

Stylesheet/CSS:

.hero-unit {
  border-radius: 10px;
  background-color: #eee;
  padding: 60px;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 999;
  opacity: 0;
}
.black {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #000;
  opacity: 0;
  z-index: 998;
}
.btn {
  border: 1px solid #cccccc;
  border-radius: 4px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
  padding: 10px;
  text-decoration: none !important;
  color: black !important;
}

Android 2.3 web-browser width

The web-browser in android render pages in 320 or 800 pixels, and doesn’t seem to be consequent about it. This is because of “viewport”, rendering pages in a virtual screen with larger width then the mobile screen has. Viewport makes sure rendering of non-mobile-sites doesn’t break.

JavaScript(requires jQuery) to check width:

$("document").ready(function($){
  $('p.width').append($(window).width());
  $('p.height').append($(window).height());
});

Add this meta tag to always render in mobile native resolution:


Further reading:
http://developer.android.com/guide/webapps/targeting.html
http://tripleodeon.com/2011/12/first-understand-your-screen/

jQuery slideshow

JavaScript:

var bilder = [ // bildene våre
        "img/1.jpg",
        "img/2.jpg",
        "img/3.jpg",
        "img/4.jpg" 
        ];
var i=0; // teller

setInterval(pictureSlide, 5000); // kjør pictureSlide() hvert 5 sekund

function pictureSlide() {
  i++; // øk teller
  if (i == bilder.length) { i=0; } // sett til 0 hvis vi har gått rundt
  var currentImage = $('#slideshow > img');
  var nextImage = $(''); // lag det nye bildet
  nextImage.hide(); // gjem det
  $('#slideshow').prepend(nextImage); // legg til bildet
  nextImage.fadeIn(5000); // fade inn
  currentImage.fadeOut(5000, $(this).remove); // fade ut gammelt bilde samtidig, og fjern etterpå
};

CSS:

#slideshow img {
  position: absolute; // plasserer bildene "oppå" hverandre
}

Import photos – bash script

#!/bin/bash
#/usr/local/bin/auto-import-images
# Script auto-import images from folder(usb-attached camera)
camera_path=/media/camera
storage_path=/home/user/Pictures
regex='.*.(jpg|jpeg|bmp)'
date=`date +%Y`/`date +"%d. %B"`

#set display for messages
export DISPLAY=:0.0

# exit if I am already running
RUNNING=`ps --no-headers -C auto-import-images | wc -l`
if [ ${RUNNING} -gt 2 ]; then
  echo "Already running"
  exit 1
fi

# check if camera storage is mounted
mountpoint $camera_path > /dev/null
if [ "$?" == "0" ]; then
  images=`find $camera_path -iregex $regex | wc -l`
  if [ $images != 0 ]; then
    zenity --info --title 'Importing images' --text 'Importing images. Do not disconnect camera!'
    if [ ! -d "$storage_path$date" ]; then
      mkdir -p "$storage_path$date"; fi
    find $camera_path -iregex $regex | xargs -I file mv file "$storage_path$date"
    if [ "$?" != "0" ]; then
      zenity --info --title 'Import failed' --text 'Something went wrong, importing photos failed!';
    else
      sync
      umount $camera_path
      zenity --info --title 'Importing done' --text 'All photos where imported. You may disconnect the camera.'
      gnome-open "$storage_path$date"
    fi
  fi
fi