Hjälp med HTML5 touch events samt procentuell skalning

Hej kära SweClockare,

I utvecklingen av ny design på min hemsida har jag stött på ett par problem med mobila enheter samt responsiv design.

Det första problemet som har med procentuell skalning att göra är att jag inte lyckas skala ikonerna korrekt. Det jag vill är att de fyller ut den div de ligger i, samt att de hamnar typ i mitten. När jag sätter width och height till 100% stöter jag dock på en massa märkliga artefakter; först och främst hamnar ikonerna utanför diven (de börjar innanför, men slutar utanför), och dessutom börjar de inte förrän halvvägs ner i diven om man sätter top: 0;, vilket onekligen är rätt konstigt. Om någon har en lösning på det här får ni gärna säga till!

Mitt andra problem har att göra med hanteringen av touch events: jag vill att användaren ska kunna dra ut menyn från sidan, men vet inte riktigt hur jag ska göra det! Om man bara använder ett vanligt touchMove event aktiverar den funktionen så fort man rör fingret i den diven, men jag vill att man ska kunna dra ut den, och att diven då rör sig samtidigt med fingret, och bara i x-led. Jag vet hur jag kan flytta diven i endast x-led, inga problem, men hur får jag den ("bakre" änden av diven) att stanna vid x=0 så att användaren inte bara kan flytta de. Hursomhelst? Skulle även vilja veta hur jag sätter en threshold så att när man har dragit ut hälften så kan man släppa och så åker resten ut, och är det mindre så åker den tillbaka, om ni förstår (tänk scrolling mellan olika sidor på iPhones/Androids springboard/hemskärm). Och om det finns någon som vet hur man involverar fingrets velocitet i det hela (a la hemskärm/springboard), så att man inte behöver dra lika långt om fingret rör sig snabbare skulle även detta uppskattas!

Ursäktar för mycket och kompakt text och tackar även redan nu på förhand för svar!

Med vänliga hälsningar
Leo

Självklart!

        <nav id = "navBar">
        <img id = "navBG" src="images/menuBar.svg" />
        <ul id = "menuItems">
        	<a href="#"><li id = "portfolio" class = "navItem" id = "portfolio"></li></a>
            <a href="#"><li id = "about" class = "navItem" id = "about"></li></a>
            <a href="#"><li id = "blog" class = "navItem" id = "blog"></li></a>
        </ul>
        </nav>

samt väsentlig CSS nedan:

#navBar {
	position: absolute;
	z-index: 9001;
	width: 8.3%;
	height: 100%;
	top: 0px;
	left: -7%;
	transition: left .25s ease-in-out;
	-moz-transition: left .25s ease-in-out;
	-webkit-transition: left .25s ease-in-out;
}

#navBar:hover {
	left: 0;
}

#navBG {
	position: absolute;
	width: 100%;
	height: 100%;
	opacity: 0.47;
}

#menuItems {
	list-style-type: none;
	height: 100%;
}

.navItem {
	o-background-size: 100% 100%;
	-webkit-background-size: 100% 100%;
	position: absolute;
	left: 8%;
	z-index: 9003;
	opacity: 0.47;
	transition: opacity .5s ease-in-out;
	-moz-transition: opacity .5s ease-in-out;
	-webkit-transition: opacity .5s ease-in-out;
}

.navItem:hover {
	opacity: 1;
}

#portfolio {
	background-image: url(../images/portfolio.svg);
	top: 25%;
	width: 100%;
	height: 100px;
	}


#about {
	background-image: url(../images/profile.svg);
	top: 50%;
	width: 100%;
	height: 100%;
}

#blog {
	background-image: url(../images/blog.svg);
	top:75%;
	width: 100%;
	height: 100%;
}

Vet inte riktigt hur jag ska göra med skalningen, men kan säga att allt fungerar perfekt med ikoner på 100x100px när jag kör en viss procent från toppen (se http://bgslide.leosjoberg.com för hur det är utan procentuellt skalade ikoner)