CSS3 - Win 8 Horizontal Content Page Slider

3 posts Page 1 of 1
Contributors
User avatar
mikethedj4
VIP - Site Partner
VIP - Site Partner
Posts: 2592
Joined: Thu Mar 25, 2010 4:36 am

http://jsbin.com/exUmaFU/1/edit

I love Windows 8, among many of the apps, and one of my favorites is the weather app.
Today I wanted to try making "horizontal page content" as seen on the weather app in the screenshot below.
win8-h-app.jpg
I was trying to do this using DIV's and haven't had any luck. I've tried various methods and whatever I tried using percents this didn't work. I reverted to using em with tables and I got the effect I wanted, but now my problem is getting the div's to have at least 90% width on page width.

Any help would be greatly appreciated as to how this effect can be accomplished.

Simplified Code:
Code: Select all
<!DOCTYPE html>
<html>
<head>
<title>Win 8 Horizontal Content Experiment</title>
<meta charset='utf-8'>
<meta content='width=device-width, height=device-height, minimum-scale=1.0, maximum-scale=1.0' name='viewport'>
<link rel='stylesheet' href='http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.css'>
<script src='http://code.jquery.com/jquery-1.9.1.min.js' type='text/javascript'></script>
<script src='http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js' type='text/javascript'></script>
<style type="text/css">
body {
	background: #000;
}

#contain {
	display: inline-block;
	position: absolute;
	width: 100%;
	height: 100%;
    overflow-y: hidden;
    overflow-x: scroll;
}

#contain table {
	height: 100%;
}

#contain td {
	width: 100%;
	height: 100%;
	border: 0px;
	padding: 0px;
	margin: 0px;
}

/* Separate DIVS Inside Container */
#contain .box {
	display: inline-block;
	width: 80em;
	height: 100%;
	background: red;
	color: #700;
}
</style>
</head>
<body>
	<div id="contain">
		<table>
			<tr>
				<td>
					<div class="box">
						<center><h1>Page 1</h1></center>
					</div>
				</td>
				<td>
					<div class="box">
						<center><h1>Page 2</h1></center>
					</div>
				</td>
				<td>
					<div class="box">
						<center><h1>Page 3</h1></center>
					</div>
				</td>
				<td>
					<div class="box">
						<center><h1>Page 4</h1></center>
					</div>
				</td>
				<td>
					<div class="box">
						<center><h1>Page 5</h1></center>
					</div>
				</td>
				<td>
					<div class="box">
						<center><h1>Page 6</h1></center>
					</div>
				</td>
			</tr>
		</table>
	</div>

<script type="text/javascript">
(function() {
	function scrollMenu(e) {
		e = window.event || e;
		var delta = Math.max(-1, Math.min(1, (e.wheelDelta || -e.detail)));
		document.getElementById('contain').scrollLeft -= (delta*40); // Multiplied by 40
		e.preventDefault();
	}
	if (document.getElementById('contain').addEventListener) {
		// IE9, Chrome, Safari, Opera
		document.getElementById('contain').addEventListener("mousewheel", scrollMenu, false);
		// Firefox
		document.getElementById('contain').addEventListener("DOMMouseScroll", scrollMenu, false);
	} else {
		// IE 6/7/8
		document.getElementById('contain').attachEvent("onmousewheel", scrollMenu);
	}
})();
</script>
</body>
</html>
You do not have the required permissions to view the files attached to this post.
User avatar
CodenStuff
Site Admin
Site Admin
Posts: 4389
Joined: Tue Aug 04, 2009 1:47 am

lol I have no idea but I did find some info that may help you out.

http://css-tricks.com/how-to-create-a-h ... ling-site/

http://nowtheme.com/2013/03/metro-stylescripts/
Welcome to CodenStuff.com Learn Code, Love Code. Thank you for being a member of the community.
User avatar
mikethedj4
VIP - Site Partner
VIP - Site Partner
Posts: 2592
Joined: Thu Mar 25, 2010 4:36 am

http://jsbin.com/ovAhagU/1/edit

A guy from StackOverflow answered my question. Looks like when I was trying this before I forgot white-space: nowrap;. Just didn't think it was a factor. Thanks for the links btw they may come in handy in the future.

Here's the code if anyone wants to tinker with it, and you can view it in action with the code as well from the link above.

Full Code:
Code: Select all
<!DOCTYPE html>
<html>
<head>
<title>Windows 8 Horizontal Content Page Scroll</title>
<meta charset='utf-8'>
<script type='text/javascript' src='http://code.jquery.com/jquery-1.9.1.min.js'></script>
<style type='text/css'>
html, body {
    margin:0;
    width: 100%;
    height: 100%;
    background: #000;
}

#contain {
    display: inline-block;
    position: relative;
    width: 100%;
    height: 100%;
    overflow-y: hidden;
    overflow-x: scroll;
    white-space: nowrap;
}
.box {
    display: inline-block;
    width: 90%;
    height: 100%;
    padding: .5em;
    border:0;
}
.box:nth-child(2n) {
    background-color: red;
}
.box:nth-child(2n-1) {
    background-color: blue;
}
</style>
</head>
<body>
    <div id="contain">
        <div class="box">box1</div>
        <div class="box">box2</div>
        <div class="box">box3</div>
        <div class="box">box4</div>
        <div class="box">box5</div>
        <div class="box">box6</div>
    </div>

<script type='text/javascript'>
(function() {
    function scrollMenu(e) {
        e = window.event || e;
        var delta = Math.max(-1, Math.min(1, (e.wheelDelta || -e.detail)));
        document.getElementById('contain').scrollLeft -= (delta*40); // Multiplied by 40
        e.preventDefault();
    }
    if (document.getElementById('contain').addEventListener) {
        // IE9, Chrome, Safari, Opera
        document.getElementById('contain').addEventListener("mousewheel", scrollMenu, false);
        // Firefox
        document.getElementById('contain').addEventListener("DOMMouseScroll", scrollMenu, false);
    } else {
        // IE 6/7/8
        document.getElementById('contain').attachEvent("onmousewheel", scrollMenu);
    }
})();
</script>
</body>
</html>
3 posts Page 1 of 1
Return to “Help & Support”