I have a 'big' problem with iframe. I had to make an iframe inside a container div witch has a Bootstrap modal inside. everything is working fine on desktop (Chrome, firefox, safari etc.)but on tablets, when i call the open function for the modal, it is remove every other content except the iframe.
here is the html code:
<div class="content">
<div class="container-fluid header">
<div class="container">
<div class="row">
<!-- SOME HTML CODE HERE-->
</div>
</div>
</div>
<div style="clear: both;"></div>
<iframe src="/game/" width="100%" height="786" style="border: none" id="table-1"></iframe>
</div>
The iframe is an html document too, and i know that i souldn't had to use it for this, but thats what they want me to do.
Related
I am trying to do a website with a loading animation. This loading animation shows well above all other divs in Chrome, but not in Firefox.
I have a menu bar, a main div, and a footer.
In the main div, I have a "main box" (will rotate in 3D) and a loading div.
The loading div hosts the animation for loading.
Html is kind of the following:
<div id="site">
<div id="menuDiv" class="mainSection"> Menu bar</div>
<div id="mainDiv" class="mainSection">
<div id="mainBox">
<div class="mainBoxSide front">
</div>
<div class="mainBoxSide right">
</div>
<div class="mainBoxSide back">
</div>
<div class="mainBoxSide left">
</div>
</div>
<div id="loadingDiv">
<div id="loadingBox">
<div class="loadingBoxSide loading-front"></div>
<div class="loadingBoxSide loading-right"></div>
<div class="loadingBoxSide loading-back"></div>
<div class="loadingBoxSide loading-left"></div>
</div>
</div>
</div>
</div>
<div id="footer" class="mainSection">Footer</div>
I want mainDiv to be on top of the footer, and loadingDiv on top of mainBox.
So in term of z-index : footer < mainBox < loadingDiv.
I created a codepen which isolates the problem: https://codepen.io/3MO/pen/vmOMEG
When opened in Chrome, everything works fine.
When opened in Firefox, the animation is flickering: it goes on top and on background of the mainBox element all the time, and I don't know why.
There is worse: if I provide a background color to the loading div, everything works fine: I created another codepen, the exact fork and defined a background color for loadingDiv: https://codepen.io/3MO/pen/XRbQjQ
Can someone know why it behaves like this? I need to work with a transparent div, so without any background color.
Thanks!
Try adding transform: translate3d(0,0,1px); to the div #loadingDiv.
I have built 2 pages for an app that uses bootstrap that the end user ends up printing a submission form after filling out some info.
I am have written the styles for the #media print i am using page-break-after to break the 2 container divs into 2 pages. All of this works exactly as expected except on Safari on a Mac. This prints perfectly on IE9 & 10, Firefox, Chrome and even Safari on a PC. It also prints perfectly on Chrome and Firefox on a Mac. These all print out exactly the same except Safari on the Mac it prints everything larger which pushes my second page to a 3rd page.
Here is the basic structure of my 2 printed pages the container div is only 600px wide.
<!-- First Page -->
<div class="container page-break">
<div class="row">
<div class="col-sm-12 center">
IMAGE HERE
</div>
</div>
<div class="row">
<div class="col-sm-12 center">
TEXT HERE
</div>
</div>
<div class="row">
<div class="col-sm-12 center">
ANOTHER IMAGE
</div>
</div>
<div class="row">
<div class="col-sm-7">
MORE TEXT
</div>
<div class="col-sm-5">
MORE TEXT
</div>
</div>
</div>
<!-- /.First Page -->
<!-- Second Page -->
<div class="container page-break">
<div class="row">
<div class="col-sm-12 center">
HEADER IMAGE HERE
</div>
</div>
<div class="row">
<div class="col-sm-12 center">
LONG SET OF TEXT HERE
</div>
</div>
</div>
<!-- /.Second Page -->
Any tips to make Safari on a Mac print like all the other browsers would be great. It is worth mentioning that these need to print without changing any print settings in the browser.
I had a similar situation and the solution was is in this answer; you have to define a specific size in the provided example of the answer, like this, to make smaller or larger the size of your containers when printing (specially the Bootstrap's container class):
#media print {
html, body, main, header, footer, .container {
...
min-width: 800px !important;
...
}
}
I have a simple jQuery mobile site with three pages in it.
In every page's div I've added
data-add-back-btn="true"
Still on none of the pages (not even on the sub-pages) a back button appears.
Is there some trick to this?
As of jQuery Mobile 1.4, data-add-back-btn="true" should be added to header div not page div.
<div data-role="page">
<div data-role="header" data-add-back-btn="true">
<h1>Header</h1>
</div>
</div>
I'm trying to embed a PDF and make it scrollable in Firefox (bonus points for the ability to zoom in/out, but right now I'd just be happy with a simple functional solution).
Basically my code is as follows:
<div class="row-fluid align-center">
<div class="span12">
<iframe style="float:none;display:inline;height:90%;" src="{{url}}" frameborder="0"></iframe>
<br>
</div>
</div>
<div class="row-fluid">
<div class="span11">
<button onclick = "history.go(-1);" class="pull-right btn btn-primary" type="submit">Go Back</button>
</div>
<br><br>
</div>
However, I noticed on Firefox that it simply prompts me to download the PDF file rather than embed it. Meanwhile, my users say it embeds in their browser, but it's sized very small.
How do I make it embed full-screen in Firefox?
On Safari/Chrome, it's fine. On iPad it only shows the first page of the PDF and it's not full-screen.
The solution was that I added a height parameters in absolute pixels, rather than a percentage.
<div class="row-fluid align-center">
<iframe class = "span12" style="float:none;display:inline;height:1200px;" src="{{url}}" frameborder="0"></iframe>
<br>
</div>
On this page an embedded YouTube video is displayed to the left of a carousel titled "Similar Festivals". The HTML used to embed the YouTube video is:
The HTML of the YouTube section is:
<div class="span4 spacer youtube">
<div class="title clearfix">
<h2 class="pull-left">YouTube</h2>
</div>
<iframe width="1000" height="1000" src="http://www.youtube.com/embed/NI8rQEHoE24"></iframe>
</div>
The layout of the page (using a responsive Bootstrap grid) is such that the video should have the same height as the carousel to the right of it, but as you can see, it is somehow breaking out of its parent container. I want the video to be aligned with the carousel to its right, how can I fix this.
Here's a screenshot in case there's any doubt about what I'm referring to!
I've noticed that row-fluid container is dynamically adding a width of 33% to your Youtube video. So whatever width expectation you set to it is being reset by that class.
Try this:
<div class="row-fluid">
<div class="span4 spacer twitter">
</div>
<!-- Youtube -->
<div class="span4 spacer youtube">
<div class="title clearfix">
<h2 class="pull-left">YouTube</h2>
</div>
<iframe height="150px" src="http://www.youtube.com/embed/NI8rQEHoE24"></iframe>
</div>
<!-- Similar Carousel -->
<div class="span4 spacer">
<div id="similarCarousel" class="carousel slide last">
</div>
</div>
</div>
(hat tip to Mr. Alien)
It sets the iframe height only. The whole row-fluid container expands somewhat, and the height is irregular. However, you don't have the 'jumping outta the container' problem.
Instead of
<iframe id="fitvid811516"
src="Festivals.ie%20_%20Electric%20Picnic%202012_files/NI8rQEHoE24.htm">
</iframe>
Use this
<iframe width="640" height="360"
src="http://www.youtube.com/embed/NI8rQEHoE24?feature=player_detailpage"
frameborder="0" allowfullscreen>
</iframe>
And adjust width and height manually. Iframes don't go along well with dynamic sizing.
Also if you don't want to break the layout but also don't want to change the content within, you can also go to the parent container in HTML and set overflow: hidden
.fluid-width-video-wrapper {
overflow:hidden;
}
Note that this would fix your layout but break the iframe; its bottom parts where play controls stay would be hidden.