I find the document.body.clientWidth can be used as the actual client Width even there is nothing display in the window. If you zoom the window, the value will change dynamic.
But if there is nothing displayed in the window, how can I know the actual client Height in case of not using any JQuery Libs?
my code is as below:
<!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 content="width=device-width, initial-scale=1.0, user-scalable=no" name="viewport" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>
</title>
<style type="text/css">
body
{
margin:0px;
padding:0px;
border:0px;
/* border-color:#FEFEFE;*/
/* background-image:url(bg.png);*/
background-repeat: repeat;
display:block;
z-index:-9999;
width:100%;
height:100%;
left:0px;
top:0px;
}
div
{
background-color:#a0a0a0;
position:absolute;
left:0px;
top:0px;
width:100%;
height:100%;
display:block;
z-index:-8888;
}
</style>
</head>
<body id="body">
<div id="bg">
<span id="s1">
test
</span>
</div>
</body>
<script type="text/javascript">
(function (d) {
setInterval(function () {
w = d.body.clientWidth;
document.title = w;
}, 1);
})(document)
</script>
</html>
You can use window.innerHeight like the following:
var intViewportHeight = window.innerHeight;
According Mozilla MDN: window.innerHeight retrieves Height (in pixels) of the browser window viewport including, if rendered, the horizontal scrollbar.
Here is a plunker example.
Related
Theres full html code.
Hope somebody help me with it. Please.
Need to change background image to another one, but only when Curves script be doned.
Trying to find answer by google, but cant.
<!doctype html>
<html lang="en">
<html>
<head>
<meta charset="utf-8">
<style>
body {
background: #141414 url(Wallpaper.jpg);
}
</style>
</head>
<body>
<p>...</p>
</body>
</html>
<head>
<meta charset="UTF-8">
<title>HTML5 Canvas</title>
<script src="Modernizr/modernizr-2.0.6.js"></script>
<script type="text/javascript">
Theres some script things
<title>HTML5 Canvas Generative Art</title>
<style type="text/css">
body {background-color:#141414; overflow: hidden;}
#caption {position:absolute; width:1360px; text-align:center; top:688px; z-index:1}
canvas {}
#displayCanvas {position:absolute; top:0px; left:0px; z-index:0;}
div {}
#container {width:1360px; height:688px; margin:auto;}
</style>
</head>
<body>
<div id="container">
<canvas id="displayCanvas" width="1360px" height="688">
Your browser does not support HTML5 canvas.
</canvas>
</div>
</body>
</html>
full html code in Drive Google:
link
Place your code at the bottom of your document. And any external js files you're loading, put them above the below script tag. That should work for you.
<script type="text/javascript">
// window.onload will ensure the document is fully loaded before running the below script
window.onload = (event) => {
// Your other scripts you'd like to execute before changing the background
// Code to change background
document.body.style.background = "url('new_image.gif')";
};
</script>
Update:
Your mark up is not properly created. Keeping the tags consistent and putting the relevant tags within head and body is a good practice. Refer to the code below.
// window.onload will ensure the document is fully loaded before running the below script
window.onload = (event) => {
// Your other scripts you'd like to execute before changing the background
// Code to change background
document.body.style.background = "url('https://i.imgur.com/cCqp22b.gif')";
};
body {
background: #141414 url(Wallpaper.jpg);
}
body {
background - color: #141414;
overflow: hidden;
}
# caption {
position: absolute;
width: 1360 px;
text - align: center;
top: 688 px;
z - index: 1
}
canvas {}
# displayCanvas {
position: absolute;
top: 0 px;
left: 0 px;
z - index: 0;
}
div {}
# container {
width: 1360 px;
height: 688 px;
margin: auto;
}
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>HTML5 Canvas</title>
<script src="Modernizr/modernizr-2.0.6.js"></script>
</head>
<body>
<p>...</p>
<div id="container">
<canvas id="displayCanvas" width="1360px" height="688">Your browser does not support HTML5 canvas.
</canvas>
</div>
</body>
</html>
You can set the style.background property using JavaScript after the script is loaded.
<!DOCTYPE html>
<html>
<head>
<style>
body {
background: url("paper.gif");
background-color: #cccccc;
}
</style>
</head>
<body>
<!--Load some script here-->
<script>
setTimeout(()=>document.body.style.background = "url('https://i.pinimg.com/originals/f4/52/a2/f452a2f4b634b3011e065da8eaf0a5c3.gif')",1500);//simulate waiting
</script>
</body>
</html>
There is an example here where he inserts an iframe where the height of the iframe is changed to be the height of the inserted content. He explains the trick here.
However when I try and do it with my Bootstrap example, then something is preventing the JavaScript from modifying the iframe. height is never added to the iframe.
Question
Can someone see why height isn't added to the iframe, as it is done in the original example?
I am using this as iframe content
wget http://www.456bereastreet.com/lab/iframe-height/iframe-content.html
and my html is
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<style>
iframe {
width:100%;
margin:0 0 1em;
border:0;
}
#external-frame {min-height:800px;}
body {
padding-top: 70px;
}
.container .jumbotron {
background-color: #ffffff;
padding-right: 0px;
padding-left: 0px;
height: 100%;
margin:0 auto;
}
</style>
<script>
window.onload = function () {
setIframeHeight(document.getElementById('external-frame'));
};
</script>
</head>
<body>
<div class="container">
<div class="jumbotron">
<iframe src="iframe-content.html" frameborder="0" id="external-frame"></iframe>
</div>
</div>
</body>
</html>
This feels too obvious, but it really looks like you just didn't define setIframeHeight or include any script that defines it.
If you want to call a function, obviously you need to have that function.
That's the function, copied from the page you linked to:
function setIframeHeight(iframe) {
if (iframe) {
var iframeWin = iframe.contentWindow || iframe.contentDocument.parentWindow;
if (iframeWin.document.body) {
iframe.height = iframeWin.document.documentElement.scrollHeight || iframeWin.document.body.scrollHeight;
}
}
};
Paste it in your script tag and you should be good to go.
I loaded an image to my html page. I set its opacity to 0.5 using jquery css property. Now
I want to write a text based sentence on the top of this image. I mean to say that the image I loaded I want it to be in background and the text to appear on top.
It is just like quoted image.
<!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=iso-8859-1" />
<title>Untitled Document</title>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<style type="text/css">
div{
position:absolute;
top:40px;
left:40px;
width:500px;
height:500px;
}
#imgDiv{
width:500px;
height:500px;
}
</style>
<script type="text/javascript">
$(document).ready(function(){
$("img").css("opacity", 0.5);
});
</script>
</head>
<body>
<div align="center">
<img src="936371_607068789305456_425546376_n.jpg" id="imgDiv"/>
</div>
</body>
</html>
You can set the css of the image by to set the image below all other DOM elements :
#imgDiv{
position: absolute;
width:500px;
height:500px;
z-index: -1;
}
Add this to imgDiv CSS code:
position:relative;
z-index:0;
This makes the image act like a layer so we can put text on top of it the same way.
Now for the text make a new <div> or <p>, give it an ID, and write this CSS code to it:
position:relative;
z-index:1;
This will make the text on top of the photo. Now use top: bottom: left: right: in the same CSS if you needed to move the text around.
HTML
<div class="img-container">
<img class="transparency" src="img.jpg" />
<div class="img-text">
Image is loaded.
</div>
</div>
CSS:
.transparency {
opacity: 0.5;
z-index: 1;
}
.img-text {
z-index: 2;
position: absolute;
}
This should be sufficient. It tells the img-text class to be on top of the transparency class.
Just put you image as a div background in CSS.
background-image: url(images/yourimage.jpg);
I am trying to make a portfolio where if you click on ‘scroll page’, the page will scroll completely until the footer image is one with the top image. So you can see one complete image when header and footer are merged.
I have searched Google and Stack Overflow, but unfortunately I couldn't find anything that did the trick.
EDIT
i have updated the style.
On IE9 it scrolls until footer hits header and it fits good, but in google chrome it does not.
Anyone have any idea? Thank you
EDIT 2
I have managed to make the page scroll but now i have height property problems in web crossing.
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Portfolio | S.H. MOKHTAR | 2011</title>
<link rel="stylesheet" type="text/css" href="layout/styles.css" />
<script>
function pageScroll() {
window.scrollBy(0,60); // horizontal and vertical scroll increments
scrolldelay = setTimeout('pageScroll()',50); // scrolls every 100 milliseconds
}
function stopScroll() {
clearTimeout(scrolldelay);
}
</script>
</head>
<body>
<div id="header"></div>
<div id="content"><input type="button" onClick="pageScroll()" value="Scroll Page">
Stop Scrolling<br>
<br>
</div>
<div id="footer"><img src="layout/images/bot.png" style="width:auto; height:auto" /></div>
</body></html>
body, html, div, input, footer{
margin: 0;
padding: 0;
border: 0;
outline: none;
}
body{
width:100%;
}
#header{
background:url(images/top.png); height:auto; width:auto; background-repeat:no-repeat;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 43px;
}
#content{
margin-top:50px;
}
#footer{height:870px;
}
EDIT 3
With help i managed to resolve the height problem, The new code is up and running and for download at http://www.sushitaksteeg.nl/secret/Port.rar or live at http://www.sushitaksteeg.nl/secret/template.html for now.
My other question where i could solve this problem with help is: Height different in IE FF Chrome
Thank you
Haven't tested it, but something like this:
$("body").scrollTop($("#yourimage").position().top);
(With jQuery ofcourse for XB (Cross Browser))
i want to make a login page but it is hidden in the center of the main page.
and then i use jquery to make the div that surrounds it visible and it will be like the login page at www.bytes.com.
but i cant figure it out how to center it with css. it doesnt work without affecting the main pages div positions.
i just want it to float over the main page. someone?
Is this what you want? Note the CSS comment. It's important to get the div centered. The "trick" that make the float above the other parts of your site, is position: absolute.
<!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" lang="en">
<head>
<title>Centering a DIV with CSS</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js">
</script>
<style type="text/css">
.center_center {
position: absolute;
background-color: #ccc;
border: 1px solid #000;
width: 300px;
height: 200px;
/* notice: margins are -(value/2) */
margin-left: -150px;
margin-top: -100px;
top: 50%;
left: 50%;
display: none;
}
</style>
</head>
<body>
<div id='login' class="center_center">
Login content
</div>
<p><input type="button" value="Login" onclick="$('#login').show()" /></p>
</body>
</html>
You could try using a modal form for your login. jquery ui do a nice one http://jqueryui.com/demos/dialog/#modal-form which will open up a form for you to use in the centre of the page.