Codenstuff.com

Posted: **Wed Sep 18, 2013 1:42 pm**

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>

Posted: **Wed Sep 18, 2013 2:41 pm**

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/

Posted: **Sat Sep 21, 2013 1:08 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>

Codenstuff.com

CSS3 - Win 8 Horizontal Content Page Slider

CSS3 - Win 8 Horizontal Content Page Slider

Re: CSS3 - Win 8 Horizontal Content Page Slider

Re: CSS3 - Win 8 Horizontal Content Page Slider