I wrapped the iframe with the below <div> classes, but no matter where I put the CSS, it doesn't pick up the CSS,it just isn't working
HTML:
<div class="auto-resizable-iframe">
<div>
<iframe frameborder="0" allowfullscreen="" src="//www.youtube.com/embed/{$id}"></iframe>
</div>
</div>
And here is the CSS, I tried putting it in global.css, and every other css area, but nothing....
.auto-resizable-iframe {
max-width: 820px;
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%;
}
Related
Page A has an iframe (that loads Page B). That Page B has a div#OutputDiv. My goal is to make that div in that iframe scrollable.
SOLUTION (CREDIT TO STEVE!):
Include overflow: auto for that div. However you must specify height too. Simply give any fixed value. eg height: 0.
Use a javascript function to make the div's height always same as the window's, even after window resize. height is now not fixed.
Code:
#outputDiv {
font-size: 12px;
font-family: Arial;
margin-right: 1em;
overflow: auto;
overflow-x: hidden; (optional)
-webkit-overflow-scrolling: touch; (enable smooth scrolling on mobile)
height: 0; (omit-able)
}
$(window).resize(function(){
$("#outputDiv").css("height",0).css("height",$(this).height());
});
$(window).trigger("resize");
TL;DR Full story
Page A.html - has an iframe to load Page B. When on Page A, that div#OutputDiv in that iframe must be scrollable. Works fine on PC but not scrollable on iPad/Android. Page structure:
Page B.php - Left half div#OutputDiv, right half div#map-canvas containing Google Maps.
(Sidenote: I think the #map-canvas CSS is pretty unchangeable, for example changing something may cause the Maps to extend height beyond browser height, which is not what I want.)
Page A.html
<style type="text/css">
#title-banner {
position: fixed;
top: 0;
left: 0;
width: 100%;
}
#real-time-alert {
margin-top: 155px;
margin-left: 10px;
}
.tab-content {
border-left: 1px solid #ddd;
padding: 10px;
height: 100%;
}
#map {
height: 100%;
}
.nav-tabs {
margin-bottom: 0;
}
#panel {
position: fixed;
top: 120px;
right: 10px;
bottom: 10px;
left: 350px;
}
iframe {
width: 100%;
height: 100%;
}
</style>
<body>
<div id="title-banner" class="well"><h1>Real-time incident updates</h1></div>
<div id="real-time-alert">
DEMO:<br>
<a id="demolink" style="cursor: pointer; font-weight: bold;">22/11/2013, 0.32.18AM: 3.128268, 101.650656<br></a>
</div>
<div id="panel">
<ul class="nav nav-tabs" id="myTab">
<li class="active"><a data-toggle="tab" href="#map">Map</a></li>
<li><a data-toggle="tab" href="#message">Messages</a></li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="map"><iframe seamless name="map-report"></iframe></div>
<div class="tab-pane" id="message"></div>
</div>
</div>
</body>
Page B.php
*for div#map-canvas, I had to do the code below, or else when I hover on the page, div#OutputDiv will disappear. This may be not important.
$("*").hover(function(){
$("#map-canvas").css("position","fixed"); });
<style>
html, body {
height: 100%;
margin: 0;
padding: 0;
}
#map-canvas {
height: 100%;
width: 50%;
}
#content-pane {
float:left;
width:48%;
padding-left: 2%;
}
#outputDiv {
font-size: 12px;
font-family: Arial;
margin-right: 1em;
}
</style>
<body>
<div id="content-pane">
<div class='well well-small' id="inputs" style="margin: 1em 1em 0 0">
<b>TESTING ONLY</b> <br>
<label for="originLat">Incident Site: </label><input type="text" id="originLat" style="width:6em;" />
<input type="text" id="originLng" style="width:6em;" />
<button type="button">Calculate distances</button>
</br>eg. 3.126547,101.657825
</div>
<div id="outputDiv"></div>
</div>
<div id="map-canvas" style="position: fixed; right: 1px;"></div>
</body>
I can't see any overflow controls specified in the CSS (apologies if I missed them).
Have you tried:
div#OutputDiv { overflow: auto; height: 200px; }
The height is just for testing purposes - but you could use Javascript to get the actual height and apply it using either raw javascript or jQuery.
A good example (including how to detect orientation changes if device goes portrait to landscape or similar) can be found on:
How do I get the new dimensions of an element *after* it resizes due to a screen orientation change?
I'm having some difficulty getting my website to display properly when viewed on the iPhone and iPad. The website displays properly when viewed on every desktop browser I've tried (safari, chrome, firefox), however, on the iPhone/iPad there is a tiny gap/space between the IMG and right box.
It works fine in Firefox. What is the problem?
Here's an inline link to JsFiddle.
<div id="wrapper">
<img src="http://dummyimage.com/155x155/000/fff"/>
<div id="subject">
<div id="subject_wrapper">
<span>Im span</span>
<span>im spanfdnf</span>
</div>
</div>
</div>
#wrapper {
border-top: 8px solid #457b91;
max-width: 488px;
margin: 0 auto;
overflow: hidden;
}
#wrapper img {
width: 32%;
float: left;
}
#subject {
background-color: green;
float: right;
width: 68%;
padding-bottom: 32%;
position: relative;
}
#subject_wrapper {
padding-top: 12%;
position: absolute;
height: 100%;
width: 100%;
}
#subject span {
font-family: Thonburi;
font-size: 34px;
color: #ffffff;
display: block;
padding: 0 20%;
}
#subject span:nth-child(2) {
font-size: 18px;
line-height: 8px;
}
I don't have an iPd or iPhone to hand to check this, but try commenting out the space between your elements, thus:
<div id="wrapper">
<img src="http://dummyimage.com/155x155/000/fff"/><!--
--><div id="subject">
<div id="subject_wrapper">
<span>Im span</span>
<span>im spanfdnf</span>
</div>
</div>
</div>
It's a pretty ridiculous fix, but it work for inline block elements, like menus made up of LIs.
Heading
I need to align tags beside the price in featured products (the tags in the example feature the text "Aussie Made").
I need to vertically align the "Aussie Made" images beside the price (bottom align). The price can dynamically change in width and height. Can someone give me some ideas on how to make the "Aussie made" image/icon float on the right and still be on the bottom of the div aligned?
I tried to put
position:absolute;
bottom:0px on the div containing the Aussie Made icon. However it didn't work. Can someone please help me on this?
Did you try using position RELATIVE?
As in relative to the PARENT container?
This should give you an ideia:
CSS
.container{position:relative; height:200px; width: 200px; outline: 1px solid #000; }
.image { position: absolute; bottom:0px; right:0px; width: 10px; height: 10px; outline: 1px solid #000; }
HTML
<div class="container"><div class="image"></div></div>
I beg your pardon, your quite right, its ABSOLUTE not RELATIVE...
Although Absolute position actually makes the contents relative to the parent.
See the photo below.
and the code...
<style type="text/css">
.Main
{
position: absolute;
left: 400px;
top: 200px;
width: 469px;
height: 280px;
}
.Photo
{
width: 469px;
height: 280px;
z-index: 1;
}
.Caption
{
position: absolute;
left: 0px;
top: 250px;
width: 461px;
height:32px;
padding-left: 8px;
background-color: #FF0000;
color: #FFFFFF;
font-family: tahoma;
font-size: 20pt;
text-align: left;
vertical-align: middle;
z-index: 2;
}
.Price
{
position: absolute;
left: 330px;
top: 215px;
width: 122px;
height: 40px;
text-align: center;
vertical-align: middle;
z-index: 3;
color: #CC3300;
font-size: 20pt;
background-color: #FFFF00;
}
.MiniText
{
top: 4px;
color: #111111;
font-size: 8pt;
font-weight: bold;
font-family: Tahoma;
}
</style>
<div style="left: 0px; top: 0px; height: 800px;">
<div class="Main">
<img class="Photo" alt="" src="http://202.92.83.79/medias/sys_master/images/8796157247518/Package-img1.jpg" />
<div class="Price" style="z-index: 4">
<div class="MiniText">First of it's kind!</div>
£100.97p
</div>
<div class="Caption" style="z-index: 3">Sooper Dooper Wotsit Thingy</div>
</div>
</div>
I have a problem while trying to upload using plupload and jquery ui dialog.
I have a modal dialog builded with jqueryui and I have added a plupload layout into it.
But when I try it with Firefox it open's me 2 dialog frame
and with Safari it doesn't work.
I have seen the code generated and I have seen that in Firefox I have 2
<div id="p16r5em3ep2gmrvk1ad335d1sae0_html5_container" style="position: absolute; background: none repeat scroll 0% 0% transparent; width: 0px; height: 0px; overflow: hidden; z-index: -1; opacity: 0; top: 0px; left: 0px;" class="plupload html5">
<input type="file" multiple="multiple" accept="" style="font-size: 999px; position: absolute; width: 100%; height: 100%;" id="p16r5em3ep2gmrvk1ad335d1sae0_html5">
</div>
And the second one
<div id="p16r5em3i11ila2j0b91i163s44_html5_container" style="position: absolute; background: none repeat scroll 0% 0% transparent; width: 0px; height: 0px; overflow: hidden; z-index: -1; opacity: 0; top: 0px; left: 0px;" class="plupload html5">
<input type="file" multiple="multiple" accept="" style="font-size: 999px; position: absolute; width: 100%; height: 100%;" id="p16r5em3i11ila2j0b91i163s44_html5">
</div>
For Safari, I have...
<div id="p16r5fjomdg751e101jao122t12gd0_html5_container" style="position: absolute; background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: transparent; overflow-x: hidden; overflow-y: hidden; opacity: 0; top: 0px; left: 0px; width: 0px; height: 0px; z-index: -1; background-position: initial initial; background-repeat: initial initial; " class="plupload html5">
<input id="p16r5fjomdg751e101jao122t12gd0_html5" style="font-size: 999px; position: absolute; width: 100%; height: 100%; " type="file" accept="" multiple="multiple">
</div>
And the second one
<div id="p16r5fjong1g231iqm10sq1jte1nc34_html5_container" style="position: absolute; background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: transparent; overflow-x: hidden; overflow-y: hidden; opacity: 0; top: 0px; left: 0px; width: 0px; height: 0px; z-index: -1; background-position: initial initial; background-repeat: initial initial; " class="plupload html5">
<input id="p16r5fjong1g231iqm10sq1jte1nc34_html5" style="font-size: 999px; position: absolute; width: 100%; height: 100%; " type="file" accept="" multiple="multiple">
</div>
But nothing's come right.
Note that if I don't use the modal dialog, it works...
EDIT
I use this code to init plupload
var uploader = new plupload.Uploader ({
runtimes: 'html5,flash',
container:'container',
drop_element:'upDropArea',
browse_button: 'upBrowseButton',
url: 'url&action=action',
flash_swf_url: '/lib/plupload/js/plupload.flash.swf',
multipart: true,
urlstream_upload:true,
resize : {quality : 60},
multiple_queues: true,
filters : [
{title: 'Images', extensions: 'jpg,gif,png,jpeg'}
]
});
Any idea?
Thanks for all
You don't have to init plupload widget into the jQuery UI modal dialog, it works fine when you intialize it somewhere else in your script.
I have have recently implemented the pluploadQueue plugin in a jQuery UI dialog by coding the plupload object in the "open" function callback of the jQuery UI dialog:
$("#plupload-dialog").dialog({
autoOpen: false,
modal: false, // change this to true for modal, but haven't tested yet
open: function(event, ui) {
$("pluploader").pluploadQueue({
runtimes: '', // add your runtimes here
url: '', // add your URL here
flash_swf_url: '', // path to shockwave component
silverlight_xap_url: '', // path to silverlight component
max_file_size: '', // file size option
filters: [], // filter options
preinit: { // preinit callbacks - note do not include separate init for pluploadQueue
Init: function(up, info) {
},
UploadFile: function(up, file) {
},
Error: function(up, args) {
}
}
});
}
});
Not sure if this will help, but maybe worth a shot.
I'm using jQuery Mobile to build up a mobile website.
On one page I have a bunch of texts to display in a div.
I coded according to the simple example of iScroll 4.
I get it right in my Chrome Browser, but when I test it in mobile safari, I can swipe down the text a bit but it will bounce back, rather than scroll down.
Here's the HTML Markup:
<div data-role="content">
<div class="text-content-wrapper">
<div id="scroll-wrapper">
<ul>
<li>Content</li>
<li>Content</li>
<li>Content</li>
<li>Content</li>
</ul>
</div>
</div>
and the CSS is:
.text-content-wrapper {
width: 80%;
height: 240px;
position: absolute;
left: 35px;
top: 65px;
overflow: auto;
padding: 10px 0;
background-color: white;
opacity: 0.8;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
z-index: 1;
}
#scroll-wrapper ul{
position: absolute;
z-index: 1;
width: 100%;
list-style: none;
text-align: left;
height: 360px;
}
If I move the position: absolute to #scroll-wrapper, it won't even work in the chrome.
And use the iScroll:
var myScroll1;
function loaded() {
myScroll1 = new iScroll('scroll-wrapper');
}
document.addEventListener('touchmove', function (e) { e.preventDefault(); }, false);
document.addEventListener('DOMContentLoaded', function () { setTimeout(loaded, 200); }, false);