I have been trying to fit a div into the browser's working area by setting div's
width and height as 100 %. Despite i am getting a vertical and horizontal scroll bars
on the screen.
HTML:
<html>
<body>
<div id="test">
</div>
</body>
</html>
CSS:
#test{ width:100%; height:100%; background-color:red; }
body{ margin:0; padding:0; }
I also tried this with scripting, But same result returned.
SCRIPT:
$('#test').css({'width':$(window).width(),'height':$(window).height()});
I Have Been Testing This With IE9. Any Ideas To Avoid This.?
Solution Obtained:
The Problem is, i Forgot to specify the border attribute for Body
body{ margin:0; padding:0; border:0;}
Now its Fine, The H and V scroll bar Got Vanished. Any way Thank you guys for your timely response.
Depending on IE version / quirks mode, either:
$(document).ready(function () {
$('#test').css('height', $(window).innerHeight());
});
or
$(document).ready(function () {
$('#test').css('height', document.body.clientHeight);
});
will work. You can do the same with widths as well.
$(window).innerWidth();
document.documentElement.clientWidth;
Using your code & my code in IE 9 worked good for me. Since it apparently didn't work for you, my only other suggestion is to ensure there are no other borders/margins/paddings that could be interfering.
<html>
<head>
<title>hi</title>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<style type="text/css">
body{ margin:0; padding:0; }
#test{ width:100%; height:100%; background-color:red; }
</style>
</head>
<body>
<div id="test">
</div>
<script type="text/javascript">
$(document).ready(function () {
$('#test').css('height', $(window).innerHeight());
});
</script>
</body>
</html>
body{
margin:0;
padding:0;
}
#test{
position:absolute;
top: 0px;
left: 0px;
width:100%;
height:100%;
border:none;
background-color:red;
}
or
#test{
position:absolute;
top: 0px;
left: 0px;
right:0px;
bottom: 0px;
border:none;
background-color:red;
}
Related
I have the following code
CSS
.photo_types {
position:relative;
top:0%;
left:0%;
width:100%;
height:100%;
background-color:gray;
text-align:left;
font-weight:bold;
margin:0% auto;
}
HTML
<div id="photo_types" class="photo_types">
<img src="images/ystone_burnt_tree.jpg" />
That code above is loaded via Javascript in the code below
CSS
.mySelfStyle {
position:absolute;
top:3.5%;
left:1%;
width:80%;
height:90%;
background-color:black;
text-align:center;
}
.photogMainStyle {
position:absolute;
top:3.5%;
left:1%;
width:80%;
height:90%;
background-color:black;
}
HTML
<div id="myself_panel">
<img id="myself_panel_img" src='images/ystone_burnt_tree.jpg' />
<p style="color:white;"> The Most Beautiful Place I have been To </p>
</div>
<div id="photo_panel">
</div>
JS
function showMyPhotography() {
itemObj = document.getElementById('myself_panel');
itemObj.className = 'hiderStyle';
itemObj = document.getElementById('photo_panel');
itemObj.className='photogMainStyle';
/*
itemObj.load("photo_panel.html");
*/
itemObj.innerHTML='<object type="text/html" data="photo_panel.html"> </object>';
}
The problem I am having is that the photo_panel.html which is loaded does not use all of the space in the div photo_panel. It only uses the space partially.
You need to set the height and width of the object tag you are adding
#photo_panel object
{
height:100%;
width:100%;
}
Plunker Sample
Thanks for your responses everyone. The following solved my problem.
.hiderStyle
{
clear : both;
display : none;
}
Earlier I did not have "clear:both" in my hiderStyle and I changed the function as follows
function showMyPhotography()
{
/*
itemObj = document.getElementById('myself_panel');
itemObj.className = 'hiderStyle';
itemObj = document.getElementById('photo_panel');
itemObj.className='photogMainStyle';
itemObj.load("photo_panel.html");
itemObj.innerHTML='<object type="text/html" data="photo_panel.html" style="width:100%; heig
*/
$("#myself_panel").className = 'hiderStyle';
$("#myself_panel").load("photo_panel.html");
}
I also had a similar problem. I was using <object> instead of using jquery. The following approach solved my problem.
html
<html>
<head>
<meta charset="UTF-8">
<title>Untitled Document</title>
<link href="Untitled-7.css" rel="stylesheet" type="text/css">
</head>
<body onLoad="load_page()">
<div id="d1">d1</div>
<div id="d2">d2</div>
<div id="d3">d3</div>
</body>
</html>
<script>
function load_page()
{
document.getElementById("d1").innerHTML='<object type="text/html" data="page1.html" ></object>';
document.getElementById("d2").innerHTML='<object type="text/html" data="page2.html" ></object>';
document.getElementById("d3").innerHTML='<object type="text/html" data="page3.html" ></object>';
}
</script>
css
html,body
{
height:100%;
width:100%;
}
div
{
height:100vh;
width:100vw;
}
div object
{
height:100vh;
width:100vw;
}
Hope this helps :)
I have a nav bar. When the user makes their screen bigger I want my font size to auto adjust. I tried it with: li { font-size: 1.2vw; } It works if the page is refreshed after adjusting the screen. What would be the code for an auto update? I want my text to constantly change its size based on the window width.
<!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>Power</title>
<style type="text/css">
#page {
position:inherit;
display:block;
width:60%;
margin:auto;
min-width:1000px;
z-index:0;
}
#pageImg {
position:absolute;
width:60%;
min-width:1000px;
z-index:1;
}
#media (min-width: 1000px) {
#navBarImg {
top: 5vw;
}
#navBarLogoImg {
top: 5vw;
}
#navMenuPart1 {
top: 5vw;
left:60%;
}
}
#navBarImg {
position:absolute;
width:60%;
min-width:1000px;
top:50px;
z-index:2;
}
#navBarLogoImg {
position:absolute;
width:11.75%;
min-width:190px;
top:50px;
z-index:3;
}
#navMenuPart1{
position:absolute;
width:100%;
min-width:1000px;
left:20px;
top:50px;
z-index:3;
color: #FFFFFF;
}
li { font-size: 1.2vw; }
ul{ white-space: nowrap; }
.navMenuItems ul { list-style:none; text-align:center; padding:10px 0; }
.navMenuItems ul li { display:inline; padding:15px; letter-spacing:2px; }
.navMenuItems ul li a { text-decoration:none; color:#3a3a3a; }
.navMenuItems ul li a:hover {color:#F19433;}
</style>
</head>
<body>
<div id="page">
<img id="pageImg" src="../Navigation/backgroundImg.png" />
<div id="navBar">
<img id="navBarImg" src="../Navigation/navBarBGImg.png" />
<img id="navBarLogoImg" src="../Navigation/navLogoImg.png" />
</div>
<div id='navMenuPart1' class="navMenuItems">
<ul>
<li><a href='#'><span>Research</span></a></li>
<li><a href='#'><span>Team</span></a></li>
<li><a href='#'><span>News</span></a></li>
<li><a href='#'><span>Courses</span></a></li>
<li><a href='#'><span>Outreach</span></a></li>
<li><a href='#'><span>Contact</span></a></li>
</ul>
</div>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>
causeRepaintsOn = $("li");
$(window).resize(function() {
causeRepaintsOn.css("z-index", 1);
});
</script>
<header></header>
</div>
</body>
</html>
EDIT:
Here is a FIDDLE - you can resize the page and see that it is working.
See this css-tricks article:
This is a webkit bug (Chrome,Safari) and it doesn't occur on IE10+ and FF 19+
In that article the author gives a Jquery solution for webkit browsers:
To fix this issue (allow resizing without page refresh) you need to
cause a "repaint" on the element. I used jQuery and just fiddled with
each elements (irrelevant, in this case) z-index value, which triggers
the repaint.
causeRepaintsOn = $("h1, h2, h3, p");
$(window).resize(function() {
causeRepaintsOn.css("z-index", 1);
});
So your page will look something like this:
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>Demo</title>
</head>
<body>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>
causeRepaintsOn = $("li");
$(window).resize(function() {
causeRepaintsOn.css("z-index", 1);
});
</script>
<header></header>
... etc etc..
</body>
</html>
Use,
font-size:1em;
or
font-size:100%; // based on body default declaration
If you have a css like this:
#body #mytext {
font-size: 50%;
}
you can dynamically resize in jQuery like this:
$(window).resize(function(){
$('#body #mytext').css('font-size',($(window).width()*0.5)+'px');
});
I have a canvas fullscreen over a webpage.
The size gets handled in processingjs.
<div id="canvasDiv">
<canvas id="processingCanvas" data-processing-sources="resources/processing/canvas01.pde"> </canvas>
</div>
Behind the canvas is a lot of text. The problem is i can't scroll on a iPad anymore cause the canvas is on top.
Is there a way to ignore the canvas but still show it on top?
This is the current css:
#canvasDiv {
position: absolute;
left: 0;
z-index: 999;
}
#processingCanvas {
position: fixed;
top: 0;
left: 0;
}
Here is how to let elements fall through to underlying elements:
If the browser is Chrome, Firefox, Safari, Blackberry or Android, but not IE or Opera, you can use pointer-events to tell the canvas not to handle click/touch events and then the clicks/touches will be handled by the underlying elements. So,
in CSS:
#topCanvas{ pointer-events: none; }
But in IE and Opera, you have to be tricky:
Hide top canvas,
Trigger event on bottom element,
Show top canvas.
This code shows how to trigger events on underlying elements:
<!doctype html>
<html>
<head>
<link rel="stylesheet" type="text/css" media="all" href="css/reset.css" /> <!-- reset css -->
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<style>
body{ background-color: ivory; }
#wrapper{ width:200; height:200;}
#bottom{ position:absolute; top:0; left:0; width:200; height:200; background-color:red; }
#top{ position:absolute; top:0; left:0; width:200; height:200; background-color:blue; }
</style>
<script>
$(function(){
$('#top').click(function (e) {
$('#top').hide();
$(document.elementFromPoint(e.clientX, e.clientY)).trigger("click");
$('#top').show();
});
$("#bottom").click(function(){ alert("bottom was clicked."); });
}); // end $(function(){});
</script>
</head>
<body>
<div id="wrapper">
<canvas id="bottom"></canvas>
<canvas id="top"></canvas>
</div>
</body>
</html>
I'm trying to develop a Layout with CSS and using a Iframe. How can I show the full page in the iframe without scrolling? Is the iframe appropriate to show full web pages?
Here is the code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pt">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>layout basic method web</title>
<style type="text/css" media="screen">
#container
{
width: 100%;
height: 100%;
background-color: #fff;
}
iframe
{
border-style: none;
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<div id="container">
<div id="top">
<h1>Header</h1>
</div>
<div id="content">
<h2>Subheading</h2>
<IFRAME name='iframe1' id="iframe1" src="http://www.yahoo.com"></IFRAME>
</div>
<div id="footer">
Footer
</div>
</div>
</body>
</html>
If you test the code, you see that the CSS create a scroll inside the page. How can I get rid of this scroll and show all the page?
Best Regards,
UPDATE:
I'm almost there. I only need that the scroll up/down goes over the Header, just like goes over the footer. Is that possible? Please see the code. Just copy/paste it.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title> stu nicholls | CSS PLaY | cross browser fixed header/footer layout basic method </title>
<style type="text/css" media="screen">
#printhead {display:none;}
html {
height:100%;
max-height:100%;
padding:0;
margin:0;
border:0;
background:#fff;
font-size:80%;
font-family: "trebuchet ms", tahoma, verdana, arial, sans-serif;
/* hide overflow:hidden from IE5/Mac */
/* \*/
/*overflow: hidden;*/
/* */
}
body {height:100%; max-height:100%; overflow:hidden; padding:0; margin:0; border:0;}
#content {display:block; height:100%; max-height:100%; overflow:hidden; padding-left:0px; position:relative; z-index:3; word-wrap:break-word;}
/*#head {position:absolute; margin:0; top:0; right:18px; display:block; width:100%; height:50px; background:#fff; font-size:1em; z-index:5; color:#000; border-bottom:1px solid #000; }*/
#head {position:absolute; margin:0; top:0; right:18px; display:block; width:100%; height:50px; background:#fff; color:#000; font-size:1em; border-bottom:1px solid #000;}
#foot {position:absolute; margin:0; bottom:-1px; right:18px; display:block; width:100%; height:25px; background:#fff; color:#000; text-align:right; font-size:2em; z-index:4; border-top:1px solid #000;}
.pad1 {display:block; width:18px; height:50px; float:left;}
.pad2 {display:block; height:50px;}
.pad3 {display:block; height:500px;}
#content p {padding:5px;}
.bold {font-size:1.2em; font-weight:bold;}
.red {color:#c00; margin-left:5px; font-family:"trebuchet ms", "trebuchet", "verdana", sans-serif;}
h2 {margin-left:5px;}
h3 {margin-left:5px;}
</style>
</head>
<body>
<div id="head">
<div class="pad1"></div><h1>Header</h1>
</div>
<div id="content">
<div class="pad2"></div>
<IFRAME name="teste" src="http://www.yahoo.com" width="100%" height="100%" frameborder=0></IFRAME>
<!--<div class="pad3"></div>-->
</div>
<div id="foot">Footer</div>
</body>
</html>
Any clues on how to achieve this?
Best Regards,
You'll have to set the height of the iframe to match the height of the page you are looking at.
If the page is within the same domain you could use javascript to dynamically resize the frame to match the body size of the page you are viewing. There's a few jQuery plugins out there that will do that.
If it's an external domain you can't do this so you'll have to just set the height property of the iframe to match.
If you want to get rid of the scrollbar on the main window, add an overflow style:
#container {
width: 100%;
height: 100%;
background-color: #fff;
overflow: hidden;
}
You can do this with javascript:
function resizeFrame(){
var iframe = parent.document.getElementById('id of your iframe');
$(iframe).height($('#your top html tag inside your iframe').height());
$(iframe).width($('#your top html tag inside your iframe').width());
}
Then call this function on load & after any hide/unhide actions that will change the form length:
resizeFrame();
If you have margins/padding on the top level html tag inside the iframe, you might need to add px to the height() / width() like this:
$(iframe).height($('#your top html tag inside your iframe').height()+40);
$(iframe).width($('#your top html tag inside your iframe').width()+20);
An iframe cannot adjust size relative to the page it is showing. You would need to adjust it's size with javascript, which implies that you know the size of the page beforehand. If you are just after showing the content of another page inside yours, indeed have a look at ajax.
A very simple example can be found here:
http://aleembawany.com/2005/09/01/ajax-instant-tutorial
be aware that loading pages with ajax in a cross-domain context might not work due to security settings of the browser.
It should look like this - working on IE
but it is't showing like the above on Google Chrome:
Let me paste the codes I've been using :
Structure :
.header
|_ .h-box-style & .h-box-1
|_.ad-title
|_.ad-content
HTML Code:
<!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>OrderBorder.com -- The way you want the deals for Apple mobile phones </title>
<link href="styles/main.css" type="text/css" rel="stylesheet"/>
<script src="scripts/jquery-1.4.4.min.js" type="text/javascript" language="javascript"></script>
<script src="scripts/cufon-yui.js" type="text/javascript" language="javascript"></script>
</head>
<body>
<div class="main">
<div class="header">
<div class="h-box-1 h-box-style">
<span class="ad-title">Enjoy Group Savings</span>
<div class="ad-content">
Wholesale prices for your Apple gear get lower with larger group size.
</div>
</div>
<div class="h-box-2 h-box-style">
<span class="ad-title">Earn Points</span>
<div class="ad-content">
Keep earning points with every purchase you and your friends make.
</div>
</div>
<div class="h-box-3 h-box-style">
<span class="ad-title">Reach Borderline Prices</span>
<div class="ad-content">
Eat my dust group!!! Use your points to bring your own prices to the border.
</div>
</div>
</div>
</div>
</body>
</html>
and CSS Code:
body
{
margin:0px;
background-image:url(../images/background.jpg);
}
div.main
{
background-image:url(../images/main_background.jpg);
background-repeat:no-repeat;
height:950px;
width:897px;
margin-right:auto;
margin-left:auto;
}
div.main div.header
{
width:893px;
height:120px;
margin-top:120px;
float:left;
}
div.main div.header div.h-box-style
{
width:100%;
height:100%;
}
div.main div.header div.h-box-style span.ad-title
{
color:Black;
font-family:Arial;
font-size:20px;
width:100%;
background-color:Red;
}
div.main div.header div.h-box-style div.ad-content
{
color:Gray;
font-family:Arial;
font-size:12px;
width:100%;
height:40px;
}
div.main div.header div.h-box-1
{
float:left;
width:220px;
height:80px;
margin-left:80px;
margin-top:20px;
}
div.main div.header div.h-box-2
{
float:left;
width:220px;
height:80px;
margin-left:70px;
margin-top:20px;
}
div.main div.header div.h-box-3
{
float:left;
width:250px;
height:80px;
margin-left:30px;
margin-top:20px;
}
When I inspect source code with Google Chrome developer tool, I can see that css is applied to the .ad-title and ad-content but these codes don't change anything.
So I've pasted everything I've done. can some one help me why Google Chrome behaves like that and doesn't show the text on the page under `.header'.
Thanks in advance.
I'm running Chrome v. 8.0.552.224 and the text is displayed correctly... the problem is not in your html code...
I've found the problem. ad-title and ad-content are somehow matching some other internal css rules which don't belong to my application. When I change the names to h-title and h-content they started working fine.
Especially be careful, when you are using AdBlock extension since they don't like ad word.