I have an element that is fixed to the top of the page, and scrolls with you when you scroll horizontally.
But in ios width of menu are not a 100% width of viewport. Width of menu is a 900px.
What's a problem? I can set width with JS, but it not true way. At the android devices it's ok, and work great.
body
{
padding: 0;
margin: 0;
}
.menu
{
position:fixed;
width: 100%;
top: 0;
left: 0;
background-color: grey;
color: #fff;
}
.content800
{
width: 800px;
height: 200px;
background: green;
}
.content900
{
width: 900px;
height: 200px;
background: blue;
}
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
</head>
<body>
<div class='menu'>Menu 1 Menu 2 Menu 1 Menu 2 Menu 1 Menu 2 Menu 1 Menu 2 Menu 1 Menu 2 Menu 1 Menu 2 Menu 1 Menu 2</div>
<div class="content800"></div>
<div class="content900"></div>
</body>
</html>
How can I set width of fixed menu by 100% of device screen?
Most likely because you are causing the page to overflow due to .content800 and .content900, when using responsive design you should avoid setting any 'fixed' widths that exceed the devices resolution in either portrait or landscape. You have the viewport set in the HTML but you don't have any media queries in your CSS.
You really need to make use of the media queries using something like this:
#media screen and (max-width: 63.9375em) {
.content800, .content900 {
width:100%;
}
}
You may need to change 63.9375em to your liking as its all small devices in both landscapes, portraits and also tablets in portrait mode. If that doesn't fix your problem then it'll something else that you have failed to attach, like the rest of your CSS or HTML.
What you could do is set right: 0; to .menu, to make sure the menu covers the whole screen width.
Related
I'm developing an app using Worklight 6.2 where the layout has a fixed field of research in the header, when this field receives focus, the virtual keyboard of the operating system is presented.
Running this app on iOS (iPhone 4 and iPhone 5 the layout is larger than the screen) when the layout is not the beginning (was rolled down), the div and input that were fixed at the top (position: fixed) lose this configuration and are similar to absolute layout. Another problem is that the header (div and input), automatically cut some pixels, going to the center of the screen and was hidden divs that appear scrolling the page.
Below the prints of some situations and the source code with the problem.
Without showing the virtual keyboard (correct layout)
When show a virtual keyboard with layout rolled down
When does scroll the page with the virtual keyboard showing (Lose the configuration layout: fixed and apparently assumes the configuration layout: absolute)
My code is:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=0">
<style type="text/css">
a,abbr,address,article,aside,audio,b,blockquote,body,canvas,caption,cite,code,dd,del,details,dfn,dialog,div,dl,dt,em,fieldset,figcaption,figure,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,html,i,iframe,img,ins,kbd,label,legend,li,mark,menu,nav,object,ol,p,pre,q,samp,section,small,span,strong,sub,summary,sup,table,tbody,td,tfoot,th,thead,time,tr,ul,var,video
{
margin: 0;
padding: 0;
font-family: 'MuseoSans-100';
}
/* Worklight container div */
body {
height: 100%;
width: 100%;
}
.div-header {
height: 200px;
width: 100%;
background-color: #0094D9;
position: fixed;
}
.input-header {
margin-top: 100px;
height: 40px;
width: 100%;
}
.div-body {
height: 500px;
width: 100%;
}
.div-body-1{
background-color: #ffff9f;
}
.div-body-2{
background-color: #1b8127;
}
.div-body-3{
background-color: #fb7d00;
}
</style>
<script>window.$ = window.jQuery = WLJQ;</script>
</head>
<body style="display: none;">
<!--application UI goes here-->
<div id="wrapper">
<div class="div-header">
<label class="span-header">Hello Worklight</label>
<input maxlength="50" id="txtSearch" type="text" placeholder="BarCode" class="input-header">
</div>
<div id="div1" class="div-body div-body-1">
Div 1
</div>
<div id="div2" class="div-body div-body-2">
Div 2
</div>
<div id="div3" class="div-body div-body-3">
Div 3
</div>
</div>
<script src="js/initOptions.js"></script>
<script src="js/main.js"></script>
<script src="js/messages.js"></script>
</body>
</html>
The issue of screen distortion due to virtual keyboard can be resolved by adding $('body,html').animate({scrollTop:0},'fast'); either on the screen-size change event or in case if the keyboard hides on touching any element then on onclick event.
I had the same issue, adding this plugin to the project fixed it!
https://github.com/apache/cordova-plugins/tree/master/keyboard
After adding it, set Keyboard.automaticScrollToTopOnHiding = true;
and it will do the trick
Consider the following page:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style type="text/css">
html, body
{
padding: 0;
margin: 0;
height: 100%;
}
</style>
</head>
<body>
</body>
</html>
Load it into safari on the iPhone. The page renders at 100% height. Now turn the iPhone to landscape and drag the page upwards. The (bottom) button bar appears and now we're scrolling the page up and down by the amount that the button bar offsets the content. No longer is the page height 100%, and content that should be visible is underneath the button bar, and a vertical scrollbar is evident.
Is it possible to eliminate this annoyance and get true 100% height?
Use this script to add a class to html if it is an iPhone:
if((navigator.userAgent.match(/iPhone/i))) {
$('html').addClass('iphone');
}
Then try making its position as fixed, but only for when the orientation is in landscape, like so:
#media (orientation:landscape) {
html.iphone > body {
position: fixed;
bottom: 0;
width:100%;
height: 480px !important; /* pretty sure its 480px? */
}
}
Finally solved this by a meta directive in the head section that makes the appearance of the bottom button bar considerably less aggressive. Notice the last part (minimal-ui)
<meta name="viewport"
content="width=device-width, initial-scale=1.0, user-scalable=no, minimal-ui">
Foo.html:
<!DOCTYPE html>
<head>
<link rel="stylesheet" type="text/css" href="testStyle.css" />
</head>
<body>
The appearance of the text is good. This image should be centered, but it isn't:
<img class="centerblock" src="ice cream cone and dish.png" width="320" height="200"></img>
</body>
TestStyle.css:
body {margin-left:30px;}
body {margin-right:30px;}
.centerblock {
margin-left: auto;
margin-right: auto;
display: block;
}
Result:
Try:
.centerblock {
position:fixed;
top:10px;
left: 10px;
}
Maybe that can help, Although i don't know what can happen if you turn the phone.
I would make that main content area to fit to the edge of display and define all align properties for each element.
It's never very smart to do:
body {margin-left:30px;}
body {margin-right:30px;}
There is also option:
.main-container {
margin: 0 auto;
}
That also centers all the content but i think, also would not solve your problem.
I have a YouTube video I want to put on my web page.
I want to scale the video to fit to a percent of the users browser but also to keep the aspect ratio.
I have tried this:
<iframe width="87%" height="315" src="http://www.youtube-nocookie.com/embed/dU6OLsnmz7o" frameborder="0" allowfullscreen></iframe>
But that does only make the player wider, not higher.
Does I have to resort to JavaScript (or non-standard CSS)?
What i believe to be the best CSS solution.
.auto-resizable-iframe {
max-width: 420px;
margin: 0px auto;
}
.auto-resizable-iframe > div {
position: relative;
padding-bottom: 75%;
height: 0px;
}
.auto-resizable-iframe iframe {
position: absolute;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
}
<div class="auto-resizable-iframe">
<div>
<iframe frameborder="0" allowfullscreen="" src="http://www.youtube.com/embed/_OBlgSz8sSM"></iframe>
</div>
</div>
Demo http://jsfiddle.net/46vp592y/
I hit a similar issue with my site when developing some responsive CSS. I wanted any embedded Youtube objects to resize, with aspect, when switching from the desktop CSS to something smaller (I use media queries to re-render content for mobile devices).
The solution I settled on was CSS and mark-up based. Basically, I have three video classes in my CSS thus:
.video640 {width: 640px; height: 385px}
.video560 {width: 560px; height: 340px}
.video480 {width: 480px; height: 385px}
… and I assign one of these to the Youtube content I include, depending on its original size (you may need more classes, I just picked the most common sizes).
In the media query CSS for smaller devices, these same classes are simply re-stated like so:
.video640 {width: 230px; height: 197px}
.video560 {width: 230px; height: 170px}
.video480 {width: 240px; height: 193px}
I appreciate this requires some mark-up "up-front" when including videos in your HTML (i.e. adding a class), but if you don't want to go down the Javascript route, this works pretty well -- you could re-state your video classes for as many different sizes as you require. Here's how the Youtube mark-up looks:
<object class="video640" type="application/x-shockwave-flash" value="YOUTUBE URL">
<param name="movie" value="YOUTUBE URL"></param>
</object>
Quite easy with some javascript.
jQuery(function() {
function setAspectRatio() {
jQuery('iframe').each(function() {
jQuery(this).css('height', jQuery(this).width() * 9/16);
});
}
setAspectRatio();
jQuery(window).resize(setAspectRatio);
});
This jQuery plugin has been making the rounds of late, it's called FitVids and does exactly what you need, resizes videos based on browser size whilst maintaining aspect ratio.
http://fitvidsjs.com/
Modern Solution (2022) - aspect-ratio
With the introduction of the aspect-ratio property in CSS, it's now very simple to scale a YouTube video without resorting to CSS hacks or JS.
Example:
iframe {
aspect-ratio: 16 / 9;
height: auto;
width: 100%;
}
The aspect-ratio property is widely supported across browsers making it suitable for the vast majority of sites: https://caniuse.com/mdn-css_properties_aspect-ratio
These work a treat no JS. Responsive for both single palyer and list player modified from somewhere not sure, no credit sorry. Load your iframe Youtube player inside a container div, the iframe style sets the player specific sizing, 100% will fill the container to any size, src= your-youtube-ID, add own player options
https://jsfiddle.net/jcb01/04sf3byz/
<div style=" position: relative; padding-bottom: 56.25%;">
<!--- load iframe Youtube player inside this div -->
<iframe
style="border: 1; top: 0; left: 0; width: 100%; height: 100%; position: absolute;"
src="https://www.youtube-nocookie.com/embed/?
list=PL590L5WQmH8fmto8QIHxA9oU7PLVa3ntk;
&autoplay=0&enablejsapi=1&index=0&
listType=playlist&loop=1&modestbranding=1"
allowfullscreen scrolling="no"
allow="encrypted-media; accelerometer;
gyroscope; picture-in-picture">
</iframe>
</div>
The trick to make a youtube video autoresize is to make the iframe width 100% and put it in a div with a "padding-bottom" equal to the aspect ratio in percentage. E.g.
But the problem is - you would have a lot of pages with embedded YoutTube videos already. Here's a jquery plugin that will scan all videos on the page and make them resizable automatically by changing the iframe code to be as above. That means you don't have to change any code. Include the javascript and all your YouTube videos become autoresizing.
https://skipser.googlecode.com/files/youtube-autoresizer.js
Old question, but I think the #media CSS 3 tags would be helpful in this instance.
Here is my solution to a similar problem.
The CSS:
#media only screen and (min-width: 769px) {
.yVid {
width: 640px;
height: 360px;
margin: 0 auto;
}
}
#media only screen and (max-width: 768px) {
.yVid {
width: 560px;
height: 315px;
margin: 0 auto;
}
}
The HTML:
<div class="yVid">
<iframe width="100%" height="100%" frameborder="0" allowfullscreen="" src="http://www.youtube.com/embed/_OBlgSz8sSM"></iframe>
</div>
This basically adds a breakpoint at 768px where the video resizes itself. You could also add breakpoints at 992 and 1280 for an even more repsonsive video size. (numbers based on Bootstrap standard sizes).
This is what worked for me. This is slightly modified code from the YouTube Embed Code Generator.
The CSS:
.video-container {
position: relative;
width: 100%;
height: 0;
padding-bottom: 56.27198%;
}
.video-container iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
The HTML:
<div class="video-container">
<iframe width="560px" height="315px" src="https://www.youtube.com/embed/XXXXxxxx?&theme=dark&autohide=2&iv_load_policy=3"><iframe>
</div>
You can use style="max-width: %87; max-height: %87;"
In addition to Darwin and Todd the following solution will
avoid the bottom margin
maximize the width for large screens
minimize the height in mobile view
keep a fixed size for #media none compatible browsers
The HTML:
<div class="video_player">
<div class="auto-resizable-iframe">
<div>
<iframe frameborder="0" allowfullscreen="" src="http://www.youtube.com/embed/_OBlgSz8sSM"> </iframe>
</div>
</div>
</div>
The CSS:
.videoplayer{
text-align: center;
vertical-align: middle;
background-color:#000000;
margin: 0;
padding: 0;
width: 100%;
height:420px;
overflow:hidden;
top: 0;
bottom: 0;
}
.auto-resizable-iframe {
width:100%;
max-width:100%;
margin: 0px auto;
}
.auto-resizable-iframe > div {
position: relative;
padding-bottom:420px;
height: 0px;
}
.auto-resizable-iframe iframe {
position: absolute;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
}
//full screen
#media (min-width:0px) {
.videoplayer{
height:100%;
}
.auto-resizable-iframe > div {
padding-bottom:100%;
}
}
//mobile/pad view
#media (min-width:600px) {
.videoplayer{
height:420px;
}
.auto-resizable-iframe > div {
padding-bottom:420px;
}
}
There are a few suggestions on the list of answers to use js to modify the structure of generated iframe. I think there is a risk with that because when you wrap the iframe inside other elements it's possible that the YouTube API will lose 'connection' with the iframe (especially if you pass the element in as a node instead of using specific id like me). It's rather to get around it actually, use javascript to modify the content before you actually trigger the youtube player.
a snippet from my code:
/**
* Given the player container, we will generate a new structure like this
*
* <div class="this-is-the-container">
* <div class="video-player">
* <div class="auto-resizable-iframe">
* <div>
* <iframe frameborder="0" allowfullscreen="" src="http://www.youtube.com/embed/_OBlgSz8sSM"> </iframe>
* </div>
* </div>
* </div>
* </div>
*
* #return {Node} the real player node deep inside
*/
YouTube.renderResizable = function (playerContainer) {
// clean up the content of player container
playerContainer.textContent = '';
var playerDiv = document.createElement('div');
playerDiv.setAttribute('class', 'video-player');
playerContainer.appendChild(playerDiv);
// add the auto-resizable-frame-div
var resizeableDiv = document.createElement('div');
resizeableDiv.setAttribute('class', 'auto-resizable-iframe');
playerDiv.appendChild(resizeableDiv);
// create the empty div
var div = document.createElement('div');
resizeableDiv.appendChild(div);
// create the real player
var player = document.createElement('div');
div.appendChild(player);
return player;
};
Just set iframe height and width with CSS vw metric. It uses device width as parameter:
.videoWrapper iframe {
height: 36.6vw;
width: 65vw;
}
You could use two classes that would scale the size of the video based on the size of the wrapping div. Consider this example:
<div class="content-wrapper">
<div class="iframe-wrapper res-16by9">
<iframe src="https://www.youtube.com/embed/pHsYFURtzzY" frameborder="0" allowfullscreen></iframe>
</div>
</div>
Now look at the css.
.content-wrapper{
max-width: 800px;
margin: 0 auto;
background-color: #fff;
}
.iframe-wrapper{
width: 100%;
position: relative;
}
.res-4by3{
padding-bottom: 75%;
}
.res-16by9{
padding-bottom: 56.25%;
}
.iframe-wrapper iframe{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
Note that you will have to wrap the iframe in a div who's width is set to 100% and position is set to relative. You have to also add a bottom-padding to iframe wrapper. This padding will define the height of a video. I recommend to create two classes that will represent the image ratio.
It is quite easy to calculate the right bottom-padding for wrappers that represent certain resolution. For example for res 4 by 3 and 16 by 9 would have bottom-padding equal to:
[4/3 res]
100 / 4 * 3 = 75%;
[16/9 res]
100 / 16 * 9 = 56.25%
Then position the iframe as absolute and push it to the top left corner of the wraping div. Also meke sure to set iframe width and height to 100%. You are done.
Add the class that fits the right resolution for you. It will scale the image width and height respectively keeping the right proportions in place.
The example above works for any iframe. Thats mean you can also use it for google maps iframe.
Add JavaScript code to give each youtube iFrame a class:
$('iframe[src*="youtube"]').addClass('youtube')
Then in the Media Queries use the you tube class to set a different size.
.youtube {
/* Do stuff here */
}
Easier and optimized to CMS than the manual way.
I'm trying to implement the latest sIFR. But I can't get even the simplest of tests to work. My test page is at http://www.kellymitchelljewelry.com/testsifr.asp. There should be an sIFR-generated line that says "2nd line" between the first and third lines. I'm using the examples provided on the sIFR page exactly.
My html looks like this:
<html>
<head>
<title>Kelly Mitchell Fine Jewelry</title>
<link rel="stylesheet" href="sifr.css" type="text/css">
<script src="sifr.js" type="text/javascript"></script>
<script src="sifr-config.js" type="text/javascript"></script>
</head>
<body>
First Line<br><br>
<h1>Second Line</h1>
<br>Third Line<br><br>
</body>
</html>
My sifr-config.js looks like this:
var cgoth = { src: 'cgoth.swf' };
sIFR.activate(cgoth);
sIFR.replace(cgoth, {
selector: 'h1'
});
My sifr.css file looks like this:
#media screen {
.sIFR-flash {
visibility: visible !important;
margin: 0;
padding: 0;
}
.sIFR-replaced, .sIFR-ignore {
visibility: visible !important;
}
.sIFR-alternate {
position: absolute;
left: 0;
top: 0;
width: 0;
height: 0;
display: block;
overflow: hidden;
}
.sIFR-replaced div.sIFR-fixfocus {
margin: 0pt;
padding: 0pt;
overflow: auto;
letter-spacing: 0px;
float: none;
}
}
#media print {
.sIFR-flash {
display : none !important;
height : 0;
width : 0;
position : absolute;
overflow : hidden;
}
.sIFR-alternate {
visibility : visible !important;
display : block !important;
position : static !important;
left : auto !important;
top : auto !important;
width : auto !important;
height : auto !important;
}
}
/*
Place CSS rules for to-be-replaced elements here. Prefix by .sIFR-active
so they only apply if sIFR is active. Make sure to limit the CSS to the screen
media type, in order not to have the printed text come out weird.
*/
#media screen {
.sIFR-active h1 {
font-family: Verdana;
visibility: hidden;
line-height: 1em;
}
*/
I've tried recreating my swf file just in case I did something wrong, and closely followed the instructions to make sure I didn't leave anything out.
Can someone help me figure what I'm doing wrong?
Tom
I don't think your Flash movie is correct, opening it directly should show "Rendered with sIFR 3" text. Make sure it was exported correctly.
I have never been able to get a .swf file exported from Flash to work with sIFR. I've always ended up having to use the online sIFR generator: http://www.sifrgenerator.com/wizard.html
I don't know if my version of Flash (CS3) is just not compatible with sIFR or what... I do always save as version 8 like it says to, and make sure every setting is as it should be, but no luck. However, using that generator always seems to solve it. So if your Flash is jinxed to, you might want to give it a try.