Windows 8 Horizontal Content Page - javascript

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 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:
<!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>

Don't use tables. Use inline-block divs with width: 100% and height: 100% inside div with position: relative, white-space: nowrap (this will keep the boxes in one line) and width:100% and height:100%. Make sure you define html, body {width: 100%; height: 100%} in your styles.
I created a jsfiddle with what I think you wanted to do.
http://jsfiddle.net/taW4T/2/

Related

Using main scrollbar to scroll inner div then scroll rest of page

I have a container div right-col inside of my hero div, that holds two inner divs. The inner divs are sticky and the container div is scrollable to give the illusion of cards sliding up.
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>Document</title>
</head>
<body>
<div class="hero">
<div class="left-col">h</div>
<div class="right-col">
<div class="top">1st card</div>
<div class="bottom">2nd Card</div>
</div>
</div>
<div class="projects">a</div>
<div class="contact-footer"></div>
<div></div>
</body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script type="text/javascript">
</script>
</html>
CSS:
body{
overflow: auto;
background-color: black;
}
.hero {
display: flex;
flex-direction: row;
}
.left-col{
width: 40vw;
background-color: black;
height: 100vh;
}
.right-col{
min-width: 60vw;
background-color: blue;
overflow: auto;
height: 100vh;
}
.top{
height: 100vh;
background-color: chartreuse;
position: sticky;
top: 0;
}
.bottom{
height: 100vh;
background-color: orange;
position: sticky;
top: 10%;
}
.projects{
height: 100vh;
background-color: crimson;
position: sticky;
top: 0;
}
However, the scroll bar is on the inside of the div right-col and independent from the main scrollbar. Is there a way that I can use the main scrollbar to scroll through the container div till it reaches the bottom then continues to scroll through the rest of the page? Possibly using js or jquery?
You could try adding the following css. It will make the inner scroll bar 0 width, so basically it will be invisible but still work.
.hero ::-webkit-scrollbar {
width: 0px;
}
If you need something more specific you could try using the scroll event to possibly synchronize both scroll bars or something.

Scroll drag on Safari, what's that?

Open the following on Safari and Chrome or Firefox.
https://prismjs.com/plugins/data-uri-highlight/
Now scroll right/left on the code sample. Did you notice it? Kind of a drag? What is that?
Is it a thing of prismjs? I mean, where should I change something to have same behavior on Safari as it is on Chrome/Firefox?
Here is what I did:
(I'm trying to make a source code visualizer. Similar to https://softwarerecs.stackexchange.com/questions/50866/view-multiple-pdf-side-by-side. I haven't seen anything like it before, have you? Features: 1. Side by side visualization of many files with horizontal scroll. 2. Per file independent vertical only scroll.)
index.html
<!DOCTYPE html>
<html>
<head>
<title>Welcome to nginx!</title>
<link href="style.css" rel="stylesheet" />
<link href="themes/prism.css" rel="stylesheet" />
</head>
<body>
<script src="prism.js"></script>
<div id="content">
<div id="left">
<pre class="line-numbers" data-src="main.cpp"></pre>
</div>
<div id="right">
<pre class="line-numbers" data-src="main.cpp"></pre>
</div>
</div>
</body>
</html>
style.css
#content, html, body {
height: 100%;
white-space: nowrap;
}
#left {
display: inline-block;
width: intrinsic;
background: black;
height: 100%;
overflow: scroll;
}
#right {
display: inline-block;
width: intrinsic;
background: black;
height: 100%;
overflow: scroll;
}
Width depends on the content (i.e. main.cpp).

How to overlay one div over another div (no position absolute ... )?

I need to overlay one div over another div in HTML / CSS / Javascript.
I've found this sample http://jsbin.com/kociyefoba/edit?html,css,output that works "quite" exacly as I'd like but when I try to translate it in a situation like mine (I've to use div inside a table ... ), I've some troubles.
I've tried to produce a sample code: here you're ...
<html>
<head>
<meta charset=utf-8 />
<title>test div over another div</title>
</head>
<body>
<table border=1>
<tr>
<td>
<div id="base1" style="position:relative;width:100%;height:100%;top:0px;left:0px">
<img src="https://www.google.com/logos/doodles/2013/maria_mitchells_195th_birthday-2005006.2-hp.jpg" />
</div>
<div id="overlay1" style="z-index:1;position:relative;width:100%;height:100%;top:50px;left:50px;color:red;">
Text Overlay
</div>
</td>
</tr>
</table>
</body>
</html>
If you use
position:absolute
in the code all works fine but note that you can't see the table borders .... I've to see them!
I've tried to use all the other option values for position but they doesn't work ....
Suggestions / examples / alternatives?
This is one way of doing it.
#overlay1 {
width: 100%;
height: 100%;
position: absolute;
color: red;
font-size: 40px;
z-index: 1;
top: 25px;
left:75px;
}
#base1 {
width: 100%;
height: 100%;
position: relative;
}
td {
position: relative;
}
<table border=1>
<tr>
<td>
<div id="overlay1">
Text Overlay
</div>
<div id="base1">
<img src="https://www.google.com/logos/doodles/2013/maria_mitchells_195th_birthday-2005006.2-hp.jpg" />
</div>
</td>
</tr>
</table>

Positioning div over a table in IE8

I have the following code:
<html>
<head>
<script src="http://code.jquery.com/jquery-1.10.2.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
$('.wrapper').append('<div class="floater" />');
var floater = $('.floater')
floater.css('top', 100);
floater.css('left', 200);
});
</script>
<style type="text/css">
.wrapper
{
width: 300px;
height: 300px;
border: 1px solid #000;
position: relative;
}
.floater
{
width: 10px;
height: 10px;
background-color: blue;
position: absolute;
display: block;
}
</style>
</head>
<body>
<table class="wrapper">
<tr>
<td>Cell content</td>
</tr>
</table>
</body>
</html>
Jsfiddle here (does not work on IE8): http://jsfiddle.net/W5ceN/3/
The idea is to have a div that will be positioned above the table and reposition it with javascript. It works nicely on Firefox and Chrome, but the floating div is not visible in IE8. Probably it's some CSS issue, but I have no idea where to look. Any help will be appreciated.

Javascript/ CSS webkit filter - remove blur on specific element

I'm trying to blur the background page and popup a loading box that is NOT blurred. I would think the blur(0px) would remove the blur on the loading div. However, the popup box also remains blurred.
How can I remove the blur for a specific element only?
<script>
document.getElementById("blurme").setAttribute("style","-webkit-filter: blur(3px)");
document.getElementById("loading").setAttribute("style","-webkit-filter: blur(0px)");
</script>
<html>
<body id="blurme">
<h1>Welcome to My Website</h1>
<div id="loading">
Please wait
</div>
</body>
</html>
Here's the CSS the loading box
#loading
{
background:#808080 url(loading.gif) no-repeat center center;
background-size:220px 50px;
height: 270px;
width: 75px;
position: fixed;
left: 50%;
top: 50%;
margin: -175px 0 0 -275px;
z-index: 1000;
border-radius: 15px;
display:none;
}
This is an issue of inheritance. By moving the blurme id to another div, the loading div ceases to be a child of the blurme object: The first letter in CSS is for cascading.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<style>
#loading
{
background:#808080 url(loading.gif) no-repeat center center;
background-size:220px 50px;
height: 270px;
width: 75px;
position: fixed;
left: 50%;
top: 50%;
margin: -175px 0 0 -275px;
z-index: 1000;
border-radius: 15px;
}
</style>
</head>
<body>
<div id="blurme">
<h1>Welcome to My Website</h1>
</div>
<div id="loading">
Please wait
</div>
<script>
document.getElementById("blurme").setAttribute("style","-webkit-filter: blur(3px)");
document.getElementById("loading").setAttribute("style","-webkit-filter: blur(0px)");
</script>
</body>
</html>
This should fix the problem.
<body>
<div id="blurme">
<h1>Welcome to My Website</h1>
</div>
<div id="loading">
Please wait
</div>
</body>

Categories