If on small device replace iframe with error text - javascript

I have content in an iframe on my website that doesn't look good on small screens*. It overlaps the edge of the page. I don't want users to use the iframe content, and I want it to be changed to an image based error message (see below). I know about media queries, and I think they might have something to do with the solution. Maybe display: none? Or maybe JavaScript/jQuery show/hide functions? Here is my code so far...
<iframe id="content" width="485" height="402" frameborder="0" src="http://www.google.com/" allowtransparency="true"></iframe>
I would like the error message to be...
<img id="error" src="error.png" width="100%" alt="Error text goes here" title="Error Message">
<p>This content is not available on small screens like yours. Change to a bigger screen to see the content.</p>
By the way, I know that iframes are depreciated in HTML5, but they are the only way to display the content I need on my website.
*I define a 'small screen' as a browser size less than 725px in width.

Using media Queries:
.hide-small {
display: block
}
.show-small {
display: none
}
#media screen and (max-width: 725px) {
.hide-small {
display: none!important;
}
.show-small {
display: block!important
}
}
Using jquery
in html body
$(window).ready(function(){
if ($( window ).width() > 750) {
$('.hide-small').show();
$('.show-small').hide();
} else{
$('.hide-small').hide();
$('.show-small').show();
}
and the html:
<div class="hide-small"><iframe></div>
<div class="show-small">Text for small screen</div>
Personally media query looks better to me, but question has Javascript and jquery tags and its possible to do it with javascript.
EDIT: adjusted width restriction

Add this into header: <meta name="viewport" content="width=device-width">
Then this is the code:
#moblie {display: none;}
#media screen and (max-width : 725px ){
#moblie {display: inline-block;}
#iframe {display: none;}
}
<div id="iframe">
<iframe width="485" height="402" frameborder="0" src="http://www.google.com/" allowtransparency="true"></iframe>
</div>
<div id="moblie">
<p>This content is not available on small screens like yours. Change to a bigger screen to see the content.</p>
</div>

Related

Why isn't my text responsive on a mobile device view?

I'm currently on a MacBook with the display dimensions of 15.4-inch (2880 x 1800) here is a screenshot of how each section of my website looks for my homepage.
#app (section1)
#section2 (section2)
#section3 (section3)
----------
ISSUE ONE
How can I fix my h3 text to ensure it's responsive on a mobile device and it fits to be seen on a mobile device. Here is a screenshot below of how it looks as you can see it doesn't adjust and fit on the screen correctly. If you look at the JSFIDDLE link to my site at the bottom of the post you can see I have used <div class="col-lg-12"> to ensure it's responsive therefore, no idea why it's going this on mobile devices.
<h1 class="maintxt bounceInUp animated">Hi, welcome to my portfolio</h1>
<h2 class="maintxt bounceInUp animated">My name is Liam Docherty</h2>
<h3 class="cd-headline bounceInUp animated loading-bar">
<span>I'm a</span>
<span class="cd-words-wrapper">
<b class="is-visible">Front-End Web Developer</b>
<b>Graphic Designer</b>
</span>
</h3>
Here is a screenshot of a mobile device view of my website showing the issue.
JSFIDDLE
white-space: nowrap will prevent the text from wrapping on small screens. Remove that from .cd-words-wrapper b:
.cd-words-wrapper b {
display: inline-block;
position: absolute;
width: 100%;
text-align: center;
left: 0;
top: 0;
}
https://jsfiddle.net/wdafatrx/8/
You could also use vw and vmin units to keep them inside the screen.
.cd-words-wrapper b has white-space:nowrap set - this will cause all text inside it to stay on one line. Removing that is the fix to your responsiveness issue.
Use a media call in your css;
#media screen(max-width: 480px) {
<!--your div class name--> h3 : <!--new font size--> }

Page jumping when filling form in iframe on iOS devices

I have a problem with iOS browsers
This is starter conditions:
- We have a simple html page and it contains iframe
- iframe also contains simple html page with form
- iframe haven't scroll and it sizes is fixed
Bug:
Now, if we will open this page on iPhone(from Chrome/Safari browser) and start fill form,
then in some moment when text printing, page scroll down by itself
This is example link
<div id="container">
<iframe src="https://www.w3schools.com/php/demo_form_validation_complete.php" frameborder="0"></iframe>
</div>
Why is this happening? How to prevent these automatic "jumps" of the page?
This might work:
HTML:
<div class="scroll-wrapper">
<iframe src=""></iframe>
</div>
CSS:
.scroll-wrapper {
-webkit-overflow-scrolling: touch;
overflow-y: scroll;
/* important: dimensions or positioning here! */
}
.scroll-wrapper iframe {
/* nada! */
}
Source: https://davidwalsh.name/scroll-iframes-ios

have header and footer that are on out side of iframe appear and disapear when mouse enters general area

I have an iframe inside a main page container. I have managed to remove the second scroll bar that is in the main html. Leaving only the iframe scroll, this was done by request of a higher up. We have mandatory headers and footers that need to appear at all times. We decided to get creative and added some .js to out html that makes the headers and footers appear and disappear. The only problem is this causes the iframe to not take up the whole page height. because if the headers and footers are shown when mouse is over them and the iframe is too long then the footers get hidden under the page. (cant scroll down to them because the scrollbar was removed.)
What I am trying to get at is there a way I can have both work? Ill post the code.
*JavaScript*
function show_topnav()
{
document.getElementById('nybe-top-nav').style.display="block";
document.getElementById('nygov-universal-navigation-frame').style.display="block";
}
function hide_topnav()
{
document.getElementById('nybe-top-nav').style.display="none";
document.getElementById('nygov-universal-navigation-frame').style.display="none";
}
function show_bottomnav()
{
document.getElementById('nybe-footer').style.display="block";
document.getElementById('nygov-universal-footer-frame').style.display="block";
}
function hide_bottomnav()
{
document.getElementById('nybe-footer').style.display="none";
document.getElementById('nygov-universal-footer-frame').style.display="none";
}
here is the html
<header id="test-header" onMouseLeave="hide_topnav()">
<iframe id="nygov-universal-navigation-frame" title="NY Gov Universal Navigation" class="nygov-universal-container" width="100%" height="86px" src="//static-assets.ny.gov/load_global_menu/ajax?iframe=true" data-updated="2014-11-07 08:30" frameborder="0" style="border:none; overflow:hidden; width:100%; height:86px;" scrolling="no">
Your browser does not support iFrames
</iframe>
<!-- Google Tag Manager -->
<noscript>
<iframe src="//www.googletagmanager.com/ns.html?id=GTM-T4FP6H" height="0" width="0" style="display:none;visibility:hidden" title="Google tag manager" ></iframe>
</noscript>
<script type="text/javascript">(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0];var j=d.createElement(s);var dl=l!='dataLayer'?'&l='+l:'';j.src='//www.googletagmanager.com/gtm.js?id='+i+dl;j.type='text/javascript';j.async=true;f.parentNode.insertBefore(j,f);})(window,document,'script','dataLayer','GTM-T4FP6H');</script>
<!-- End Google Tag Manager -->
<div id="nybe-wrapper">
<!-- Begin the top navigation -->
<div id="nybe-top-nav">
<div id="nybe-account">
<span class="glyphicon glyphicon-user"></span>Your Account
</div>
<div class="nys-global-header horizontal unstacked">
<h1><span class="glyphicon glyphicon-home"></span>New York Business Express</h1>
<ul id="nys-global-nav">
<li>
Start your Business
</li>
<li>
</li>
</ul>
</div>
</div>
<div id="hidden-top" onMouseEnter="show_topnav()"> </div><!-- helper div for onMouseEnter -->
</header><!-- end header -->
here is some of the css
html{
overflow-y: hidden;
}
body.nybe-opa-frame #main-content{
margin:0px;
padding:0px;
}
body.nybe-opa-frame #main-content > iframe{
min-height:650px !important;
width:100%;
border:none;
}
body.nybe-opa-frame #nybe-footer {
margin-top:-5px;
}
/* end opa frame*/
/*#hidden-top{background-color: #142047;}*/
/*added two help divs to use on mouse enter events for the page
opacity is set to 0 so they cant be seen */
#hidden-bottom,#hidden-top{
opacity: 0.0;
height: 20px;
}
/*set all the headers and footers to display none*/
#nygov-universal-navigation-frame,#nybe-top-nav,#nybe-footer,#nygov-universal-footer-frame{
display: none;
}
most of the code was not made me my higherup created most of the page the iframe comes from an external source.
Any Ideas would be great! I know this is kind of a weird post. What i Have now works pretty well but I feel like there is a better more efficient way to do this.
Thanks!

How to dynamically change contents of HTML page based on current window size

I have a simple web page meant as a table of contents to other pages. I have five images used as buttons to those other pages, but I need them to be displayed in a specific way. I have everything centered, and the background is static and doesn't move when you scroll, but the problem is with the buttons.
I would like them to be of a specific height based on the current height of the browser. I say current height because I need it to resize itself if the user resizes the window.
Also, and more importantly, I need this to prevent the table of contents from ever being larger than the height of the browser. I noticed that on different screen resolutions, the images are larger or smaller and can look terrible because of this.
So, for instance, I want the height of there to be the same amount of space between the bottom of the browser and the table of contents, and between the top of the browser and the table of contents, no matter how large the browser window is or the resolution of the user's screen.
I was thinking, through javascript, to grab the size of the window using something like window.innerHeightand set the height of the div encompassing the table of contents to this value.
This is what I have so far, but the script doesn't seem to do anything at all (it's my first time using javascript so I might very well be doing something stupid.):
<html>
<head>
<style>
html, body {
height: 100%;
}
body {
background-image: url(../images/background.png);
background-repeat: no-repeat;
background-size: cover;
background-position: center;
}
#logo {
width: 200px;
margin-top: 15px;
}
.c1 {
width: 300px;
margin-top: 15px; <!--margin between buttons-->
}
</style>
<title>Some Title</title>
</head>
<body bgproperties="fixed"> <!--static background-->
<div align="center" id="contents">
<div >
<a href="http://somewebpage">
<img id="logo" src="images/logo.png" alt="Logo"> <!--title button-->
</a>
</div>
<div >
<a href="http://somewebpage">
<img class="c1" src="images/img1" alt="image 1"> <!--second button-->
</a>
</div>
<div>
<img class="c1" src="images/img2" alt="image 2"> <!--third button-->
</div>
<div >
<img class="c1" src="images/img3" alt="image 3"> <!--fourth button-->
</div>
<div>
<img class="c1" src="images/img4" alt="image 4"> <!--fifth button-->
</div>
</div>
<script>
var ht = window.innerHeight
|| document.documentElement.clientHeight
|| document.body.clientHeight; <!--Get the height of the browser-->
document.getElementById("contents").style["height"] = ht; <--set height of table of contents-->
</script>
</body>
</html>
You can set this all by CSS but you can go with JavaScript also.
What you need is to set properties in Percentage(%); Such as:
width: 90% (You can replace value as you need to show on screen)
For preventing to not go more than specified width then you can set max-width(Again in percentage)
You can set height as auto.
$(document).resize(function(){
if(document.innerHeight > 350) {
do something
}
});
I agree with other answers in adjusting size, width and height etc. But after reading your question, i think responsive UI is what something you are looking for. Why not you try frameworks like BootStrap to help you. Instead of reinventing the wheel we can use some thing existing that is very easy to use. getbootstrap.com is the url and easy to implement.
(I couldn't post it as comment as i have less reputation :))
You can accomplish your goal two ways:
CSS Media Queries: CSS detects the size of the viewport (window, for lack of a better way of explaining it), and applies certain rules if the viewport matches the #media query. Below are some examples. Also, have a look at this CodePen for a better idea of how it works.
/* If the browser width is anything less than 100px, */
#media (max-width: 100px){
/* Set the height of an element */
#my_element{
height: 200px;
}
}
/* If the browser width is 1000px or more, */
#media (min-width: 1000px){
/* Set the height of an element */
#my_element{
height: 2000px;
}
}
/*
You can also do widths in ranges.
If the width is between 600px and 800px,
*/
#media (min-width: 600px) and (max-width: 800px){
/* Styles here */
}
/* This applies to height as well */
#media (max-height: 500px){
/* Styles here */
}
Another way you can get it done is using percentage units: set the width of your buttons to 50%, and resize the browser window. They should now be flexible. Play around with percentages until your satisfied. Personally, I prefer media queries as they allow for more precision, but take your pick! Hope this was helpful!

IFRAME Fit entire content no scroll bar

Hello well I can not get my IFRAME to work. I want its height to fit the entire content area. When I put height 100% it does not fit the entire area and only fits about 3/4s of the content area. Here is my code:
<iframe src="some.html" frameborder="0" style="overflow:hidden; display:block; height:100%; width:100%" height="100%" width="100%">
<p style="">Your browser does not support iframes.</p>
How can I fit entire content are on my iframe?
Use this in your code, your problem was that it had to be set to position: absolute, otherwise it'll just give you the width and height you need.
<body style="margin: 0 auto;">
<iframe src="some.html" frameborder="0"
style="overflow:hidden;
display:block; position: absolute; height: 100%; width: 100%">
<p style="">
Your browser does not support iframes.
</p>
</body>
add body,html{ height: 100% } to your css, should fix your issue. This assumes that the body tag is your parent. This fiddle might help you out a little - http://jsfiddle.net/8qALc/
Both answers are quite right but there are some flaws. Instead, this should work in any modern browser *:
<style>
/* Unless you use normalizer or some other CSS reset,
you need to set all these properties. */
body,html{ height: 100%; margin:0; padding:0; overflow:hidden; }
</style>
<!--
* frameborder is obsolete in HTML5.
* in HTMl5 height and width properties are set in pixels only.
Nonetheless, there is no need to set these values twice.
* scroll bars should be dictated by the embedded content,
so to avoid double scroll bars, overflow is moved to the html,body tags.
There is a new attribute named seamless that allows the inline frame to
appear as though it is being rendered as part of the containing document,
so no borders and scrollbars will appear.
Unfortunately this is not supported by browsers yet.
-->
<iframe src="some.html" style="position:relative; border:0; height:100%; width:100%;">
<p>Your browser does not support iframes.</p>
See demo
See seamless property browser compatibility.
*For HTML4 support add these to the iframe: frameborder="0" height="100%" width="100%"

Categories

Resources