CSS3 - Win 8 Horizontal Content Page Slider
3 posts
Page 1 of 1
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.
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:
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.
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.
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/
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.
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:
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
Copyright Information
Copyright © Codenstuff.com 2020 - 2023