If iframe is in the page with div which has position fixed and in iframe there is some element with position fixed, iframe will disappear after typing in some input/textarea field in iframe.
index.html:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<div style="position: fixed; width: 250px; height: 250px; top: 0px; right: 0px; border: solid 2px red;">
<iframe src="iframe.html" style="width: 250px; height: 250px;"></iframe>
</div>
</body>
</html>
iframe.html:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<div style="position: fixed">
<input type="text" placeholder="type here" /><br>
start typing above in iPad and after 1st char this iframe will be moved to the left side and after 2nd char it will completely dissapear
(tested on iPad 2; iOS 9.0.2; Safari 601.1)
</div>
</body>
</html>
demo: http://goo.gl/W0VDbh
Do you have idea how to fix it? Note: positions fixed can not be removed/replaced, in index.html can not add global styles - just for div and its children elements.
Related
is there a way to set the parameters in spreadsheet to force the user agent to desktop mode? i have used the ?fd=true and overridemobile=true but still its not working.
<header>
<meta name="viewport" content="width=1024">
</header>
<div class="ads" style="auto; width: 99%; height: 640px; overflow: hidden;">
<iframe src="https://docs.google.com/spreadsheets/d/1frhC32sdgAYq7ZbqNdCQHeziwpolY8CLcVFFBrXBQqA/edit?rm=minimal&fd=true#gid=10012724" height="750" width="670" style="border: none; margin-left:-44px; margin-top:-23px; "></iframe>
</div>
thank you for response
I've written this to a html page and the output is like this
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
</head>
<body>
<div style="margin: 0 auto; width:100%; height:1200px;">
<object type="text/html" data="http://www.live24sports.com"
style="width:100%; height:100%; margin:1%;">
</object>
</div>
<div style="margin: 0 auto; width:100%; height:1200px;">
<object type="text/html" data="http://paste.hgcommunity.net"
style="width:100%; height:100%; margin:1%;">
</object>
</div>
</body>
</html>
i think you want to get data attribute. you can use the below method to get any attribute.
if you can use jquery
$('object').attr('data');
or with plain javascript
document.querySelector('object').getAttribute("data");
edit
since you have multiple objects you can use
document.querySelectorAll('object')
to get a list of all objects and then use a loop to getAttribute('data'); on each item.
On iOS devices background images appear blurry. If someone can point out what I need to do that would be great. I'm also pretty new to this so please explain.
#home-cover {
height: 100%;
background-image: url("../img/bg-home.jpg");
}
<!DOCTYPE html>
<html lang="en">
<head>
<!-- required meta tags -->
<meta charset="utf-8">
<meta name="description" content="Building modern responsive website with html5, css3, jQuery & bootstrap framework">
<meta name="keywords" content="HTML5, CSS3, jQuery, Bootstrap, Web Design, Web Development, Responsive website, Modern website">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- title -->
<title>Genesis Utility</title>
<!-- Home -->
<section id="home">
<div id="home-cover" class="bg-parallax animated fadeIn">
<div id="home-content-box">
<div id="home-content-box-inner" class="text-center">
<div id="home-heading" class="animated zoomIn">
<h3>Genesis Utility <br> Communication Inc.</h3>
</div>
<div id="home-btn" class="animated zoomIn">
<a class="btn btn-lg btn-general btn-white smooth-scroll" href="#about" role="button" title="View Our Work">Learn About Us</a>
</div>
</div>
</div>
</div>
</section>
You haven't set a background size property. Assuming based on your design, you want cover
#home-cover {
height: 100%;
background-image: url("../img/bg-home.jpg");
background-size: cover;
}
Im having a lot of trouble with the scroll of a my pages that i previous loaded into the dom, and after that,i transition to them, but when i do that my content div has for example 1500 px, but my page has only 547,a min-heigth=547 appears to, and i cant scroll my page.
this is my code:
loading:
$.mobile.pageContainer.pagecontainer("load",
"./pages/scoringCliente/selectScoringApps.html", {})
transition:
$.mobile.pageContainer.pagecontainer("change", "#selectScoringApps", {
transition : "pop",
});
html:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="../../jqueryMobile/jquery.mobile-1.4.5.js"></script>
<link href="../../native/assets/www/default/css/jqueryMobileXXXXXXcss"
rel="stylesheet">
<meta name="viewport"
content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
</head>
<body>
<div data-role="page" id="selectScoringApps_page" data-dom-cache="true">
<div data-role="header" data-tap-toggle="false">
<div style="margin-left: auto; margin-right: auto;">
<img border="0" src="../../images/logo_header.png"
alt="Logo, Facebook" class="header_img headerDual_img" height="35" />
</div>
<h1 class="h1_header">
Mobile<br>Scoring
</h1>
</div>
<div data-role="content">
asdad <br> <br> <br> <br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>asd
</div>
</div>
</body>
</html>
It seems like jQuery mobile is appending a loading message at the start up page. I really don't know what's going on but consider the following simple snippet:
<!DOCTYPE html>
<html>
<head>
<title>sadFace</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no;" />
<meta charset="utf-8" />
<script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"></script>
</head>
<body>
<h1>;__;</h1>
</body>
</html>
I even have to scroll down to see the loading message. So I thought it might happen cause I'm not following the typical jQuery mobile page anatomy but:
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.5.2.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/mobile/1.0a4.1/jquery.mobile-1.0a4.1.min.js"></script>
</head>
<body>
<div data-role="page">
<div data-role="header">
<h1>;_;</h1>
</div><!-- /header -->
<div data-role="content">
<p>Same shit, different page.</p>
</div><!-- /content -->
<div data-role="footer">
<h4>need cookies :C</h4>
</div><!-- /footer -->
</div><!-- /page -->
</body>
</html>
the same. I'm totally stunned by this behaviour. I also test jQuery1.0rc2 with the same result even though I started my project from last week and it looks fine. What the hell is going on <.<
Looking up in jQuery Mobile' js I think this initializePage: function() is responsible for the message. I could comment out
//cue page loading message
$.mobile.showPageLoadingMsg();
or set autoInitializePage: false but I rather prefer a solution which is not involving a modified jQuery file (unless it's a bug).
You have to add the CSS too, then it will be fine:
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" />
In detail:
It always puts the following HTML at the bottom of your body:
<div class='ui-loader ui-body-a ui-corner-all'><span class='ui-icon ui-icon-loading spin'></span><h1></h1></div>
This is the relevant CSS (so maybe you can play with it yourself if you want)
.ui-loading .ui-loader { display: block; }
.ui-loader { display: none; position: absolute; opacity: .85; z-index: 100; left: 50%; width: 200px; margin-left: -130px; margin-top: -35px; padding: 10px 30px; }
The function showPageLoadingMsg adds the CSS class '.ui loading' to the HTML tag and then it becomes visible
You can stop the autoInitializePage by using the below BEFORE you load the jquery-mobile library
jQuery(document).on("mobileinit", function() {
jQuery.mobile.autoInitializePage = false;
});
More info here: http://api.jquerymobile.com/global-config/
Add this to the top of your JS file
$.mobile.autoInitializePage = false;
I had this problem the word 'loading' was constant at the end (bottom) of the site and it sucks/bad.
I solved it like this: in google chrome, in inspect hover word 'loading', copy element. I created a style and as an attribute: display:none!important;
It's:
body > div.ui-loader.ui-corner-all.ui-body-a.ui-loader-default {
display: none !important;
}