I may just be missing something but neither this meta tag:
<meta id="gameViewport" name="viewport" content="width:device-width, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0, minimal-ui, target-densityDpi=device-dpi">
nor these css3 directives:
#-webkit-viewport {
height: 704px;
width: 1280px;
}
#-viewport {
height: 704px;
width: 1280px;
}
#viewport {
height: 704px;
width: 1280px;
}
seem to be making any difference at all, chrome and ff don't responsively change the viewport. Is there another way I should be doing this? For ie I was able to use the very simple:
#-ms-viewport {
height: 704px;
width: 1280px;
}
css3 directive to get what I wanted but apparently that is not supported on other browsers? Am I doing something wrong with what I have or is there a better way to achieve the same thing in ie in other browsers? The site I'm working on is hosted here: damiankulp.com/damian/gallery/protobox
Not sure, but content="width=device-width, ..." instead of content="width:device-width, ..." may help.
Related
Example page source:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<title>Page</title>
</head>
<body>
<div class="main" style="height: 100%;">
<div class="header" style="height: 100px; background-color: green;"></div>
<iframe src="http://www.wikipedia.com"
style="height: 200px; width: 100%; border: none;"></iframe>
<div class="footer" style="height: 100px; background-color: green;"></div>
</div>
</body>
</html>
The problem is, that height of 200px from the IFrames inline style is ignored on mobile safari:
Also I'd like to change the height of the IFrame dynamically via vanilla JavaScript which is not working at all with the following code:
document.getElementsByTagName('iframe')[0].style.height = "100px"
The value of the height style is changed correctly according to the dev tools but it's simply ignored since the actually rendered height of the IFrame doesn't change.
This only seems to be a problem in mobile Safari and is working as expected on the latest versions of desktop Safari, Firefox, Chrome, Androids WebView etc.
Testpage: http://devpublic.blob.core.windows.net/scriptstest/index.html
Ps.: I tested this with various devices on browserstack and also took the screenshots there since I don't have no actual iDevice at hand.
It looks like this: How to get an IFrame to be responsive in iOS Safari?
iFrames have an issue on iOS only, so you have to adapt your iframe to it.
You can put a div wrapping the iframe, set css on the iframe and, what worked for me, was to add: put the attribute scrolling='no'.
Wishing you luck.
I got the same issue. And after tried all solutions I could find, I finally found how to solve it.
This issue is caused by the iOS Safari, it will auto-expend the hight of iframe to fit the page content inside.
If you put the scrolling='no' attribute to the iframe as <iframe scrolling='no' src='content.html'>, this issue could be solved but the iframe could not show the full content of the page, the content which exceeds the frame will be cut.
So we need to put a div wrapping the iframe, and handle the scroll event in it.
<style>
.demo-iframe-holder {
width: 500px;
height: 500px;
-webkit-overflow-scrolling: touch;
overflow-y: scroll;
}
.demo-iframe-holder iframe {
height: 100%;
width: 100%;
}
</style>
<html>
<body>
<div class="demo-iframe-holder">
<iframe src="content.html" />
</div>
</body>
</html>
references:
https://davidwalsh.name/scroll-iframes-ios
How to get an IFrame to be responsive in iOS Safari?
Hope it helps.
PROBLEM:
I was having the same issue. Sizing/styling the iframe's container div and adding scrolling="no" to the iframe didn't work for me. Having a scrolling overflow like Freya describes wasn't an option, either, because the contents of my iframe needed to size depending on the parent container. Here's how my original (not working, overflowing its container) iframe code was structured:
<style>
.iframe-wrapper {
position: relative;
height: 500px;
width: 100%;
}
.iframe {
display: block;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
width: 100%;
height: 100%;
}
</style>
<div class="iframe-wrapper">
<iframe frameborder="0" scrolling="no" class="iframe" src="content.html"></iframe>
</div>
SOLUTION:
This super simple little CSS hack did the trick:
<style>
.iframe-wrapper {
position: relative;
height: 500px;
width: 100%;
}
.iframe {
display: block;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
width: 100px;
min-width: 100%;
height: 100px;
min-height: 100%;
}
</style>
<div class="iframe-wrapper">
<iframe frameborder="0" scrolling="no" class="iframe" src="content.html"></iframe>
</div>
Set the iframe's height/width to some small, random pixel value. Set it's min-height & min-width to what you actually want the height/width to be. This completely fixed the issue for me.
I have a scrollable div in td. It appears fine in Chrome however becomes really small in IE and Firefox but the height of the row stays the same. I have tried to change overflow:auto to overflow:hidden as suggested by some of the previous answers but nothing seem to work.
Additionally added <meta http-equiv="X-UA-Compatible" content="IE=edge" /> to support browswer compatibility but still didn't work.
Height of the table row:
#inrm .quotelog {
height: 200px;
}
scrollable div
#inrm .scrollable {
width: 100%;
height: 100%;
margin: 0px;
padding: 0px;
overflow: auto;
}
Inserting the div in HTML as
<tr class="quotelog">
<td>
<div class="scrollable"><%=rsOrderView("orderlog")%></div>
</td>
</tr>
Any suggestion or pointers would be appreciated.
I am seeking to create a website with a very smooth layout, like it is all dynamic and not just BLAM, heres a website.
Let me elaborate:
I got this setup for now, just so you can figure what I am trying to get working.
What I mean by dynamic is, that I want when the page have been loaded I would the image to come sliding in (maybe the banner too, haven't decided all design yet, just throwing suggestions.). When image have slided in I would like it to be expanding and despanding slowly, like it's always in movement. When hovered over it should expand slightly more and stop it's movements while it is hovered.
This are the main needs I am searching for, and I am a little clueless on how it is done.
I was thinking javascript was obvious, but I've failed any guides I've found and therefore belive I need some direct help.
Highly appreciated, thanks!
I've tried making the image fade in and out with jquery, but doesn't seem to work, heres my code:
<!doctype html>
<html class="no-js">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {
background: url("images/BG.png") repeat;
}
.logo {
width: 640px;
height: 360px;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 40%;
margin: auto;
text-align: center;
}
.middlebanner {
width: 100%;
height: 60%;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 100%;
margin: auto;
text-align: center;
}
</style>
<!-- Place favicon.ico and apple-touch-icon(s) in the root directory -->
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/main.css">
<script src="js/vendor/modernizr-2.7.1.min.js"></script>
</head>
<body>
<!--[if lt IE 8]>
<p class="browsehappy">You are using an <strong>outdated</strong> browser. Please upgrade your browser to improve your experience.</p>
<![endif]-->
<!-- Add your site or application content here -->
<title>Electronic Future Copenhagen - Choose your game</title>
<img src="images/middlebanner.png" class="middlebanner" />
<img src="images/logo5.png" class="logo" />
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="js/vendor/jquery-1.11.0.min.js"><\/script>')</script>
<script src="js/plugins.js"></script>
<script src="js/main.js"></script>
jQuery
<script src="jquery.js"></script>"
<!-- Google Analytics: change UA-XXXXX-X to be your site's ID. -->
<script>
$( document ).ready(function() {
$("#logo").animate({
left: "300"
}, {
duration: 2000
});
$( "#logo" ).hover(function() {
$( this ).fadeOut( 100 );
$( this ).fadeIn( 500 );
});
});
</script>
</body>
</html>
here is a little fiddle to get you on your way...
Just animate divs and images etc to get the desired effect.
$(document).ready(function () {
$("#efclogo").animate({
left: "300"
}, {
duration: 2000
});
});
Added a hover over function so you can see how that works too.
$( "#efclogo" ).hover(function() {
$( this ).fadeOut( 100 );
$( this ).fadeIn( 500 );
});
Updated fiddle
Here's a part of code that might help you:
//Above is pure JS(no jQuery) which does the loading part, aka pre-loader
$(document).ready(function() {
//Here is when loading is 100% completed, will trigger the function
$(window).load(function() {
loadComplete();
});
});
This is where you should get started when you decide to use jQuery library.
Slide down
https://api.jquery.com/slideDown/
Animate
https://api.jquery.com/animate/
Hover
http://api.jquery.com/hover/
Your idea might be a little confusing to site visitors. Think about a page you are looking at where everything is flowing around so you cant find anything.
The key is to have a "normal" page and let some eyecatching elements fly around.
The technical aspect depends on what you want to archieve. First you need to think about the browser performance (on mobile especially).
One way to archieve this would be jQuery animate, anotherone would be css3 animate/transition. The easiest example of jQuery animate is in the api: https://api.jquery.com/animate/. Apparently I dont have a css tutorial in mind.
I've been reading around Stack Overflow and searching on Google for a reliable way to hide the toolbars on iOS 7 as the old scroll trick no longer works.
Based on this: http://mihhaillapushkin.wordpress.com/2014/01/20/stop-navigation-bars-from-appearing-in-iphone-ios7-safari/
I've tried the following:
<!doctype html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
<style type="text/css">
*
{
padding: 0;
border: 0;
outline: 0;
margin: 0;
}
html,
body
{
width: 100%;
height: 100%;
overflow: hidden;
}
div.content
{
position: absolute;
top: 0px;
left: 0px;
right: 0px;
bottom: 0px;
width: 320px;
height: 480px;
background: orange;
}
#scroller {
height: 100%;
-webkit-tap-highlight-color: rgba(0,0,0,0);
overflow: scroll;
-webkit-overflow-scrolling: touch;
width: 100%;
}
</style>
</head>
<body class="default">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script>
setInterval(function(){
if((window.orientation == 90 || window.orientation == -90) && window.innerHeight != window.outerHeight) {
$('#scroller').show();
} else {
$('#scroller').hide();
}
}, 1000);
</script>
<div class="content">
<div id="scroller" style="z-index: 100000;position: fixed;top:0;left:0;right:0;bottom:0;">
Scroll up!
</div>
</div>
</body>
</html>
But scrolling up never actually hides the scrollbars. The #scroller is hiding and showing if the toolbars are visible or not, so half of it works, but just not the hiding unless I bounce the content into the toolbar, but if I scroll then the toolbars appear again.
Have I misunderstood the implementation?
If you want to hide the Safari Address bar you need to add this meta tags
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
The status bar can be hidden in iOS 7.1 and above with this meta tag
<meta name="viewport" content="minimal-ui”>
Okay, here is an answer from the author.
I have not dived into your code block, but just to clarify what I've told about in that post.
Firstly, I have shown an example of a game that has adopted an overlay that forces the player to scroll up until the bars go away. After the game detects that bars are no longer visible it locks scrolling until the player triggers navigation bars again, forcing him to go through the loop again.
Secondly, I have revealed a trick that for some reason deactivates navigation bar triggering ONLY for the top part of the screen. The bottom still triggers them as usual, so the the overlay I mentioned earlier is still needed. Thus this is a half-solution for the problem, but it is still better than nothing.
IMHO, the combination of those 2 approaches yields a good-enough solution for games and other applications that need full-screen without the need for scrolling.
If you have the chance to enter to http://toniweb.us/gm in your phone you will see that the dimensions are...wrong.
Acording to the css:
html, body{
position:relative;
height:100%;
width:100%;
overflow-y:hidden;
}
It should be using the whole of it.
And, I added:
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=1, minimum-scale=1, maximum-scale=2.0" />
But I am not so sure what this affects.
In addition, the website is optimized to >= 1024 pixels. Is there a way to adapt iPhone to this? Perhaps by scaling somehow?
Any hint would be very helpful.
Tried:
html, body{
position:absolute;
top: 0;
left: 0;
right: 0;
overflow-y: hidden;
}
I guess that above code will do the job ;)
And I think your goal was to see only the grey sidebar on the iphone right?