I know this is a general question, but I can't get a true answer on Stackoverflow or searching google. How do I make a page with a fixed header for logo and links and an iFrame of a given URL. The closest I've come across is this iFrame with Fixed Header. What I really want to achieve is this example on CodeCanyon. The first link gives a decent answer, but the page has two scroll bars. Thanks in advance!
EDIT: I want to make the iFrame stretch to the height of the page :)
The examples you linked are using jquery to dynamically adjust the height.
//function to adjust height of iframe
var calcHeight = function () {
var headerDimensions = $('#header-bar').outerHeight(true);
$('#preview-frame').height($(window).height() - headerDimensions);
}
$(document).ready(function () {
calcHeight();
});
$(window).resize(function () {
calcHeight();
}).load(function () {
calcHeight();
});
This is the code i used to dynamically adjust the height.
you can see it here in jsfiddle http://jsfiddle.net/QQKc4/11/
You would have your HTML something like this...
<html>
<head>
</head>
<body>
<div style="height:[[some value you want in px]]"; width:100%;>
The logo and links come here
</div>
<iframe src="[[the url to load]]" style="width:100%;"></iframe>
</body>
</html>
Note - The inline styles can be moved to a stylesheet, and for the iframe, you'll need to calculate the window height minus the header div height with javascript/jQuery and apply the height to the iframe
You could do
<html>
<head>
</head>
<body>
<div style="height:(x)px; width:100%; position:absolute; top:0; bottom:0; z-index:2;">
The logo and links come here
</div>
<div style="width:100%; height:100%; position:absolute; top:0; bottom:0; z-index:1">
<iframe src="xx.html" style="margin-top:(x)px; width:inherit; height:inherit"></iframe>
</div>
</body>
</html>
Related
I want to show loading icon until pdf is loaded into the webpage.I have pasted what I have tried but loading icon keeps on displaying even the pdf is loaded fully. Got this code from JSFiddle
<html>
<head>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<style>
iframe {
width: 100%;
height: 100%;
border: 5px solid green;
}
</style>
<script>
$(function(){
var $iFrame = $('iframe');
$iFrame.load(function(){
$('h3').html('PDF Loaded!');
});
$('h3').html('Loading PDF...');
$iFrame.attr('src', 'http://listic.ru/jQuery_Cookbook.pdf');
});
</script>
</head>
<body>
<h3></h3>
<iframe></iframe>
</body>
</html>
You can't just use an iFrame to display a PDF. If you want to embed a PDF onto a webpage, you should use a JavaScript library like pdf.js.
Anyway, use this http://jsfiddle.net/BXe8C/497/
The $(document).ready(function() { event fires as soon as the DOM (document) has downloaded.
The $(document).load(function() { event fires when all on page elements have completely loaded.
So use a JavaScript library like https://github.com/mozilla/pdf.js to render the PDF, and use that jQuery event above to listen for when the page has completely loaded.
I need a iframe with link attached to that iframe. I have a iframe with src containing image file and id containing the url where i should be navigated. I should not use javascript or any php coding for link creation. when i paste that iframe in any page, its should be a clickable iframe.
adding tag doesn work in some browsers like chrome and firefox.
Eg:
<iframe src="imagepath" scrolling = "no" width="728" height="90" id = "redirect url"></iframe>
With the following HTML and CSS you get an iframe with a link overlay. You have to specify the redirect url in the a tag. If you you really have to specify it in the id of the iframe, you definitely need JavaScript.
Here's a demo how it looks like (only tested in Chrome): http://jsfiddle.net/2kA3J/
CSS:
#container {
position:relative;
width:400px;
height:400px;
}
#container a {
position:absolute;
width:100%;
height:100%;
}
#container iframe {
width:100%;
height:100%;
}
HTML:
<div id="container">
<iframe src="imagepath" scrolling="no" ></iframe>
</div>
I was trying to set a dynamic height to an iframe but it always fail; I'm looking for an iframe alternative that retrieves contents from webpage and display it in the holder page with dynamic height. Any suggestions?
Add this to your <head> section
<script language="javascript" type="text/javascript">
function resizeIframe(obj) {
obj.style.height = obj.contentWindow.document.body.scrollHeight + 'px';
}
</script>
And change your iframe to this:
<iframe name="Stack" src="http://stackoverflow.com/" frameborder="0" scrolling="no" id="iframe" onload='javascript:resizeIframe(this);' />
search for responsive Iframe on google. There are a lot of tutorials and examples out there.
height:100%; will be an important keyword
I'm trying to display an image within an iFrame on my page. The problem I face is that in Firefox, the image seems to be zoomed out automatically. I need to click on it to get the actual size. I know there is a manual fix for this by doing the following:
Enter about:config in Firefox address bar.
Look for browser.enable_automatic_image_resizing
Change the value to false
I was wondering though if there was something I could write on my script that would automatically take care of it?
You can use a div to get the same result as an iframe but without the resizing:
<html>
<head>
<title>foo</title>
</head>
<body>
<div style='overflow: scroll; width: 300px; height: 300px;'><img src="image.png" /></div>
</body>
</html>
If you set the image as a background image it should stop FF from scaling it.
Im integrating a simple chatbox application into my site, which is simply added by iframeing chat.php
I dont have a static place to put this on the webpage, and I want to load the iframe on top of the site's content on the top right (with ajax), which would remain visible unless I X it out at the top.
Auto-triggering the chatbox to load between page loads once its enabled (by checking the session that it wrote when the chatbox was first enabled) would also be nice.
I use the jquery framework, but Im not that proficient at it. Site is written in php.
What I was thinking is this
I have an empty div with id chatbox. When someone clicks a link to see the chatbox, it loads chat.php inside that div in an iframe, and adds a class to the div that would position the div in the top right corner.
<style type="text/css">
#chatFrame {
display: none;
width: 300px;
height: 200px;
/* some more styles */
}
</style>
<script type="text/javascript">
$(document).ready(function() {
$('#activator').click(function() {
$('#chatFrame').html('<iframe border="0" frameborder="0" width="100%" height="100%" src="chat.php"></iframe>').show();
});
});
</script>
open chat
<div id="chatFrame"></div>
A simple and very neat solution : use PrettyPhoto (or any other lightbox style) plugin.
http://www.no-margin-for-errors.com/projects/prettyphoto-jquery-lightbox-clone/
I like PrettyPhoto for it's simple look and so far I had no problem with it.
The code can be as simple as this :
Google.com
The website has all the details.