Spend a nice weekend with friends in Malmö and took this panorama shot of Turning Torso with my Samsung Galaxy SII LTE.
2012-10-11
Clickable Swype Canvas by JavaScript and HTML5
Created clickable swype canvas which scrolls window (or IFrame) with plain JavaScript and HTML5. See notes below.
Notes:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Clickable Swype Canvas</title>
</head>
<body>
<script type="text/javascript">
var active = false;
var startX = 0;
var startY = 0;
function move(e) {
if (active) {
var dy = (e.clientY - startY);
window.scrollBy(0, dy);
// parent.document.getElementById("frame").contentWindow.scrollBy(0, dy);
} else {
var px = e.clientX - c.offsetLeft;
var py = e.clientY - c.offsetTop;
if (px > 100 && px < 200) {
document.body.style.cursor = "pointer";
} else {
document.body.style.cursor = "default";
}
}
}
function down(e) {
active = true;
startX = e.clientX - c.offsetLeft;
startY = e.clientY - c.offsetTop;
ctx.clearRect(0, 0, 200, 1200);
ctx.moveTo(0,0);
ctx.lineTo(200, 1200);
ctx.stroke();
ctx.font="30px Arial";
// var scroll = parent.document.getElementById("frame").contentWindow.document.body.scrollTop;
var scroll = window.pageYOffset;
ctx.fillText("x" + startX + ", y:" + (startY + scroll), 10, 300);
}
function up(e) {
active = false;
}
function out(e) {
active = false;
}
</script>
<canvas id="c" style="background: yellow;" width="200px" height="1200px" onmousemove="move(event);" onmousedown="down(event);" onmouseup="up(event);" onmouseout="out(event);">
</canvas>
<script>
var c = document.getElementById("c");
var ctx = c.getContext("2d");
ctx.moveTo(0,0);
ctx.lineTo(200, 1200);
ctx.stroke();
</script>
</body>
</html>
Notes:
- If you want to use IFrame instead, uncomment, remove window.* and create a second page with the IFrame with this one as source. Make sure the id of the IFrame is "frame" or change in this code.
- You can make a lot of adjustments regarding the swype. I would add a threshold to the delta x and y to prevent "small" scrolls and to improve click stability.
- The canvas is filled with some debug draw to make it easier to see the scroll and click coordinates. This must be added afterwards the canvas tag (?)
- Canvas must have width and height, it can't be set in CSS style.
- The cursor pointer is changed at some coordinates to demonstrate canvas interaction. Just change the coordinates to some area and make it a link for example (document.location.href="www.google.com";)
2012-10-05
Create Reddit Upvote with JSP, JQuery, AJAX and Google App Engine
Finally used my Google-fu to create "post without reloading" on a styled div-tag with "no select on click" and "no line break".
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>Hello App Engine</title>
<style type="text/css">
div {
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
display: inline-block;
}
.div-up {
height: 10px;
width: 10px;
background-color: red;
}
.div-none {
height: 10px;
width: 10px;
background-color: gray;
}
.div-down {
height: 10px;
width: 10px;
background-color: black;
}
</style>
</head>
<body>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.2.js"></script>
<script type="text/javascript">
function vote(d) {
var value = d.getAttribute("vote");
if (value == null || value == "down") {
value = "up";
d.setAttribute("class", "div-up");
} else if (value == "up") {
value = "down";
d.setAttribute("class", "div-down");
}
d.setAttribute("vote", value);
var v = "a_vote=" + value;
$.ajax({type: "POST", url: "/vote", data: v});
}
</script>
some<div class="div-none" onclick=vote(this);></div>text
</body>
</html>
2012-09-26
Hen finns i Wordfeud
Hade ett trevligt lir som började med att min motståndare la alla bokstäver! Men med hjälp "hen" som vågad chansning har jag kommit tillbaka.
2012-08-22
Geyser Eruption Animation
Went to Island with our company and visited the geysers. Here's an animation of an eruption:
to delete http://imgur.com/delete/77is0MLlOuQMf7B
2012-08-16
Facebook is missing a genderless sex!
You may select either Male or Female, but there is no genderless sex?
2012-02-14
Berserk Golden Age Arc I: Egg of the Supreme Ruler - Första recension och 9,9 poäng på IMDB!
Jag ser verkligen fram emot att se Berserk Golden Age Arc I: Egg of the Supreme Ruler. Jag har läst all manga och sett animen flera gånger och nu när filmen visas i Japan känner jag hajpen, speciellt efter att ha läst den här recensionen:
http://japancinema.net/2012/02/10/berserk-golden-age-arc-i-egg-of-the-supreme-ruler-review/
Och väldigt trevligt att se 9,9 på IMDB ;)
Jag vet, IMDB suger och betyder ingenting (idag har Star Wars: Episode III - Revenge of the Sith 7,7 poäng vilket är löjligt) och det är bara sex personer som har röstat, men det är ändå kul att se att de som har sett filmen verkligen gillar den.
http://japancinema.net/2012/02/10/berserk-golden-age-arc-i-egg-of-the-supreme-ruler-review/
Och väldigt trevligt att se 9,9 på IMDB ;)
Berserk Golden Age Arc I: Egg of the Supreme Ruler - First review and 9.9 score at IMDB!
I'm really looking forward to watch Berserk Golden Age Arc I: Egg of the Supreme Ruler. I've been reading all of the manga and seen the anime several times and now when the movie have been released in theaters in Japan my hype is over the top, especially after reading this review:
http://japancinema.net/2012/02/10/berserk-golden-age-arc-i-egg-of-the-supreme-ruler-review/
And seeing the nice 9.9 score at IMDB ;)
I know! IMDB doesn't mean anything (as today, Star Wars: Episode III - Revenge of the Sith has a 7.7 score, ridiculous) and it's only 6 users have voted, but it's nice to see that those few who have seen the movie really enjoys it.
http://japancinema.net/2012/02/10/berserk-golden-age-arc-i-egg-of-the-supreme-ruler-review/
And seeing the nice 9.9 score at IMDB ;)
Prenumerera på:
Inlägg (Atom)