I want to see all the layers Exact location and size of the yellow square
I want to position all the layers to center width and top;10px; inside the yellow rectangle.
all the layers include layerA should be width:1000px height:500px
I try to do that In many ways but something Beyond my understanding.
I know it can be done but somting wrong in my code.
I am grateful for any help.
Demo jsFiddle
my code:
<!DOCTYPE HTML>
<html>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title> - jsFiddle demo</title>
<style type='text/css'>
body {background-color:black; padding:0; margin:0; }
#layers {position:relative; width:1000px; height:500px; padding:0; margin-left:auto; margin-right:auto; z-index:1; top:10px; background-color:blue; }//contain all layers
#layerA {position:absolute; width:1000px; height:500px; padding:0; margin:0; z-index:4; background-color:green; border:1px green solid; left:0; top:0;}//background screen show
#layerB {position:absolute; width:1000px; height:500px; padding:0; margin:0; z-index:2; background-color:red; border:1px red solid; visibility:hidden; }//Variable animation hidden
#layerC {position:absolute; width:1000px; height:500px; padding:0; margin:0; z-index:3; background-color:brown; border:1px brown solid; display:none; }//Variable animation hidden
#layerD {position:absolute; width:1000px; height:500px; padding:0; margin:0; z-index:5; background-color:azure; border:1px azure solid; }//create ball
#pos{top:50px; left:10px; color:white; font-size:16px;}
#status{position;absolute; top:10px; left:10px; color:white; font-size:16px;}
#status1{position;absolute; top:20px; left:10px; color:white; font-size:16px;}
#fps_count {position: absolute; top: 10px; right: 0px; width:150px; font-size: 20px;
color: white; font-family: 'Happy Sans', cursive; border:1px red solid;}
/* Loading */
#loading {position:relative; width:1000px; height:500px; padding:0; margin-left:auto; margin-right:auto; top:10px; background:yellow; z-index:1;}
#loading #barCont {width: 400px; height: 20px; position: absolute;
top: 50%; left: 50%; margin: -10px 0 0 -200px; background: black;}
#loading #bar {width: 0; height: 20px; position: absolute; left: 0; background: #F3FF67;}
</style>
</head>
<body>
<div id="loading">
<p id="loadText">Loading...</p>
<div id="barCont"></div>
<div id="bar"></div>
</div>
<div id="layers">
<canvas id="layerA" ></canvas>
<canvas id="layerB" ></canvas>
<canvas id="layerC" ></canvas>
<canvas id="layerD" ></canvas>
</div>
<div id="fps_count">71 32 58 FPS</div>
<div id="pos">pos</div>
<div id="status">status</div>
<div id="status1">status1</div>
<script>
var WW = 1400,WH = 700,WTH = 1000,HTH = 500;
var layerA = document.getElementById('layerA'),//layer background
CanvasA = layerA.getContext('2d');
layerA.width = 300;//width size of image background
layerA.height = 150;//height size of image background
var layerB = document.getElementById('layerB'),//senvich animation hidden
CanvasB = layerB.getContext('2d');
layerB.width = WW;
layerB.height = WH;
var layerC = document.getElementById('layerC'),//DEFINE layerBVariable it use as a variable
CanvasC = layerC.getContext('2d');
layerC.width = WW;
layerC.height = WH;
var layerD = document.getElementById("layerD"),//createball
CanvasD = layerD.getContext('2d');
layerD.width = WW;
layerD.height = WH;
CanvasA.clearRect(0,0,300,150);
CanvasA.fillStyle= 'green';
CanvasA.fillRect(0,0,300,150);
CanvasB.clearRect(0,0,WW,WH);
CanvasB.fillStyle= 'red';
CanvasB.fillRect(0,0,WW,WH);
CanvasC.clearRect(0,0,WW,WH);
CanvasC.fillStyle= 'brown';
CanvasC.fillRect(0,0,WW,WH);
CanvasD.clearRect(0,0,WW,WH);
CanvasD.fillStyle= 'azure';
CanvasD.fillRect(0,0,WW,WH);
</script>
</body>
</html>
Take a look at this jsFiddle example
First, // comment is not a valid comment syntax in CSS. This was mucking up your code.
Please use /* comments */ for CSS inline commments.
Secondly, to position your canvas elements like I think I requested, I've included this CSSc code:
#layers {position:absolute; width:1000px; height:500px; padding:0; margin-left: -500px; left: 50%; z-index:1; top:10px; background-color:blue; }/*contain all layers*/
#layers canvas{width: 200px;} #layerA {position:absolute; width:1000px; height:500px; top: 0px; left: 0px; padding:0; margin:0; z-index:4; background-color:green; border:1px gre solid; left:0; top:0;}/*background screen show*/
#layerB {position:absolute; width:1000px; height:500px; top: 0px; left: 0px; padding:0; margin:0; z-index:2; background-color:red; border:1px red solid; visibility:hidden; }/*Variable animation hidden*/
#layerC {position:absolute; width:1000px; height:500px; top: 0px; left: 0px; padding:0; margin:0; z-index:3; background-color:brown; border:1px brown solid; display:none; }/*Variable animation hidden*/
#layerD {position:absolute; width:1000px; height:500px; top: 0px; left: 0px; padding:0; margin:0; z-index:5; background-color:azure; border:1px azure solid; }/*create ball*/
To center a 1000px wide absolutely positioned element I've added left: 50%; margin-left: -500px. This essentially tells the browser to place the left-most edge of the element at 50% of its container (in this case, the document body), then move it to the left the amount of half of its width in pixels. This allows it to be properly positioned in the center
FYI - I strongly suggest for you to use classes instead of IDs here to avoid repeating, unreadable CSS code.
Related
Working with a lightbox effect at the moment. The problem is my lightbox has a lot of text inside it. Problem is, I cant figure out how to make a scroll function inside so the user can scroll down the element.
CSS
/* Lightbox background */
#lightbox {
display:none;
background: rgba(0,0,0,0.8);
position:absolute;
top:0px;
left:0px;
min-width:100%;
min-height:100%;
z-index:1000;
}
/* Lightbox panel with some content */
#lightbox-panel {
display:none;
position:fixed;
top:100px;
left:50%;
margin-left:-200px;
width:400px;
background:#FFFFFF;
padding:10px 15px 10px 15px;
border:2px solid #CCCCCC;
z-index:1001;
}
JS
$(document).ready(function(){
$("a#show-panel").click(function(){
$("#lightbox, #lightbox-panel").fadeIn(300);
});
$("a#close-panel").click(function(){
$("#lightbox, #lightbox-panel").fadeOut(300);
})
});
My example
Thanks for the help!
Worked on this and what you needed for your situation is just have it to position fixed.. Get rid of that and it should work..
CSS code:
body{
margin:150px 0 0 0;
text-align:center;
background: #f1e7b0;
}
h2{
font-size: 32px;
}
a{
text-decoration: none;
color: #222222;
font-size: 18px;
}
/* Lightbox background */
#lightbox {
display:none;
background: rgba(0,0,0,0.8);
position:absolute;
top:0px;
left:0px;
min-width:100%;
min-height:100%;
z-index:1000;
}
/* Lightbox panel with some content */
#lightbox-panel {
display:none;
position:absolute;
top:100px;
left:50%;
margin-left:-200px;
width:400px;
background:#FFFFFF;
padding:10px 15px 10px 15px;
border:2px solid #CCCCCC;
z-index:1001;
}
#lightbox-panel{
overflow: scroll;
}
body{
overflow: scroll;
}
Link : http://jsfiddle.net/9LFKV/158/
Fixing background color
To fix the background color, i just attached a $.css({}) in the JS File and it worked :D. Here is the code:
$(document).ready(function(){
$("a#show-panel").click(function(){
$("#lightbox, #lightbox-panel").fadeIn(300);
$('html').css('background-color', 'rgba(0,0,0,0.8)')
});
$("a#close-panel").click(function(){
$("#lightbox, #lightbox-panel").fadeOut(300);
})
});
JSFiddle
You had the position attribute for the lightbox (background) and the lightbox-panel switched. They should be:
#lightbox-panel {
...
position:absolute;
...
}
and
#lightbox {
...
position:fixed;
...
}
#lightbox-panel {
position:absolute;
}
I am trying to render a simple html page to pdf file using rasterize.js example. The html page has reference to an external style sheet. The page is getting displayed properly in browser but the rendered pdf somehow has no styles applied.
Html block :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<link rel="stylesheet" href="css/styles.css" type="text/css" media="screen"/>
</head>
<body>
<div class="content" id="parent">
<div class="card">
<h3> TEST STEP 0</h3>
<p>Action : OpenPage Object : Data : http://newtours.demoaut.com/</p>
<div class="banner" id="banner0">
<img src="css/pass-icon.png" /></div>
<hr>
<div class="card-image" id="image0">
<img src="Snapshots/null_1420981153527.png" />
</div>
</div>
<div class="footer">
All contents copyright 2014.
</div>
</body>
</html>
styles.css:
body {
font-family: Calibri, Helvetica;
background:#E0E0E0;
padding:0px;
margin:0px;
color:#333;
min-height:100%;
}
.header {
text-align:center;
position:fixed;
height:30px;
left:0px;
right:0px;
background:#FFF;
padding:25px 0px 5px 0px;
border-bottom:5px solid #CCC;
font-size:20px;
font-weight:bold;
}
.content {
position:fixed;
top:62px;
bottom:0px;
left:0px;
right:0px;
overflow:scroll;
-webkit-overflow-scrolling:touch;
margin-bottom:30px;
margin-left:300px;
}
.footer {
position:fixed;
height:22px;
left:0px;
right:0px;
bottom:0px;
background:#FFF;
color:888;
text-align:center;
padding:5px 0px 0px 0px;
border-top:5px solid #CCC;
font-size:12px;
}
.float-left .card {
float:left;
width:300px;
height:270px;
}
.multi-column {
columns:300px 3;
-webkit-columns:300px 3;
}
.card {
background:#FFF;
border-bottom:3px solid #BBB;
padding:0px;
margin:15px;
overflow:hidden;
position:relative;
}
.card h2 {
margin:0px;
padding:10px;
padding-bottom:0px;
}
.card h3 {
margin:0px;
padding:10px;
padding-bottom:0px;
}
.card p {
margin:10px;
font-family:'helvetica', 'arial', 'sans-serif';
font-size:12px;
padding:2px;
display: inline-block;
background:#339933;
color:#FFF;
}
.test{
font-family:'helvetica', 'arial', 'sans-serif';
background:#339933;
color:#FFF;
font-size:12px;
display: inline-block;
padding:3px;
float:right;
}
.card-image {
width:400px;
height:300px;
padding:0px;
margin:20px;
border:1px solid #ccc;
background-position:center;
background-repeat:no-repeat;
position:relative;
overflow:hidden;
background-image:url('ajax-loader.gif');
}
.card-details {
width:400px;
height:300px;
padding:0px;
margin:20px;
float:right;
background-position:center;
background-repeat:no-repeat;
overflow:hidden;
}
.card-image img {
width:100%;
}
.banner {
height:50px;
width:50px;
top:0;
right:0;
margin:30px;
position:absolute;
background-repeat:no-repeat;
}
.card-image h1,
.card-image h2,
.card-image h3,
.card-image h4,
.card-image h5,
.card-image h6 {
position:absolute;
bottom:0px;
width:100%;
color:white;
background:rgba(0,0,0,0.65);
margin:0px;
padding:6px;
border:none;
}
.rightColumn,
.leftColumn {
display:inline-block;
width:49%;
vertical-align:top;
}
.column {
display:inline-block;
vertical-align:top;
}
.image1 {
background-image:url('ajax-loader.gif');
}
.image2 {
background-image:url('ajax-loader.gif');
}
Rendered pdf :
Html page in browser:
Edit: Trying to render to png does apply css
Try adding !important; tag at the end of all css statements. if that doesn't work use -webkit-text-fill-color: instead of color: as css statement, similarly for background
I have two divs for which I have two buttons. Clicking on the buttons, I want to alert the "top" style property of the divs, in the codes as below:
However, when I click on the buttons, what they return is "undefined". I'd be grateful if you kindy let me know where I am going wrong.
HTML:
<div id="container">
<div id="section_1"></div>
<div id="section_2"></div>
<button id="edit_1" onClick="edit(1);"></button>
<button id="edit_2" onClick="edit(2);"></button>
</div>
javascript:
function edit(clicked_edit) {
var tp=document.getElementById('section_'+clicked_edit).top;
alert(tp);
}
CSS:
*{
margin:0px;
padding:0px;
}
body{
width:100%;
background-color:#F4F4F2;
margin-top:15px;
font-family:verdana;
}
#container{
width:820px;
height:400px;
margin-left:auto;
margin-right:auto;
margin-top:0px;
border: dashed 2px blue;
position:relative;
z-index:1;
}
#section_1{
width:800px;
height:198px;
border-top: solid 2px #D24726;
background-color:#ffcccc;
top:0px;
position: absolute;
z-index:2;
}
#section_2{
width:800px;
height:198px;
border-top: solid 2px #14826D;
background-color:#C1FBDE;
top:200px;
position: absolute;
z-index:2;
}
#edit_1{
width:50px;
height:15px;
position:absolute;
margin-left:740px;
margin-top:15px;
border:none;
cursor:pointer;
z-index:4;
background-color:red;
}
#edit_2{
width:50px;
height:15px;
position:absolute;
margin-left:740px;
margin-top:215px;
border:none;
cursor:pointer;
z-index:4;
background-color:green;
}
Js Fiddle
change .top to .offsetTop you will get the position
function edit(clicked_edit) {
var tp = document.getElementById('section_' + clicked_edit).offsetTop;
alert(tp);
}
Edit
made changes to set the div to same position as the offset value
function edit(clicked_edit) {
var tp = document.getElementById('section_' + clicked_edit).offsetTop;
document.getElementById('expansion').style.top = tp + 'px'; // need to add this
document.getElementById('expansion').style.display = 'block';
}
For that you would use getComputedStyle method of the window object in this way:
function edit(clicked_edit) {
var el = document.getElementById('section_'+clicked_edit);
top = window.getComputedStyle(el, null).getPropertyValue('top')
alert(top);
}
function edit(clicked_edit) {
var el = document.getElementById('section_' + clicked_edit),
top = window.getComputedStyle(el, null).getPropertyValue('top')
alert(top);
}
* {
margin:0px;
padding:0px;
}
body {
width:100%;
background-color:#F4F4F2;
margin-top:15px;
font-family:verdana;
}
#container {
width:820px;
height:400px;
margin-left:auto;
margin-right:auto;
margin-top:0px;
border: dashed 2px blue;
position:relative;
z-index:1;
}
#section_1 {
width:800px;
height:198px;
border-top: solid 2px #D24726;
background-color:#ffcccc;
top:0px;
position: absolute;
z-index:2;
}
#section_2 {
width:800px;
height:198px;
border-top: solid 2px #14826D;
background-color:#C1FBDE;
top:200px;
position: absolute;
z-index:2;
}
#edit_1 {
width:50px;
height:15px;
position:absolute;
margin-left:740px;
margin-top:15px;
border:none;
cursor:pointer;
z-index:4;
background-color:red;
}
#edit_2 {
width:50px;
height:15px;
position:absolute;
margin-left:740px;
margin-top:215px;
border:none;
cursor:pointer;
z-index:4;
background-color:green;
}
<div id="container">
<div id="section_1"></div>
<div id="section_2"></div>
<button id="edit_1" onClick="edit(1);"></button>
<button id="edit_2" onClick="edit(2);"></button>
</div>
Firefox ignores padding-bottom with box-sizing:border box.
I am trying to fit two child divs into container div of 300px.
child1 - height 100%;
child2 - from bottom height 100px;
child1 has border box and padding-bottom:100px which should reduce child1 height to (100% - 100px) giving way to child2.
This implementation works fine in webkit but firefox fails.
Is there work around to fix this? I don't want to use css calc().
here is the example - http://jsfiddle.net/827D6/1/
css used :
.container{
height:300px;
width:300px;
background-color:black;
}
.child1{
height:100%;
background-color:red;
position:relative;
padding: 20px 20px 100px;
box-sizing: border-box;
overflow-y:auto;
word-wrap:break-word;
}
.child2{
height:100px;
position:relative;
background-color:green;
bottom:100px;
}
You can use position absolute for this easily. Just make the container relative and set the height of the second child with position bottom:0. The first child is then set to top:0;bottom:100px;.
.container {
position:relative;
height:300px;
width:300px;
background-color:black;
}
.child1 {
background-color:red;
position:absolute;
top:0;
right:0;
bottom:100px;
left:0;
padding: 20px 20px 0;
overflow-y:auto;
word-wrap:break-word;
}
.child2 {
height:100px;
position:absolute;
right:0;
bottom:0;
left:0;
background-color:green;
}
DEMO
Try this:
.element {
display:block;
padding:10px;
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
box-sizing:border-box;
overflow:auto;
}
.element::before, .element::after {
content:"";
display:table;
width:100%;
height:0;
clear:both;
}
#-moz-document url-prefix() {
.element::after {
height:10px;
}
}
Does anyone now how to make a DIV inside another DIV that is scroll-able fixed, so that no matter how much I scroll by, the DIV always stays in the same place?
Any help would be greatly appreciated.
Try this out:
<style type="text/css">
.scrollable {
width: 200px;
height: 200px;
background: #333;
overflow: scroll;
}
.fixed {
position: absolute;
top: 180px;
width: 200px;
height: 20px;
background: #fa2;
}
</style>
<div class="scrollable">
im scrollable<br><br>
im scrollable<br><br>
im scrollable<br><br>
im scrollable<br><br>
im scrollable<br><br>
im scrollable<br><br>
<div class="fixed">and I'm fixed</div>
</div>
I would recommend absolutely positioning the div over the scrollable div. It wont be in the scrollable div, because it doesn't need to be.
Fixed div in scrollable div
#container {
position:absolute;
top:150px;
left:150px;
width:600px;
height:500px;
overflow:hidden;
border:3px dashed #ffff00;
padding:0px;
}
#this_scroll {
position:absolute;
top:0px;
right:0px;
width:99%;
height:99%;
overflow:scroll;
border:2px solid #000;
margin:1px;
background:#B0BDCE;
}
#fix_close {
position:absolute;
top:2px;
right:21px;
width:90px;
height:30px;
overflow:hidden;
border:2px solid #660099;
z-index:10;
background:#8C8C8C;
}
<div id="container">
<div id="this_scroll">
<p>some yxyxyx</p><p>some yxyxyx</p>
</div>
<div id="fix_close">
close
</div>
</div>