I am working on an app that will be deployed to Facebook therefore viewed from an iframe inside of Facebook's chrome.
I have some basic media queries that linearise the content at a set viewport size.
When the site is viewed in the browser locally the media queries work fine but when tested inside Facebook's chrome then they do not work.
I assume that the resizing of the viewport is not detected by the child of the iframe therefore the media queries will have no effect. Is there a way to get this working?
You could add a little jQuery to detect a window resize and then swap out a separate stylesheet.
$(window).resize(function(){
var currentWidth = $(document).width();
var allStyleSheets = $("link");
allStyleSheets.each(function(){
var $this = $(this);
//assume sheet1.css is for pages with widths equal and over 700 and sheet 2 is for widths under 700px
if(currentWidth >= 700 && $this.attr("href").indexOf("sheet2.css") > 0){
$this.remove();
$(head).append('<link href="sheet1.css" type="text/css" rel="stylesheet" />');
}
if(currentWidth < 700 && $this.attr("href").indexOf("sheet1.css") > 0){
$this.remove();
$(head).append('<link href="sheet2.css" type="text/css" rel="stylesheet" />');
}
});
});
As my adapted code was using media queries in a common CSS file, I prefer to toggle a fbIframe class on the body element, and add specific CSS rules in context of this class. The jQuery code thus becomes simpler:
function adaptToWindowSize(){
$("body").toggleClass("fbIframe", $(window).width() < 820);
};
$(window).resize(adaptToWindowSize);
$(adaptToWindowSize);
Related
Title pretty much says it all.
I'm struggling with selecting the damn fullscreen button out of the default <video> skin.
I found this on http://www.jwplayer.com/blog/using-the-browsers-new-html5-fullscreen-capabilities/:
<script type="text/javascript">
function goFullscreen(id) {
// Get the element that we want to take into fullscreen mode
var element = document.getElementById(id);
// These function will not exist in the browsers that don't support fullscreen mode yet,
// so we'll have to check to see if they're available before calling them.
if (element.mozRequestFullScreen) {
// This is how to go into fullscren mode in Firefox
// Note the "moz" prefix, which is short for Mozilla.
element.mozRequestFullScreen();
} else if (element.webkitRequestFullScreen) {
// This is how to go into fullscreen mode in Chrome and Safari
// Both of those browsers are based on the Webkit project, hence the same prefix.
element.webkitRequestFullScreen();
}
// Hooray, now we're in fullscreen mode!
}
</script>
<img class="video_player" src="image.jpg" id="player"></img>
<button onclick="goFullscreen('player'); return false">Click Me To Go Fullscreen! (For real)</button>
I see you're probably looking for the native player's selector, but this will let you create your own button.
Want to apply HTML 5 fullscreen APi to background image of div
<div class="bgimg" style="background-image:url('img/home-1.jpg')" />
<img src="img/fullscreen.png" id="fullscreen-btn">
</div>
I want onclick fullscreen-btn background image of div bgimg ie home-1.jpg should open in fullscreen. I tried below code but not workin Kindlt suggest
<scritpt>
$(function() {
var bg = $('.bgimg');
$('#fullscreen-btn').click(function () {
goFullScreen(bg.attr('style', 'background-image:url()'));
});
});
function goFullScreen( element )
{
if ( element === undefined )
{
// If no element defined, use entire document
element = document.documentElement;
}
if ( element.requestFullScreen )
{
// Spec, supported by Opera 12.1+
element.requestFullScreen();
}
else if ( element.mozRequestFullScreen )
{
// Supported by Firefox 10+
element.mozRequestFullScreen();
}
else if ( element.webkitRequestFullScreen )
{
// Supported by Chrome 15+ & Safari 5.1+
element.webkitRequestFullScreen();
}
// Still no IE support, sorry folks :(
}
Seems to be working for me. You just needed to add the image path in your javascript with quotes around it.
$(function() {
var bg = $('.bgimg');
$('#fullscreen-btn').click(function () {
goFullScreen(bg.attr('style', "background-image:url('img/home-1.jpg')"));
});
});
FIDDLE
I believe, but will admit am not 100% sure, that the fullscreen API can only full screen an HTML element. So that is why it will fullscreen div.bgimg but will not fullscreen the background image of the element. <img> is an HTML element, however, so I would think that would work. Is there any reason you would not want to use that instead of setting the background image of your divs?
If so, you could try to wire up some JS that connects visible divs with the background images (Like what you have now) to invisible images and load those to your fullscreen script instead.
Is it possible that an iframe can recognize the orientation of its parent website? At the moment the css media query is only working at my parent site.
I tried to fix this issue by sending a post message to my iframe and change the linked css file with javascript:
parent site:
window.addEventListener("orientationchange", function(){
var iframe = document.getElementById("plan_iframe");
iframe.contentWindow.postMessage({orientation: window.orientation}, iframe.src);
}, false)
iframe:
<link id="changing_css" rel="stylesheet" type="text/css" href=""/>
[...]
window.addEventListener("message", function(e){
var newOrientationValue = e.data.orientation;
if(newOrientationValue == 90 || newOrientationValue == -90){
document.getElementById('changing_css').href="css/vertretung_ios_landscape.css";
}
else{
document.getElementById('changing_css').href="css/vertretung_ios_portrait.css";
}
}, false)
This fix is very slow because javascript needs some time to load the file "onorientationchange" and apply the changes.
How does css recognizes the orientation?
In my case, I had control over the parent window. I solved this by putting an additional media query on the parent container's iFrame styles. Turns out that the CSS media query for orientation simply goes by whichever property is greater. For example...
An iFrame of greater height will render in portrait orientation. width: 400px; height: 600px;
An iFrame of greater width will render in landscape orientation. width: 600px; height: 400px;
For some reason, when a user has their display set to 125% from the Control panel, IE9 will add extra width inline to elements like so:
<div class="container" id="main" style="width: 1500px">
<!-- Code goes here-->
</div>
The inline style above (with the width) is the one added by IE9. IE8 does not have this problem, and it's definitely triggered by setting the Windows display settings to 125%. Chrome and Firefox display things properly without the extra style too. Don't suppose anybody has a workaround or fix for this? Can't control what settings the users have, but I've seen other sites render properly.
Ok, so I solved this with a conditional comment and a bit of jQuery:
<!--[if IE 9]>
<script type="text/javascript">
window.onload = function () {
if ( $('#main').attr('style') !== 'undefined' ) {
$('#main').removeAttr('style');
}
}
</script>
<![endif]-->
Basically, it checks to see if IE put a "style" attribute on the offending element, and if so, it removes the attribute.
Yep or if you want to be more selective to width and height
jQuery(document).ready(function () {
removeInlineWidthHeightElements($('#main'));
});
function removeInlineWidthHeightElements(element) {
element.attr('style', function (i, style) {
return style.replace(/width[^;]+;?/g, '').replace(/height[^;]+;?/g, '');
});
}
Is it possible to remove inline styles with jQuery?
I am using the GBKS woodmark jquery infinite gallery plugin with JADE and EXPRESS.
I am also using bootstrap css, there is apparently a clash with bootstrap.css that makes the absolute positioning used by woomark fail onload.
The main issue is that the absolute positioning of li in a ul by bootstrap is over-writing the absolute positioning of li in a ul of the woomark gallery plugin.
There is a temporary solution of just calling the method again to re-position the site a couple of milliseconds after the site loads, but I don't think that is a good idea.
The issue isn't a clash with bootstrap, it's that wookmark doesn't know the height of the images before loading them. In order to fix it:
Add the Images Loaded JS plugin - https://github.com/desandro/imagesloaded
Modify the wookmark code so that it doesn't trigger before all the images are loaded:
<!-- Once the images are loaded, initalize the Wookmark plug-in. -->
<script type="text/javascript">
$('#tiles').imagesLoaded(function() {
// Prepare layout options.
var options = {
autoResize: true, // This will auto-update the layout when the browser window is resized.
container: $('#main'), // Optional, used for some extra CSS styling
offset: 2, // Optional, the distance between grid items
itemWidth: 210 // Optional, the width of a grid item
};
// Get a reference to your grid items.
var handler = $('#tiles li');
// Call the layout function.
handler.wookmark(options);
// Capture clicks on grid items.
handler.click(function(){
// Randomize the height of the clicked item.
var newHeight = $('img', this).height() + Math.round(Math.random()*300+30);
$(this).css('height', newHeight+'px');
// Update the layout.
handler.wookmark();
});
});