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;
}
}
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 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>
I am trying to put 3 images next to each other in jCarousel Lite. The 3 images need to be visible and the scroll is set to 2,5.
Here's what it looks like as of now.
jCarousel Lite
<script type="text/javascript" src="/js/jcarousel/jcarousel.min.js"></script>
<script type="text/javascript" src="/js/jcarousel/jcarousel.lite.js"></script>
<script type="text/javascript">
$(function(){
$(".slideshow").jCarouselLite({
btnNext: ".navNext",
btnPrev: ".navPrevious",
auto: 4000,
speed: 6000,
visible: 3,
scroll: 2.5,
circular: true
});
});
</script>
CSS
.fullSlider {
text-align: center;
display: block;
width: 1000px;
}
.slideshow {
height:100%;
margin:0 auto;
padding:0;
float:left;
text-align: center;
}
.slide-prev, .slide-next {
width:88px;
height:176px;
margin:0;
padding:0;
float:left;
}
.navPrevious, .navNext {
background:url("/js/jcarousel/tango/slide_btn.png") 0 0 no-repeat;
position:absolute;
width:88px;
height:176px;
margin:0;
padding:0;
float:left;
font-size:1px;
text-indent:-9999px;
z-index: 1001 !important;
}
.navPrevious:hover, .navNext:hover {
border:none;
}
.navPrevious {
left:5px;
}
.navNext {
right:5px;
}
.navNext {
background-position:-88px 0;
}
#slider {
width:800px;
height:176px;
margin:0 auto;
padding:0;
text-align: center;
}
#slider ul {
width:800px;
height:176px;
margin:0 auto;
padding:0;
list-style:none;
}
#slider ul li {
width:300px;
height:176px;
margin:0;
padding:0 1px;
float:left;
}
#slider ul li a {
width:300px;
height:176px;
margin:0;
padding:0;
float:left;
}
.slide-afb {
width:300px;
height:132px;
margin:0;
padding:0;
float:left;
overflow:hidden;
}
.slide-afb table {
width:300px;
height:132px;
margin:0;
padding:0;
float:left;
}
.slide-afb table tr td {
vertical-align:middle;
text-align:center;
}
.slide-afb img {
width:300px;
height:132px;
float:left;
}
.slide-tekst {
width:300px;
height:44px;
line-height:44px;
margin:0;
padding:0;
float:left;
font-size:10px;
font-weight:bold;
color:#fff;
text-align:center;
}
This how I would like it to be:
I would be thankful if someone could help me with this.
I don’t need the exact answer. If you could let me know what I did wrong or if you could provide some tips or direction then I’ll try to fix this myself.
I think css3 alone can make it happen, I'm stuck because I still try to understand things like 'ease' in css3.
my progress so far http://jsfiddle.net/kwgy9/1/
the 'nike' should swipe to left, and 'just do it' appear slowly from right. need help!
$("#box").mouseenter(function(){
}).mouseleave(function(){
});
Try this jsfiddle, I think it's what you want
body {
font-family:'Fenix', serif;
text-decoration:none;
font-size:24px;
font-weight:bold;
}
#box {
width: 160px;
height: 60px;
background: orange;
text-align:center;
border:2px solid orange;
border-radius:5px;
cursor:pointer;
display: inline-block;
overflow:hidden;
position:relative;
transition: all 1s ease;
}
#box:hover {
color:orange;
background:#FFF;
}
#box:hover > p {
left:-160px;
}
#box > p{
color:white;
transition: all 1s ease;
position:absolute;
top:0px;
left:0px;
font-size:24px;
line-height:60px;
display:inline-block;
margin:0px;
padding:0px;
width:160px;
}
#box > span{
white-space:no-wrap;
position:absolute;
top:0px;
left:160px;
display:inline-block;
transition: all 1s ease;
width:160px;
font-size:24px;
line-height:60px;
}
#box:hover>span{
color:orange;
left:0px;
}
Edit: Sirikon's solution seems to be just fine. The way I did it might still be interesting for you, because of the way the floating elements in the .row are "pushed".
I created a working Fiddle for you:
http://jsfiddle.net/UJsR8/
It still needs some polish, yeah, but I think you'll get the idea playing around with it. It is just one possible solution, mind you.
Hope this helps. Cheers!
The code:
HTML
<div class="slide-box">
<div class="row">
<div class="col left">NIKE</div>
<div class="col right">JUST DO IT</div>
</div>
</div>
CSS
body {
font-family:'Fenix', serif;
text-decoration:none;
font-size:24px;
font-weight:bold;
}
.slide-box{
width:300px;
height:100px;
background:orange;
border:2px solid orange;
border-radius:5px;
cursor:pointer;
overflow:hidden; /* comment this for a visualization of how it works */
}
.slide-box:hover {
color:orange;
background:#FFF;
}
.row{
width:600px;
height:100px;
}
.col{
width:200px;
height:50px;
padding:25px 50px;
text-align:center;
float:left;
overflow:hidden;
}
JS
$(document).ready(function() {
var leftWidth,
leftPaddingX;
leftWidth = $('.left').width();
leftWidth = leftWidth + 'px';
leftPaddingX = $('.left').css('padding-left');
$('.slide-box').mouseover(function(){
$('.left').animate({
width: '0px',
paddingLeft: '0px',
paddingRight: '0px'
}, 300);
}).mouseleave(function(){
$('.left').animate({
width: leftWidth,
paddingLeft: leftPaddingX,
paddingRight: leftPaddingX
}, 300);
});
});
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.