Is there a way to mimic the native transition and functionality of "sliding entire pages" like you see on the iPhone but inside a web browser instead?
I want one HTML page to slide over and a new HTML page to take it's place after the press of a button.
The button cannot be constant. So like if you were to have a constant header with buttons that slid content inside a box then that would be incorrect. I need to slide the entire webpage.
Would slides made in HTML5 be what I need? Thank you in advance for any help!
Edit: I have also been thinking about possibly setting up two full-sized DIV's side by side with one hidden off the page with "overflow:hidden" and then using CSS transitions to hit a button and then move one DIV off the screen and the other one into view, but I have no idea how to do that.
The other really hard part about this is that my DIV containers need to be dynamic and 100% width and height. I can't used fixed dimensions.
EDIT:
Using the scrollTo and localscroll functions developed by Ariel Flesler I have been able to complete 99% of what I am looking for. However, at the very end of development, I hit a huge road block. Here is an image that I hope helps explain what I am trying to do:
My problem is that the main content area is a fixed position with an overflow-y auto so that I can keep the scrollbar for the DIV inbetween the header and the footer. But the problem is that when I initiate the sliding animation of my DIV by hitting my button, the fixed content area does not move and only the header and footers move. If I change the positioning of the main content area to "relative" everything moves like I want it to, but I lose the positioning of the scroll.
If someone could figure this out I will be greatly indebted to you!
(I would post a link to what I have, but I can't. It's confidential work for a company)
Thank you in advance!!
EDIT
I am working on reviewing all this information. I will respond in a couple days. Thank you all for you input!
I am currently developing something that may be useful to you. It uses the side by side divs you considered but I found difficulties in using 100% width due to issues with the scrollbars and differences in the browsers. I have overcome this by setting the widths in javascript (jQuery) which offers a cross-browser solution (tested in IE7, IE8, FF, Chrome, Safari, Opera).
Feel free to take as much of the source code as you like by inspecting the source and if you need me to talk you through anything, just let me know.
http://madesignuk.com/uploader/
PS I'm not 100% sure on the rules regarding posting the link to my personal site so if it is an issue for moderators, please let me know.
PPS The site is in development so please try not to mock me :p
You can do that by placing elements side by side inside a container with overflow:hidden, and just move the inner elements.
Here is a proof of concept. It doesn't handle resizing of the page after it has loaded, but it at least shows the principle. I have put three slides in the container, but the code is dynamic so that you can place any number you like.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Page Slide</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
var w = $(window).width();
var h = $(window).height();
var slides = $('.Slides > div');
$('.SlideContainer').css({ height: (h-60) + 'px' });
$('.Slides').css({ width: slides.length + '00%' });
slides.css({ width: w + 'px' });
var pos = 0;
$('.Left').click(function(){
pos--;
$('.Slides').animate({ left: (pos * w) + 'px' });
});
$('.Right').click(function(){
pos++;
$('.Slides').animate({ left: (pos * w) + 'px' });
});
});
</script>
<style type="text/css">
body { margin: 0; padding: 0; }
.Header { position: absolute; left: 0; top: 0; width: 100%; height: 30px; line-height: 30px; text-align: center; background: #000; color: #fff; }
.Footer { position: absolute; left: 0; bottom: 0; width: 100%; height: 30px; line-height: 30px; text-align: center; background: #000; color: #fff; }
.SlideContainer { position: absolute; left: 0; top: 30px; width: 100%; overflow: hidden; }
.Slides { position: absolute; left: 0; top: 0; height: 100%; }
.Slides > div { float: left; height: 100%; overflow: scroll; }
.Slides .Content { margin-top: 100px; text-align: center; }
.Slides .Content a { font-size: 30px; }
</style>
</head>
<body>
<div class="Header">
absolutely positioned header
</div>
<div class="SlideContainer">
<div class="Slides">
<div class="Slide">
<div class="Content">
<h1>Slide 1</h1>
«
</div>
</div>
<div class="Slide">
<div class="Content">
<h1>Slide 2</h1>
«
»
</div>
</div>
<div class="Slide">
<div class="Content">
<h1>Slide 3</h1>
»
</div>
</div>
</div>
</div>
<div class="Footer">
absolutely positioned footer
</div>
</body>
</html>
Edit
Now jsfiddle is up again, so you can try it out here: jsfiddle.net/9VttC
Have you looked at LocalScroll? It will make all hash links scrollable within the container you define. You would have to set the width of slides though, as you'll need to float them.
Use the scrollTop CSS attribute : you want to scroll down 100px in your main content area ?
Just do that :
var newScrollTop = document.getElementById("main_content_area").scrollTop + 100;
$("#main_content_area").animate({scrollTop: newScrollTop}, 500);
The second line is made up with jQuery, but just remember the principle : affect the new scrollTop value to your main_content_area div's CSS.
Try JQuery Cycle plugin.
http://jquery.malsup.com/cycle/
They have provided lot of sample code and tutorials, so it is easy for you to build it your own way.
If I understand correctly, the scrollTo method works, but only if you change the position:fixed to position:relative, which has the consequence of making the scrollbar stretch beyond the scrolling div?
Wouldn't it be easier to put a wrapper div around your main content area with a top margin to account for the header and a bottom margin to account for the footer, and set it to have overflow:scroll, and to use the scrollTo function within it?
The Google Chrome Team made 20 Things I Learned About Browsers and the Web which has this effect.
Just as a theoretical example, but I would create static HTML pages and use jQuery to load the content from them (to provide compatibility). The main problem would be the scrolling.
I use jQuery to calculate the width of the browser, set that to be the width of the <body>, and then set overflow: hidden. Then, just create an absolutely positioned content box, and slide both of them at once.
I'll post some code later, but this is what I would begin with (I, being a pathetically incompetent JS fiddler).
You could use something like Coda Slider, and have the content of the slide be the whole page.
Related
I am dynamically including an html content in the page.
The content is a tree structure in html which is usually huge in height and width.
I want that after inclusion with AJAX the root node of the tree is visible : the included HTML content is centered.
UPDATE1: in the MWE I just use width:2000px to imitate something wider than the screen page. Point is that to center this huge thing on the page not to change its width (Scaling could be acceptable but how?).
UPDATE2: The root of the included tree should be horizontally centered but its other parts also needs to be available through scroll bars of the browser or some inner scroll bars.
What are the simple and correct ways of doing it (without frames as they are deprecated) by styling?
UPDATE3: Below the screenshot of a real example. After tree is generated and included dynamically in the bottom of the page, it is not visible for a client.
One needs to use scrollbars to see the root of a tree.
UPDATE4: See the one possible option where the included content is placed in a window with scrollbars which needs to be zoomable, via browser or vis additional functionality.
MWE : https://jsfiddle.net/kowalsky/tgkbn8wp/2/
HTML:
<body>
<h1>Test page</h1>
<div>
So here comes a long text that might fill the page and wrap outomatically like this.
Below is a WIDETHING which is supposed to content an HTML loaded dynamically via AJAX.
The loaded content is usually wider and is impossible to fit to the page.
<b>What are the ways to put WIDETHING centered on the page, i.e. CENTER is in the center of the page?</b>
</div>
<div class="frame">
<div class="wideThing">
CENTER
<div class="box">BOX1</div>
<span class="box">BOX2</span>
<span class="box">BOX3</span>
<span class="box">BOX4</span>
<div class="box">BOX5</div>
</div>
</div>
</body>
CSS :
.wideThing {
width: 2000px;
text-align: center;
}
.frame {
width: 100%;
border: solid 2px black;
}
.box {
padding: 40px 100px;
border: solid 1px black;
background-color: red;
}
I would use this:
.wideThing {
position: relative;
width: 2000px;
left: 50%;
transform: translateX(-50%);
text-align: center;
}
That first moves the left border to the middle and than moves it back left by 50% of its own width, thereby centering it horizontally.
https://jsfiddle.net/p7d2j323/1/
I would just do this:
.wideThing{
width: 100%;
text-align: center;
}
https://jsfiddle.net/tgkbn8wp/4/
A possible solution is to use jQuery to set the position of the horizontal scrollbar at the center of the tree.
This could be accomplished using the .scrollLeft() method and some calculations to get the new position of the horizontal scrollbar.
But bear in mind that you'd have to execute this script after the tree had finished loading.
Here's a JSFiddle.
And of course you could set the position of the vertical scroll bar similarly using .scrollTop().
More about .scrollLeft() and .scrollTop() on jQuery's website.
I've been doing a bit of work on a page designed specifically for print in HTML/CSS and stumbled into a roadblock trying to create a left border that works across multiple (print) pages at 100% height.
After reading 'How to make page border in print CSS for every single page' and finding that the best answer didn't work, even with position: fixed. I finally gave up and copied that approach but with a suitably low negative value for the bottom property that it's unlikely to ever be surpassed in common usage. Which works for now but isn't particularly nice (you'll need to print preview it):
<html>
<head>
<style>
.page-break {
page-break-after: always;
}
#edge {
position: fixed;
left: 0;
right: 0;
top: 0;
bottom: -10000mm;
overflow: visible;
border-left: 5mm solid #0081CC;
}
div {
padding-left: 5mm;
}
</style>
</head>
<body>
<div id="edge"></div>
<div>
Page 1 content
</div>
<div class="page-break"></div>
<div>
Page 2 content
</div>
</body>
</html>
So I'm curious now if there is a cleaner (and more future proof) way of achieving the same result, the closest I got was applying a border-left direct to the body tag which, obviously, works on screen media but for print stops at the end of the content so the last page is cut off.
From research it seems like the cleanest approach by far would have been to use CSS3 Page-Margin Boxes. Sadly they aren't even supported enough to get a page on caniuse.com yet and the Mozilla implementation appears to have gotten stuck in the mud 2 years ago. (https://bugzilla.mozilla.org/show_bug.cgi?id=856371)
Does anyone have any CSS magic up their sleeve that might make this work?
Update
Just to avoid confusion, the issue with the bottom: 0 approach advocated in How to make page border in print CSS for every single page and https://stackoverflow.com/a/34574001/2823496 is illustrated in this image.
The body box retains the dimensions of the content rather than extending to the bottom of the page so the border rather than covering the entirety of the last page will stop when the content does.
Make use of wrapper class. it stick only arond content
.wrapper {
position: absolute;
overflow: auto;
left: 0;
right: 0;
top: 0;
bottom: 0;
border-left: 5px solid red;
}
</style>
</head>
<body>
<div class="wrapper">
Your Content...
</div>
</body>
Implementation:UPADTE
Hope its help
I've recently tried out to make a website with a bar on top and with an image that cover the rest of the screen, much like this X-theme demo. I've managed to get it right in proportion (with a lot of help from this thread).
<body>
<div id="block">
<p>logo</p>
</div>
<header>
<h1>jumbotron</h1>
</header>
<div id="page">
<p>content</p>
</div>
*{
margin: 0;
}
#block {
height: 10vh;
width: 100%;
background: red;
background-size:cover;
}
body{
width: 100%;
height: 100%;
}
header {
height:90vh;
width:100%;
background: green;
background-size:cover;
}
This solution is however not so practical. When you shrink down your browser window, the bar on top (naturally) shrinks as well. Adding a logo would then be impossible, so I wonder if there is any way to make the bars size constant, while the header still takes up the rest of the screen?
I would really appreciate some help! :)
Because vh and px are two different units, it is not possible to do some math with them like 100vh - 30px, but it's possible using some jQuery/JavaScript. I'll give you an example using jQuery (Be sure to add a fixed height to the header).
On the end of this answer there is a CSS-only solution for this problem. Found out about it later.
This is the html code:
<header class="header">YOUR LOGO HERE</header>
<section class="jumbotron">CONTENT HERE</section>
<section class="content">SOME OTHER CONTENT HERE</section>
And this should be the javascript one:
var resizePage = function() {
var headerHeight = $('.header').outerHeight() // Getting the height of the header
, pageHeight = $(window).height(); // Getting the height of the window
$('.jumbotron').css('height', (pageHeight-headerHeight));
}
$(window).on('resize', resizePage()); // Fire every time the page resizes
resizePage(); // Fire once the site is running
Here is a JSFiddle working with the snippets I told you: CLICK ME
UPDATE: Just found out that CSS is providing a calc() method. Here is another JSfiddle with this method: CLICK ME, TOO. So it is possible using pure CSS, but be aware of the browser support for this.
.jumbotron {
/* Viewport height 100 minus 50px calculated using pure css */
height: calc(100vh - 50px);
}
Okay, so i need a slider which is in a normal page to span across the whole screen.
The wrapper and all other elements is 960px max-width so thats how far the slider goes.
If i change these, the whole site will become messed up.
Im using Wordpress 3.5 with Twentytwelve theme as parent.
SLIDER: http://rocketplugins.com/wordpress-slider-plugin/
This is the only code i use in the post. So i guess i need to make the post wider?
[slider id='32' name='']
Not too sure about the product that your link explains but you will need to edit your page template.
There will be a content div (the one with max-width set). your new div, the one for the new slider, needs to be above it. I made a page layout fiddle just for you.
HTML
<div class="newdiv">Slider here</div>
<div class="content">
<p>Your WordPress post stuff here</p>
</div>
CSS
.content{max-width:960px; height: 800px; background: #D3D3D3; margin: 0 auto;}
.newdiv{width:100%; height:200px; background:#BADA55;}
Solved by
<div id="slider">[slider id='32' name='']</div>
and
#slider {
position: absolute;
left: 0;
right: 0;
height: 563px;
display: block;
}
Its not the best solution. But it works!
I have a vertically centered slideshow on a page, however I want to somehow add a "limit" so to speak on how high it slides up the page on smaller screens.
http://www.visioncreativegroup.com.au/demos/bps/index.php/production/theatre
If you resize your window, it will reach a point where the slideshow sits over the top of the navigation bar and the main logo. Basically it needs to stop at the base of these elements once the screen size reaches a small enough size.
Is this possible?
remove position: absolute; from .production-scroll class
Also remove position: fixed; from #sticky-footer if it is not necessary
I would separate the slideshow section of the site, and the header section. So you have 3 horizontal slices: header, slideshow, footer. Then you can center the slideshow in the middle segment, and it will never go over the header.
Give this small demo I've set up for you a try and see if you can switch up the HTML in your project to something similar:
HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Demo</title>
<!-- Insert below CSS here -->
<!-- Insert JQuery here (http://code.jquery.com/jquery-latest.min.js) -->
<!-- Insert below JS here -->
</head>
<body>
<div id="shell">
<div id="head">Header.</div>
<div id="slideshow">Slideshow.</div>
<div id="foot">Footer.</div>
</div>
</body>
</html>
CSS: (mainly for demonstration):
*{ margin: 0; padding: 0; }
div#head{ height: 200px; background: blue; }
div#foot{ height: 100px; background: red; }
div#slideshow{ height: 300px; background: green; }
JavaScript:
// Fix position initially and on each window resize.
$(window).resize(fix);
$(document).ready(fix);
function fix()
{
// Work out position value.
var base = $("div#slideshow").position().top;
var middle = $(window).height() / 2;
var hw = $("div#slideshow").height() / 2;
// Position top either at the position determined above, or 0 if it bypasses the top of the page.
var destination = Math.max(middle - base - hw, 0);
$("div#shell").offset({ top: destination });
}
You can grab the full working example here.