I want to put 3 parallel divs in html. div middle should be the width of 960px and center of the page, div left and div right will be both site of the div middle,the page min-width will be 1024px, when the browser's width is more than 1024px,div left and div right maybe width (100%-960px)/2 the overflow-x is hidden. When the browser's width is equal and less than 1024, div left and div right maybe width 32px ((1024-960)/2=32px), overflow-x is scroll(the page width show 1024px. I use this code,but it can not adjust the width unless refresh the page. How to do dynamic adjustment width and overflow-x?
Thanks.
<!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="X-UA-Compatible" content="IE=EmulateIE7">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="jquery-1.4.4.min.js"></script>
</head>
<body>
<style>
*{padding:0;margin:0;}
#box {min-width:1024px; _width:960px;}
#left {width:32px;float:left;background-color:blue;}
#middle {width:960px;float:left;background-color:red;}
#right {width:32px;float:left;background-color:green;}
</style>
<script>
$(document).ready(function() {
var width = document.body.clientWidth;
if(width>1024){
$('#box').css({
width:width + 'px'
});
$('#left').css({
width:(width-1024)/2+32 + 'px'
});
$('#right').css({
width:(width-1024)/2+32 + 'px'
});
}
});
</script>
<div id="box">
<div id="left">1</div>
<div id="middle">2</div>
<div id="right">3</div>
</div>
</div>
</body>
</html>
Try:
<script>
$(document).ready(function() {
var width = document.body.clientWidth;
windowResize(width);
$(window).resize(function() {
windowResize(width);
});
});
function windowResize(width) {
if(width>1024){
$('#box').css({
width:width + 'px'
});
$('#left').css({
width:(width-1024)/2+32 + 'px'
});
$('#right').css({
width:(width-1024)/2+32 + 'px'
});
}
}
</script>
You can do this by binding some javascript code to the resize event:
http://api.jquery.com/resize/
Related
How can I get the width of my parent div?
I need the canvas to bethe maximum width it can be. But the div should still be inside the boundaries set by my CSS-file.
In other words: How do i get the maximum width possible whilst still being inside the divs boundaries?
So:
function setup() {
//somehow get the width of the div and set the canvas to that
const myCanvas = createCanvas(400, 400);
myCanvas.parent('canvasDiv');
}
function draw() {
background(0);
}
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Default Page Title</title>
<link rel="stylesheet" href="blogPost.css">
<script type="text/javascript" src="../p5.js"></script>
<script type="text/javascript" src="sketch.js"></script>
</head>
<body>
<div id="containerHeader">
<h1>Default Page header</h1>
</div>
<div id="canvasDiv"></div>
<div id="container">
<p>default description</p>
</div>
</body>
</html>
And lastly my CSS:
#canvasDiv {
margin: 0;
padding: 0;
}
To get the width of my parent div, you can add CSS height and width for canvasDiv. And after if you want that container take height and width from parent, you can write height: inherit; and width: inherit;
If I want to include the margin when measuring the width of an element I may call element.outerWidth(true); However, I can't find a similar way to get the left offset of an element in a container, where the margin is included. element.position().left doesn't include margin.
I've tried element[0].getBoundingClientRect().left, and that works but is there a similar jquery call?
EDIT:
It seems that the native javascript call above doesn't give me the margin either..
This is a limitation of jQuery's .position(), which has this limitation:
Note: jQuery does not support getting the position coordinates of hidden elements or accounting for borders, margins, or padding set on the body element.
Recommended solution:
var position = $element.position();
x = position.left + parseInt($element.css('marginLeft'), 10);
y = position.top + parseInt($element.css('marginTop'), 10);
Use Jquery offset() function
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>offset demo</title>
<style>
p {
margin-left: 10px;
}
</style>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
<p>Hello</p><p>2nd Paragraph</p>
<script>
var p = $( "p:last" );
var offset = p.offset();
p.html( "left: " + offset.left + ", top: " + offset.top );
</script>
</body>
</html>
I'm trying to create an iframe to simulate an iphone screen but i'm having problems to make font size be proportional to iframe size ( height x width ). I've put 320x480 just for tests.
Anyone have an idea how can i do this trick?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Test</title>
<script type="text/javascript">
function makeIframe() {
var content = "<!DOCTYPE html><html lang='en'><head><meta name=" +
+ "'viewport' content='width=320, height=480, initial-scale=0.5,"
+ "maximum-scale=0.5," +
" minimum-scale=0.5, user-scalable=no' /></head><body>" +
"<h1>Test</h1></body></html>";
alert('content >> ' + content);
var iframe = document.createElement("iframe");
// iphone 4
iframe.height = 480;
iframe.width = 320;
document.body.appendChild(iframe);
iframe.contentWindow.document.open('text/htmlreplace');
iframe.contentWindow.document.write(content);
iframe.contentWindow.document.close();
alert('2');
}
</script>
</head>
<body>
<div id="body"></div>
<input type="button" onclick="makeIframe()" value="Make" />
</body>
</html>
Maybe you could try to use em in your body tag:
<body style='font-size: 0.2em'>
then all the font-size inside body tag would be small.
JS Fiddle link: http://jsfiddle.net/nq0hdxae/
I am learning JavaScript and am using the following code.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<title>javascript learning</title>
<script type="text/javascript">
function resizeRock() {
document.getElementById("rockImage").style.height = (document.body.clientHeight - 100) * 0.5;
}
</script>
</head>
<body onload="resizeRock();">
<!--ROCK-->
<div id="image">
<img src="http://outdoordesignbylucas.files.wordpress.com/2011/01/1-10-11-triangular-rock.jpg" id="rockImage" onclick="touchRock();" style="cursor: pointer;" />
</div>
</body>
</html>
This code is not resizing the image, however the following code is working as expected:
<html>
<head>
<title>iRock - The Virtual Pet Rock</title>
<script type="text/javascript">
function resizeRock() {
document.getElementById("rockImage").style.height = (document.body.clientHeight - 100) * 0.5;
}
</script>
</head>
<body onload="resizeRock();">
<div style="margin-top:100px; text-align:center">
<img id="rockImage" src="http://outdoordesignbylucas.files.wordpress.com/2011/01/1-10-11-triangular-rock.jpg" alt="iRock" style="cursor:pointer" onclick="touchRock();" />
</div>
</body>
</html>
I am breaking my head over this. The code is the same, the top (not working) is what I wrote - the bottom is from a book. What am I missing?
You need to give your style a unit.
Change this line:
document.getElementById("rockImage").style.height = (document.body.clientHeight - 100) * 0.5;
To this:
document.getElementById("rockImage").style.height = ((document.body.clientHeight - 100) * 0.5) + 'px';
Thiss will tell the browser that you are setting the height in px, instead of percent, pt, em, etc.
jsFiddle / Full Screen Result
The problem is with the DOCTYPE
<!DOCTYPE html>
This put your document into standard mode. Add this css:
html
{
height: 100%
}
body
{
height: 100%
}
Adding "px" to the end of the statement will solve the problem because in standard mode you need to state the unit explicitly.
Alternatively you can delete <!DOCTYPE html>
I've followed the code on this link : Using jQuery to center a DIV on the screen and my div isn't centered . Any ideas why ?
in my javascript error console there seems to be no error . Here is my 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 runat="server">
<title></title>
<script src="./Scripts/jquery-1.4.1.js" type="text/javascript">
(function ($) {
$.fn.extend({
center: function () {
return this.each(function () {
var top = ($(window).height() - $(this).outerHeight()) / 2;
var left = ($(window).width() - $(this).outerWidth()) / 2;
$(this).css({ position: 'absolute', margin: 0, top: (top > 0 ? top : 0) + 'px', left: (left > 0 ? left : 0) + 'px' });
});
}
});
})(jQuery);
$('#login').center();
</script>
<link href="~/Styles/Site.css" rel="stylesheet" type="text/css" />
</head>
<body bgcolor="#0066cc">
<form id="form1" runat="server">
<div>
<h1>Welcome to SeeUBook</h1>
</div>
<div id="login">
//some code
</div>
</form>
</body>
</html>
You need to run the plugin on the element once it's in the DOM (on document.ready), like this:
$(function() {
$('#login').center();
});
...currently it's running before there's a id="login" element to find in the page, so it's not centering anything.
You can just write in CSS:
#content {
width: 9999px ;/*how wide you want it or you could set it to auto*/
margin-left: auto ;
margin-right: auto ;
}