I have a webpage inside which I show a webpage(a Tableau dashboard) inside an iframe.
This iframe should refresh every 1 minute so that the dashboard can fetch updated data from the database.
However, during this refresh a blank screen/refreshing screen comes up. So I am trying to have 2 iframes with the same source and loading the alternate one with the src and swapping them.
But still I cant get the second iframe to load in the background when the first one is displaying, so I get a blank screen between each swap.
Any advice on what am mising? Thank you!
My code so far
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta HTTP-EQUIV="PRAGMA" CONTENT="NO-CACHE">
<meta HTTP-EQUIV="CACHE-CONTROL" CONTENT="NO-CACHE, NO-STORE,MUST-REVALIDATE,MAX-AGE=0">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<script src="jquery-2.1.1.min.js"></script>
<script type="text/javascript">
function refreshiframe()
{
var x=document.getElementById("xx");
var y=document.getElementById("yy");
if(x.style.display=="none"){
y.style.display="none";
x.style.display="block";
$('#myframe2').attr('src',"http://localhost/views/mypage1?:embed=y&:toolbar=no&:display_count=no&:refresh=y");
}
else{
x.style.display="none";
y.style.display="block";
$('#myframe').attr('src',"http://localhost/views/mypage1?:embed=y&:toolbar=no&:display_count=no&:refresh=y");
}
}
</script>
<style type="text/css">
#xx{
display:block;
}
#yy{
display:none;
}
</style>
</head>
<body onload="setInterval(refreshiframe,60000);">
<div id="xx"><iframe id="myframe" frameborder="1" scrolling="no" src=http://localhost/views/mypage1?:embed=y&:toolbar=no&:display_count=no width="100%" height="100%" frameborder="0">
</iframe></div>
<div id="yy"><iframe id="myframe2" frameborder="1" scrolling="no" src=http://localhost/views/mypage1?:embed=y&:toolbar=no&:display_count=no width="100%" height="100%" frameborder="0">
</iframe></div>
</body>
</html>
Related
I've got a MySQL database and have a few Google charts querying the data.
I'm looking for a way to display the charts in a neater way. I currently have each chart on a separate page, so I'm wondering if an Iframe is the way to go?
I'm hoping to click on a vertical list menu and see the different charts populate the Iframe.
This works, but I have some problems:
placing the Iframe to the right of the menu at the top of the page,
the menu's css also wont work,
a new page also fires, when I click of the menu.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Graph Menu</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" href="styles.css" type="text/css" />
<script src="./js/jquery-1.4.2.js" type="text/javascript"></script>
<script type="text/javascript">
</script>
</head>
<body>
<h1>Graph navigation page</h1>
<hr />
<iframe frameborder="0" width="65%" height="800" style="float:centre" src="http://mysite" name="graphs" id="graphs">
<p>iframes are not supported by your browser.</p>
</iframe><br />
<ul>
<li>Graph1</li>
<li>Graph2</li>
</ul>
Just use float: right
<iframe frameborder="0" width="65%" height="800" style="float:right" src="http://mysite" name="graphs" id="graphs">
<p>iframes are not supported by your browser.</p>
</iframe><br />
Flowplayer has an icon on the top left of the video which is "<>". When you click on it comes up with message "Paste this HTML code on your site to embed."
I want to remove that icon from my videos.
So I changed the fp-embed to display:none as per below.
However its still not working.
Any help would be appreciated.
Thanks
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Flowplayer · iframe src</title>
<!-- optimize mobile versions -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- The "minimalist" skin - choose from: "minimalist.css", "functional.css", "playful.css" -->
<link rel="stylesheet" href="//releases.flowplayer.org/5.4.6/skin/playful.css">
<style type="text/css">
.fp-embed {
display: none;
}
</style>
<!-- Flowplayer depends on jquery -->
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<!-- Flowplayer library -->
<script src="//releases.flowplayer.org/5.4.6/flowplayer.min.js"></script>
</head>
<body>
<div class="flowplayer color-light fixed-controls color-alt no-background"
data-fullscreen="true">
<video>
<source type="video/mp4" src="http://example.com/example.mp4">
</video>
</div>
</body>
</html>
the above mentioned method will Never work. I wasted a lot of time in doing it just by css.
instead of this :
<div class="flowplayer color-light fixed-controls color-alt no-background"
data-fullscreen="true">
use this :
<div class="flowplayer color-light fixed-controls color-alt no-background"
data-fullscreen="true" data-embed="false">
Your style gets overwritten by that of flowplayer itself.
If you be more specific with your CSS style selector you will be able to hide it:
.flowplayer .fp-embed {
display: none;
}
Use this:
flowplayer.conf = {
embed : false
};
Rer.: https://flowplayer.org/docs/embedding.html#disabling-embedding
I am using a jquery plugin nicescroll
I am loading different pages via iframe to a section of the div (i have to use iframes to sandbox the iframe content )
I have created this small page and i am having two issues?
1) if i try to scroll by touching the iframe content nothing moves, i have to touch outside the iframe to scroll it
2) it scrolls very slow and uneven.
I have hardcoded the width to work on the scrolling. I am going to have to resize the width after load once i have this initial problem fixed.
Thanks for any help
This is the simple page
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes, maximum-scale=1.0, minimum-scale=1.0">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<link rel="stylesheet" href="/inc/jquery.mobile-1.3.1/jquery.mobile-1.3.1.min.css">
<!-- jQuery and jQuery Mobile -->
<script src="/inc/js/jquery-1.9.1.min.js"></script>
<script src="/inc/js/jquery.validate.min.js"></script>
<script src="/inc/js/jquery.cookie.js"></script>
<script src="/inc/jquery.mobile-1.3.1/jquery.mobile-1.3.1.min.js"></script>
<script type="application/javascript" src="/inc/js/jquery.nicescroll.min.js"></script>
<script type="text/javascript">
$( document ).on( "pageinit", "#test", function( event ) {
$("#viewportdiv").niceScroll("#wrapper");
});
</script>
</head>
<body>
<div data-role="page" id="test">
<div data-role="header">
<h1>My Title</h1>
</div>
<div data-role="content" id="viewportdiv">
<div id="wrapper" style="width:1200px; height: 100%; ">
<ul>
<li>
<iframe id="myiframe" src="http://www.lipsum.com/feed/html" width="1200" height="600" seamless ></iframe>
</li>
</ul>
</div>
</div>
</div>
</body>
</html>
In regards to question no1, have you tried the niceScroll option oneaxismousemode:false
So something like this:
$(document).ready(function() {
var nice = $("html").niceScroll(); // The document page (body)
$("#div1").html($("#div1").html()+' '+nice.version);
$(".container-horizontal").niceScroll(".content",{cursorcolor:"#000",cursoropacitymax:0.7,touchbehavior:true,oneaxismousemode:false});
});
p.s. It may help to post an example link
I'm new in Jquery (learning from examples).
I'm trying to create some step by step tutorial and then to show FAQ with iframe at the end.
My main problem is that the page loads all my iframes (but hides them) so it takes about 10-15 seconds to load the page.
I want to be able to load each iframe by clicking on the button/text only, somehow I managed to to that (because my URL is the same and only the id of the url changes: http://my.nanorep.com/widget/widget.html?account=waze&kb=623233&onloadquestionid=ID)
Id: 3490608 or 3490611
When I click on forgot password for example it shows the iframe but when I clicks on it again it doubles it, I have no idea how to make it hide/ removed/ show it once.
The code: http://jsfiddle.net/ronvaisman/SKBWA
(it's under web -> Login Issue
Thanks for the help,
Ron
to show:
$('frameid').show();
to hide:
$('frameid').hide();
This is an example I made which has proven really useful as a starting point for these types of things.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
<script src="jquery.js"></script>
<style>
#click{ cursor:pointer;}
.clickopen{ background-image:url(clickopen.png); background-repeat:no-repeat;}
.clickclose{ background-image:url(clickclose.png); background-repeat:no-repeat;}
</style>
</head>
<body>
<div style="width:800px; margin:0 auto;">
<div id="box" style="width:800px; height:100px; background-color:#000; display:none;">
</div>
<div style="width:800px; height:100px;background-color:#CCC;">
<div id="click" style=" width:213px; height:27px;" class="clickopen">
</div>
</div>
</div>
<script>
var clickTrue = 0;
//show dialog
$("#click").click(function () {
$('.clickopen').toggleClass("clickclose");
$('#box').animate({
opacity: 0.75,
height: 'toggle'
}, 400, function() {
// Animation complete.
});
});
</script>
</body>
</html>
This is my code. http://furkan.brove.net/syflm.php
It is not working in Chrome when i print it. I wish it puts header and footer on every page in print mode. Also in every browser last footer is going bottom of the content. But i want it to be bottom of the page.
Is there any way to solve my problem?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-9">
<meta name="robots" content="noindex, nofollow">
<meta name="googlebot" content="noindex">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="X-UA-Compatible" content="IE=8" />
<title>Brove.NET ISO Yazılımı</title>
<link rel="stylesheet" type="text/css" href="css/pagination.css" />
<style>
#all thead { display: table-header-group; }
#all tfoot { display: table-footer-group; }
.header_table{ height:100px; }
.footer_table{ height:100px; }
</style>
</head>
<body>
<table id="all">
<thead><tr><td><table class="header_table"><tr><td>Your header goes here</td></tr></table></td></tr></thead>
<tfoot><tr><td><table class="footer_table"><tr><td>Your footer goes here</td></tr></table></td></tr></tfoot>
<tbody>
<tr><td>
Page body in here -- as long as it needs to be<br />
<!-- i wrote this many -->
</td></tr>
</tbody>
</table>
</body>
</html>
This is IE screenshot. In second page it puts header and footer well.
This is Firefox screenshot. It is working too.
But in chrome it is not working
This is a known issue with Webkit, unfortunately.
Here it is on the Chrome issue tracker: http://code.google.com/p/chromium/issues/detail?id=24826
And the Webkit issue tracker: https://bugs.webkit.org/show_bug.cgi?id=17205
Star it on the Chrome issue tracker if you want to show that it is important to you (I did).