I am having trouble making my website have a header, an embedded swf in the middle and then a footer. Every time it ends up making my page have to do a vertical scroll by the size of the header+footer. I am using swfObject and embedding the swf at 100% width and 100% height.
Does anyone know how to setup the correct ordering of div's and css to make the swf scale to the empty space in between the header and footer?
I am trying to use the following format
<div id="container">
<div id="header">
<div id="content"> SWF would go here
<div id="footer">
</div> end container
Is this what you are looking...? :O
<div id="container">
<div id="header"> <p align="center"> Header</p> </div>
<div id="content">
<object width="400" height="80%"
classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000"
codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0">
<param name="SRC" value="bookmark.swf">
<embed src="bookmark.swf" width="100%" height="80%"></embed>
</object>
</div>
<div id="footer"> <p align="center"> Footer</p> </div>
or
You can use javascript method.
First findout the spacing between header and footer, and then resize the flash. The following script may help you.
<script>
function myFunction()
{
// get the heights //
var containerHeight = document.getElementById("container").offsetHeight;
var headerHeight = document.getElementById("header").offsetHeight;
var footerHeight = document.getElementById("footer").offsetHeight;
// get the vertical spacing //
var height_of_flash = containerHeight-(headerHeight+footerHeight);
// set the heights //
var e1 = document.getElementById("object_swf");
e1.style.height = height_of_flash;
}
</script>
Related
I am trying to align a picture to the right of my googlemaps on a webpage, Ive tried align="right", style = "text-align: right;" but it either puts the picture to the left of the googlemaps or puts it below it. i have tried putting them both inside and tried creating separate Any ideas? my code below
<div>
<h4>Location</h4>
<iframe src="https://www.google.com/maps/embed?
pb=!1m18!1m12!1m3!1d3286.997240714081!2d-84.00061768469592!3d34.52829788047906!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x885f6619cc5057df%3A0xb04a3ff6aa138ebf!2sUniversity+Heights+Apartments!5e0!3m2!1sen!2sus!4v1497451987538" width="400" height="300" frameborder="0" style="border:0" allowfullscreen></iframe>
</div>
<div class="col-sm-3">
<img src="layout.jpg" style = "text-align: right;">
</div>
You can use the style float:left on your div tags.
<div style="float:left">
<h4>Location</h4>
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3286.997240714081!2d-84.00061768469592!3d34.52829788047906!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x885f6619cc5057df%3A0xb04a3ff6aa138ebf!2sUniversity+Heights+Apartments!5e0!3m2!1sen!2sus!4v1497451987538" width="400" height="300" frameborder="0" style="border:0" allowfullscreen></iframe>
</div>
<div class="col-sm-3">
<img src="layout.jpg">
</div>
There are a lot of ways to do this, I have created a fiddle using floats. However, contrary to what you might think... I am using float: left;. I have created a <div> to contain the <iframe> and a <div> to contain the <img>. I set both the <iframe> and <img> to width: 100%; so they fill their respective containers. This way, whatever width you set for the outer containers, they will fill them responsively. Check out the fiddle:
https://jsfiddle.net/fushniki/9cn3ptok/
try using span , instead of div for 2nd div
<span class="col-sm-3" style="float:left">
<img src="layout.jpg" style = "text-align: right;">
</span>
I am using Zurb Foundation 5 to build a site. My site has a navigation panel against the left side of the screen. When open, I want the nav area to take up 3 columns. The actual content will take up the remaining space. Here is the HTML I have thus far:
<body>
<div style="width:100%; max-width:100%; height:100%;">
<div id="navDiv" class="large-3 columns" style="background-color:#2D2D2D;height:100%;">
<!-- Nav Items Go Here -->
</div>
<div class="large-9 columns">
<!-- Main Content Goes Here -->
</div>
</div>
</body>
Each nav item has an icon and some text. I need to be able to collapse the navDiv in a way that it shrinks down so that only the icons are showing. The text goes away. At the same time, I need the main content area to grow to take up the space that was used by the nav area. I cannot figure out how to do this in the realm of zurb. From what I can tell, the grid is not dynamic. Is it possible to do what I'm trying with a grid? If so, how?
THank you!
If you want to use Foundation (with jQuery dependency) and no other add-ons, you can use a jQuery event handler to toggle the classes used by Foundation. It feels like a hack, but it works.
HTML
<body>
<button>Toggle sidebar</button>
<div class="row">
<div id="navDiv" class="small-2 medium-1 columns">
<img src="http://dummyimage.com/48"><span>Item 1</span>
</div>
<div id="content" class="small-10 medium-11 columns">
<!-- Content goes here -->
</div>
</div>
</body>
CSS
.small-2 span {
/* Hide text when sidebar is small */
display: none;
}
JavaScript + jQuery
$(function() {
$('button').click(function() {
// Resize sidebar
var navDiv = $('#navDiv');
navDiv.toggleClass('small-3');
navDiv.toggleClass('small-2');
navDiv.toggleClass('medium-2');
navDiv.toggleClass('medium-1');
// Resize content
var content = $('#content');
content.toggleClass('small-9');
content.toggleClass('small-10');
content.toggleClass('medium-10');
content.toggleClass('medium-11');
});
});
Demo on Plunker
I have to scroll div block instead of window scroll and i want that this block will be until the end of the page, and if it is longer then scroll - it must appear.
I have such html:
<body>
<div id='header'>
</div>
<div id='content'>
<div id='main'>
<div id='options'>
</div>
<!-- other blocks -->
<div id='scrorable'> <!-- This div i want to scroll instead of window -->
<table>
</table>
</div>
</div>
</div>
</body>
And also i use infinite-scroll that works now on window scroll:
$(window).scroll(function()
{
if($(window).scrollTop() >= $(document).height() - $(window).height() - 200)
{
//ajax Call and append income data to html
}
});
I also need to change this code according to scrolling div (not window).
Updated: Infinite scroll issue I sold in that way:
Insert one inner div in my scroll div:
<div id='scrorable'>
<div id='scrorable-inner'> <!--My inner div-->
<-- content -->
<table>
</table>
</div>
</div>
And My Changed inner scroll code:
$('div#scrorable').scroll(function()
{
if($('div#scrorable').scrollTop() >= $('div#scrorable-inner').height() - $'div#scrorable').height() - 200)
{
//ajax Call and append income data to html
}
});
Updated:
Now i use
$('div#scrorable').height($(window).height()-300);
to set height of that block. I use ($(window).height() - height of header and footer (300px))
I'm stying bootstrap sticky footer on my project: http://twitter.github.com/bootstrap/examples/sticky-footer.html
Is it possible to set height of content to fill remained space?
Let me explain. I want to reside image and I need to it gets sized relates to available height.
If your intention is fill any space between the end of the content and the start of the footer, I can see all sorts of challenges.
Depending on the specifics of your image, maybe you can include it as a background like this:
http://jsfiddle.net/panchroma/hBzjn/
You could use media queries, possibly with different images at different viewponts and also use padding to refine the results.
Good luck!
HTML
<div id="wrap">
<div class="contentWrap">
<!-- Begin page content -->
<div class="container">
<div class="page-header">
<h1>Sticky footer</h1>
</div>
<p>page content</p>
</div>
<div id="push"></div>
</div><!-- end contentWrap -->
</div> <!-- end wrap -->
<div id="footer">
<div class="container">
<h3>sticky footer </h3>
</div>
</div>
CSS
#wrap{
background: url(http://is.gd/0QPvoC) left bottom; /* define image and position */
}
.contentWrap{
background-color:#fff; /* quick fix so background image is hidden behind main content */
}
I have following webpage:
<div id = "wrapper">
<div id="leftmenu>
...
</div>
<div id="search">
...
</div>
<div class="Container">
<div id="content">
<iframe id="iF" name="if" src=""></iframe>
</div>
</div>
</div>
It bascially shows the menu in the left search bar on top and iframe with content below search bar and next to the menus. Problem i am having is i dont want it to show vertical and horizontal scrollbars inside ifram but rather use browsers scrollbars.
if i set like this in css:
.Container
{
position:absolute;
width:100%;
height:100%;
left:180px;
}
It removes horizontal scrollbar but is not removing vertical scrollbar. Can anyone guide me how to remove this vertical scrollbar from iframe.
Try: overflow: hidden; on your iframe.
#content iframe {
overflow: hidden;
}
Try this... After the iframe loads it resizes it using javascript. It'll only work if the iframe src is of the same domain.
<div id = "wrapper">
<div id="leftmenu>
</div>
<div id="search" >
</div>
<div class="Container">
<div id="content">
<iframe id="iF" onload="resize(this)" name="if" src="/"></iframe>
</div>
</div>
</div>
<script>
function resize(elem){
var outer=elem;
var inner=elem.contentDocument.documentElement;
outer.style.border="0";
outer.style.overflow="hidden";
outer.style.height=Number(inner.scrollHeight+10)+"px";
outer.style.width=Number(inner.scrollWidth+10)+"px";
}
</script>
There should be a scrolling attribute for the iframe you can just set to no, that takes care of the scrolling.
The iframe doesn't know it needs to be larger than the page it is in. If you know the height of the page you are attempting to show in the iframe, you can set the iframe height accordingly.
That being said, if the page you are displaying may change in size, your maintenance makes this pointless.
Charlie Frank's answer is good for same domain applications.