I'm using primefaces ronin theme and I'm trying to make a full screen gmap no matter what the resolution of the screen is. how ever, unless I state the height in pixels, it won't work.
for example, if i set the height css attribute of the map to 100%, it doesn't show, and if I wrap the gmap with a div container with 100% height, it still doesn't work. how can I make a full screen responsive gmap?
You can show a full screen responsive p:gmap on following way:
Lets assume that p:gmap is defined like this (no need for style attribute)
<p:gmap id="gmap" center="41.381542, 2.122893" zoom="13" type="hybrid" />
Place following JavaScript on your page that will do the trick
<script>
function resizeElement(elementId,width,height){
console.log("Resizing element " + elementId + " W/H="+ width + "/" + height);
var element = document.getElementById(elementId);
element.style.width=width+"px";
element.style.height=height+"px"
}
function resizePfGmapFullScreen() {
var width = window.innerWidth - 20;
var height = window.innerHeight - 20;
resizeElement("gmap", width, height);
}
window.onload = function() {
window.dispatchEvent(new Event('resize'));
};
window.onresize = function(event) {
console.log("Screen is resized");
resizePfGmapFullScreen();
};
</script>
Advantage of this solution is that p:map will be automatically resized when screen is resized including screen orientation change on mobile devices.
It is tested running on the latest Primefaces version 6.1.
I am creating a pop-up overlay modal and am having problems getting the positioning/scrolling working correctly.
I can set my modal to be position:fixed but then if the modal's height is too much, then the modal overflows off of the window and you cannot see the bottom of it.
If I set the modal to be position:absolute then the element becomes positioned relative to the closest ancestor with position:relative, correct? (or at least thats what it appears to do) Instead I want the modal to ALWAYS be relative to the window so that I can center it easily.
Is there a way to make the below .modal positioned relative to the window ( or element) even if the element is nested deep inside the DOM like this:
<body ng-app="myapp" ng-controller="mycontroller">
<div>
<div>
<div ui-view>
<div class=".modal"></div>
</div>
</div>
</div>
</body>
If you insist on having it in that same markup and nested in the same manner, your best bet is in JavaScript.
Here's some JS code that gives a good method of accomplishing what you asked for:
function ShowDivInCenter()
{
try
{
divWidth = 100;
divHeight = 100;
divId = 'divLogin'; // id of the div that you want to show in center
// Get the x and y coordinates of the center in output browser's window
var centerX, centerY;
if (self.innerHeight)
{
centerX = self.innerWidth;
centerY = self.innerHeight;
}
else if (document.documentElement && document.documentElement.clientHeight)
{
centerX = document.documentElement.clientWidth;
centerY = document.documentElement.clientHeight;
}
else if (document.body)
{
centerX = document.body.clientWidth;
centerY = document.body.clientHeight;
}
var offsetLeft = (centerX - divWidth) / 2;
var offsetTop = (centerY - divHeight) / 2;
// The initial width and height of the div can be set in the
// style sheet with display:none; divid is passed as an argument to // the function
var ojbDiv = document.getElementById(divId);
ojbDiv.style.position = 'absolute';
ojbDiv.style.top = offsetTop + 'px';
ojbDiv.style.left = offsetLeft + 'px';
ojbDiv.style.display = "block";
}
catch (e) {}
}
You can then call the function through any event, for example:
<body onload='ShowDivInCenter();' onresize='ShowDivInCenter();'>
if you want it to be dynamic.
My present code doesn't work and i have a unexpected token error :
<script type="text/javascript">
var myWidth = (window.screen.availWidth - 100);
document.write("
#test {
width:" + myWidth +"px;
}
");
</script>
what's wrong ?
And, i would like to know if this is a correct way : i made a menu like http://blog.tomri.ch/super-simple-off-canvas-menu-navigation/ , displayed starting at the left ro the right, and i don't want to hide a button who has 100px width, (% width can't be appropriate). so, i do this for calculate width. It's a good way ? (i use html5/angularjs for android application).
Proper way
<p id="demo">Click the button to return the available width of your screen.</p>
<button onclick="myFunction()">Try it</button>
<script>
function myFunction()
{
var x = "Available Width: " + screen.availWidth + "px";
document.getElementById("demo").innerHTML=x;
}
</script>
I have something like this:
http://s9.postimg.org/wwizuwnq7/Untitled_1.png
And if you see, the divs (Where I marked in green) have a space of some pixel.
And i want if there is a 0-20 pixel space between divs, to order them like this:
http://s23.postimg.org/ky2htcpt7/image.png
So, i started to do this on javascript and i dont know to to continue..
var position = new Array();
$(".post").each(function(){
position[$(this).attr("id")] = $(this).offset().top - $(window).scrollTop();
});
now i have all the position of all the divs, and now i need to check where divs have a space of 0 - 20 pixel, and then i want to take down the higher block.
I not sure if this is the good way, and if now, i need another idea..
Thanks!
I managed to find a method!
var position = new Array();
$(".hblocks").each(function(){
position[$(this).attr("id")] = $(this).offset().top;
});
$.each(position, function(key, value) {
$.each(position, function(key2, value2) {
var space = value2 - value;
if (space <= 20 && space >= -20 && space != 0)
{
var finalSpace = Math.max(value, value2);
var spaceplus = space + 28;
if (finalSpace != value)
{
$("#" + key).css("margin-top",spaceplus + "px");
}
else
{
$("#" + key2).css("margin-top",spaceplus + "px");
}
}
});
});
You can do this by adding a container div around the bottom 2 blocks. That way they will always be in line, regardless of the height of either of the top two blocks. You should try not to use javascript for styling. CSS is very powerful.
Here's a fiddle: http://jsfiddle.net/kVn7x/
HTML:
<div>
<div style='height:100px;'></div>
<div style='height:200px;'></div>
</div>
<div style='clear:left'>
<div style='height:80px;'></div>
<div style='height:80px;'></div>
</div>
CSS:
div div{background:red; width:150px; display:inline-block; margin:5px; float:left; clear:none}
Can't you simply add a bottom margin to the selected element in CSS?
#element {
margin-bottom: 20px;
}
Your answer would be some king of javascript+css coding to verify height of elements .. work on em then re-arrange them.
Stop trying to figure out by yourself, try using Masonry or jQueryEqualHeight explained on CSSTrick.
What is Masonry?
Masonry is a JavaScript grid layout library. It works by placing
elements in optimal position based on available vertical space, sort
of like a mason fitting stones in a wall. You’ve probably seen it in
use all over the Internet.
This is untested but something like this should work after your code...
The idea is to continuously add 1pixel to the top margin of the problematic div until the difference between the two divs is 20px
while(position['div1'] - position['div2'] <20){
$('#div2').animate({marginTop: '+=1px'}, 0);
}
If you want to show them directly in line as in your picture, it's even easier:
var diff = position['div1'] - position['div2']
if(diff < 20){
$('#div2').animate({marginTop: '+=' + diff + 'px'}, 0);
}
I'm trying to display an iframe in my mobile web application, but I'm having trouble restricting the size of the iframe to the dimensions of the iPhone screen. The height and width attributes on the iframe element seem to have no effect, strangely. Surrounding it with a div manages to constrain it, but then I'm unable to scroll within the iframe.
Has anyone tackled iframes in mobile safari before? Any ideas where to start?
Yeah, you can't constrain the iframe itself with height and width. You should put a div around it. If you control the content in the iframe, you can put some JS within the iframe content that will tell the parent to scroll the div when the touch event is received.
like this:
The JS:
setTimeout(function () {
var startY = 0;
var startX = 0;
var b = document.body;
b.addEventListener('touchstart', function (event) {
parent.window.scrollTo(0, 1);
startY = event.targetTouches[0].pageY;
startX = event.targetTouches[0].pageX;
});
b.addEventListener('touchmove', function (event) {
event.preventDefault();
var posy = event.targetTouches[0].pageY;
var h = parent.document.getElementById("scroller");
var sty = h.scrollTop;
var posx = event.targetTouches[0].pageX;
var stx = h.scrollLeft;
h.scrollTop = sty - (posy - startY);
h.scrollLeft = stx - (posx - startX);
startY = posy;
startX = posx;
});
}, 1000);
The HTML:
<div id="scroller" style="height: 400px; width: 100%; overflow: auto;">
<iframe height="100%" id="iframe" scrolling="no" width="100%" id="iframe" src="url" />
</div>
If you don't control the iframe content, you can use an overlay over the iframe in a similar manner, but then you can't interact with the iframe contents other than to scroll it - so you can't, for example, click links in the iframe.
It used to be that you could use two fingers to scroll within an iframe, but that doesn't work anymore.
Update: iOS 6 broke this solution for us. I've been attempting to get a new fix for it, but nothing has worked yet. In addition, it is no longer possible to debug javascript on the device since they introduced Remote Web Inspector, which requires a Mac to use.
If the iFrame content is not yours then the solution below will not work.
With Android all you need to do is to surround the iframe with a DIV and set the height on the div to document.documentElement.clientHeight. IOS, however, is a different animal. Although I have not yet tried Sharon's solution it does seem like a good solution. I did find a simpler solution but it only works with IOS 5.+.
Surround your iframe element with a DIV (lets call it scroller), set the height of the DIV and make sure that the new DIV has the following styling:
$('#scroller').css({'overflow' : 'auto', '-webkit-overflow-scrolling' : 'touch'});
This alone will work but you will notice that in most implementations the content in the iframe goes blank when scrolling and is basically rendered useless. My understanding is that this behavior has been reported as a bug to Apple as early as iOS 5.0. To get around that problem, find the body element in the iframe and add -webkit-transform', 'translate3d(0, 0, 0) like so:
$('#contentIframe').contents().find('body').css('-webkit-transform', 'translate3d(0, 0, 0)');
If your app or iframe is heavy on memory usage you might get a hitchy scroll for which you might need to use Sharon's solution.
This only works if you control both the outside page and the iframe page.
On the outside page, make the iframe unscrollable.
<iframe src="" height=200 scrolling=no></iframe>
On the iframe page, add this.
<!doctype html>
...
<style>
html, body {height:100%; overflow:hidden}
body {overflow:auto; -webkit-overflow-scrolling:touch}
</style>
This works because modern browsers uses html to determine the height, so we just give that a fixed height and turn the body into a scrollable node.
I have put #Sharon's code together into the following, which works for me on the iPad with two-finger scrolling. The only thing you should have to change to get it working is the src attribute on the iframe (I used a PDF document).
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Pdf Scrolling in mobile Safari</title>
</head>
<body>
<div id="scroller" style="height: 400px; width: 100%; overflow: auto;">
<iframe height="100%" id="iframe" scrolling="no" width="100%" id="iframe" src="data/testdocument.pdf" />
</div>
<script type="text/javascript">
setTimeout(function () {
var startY = 0;
var startX = 0;
var b = document.body;
b.addEventListener('touchstart', function (event) {
parent.window.scrollTo(0, 1);
startY = event.targetTouches[0].pageY;
startX = event.targetTouches[0].pageX;
});
b.addEventListener('touchmove', function (event) {
event.preventDefault();
var posy = event.targetTouches[0].pageY;
var h = parent.document.getElementById("scroller");
var sty = h.scrollTop;
var posx = event.targetTouches[0].pageX;
var stx = h.scrollLeft;
h.scrollTop = sty - (posy - startY);
h.scrollLeft = stx - (posx - startX);
startY = posy;
startX = posx;
});
}, 1000);
</script>
</body>
</html>
<div id="scroller" style="height: 400px; width: 100%; overflow: auto;">
<iframe height="100%" id="iframe" scrolling="no" width="100%" src="url" />
</div>
I'm building my first site and this helped me get this working for all sites that I use iframe embededding for.
Thanks!
Sharon's method worked for me, however when a link in the iframe is followed and then the browser back button is pressed, the cached version of the page is loaded and the iframe is no longer scrollable. To overcome this I used some code to refresh the page as follows:
if ('ontouchstart' in document.documentElement)
{
document.getElementById('Scrolling').src = document.getElementById('SCrolling').src;
}
I implemented the following and it works well. Basically, I set the body dimensions according to the size of the iFrame content. It does mean that our non-iFrame menu can be scrolled off the screen, but otherwise, this makes our sites functional with iPad and iPhone. "workbox" is the ID of our iFrame.
// Configure for scrolling peculiarities of iPad and iPhone
if (navigator.userAgent.indexOf('iPhone') != -1 || navigator.userAgent.indexOf('iPad') != -1)
{
document.body.style.width = "100%";
document.body.style.height = "100%";
$("#workbox").load(function (){ // Wait until iFrame content is loaded before checking dimensions of the content
iframeWidth = $("#workbox").contents().width();
if (iframeWidth > 400)
document.body.style.width = (iframeWidth + 182) + 'px';
iframeHeight = $("#workbox").contents().height();
if (iframeHeight>200)
document.body.style.height = iframeHeight + 'px';
});
}
Purely using MSchimpf and Ahmad's code, I made adjustments so I could have the iframe within a div, therefore keeping a header and footer for back button and branding on my page. Updated code:
<script type="text/javascript">
$("#webview").bind('pagebeforeshow', function(event){
$("#iframe").attr('src',cwebview);
});
if (navigator.userAgent.indexOf('iPhone') != -1 || navigator.userAgent.indexOf('iPad') != -1)
{
$("#webview-content").css("width","100%");
$("#webview-content").css("height","100%");
$("#iframe").load(function (){ // Wait until iFrame content is loaded before checking dimensions of the content
iframeWidth = $("#iframe").contents().width();
if (iframeWidth > 400)
$("#webview-content").css("width",(iframeWidth + 182) + 'px');
iframeHeight = $("#iframe").contents().height();
if (iframeHeight>200)
$("#webview-content").css("height",iframeHeight + 'px');
});
}
</script>
and the html
<div class="header" data-role="header" data-position="fixed">
</div>
<div id="webview-content" data-role="content" style="height:380px;">
<iframe id="iframe"></iframe>
</div><!-- /content -->
<div class="footer" data-role="footer" data-position="fixed">
</div><!-- /footer -->
Don't scroll the IFrame page or its content, scroll the parent page. If you control the IFrame content, you can use the iframe-resizer library to turn the iframe element itself into a proper block level element, with a natural/correct/native height. Also, don't attempt to position (fixed, absolute) your iframe in the parent page, or present an iframe in a modal window, especially if it has form elements.
I also suspect that iOS Safari has a non-standards behavior that expands your iframe's height to its natural height, much like the iframe-resizer library will do for desktop browsers, which seem to render responsive iframe content at height 0px or 150px or some other not useful default. If you need to contrain width, try a max-width style inside the iframe.
The solution is to use Scrolling="no" on the iframe.
That's it.