I'm wondering if it's possible to position elements with position: absolute; outside the viewport in iOS6.
Even when I use <meta name="viewport" content="width=640, maximum-scale=0.5, initial-scale=0.5, minimum-scale=0.5" /> it makes viewport have more width if an element is positioned with like right: 0; margin-right: -100px; (100px out of the viewport).
iOS tries to include this element in the viewport which is not what I want. I want to have it partially visible and partially hidden. And iOS adds horizontal scrollbar and includes the part of an element which is supposed to be hidden.
Yes, it is, if you use a wrapper with overflow: hidden
This example shows a red rectangle 100x100px that is position 50px to right of the viewport, without the viewport including it.
Create a container #limit that is aligned to the right of the viewport. Prevent to contents from enlarging the viewport by setting the overflow.
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
#limit {
position: absolute;
top: 0px;
right: 0px;
width: 100px;
height: 100px;
overflow: hidden;
}
#offset {
position: absolute;
top: 0px;
right: -50px;
width: 100px;
height: 100px;
background: #f00;
}
</style>
</head>
<body>
<div id="limit">
<div id="offset">
Hello
</div>
</div>
</body>
</html>
Related
I want to change the height of my jssor slider depending on the viewport width, to ensure the HTML of my slide could be read. I'm using ScaleSlider function to scale the slider from desktop and tablet breakpoints, then when I'm in the mobile breakpoint (under 480px width) I want to change the size of the slider to be 100% width and another height (not proportional to initial width and height).
The only way to make it works is to reload the page (==re-initialize jssor)
CSS
.sliderContainer{
width: 1180px;
height: 680px;
position: relative;
overflow: hidden;
#media screen and (max-width: $media-basicmobile-max){
width: 300px;
height: 425px;
}
.slides {
width:1180px;
height: 680px;
position: absolute;
overflow: hidden;
#media screen and (max-width: $media-basicmobile-max){
width: 300px;
height: 425px;
}
}
}
Any ideas? Maybe cloning the slider HTML content and initializing the slider when window resizes.
You can define a wrapper with breakpoints, and scale the slider to cover the whole wrapper area while window resizing. Please see the following example,
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Full Screen Slider Cover Window - Jssor Slider</title>
<style>
html, body {
margin: 0px;
padding: 0px;
width: 100%;
height: 100%;
background: #fff;
}
#wrapper {
margin: 0 auto;
width: 1180px;
height: 680px;
max-width: 100%;
position: relative;
overflow: hidden;
}
#media screen and (max-width: 500px) {
#wrapper {
width: 300px;
height: 425px;
}
}
</style>
</head>
<body>
<script type="text/javascript" src="../js/jssor.slider.min.js"></script>
<script>
jssor_slider1_init = function () {
var options = {
$SlideDuration: 800, //[Optional] Specifies default duration (swipe) for slide in milliseconds, default value is 500
$DragOrientation: 1, //[Optional] Orientation to drag slide, 0 no drag, 1 horizental, 2 vertical, 3 either, default value is 1 (Note that the $DragOrientation should be the same as $PlayOrientation when $Cols is greater than 1, or parking position is not 0)
$AutoPlay: 1, //[Optional] Auto play or not, to enable slideshow, this option must be set to greater than 0. Default value is 0. 0: no auto play, 1: continuously, 2: stop at last slide, 4: stop on click, 8: stop on user navigation (by arrow/bullet/thumbnail/drag/arrow key navigation)
$Idle: 1500 //[Optional] Interval (in milliseconds) to go for next slide since the previous stopped if the slider is auto playing, default value is 3000
};
var sliderContainerElement = document.getElementById("slider1_container");
var jssor_slider1 = new $JssorSlider$(sliderContainerElement, options);
//#region responsive code begin
//remove responsive code if you don't want the slider to scale along with window
function ScaleSlider() {
var wrapperElement = document.getElementById("wrapper");
var wrapperWidth = wrapperElement.clientWidth;
if (wrapperWidth) {
var wrapperHeight = wrapperElement.clientHeight;
var originalWidth = jssor_slider1.$OriginalWidth();
var originalHeight = jssor_slider1.$OriginalHeight();
if (originalWidth / wrapperWidth > originalHeight / wrapperHeight) {
jssor_slider1.$ScaleHeight(wrapperHeight);
}
else {
jssor_slider1.$ScaleWidth(wrapperWidth);
}
//adjust vertical position
var scaleHeight = jssor_slider1.$ScaleHeight();
sliderContainerElement.style.top = ((wrapperHeight - scaleHeight) / 2) + "px";
}
else
window.setTimeout(ScaleSlider, 30);
}
ScaleSlider();
$Jssor$.$AddEvent(window, "load", ScaleSlider);
$Jssor$.$AddEvent(window, "resize", ScaleSlider);
$Jssor$.$AddEvent(window, "orientationchange", ScaleSlider);
//#endregion responsive code end
};
</script>
<div id="wrapper">
<div style="position: absolute; left: 50%; margin-left: -2500px; width: 5000px; text-align: center;">
<!-- Jssor Slider Begin -->
<!-- To move inline styles to css file/block, please specify a class name for each element. -->
<div id="slider1_container" style="position: relative; margin: 0 auto; top: 0px; left: 0px; width: 600px; height: 300px;">
<!-- Loading Screen -->
<div data-u="loading" style="position:absolute;top:0px;left:0px;background:url('../img/loading.gif') no-repeat 50% 50%; background-color: rgba(0, 0, 0, .7);"></div>
<!-- Slides Container -->
<div u="slides" style="cursor: move; position: absolute; left: 0px; top: 0px; width: 600px; height: 300px;
overflow: hidden;">
<div>
<img u=image src="../img/landscape/01.jpg" />
</div>
<div>
<img u=image src="../img/landscape/02.jpg" />
</div>
<div>
<img u=image src="../img/landscape/03.jpg" />
</div>
<div>
<img u=image src="../img/landscape/04.jpg" />
</div>
</div>
<!-- Trigger -->
<script>
jssor_slider1_init();
</script>
</div>
<!-- Jssor Slider End -->
</div>
</div>
<!-- remove the following if no need-->
<p>other content</p>
</body>
</html>
I want to make a responsive site that has an image with links you can click.
This site has invisible divs that sync up with the picture even as the image scales and resizes with the browser.
I want to first try to do the same thing with an image, and then I want to try it with a video.
Are they using any scss or javasript to make that happen, or are they just using css and html?
You can do it using just CSS and HTML, I've made a quick JSFiddle with a full size image background and a little nav.
As with the links you make the text on the image, then create a div ontop of them, don't set a background and just use a border until you get them in the correct place.
https://jsfiddle.net/2mow8qhv/2/
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<header id="bgHeader"></header>
<nav id="topNav">
Description | Gallery | Map |
Comments
</nav>
<div id="pageWrapper">
<div id="description">
<body>
</html>
/* Set all padding and margins to 0 by default, and colour to a grey unless overwritten*/
*{
padding: 0px;
margin: 0;
color: #333;
}
/* HEADER AND NAVIGATION*/
/* Sets a background image to fill 100% of the screen and fixes it in place*/
header#bgHeader{
background-image:url("http://seattlebubble.com/blog/wp-content/uploads/2014/11/Weyerhaeuser-Mansion_Tacoma.jpg");
background-size: cover;
background-position: center center;
background-attachment: fixed;
position:absolute;
width:100%;
height:100%;
}
/* Sets the navigation menu to the bottom of the page, and layered above the image*/
nav#topNav{
height: 60px;
width: 100%;
position: absolute;
bottom: 0px;
font-size: 1.5em;
line-height: 55px;
z-index: 2;
background: #000;
opacity: 0.7;
text-align: center;
}#topNav a{
text-decoration: none;
color: #FFF;
}#topNav a:hover{
color: #CCC;
}
So having a little browser compatibility issue, but only on the iPhone and iPad Safari browsers :(
Site: http://s433108212.onlinehome.us
My client wanted the space background in the header to stretch past the 1000px area I have set for the header. So my solution was to just create another wrapper that went 100% with a background:repeat-x image of the space to tile.
Well it works in every single browser on PC and Mac, except for the iPhone and iPad, it's really puzzling me because it looks like in the screenshots below that the tiled background image in the space_stretch_bg wrapper is 1) pushed over to the left and 2) not tiling so 3) you see white behind the 1000px fixed banner above it :/
Anyone else run into this?
CSS:
body {
width: 100%; margin: 0 auto;
background-image:url('../img/clouds.jpg');
background-repeat:repeat;
}
.wrapper_bg {
position: absolute;
width: 100%; height: 350px;
background-image:url('../img/bg_tile.gif');
background-repeat:repeat-x;
}
.space_stretch_bg {
position: absolute;
top: 100px; width: 100%; height: 250px;
background-image:url('../img/space_banner_big.jpg');
background-repeat:repeat-x; background-position:center;
}
.container1000 {
position: relative;
width: 1000px; top: -100px;
margin:auto;
}
#content_container {
position: absolute;
overflow: hidden;
top: 350px; padding: 20px;
background: #fff
}
Shortened HTML:
<body>
<div class="wrapper_bg">
<div class="space_stretch_bg">
<div class="container1000">
<!-- nav_bar -->
<div id="banner">
<a href="http://s433108212.onlinehome.us/index.php" title="Athena's Web">
<div class="logo">
<h1>Athena's Web</h1>
<h2>Carpe Noctem</h2>
<img src="http://s433108212.onlinehome.us/img/athenas_web_logo_no_text.png" alt="Athena's Web Carpe Noctem"/>
</div>
</a>
<div id="social_media">
<!-- social_icons -->
</div><!-- social_media -->
</div><!-- banner -->
<!-- End Header -->
First of all: it's because of wrapper_bg background that gets smaller. It's behind space_stretch_bg. Give wrapper_bg min-width: 1000px because your content_container is 1000px.
You can see the white space also on your pc browser if you make the browser smaller.
I have been having some real issues with CSS!
I have the following set up to centre the #Box div, which works perfectly on everything but mobile browsers. Because the screen size of the mobile browser is so narrow the left hand side keeps getting cut-off. I asked something similar previously and have tried to no avail to adjust it.
I have put the container and layout divs in since last time, but still the same problem occurs. Is there any way that I can adjust the code so that the left hand side doesn't keep getting chopped off?
.pageContainer {
margin-left: auto;
margin-right: auto;
width: 100%;
height: auto;
padding-left: 1.82%;
padding-right: 1.82%;
position:relative; }
#LayoutDiv1 {
clear: both;
margin: auto;
width: 100%;
display: block;
text-align:center;
position: relative; }
#Box {
width: 487px;
height: 181px;
position: absolute;
left: 50%;
top: 236px;
margin-left: -244px;
z-index:6; }
The html:
<body>
<div class="pageContainer">
<div id="LayoutDiv1">
<div id="Twitter">
<img src="images/TwitterNORMAL.png" onmouseover="this.src='images/TwitterHOVER.png'" onmouseout="this.src='images/TwitterNORMAL.png'"/>
</div>
<div id="Facebook">
<img src="images/fbNORMAL.png" onMouseOver="this.src='images/fbHOVER.png'" onMouseOut="this.src='images/fbNORMAL.png'"/>
</div>
<div>
<img id="Box" src="images/BOX.png" width="487" height="181">
</div>
</div>
</div>
</body>
The smarter way in 2012 to do this is to use Media Queries, some inspiration here
You basically create another style sheet which is loaded only for smaller screens. It might seem like an overkill now, but as your website grows, you will thank me for suggesting this (or you cannot ;))
Also, don't do margin-left: -244px;, its hacky and can cause cross browser issues. Show us some HTML and we shall show you a cleaner way.
Are you including a viewport meta tag? It should eliminate any scaling issues you may be having in mobile.
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
To you CSS: <div>s are block elements, and their default behavior is to expand the width of their parent (100%). Those CSS declarations aren't necessary.
From your code, and layout, it doesn't look like you need #LayoutDiv1 or to use positioning.
This simpler code takes care of the left-side-cutoff (here's a fiddle):
.pageContainer {
margin:0 auto;
}
#LayoutDiv1 {
margin: auto;
text-align:center;
}
#Box {
width: 487px;
height: 181px;
top: 236px;
margin:236px auto 0;
}
And like a prev poster mentioned, you could add a #media query to load a smaller image for #Box on mobile (you can simply add a line or two [or 200] to your existing CSS file):
#media only screen and (max-width: 767px) {
#Box { background:url('imgs/mobile-hero.jpg'); }
}
On the GWT developer site there is an example showing a panel that is in the middle of a page. Is this possible to have a fixed with panel in the middle of a page using the GWT layoutpanels?
http://code.google.com/webtoolkit/doc/latest/DevGuideUiPanels.html#LayoutPanels
There's a good old CSS trick for centering fixed-size, absolute boxes, using automatic CSS layouting (no JavaScript required):
First center the top left corner of the box by using top: 50%; left: 50%;
Of course, the box will be too far to the bottom/right now.
Then subtract half of the box's height/width by using margins. (It's fixed-size, so you can calculate "half of the height/width" with pen and paper :-)
Example:
<!doctype html>
<html>
<head>
<style type="text/css">
.box {
position: absolute;
background-color: red;
height: 300px; width: 400px; /* Using "px" here, but you */
/* can also use "em" etc. */
top: 50%; left: 50%;
margin-top: -150px; margin-left: -200px;
}
</style>
</head>
<body>
<div class="box">Box</div>
</body>
</html>
Apply this style to your LayoutPanel - I don't have a full code example for that, but I think it should be possible.
You can achieve the effect with simple css. For example:
<html><head>
<style>
.outer {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-color: blue;
}
.inner {
position: absolute;
top: 25%;
right: 25%;
bottom: 25%;
left: 25%;
background-color: red;
}
</style>
</head>
<body>
<div class="outer"><div class="inner" /></div>
</body></html>
Once the basic effect is created in plain CSS using absolutely-positioned objects, you can recreate it with the LayoutPanels, since they're essentially a CSS constraint system.
I don't think you can make a fixed-width layer center itself automatically in a LayoutPanel. However, you can insert the layer into the DOM to get its size, and then calculate the proper offsets yourself. You can see how Google does this (not in a LayoutPanel) in the code for DialogBox.center();