I'm currently loading some Masonry items into a table-cell, the problem is that the browser has trouble calculating the width of the table-cell so the Masonry elements won't realign themselves when I adjust the browser width.
This article seems to discuss a similar problem but I can't get it to work here
The css looks like this and the Masonry Items are loaded into the #Gal1 element.
div#wrapper{display:table; height:100%; width:100%;}
div#sidebarWrapper{display:table-cell; min-width:40px; height:100%; background-color:#444;}
div#contentWrapper{display:table-cell; height:100%; position:relative;}
div#content{border-left:1px solid #ddd; border-top:1px solid #ddd; overflow:hidden;
padding-bottom:100px; margin-top:195px;}
div#masonryGal{max-width:1600px; position:relative; height:500px; overflow:hidden;}
#gal1{}
I've seen around the web about making a transparent image 100% width so that it fills up the container with something? Is this the way to go and would I have to have it repeat inside the element #contentWrapper?
How would this affect my jquery?
jQuery(document).ready(function($) {
$('#gal1').masonry({
singleMode: true,
"gutter": 0,
isFitWidth: true,
isAnimated: true
}).imagesLoaded(function() {
$('#gal1').masonry('reload');
});
Again, the problem here is that I'm using Masonry inside a table, I'm using this inside a responsive layout and it's just the situation I'm in right now so please no "use a div".
absolute positioned elements (masonry use position absolute for blocks, to calculate their positions, and their container can't be display: table or table-cell) can't be inside table or table-cell
Update
http://css-tricks.com/absolutely-position-element-within-a-table-cell/
Related
I've created a jQuery dropdown menu that shows DIVs on hover, but I cannot force the dropdown DIVs to have a 100% width across the page.
CSS:
ul.oe_menu div{
position:absolute;
top:103px;
left:1px;
background:#fff;
width:200; /* This sets the width of the dropdown DIV */
height:210px;
padding:30px;
display:none;
}
Take a look at the JS Fiddle to view the full code & expand the preview section to see the problem.
Thanks!
That is because if you set the div's width 100%, it is taking the 100% of its parent's width (the corresponding li).
One solution for this is to set the div's position fixed so that it takes the width of the page when its width is set 100%.
ul.oe_menu div{
position:fixed;
top:103px;
left:0px;
background:#fff;
width:100%;
height:210px;
display:none;
}
This way you will have to remove the left:n from the divs. JS Fiddle here.
To make the transition look more natural, you can consider doing .slideUp(200) [JS Fiddle here] or .animate({"opacity":0},{complete:function(){$(this).css("opacity","1")}}); [JS Fiddle here] asmouseleave.
Hope this helps.
You can try setting the div width to the width of the window; (given that you're hiding overflow-x on the body anyway).
var winWidth = $(window).width();
$this.children('div').css({zIndex:'9999',width:winWidth}).stop(true,true)....
Have a look here to see;
http://jsfiddle.net/cs3p5/
I have a layout with multiple divs side by side and the will be populated with random text in each div. Is it possible to have the height of the tallest get matched by the rest of the divs regardless of the amount of text they have?
Basically I need the divs to be height:auto; and lets say, the second div has so much text that it's height becomes about 200px and the rest of the divs only have enough text to make their height about 100px. Instead of the 200px div being the tallest the rest of the divs extend to match the 200px div and create a uniform look.
Is anything like possible purely using CSS or would JavaScript need to be used?
Sorry if this sounds confusing, I would post an example picture but I don't have enough points (boo!)
Fiddle
You could lay them out like a table as in this updated Fiddle
.container {
display:table;
position:relative;
border-spacing:20px;
}
.block {
display:table-cell;
position:relative;
width:190px;
height:100%;
background-color:FFF;
margin:0px;
padding:10px;
text-align: center;
border:solid 1px #CCC;
font-size:small;
}
Need help, why is my scrolltop not working on this sample
I dont know why..using the code everything works fine. But updating the css the scrolltop is not working.:( what should i do to fixed this? is the problem cause by my css style?
i used this but it won't scroll at the bottom of the div..
$(document).ready(function() {
alert('scroll must happen');
$('#message_container').scrollTop($('#message_container')[0].scrollHeight);
$('.topbox').html('just sample');
});
There is no visible scrolling happening because the element you're trying to scroll isn't overflowing; it's all displayed. The scrollbar is for the <body> element and not the <div> you're trying to scroll.
You can make it work if you give #message_container a height e.g.
#message_container {height:100px;}
Alternatively, use absolute positioning tricks, for example in this demo. (The initial "undoes" CSS, I used it to keep code short. See MDN)
#container, #head, #body, #foot{
position: absolute;
top:0;left:0;right:0;bottom:0;
}
#head {
bottom: initial;
height:50px;
}
/* position so it get's your desired size*/
#body {
top:50px;
bottom:50px;
overflow-y: scroll;
}
#foot {
top: initial;
height:50px;
}
You have to set 2 things:
Overflow for the div,
Some height, even percentage one (to make it more flexible).
If you don't set any height at all the div will expand and then there is nothing to scroll, in this case the only scroll bar you get is of the document itself (body).
I added a height and overflow property to your CSS and now it works as expected.
jsFiddle
CSS added:
#message_container {
overflow-y:auto;
overflow-x:hidden;
height:300px;
}
I have some divs and I want that when I get the screen bigger(CTRL +) , the scrollbar appears at the bottom of the page and the divs STAY inline block. I have the code here(http://fiddle.jshell.net/JNzFp/) and as you can see when you get the screen bigger , scrollbar appears under the divs and I want it to display on the bottom of the full screen not under the divs, and ALSO I don't want vertical scrollbar.
Use this CSS overflow:hidden
http://fiddle.jshell.net/zCxhK/
Below is a demo of the different overflow properties.
UPDATE: https://developer.mozilla.org/en-US/docs/Web/CSS/overflow
Scroll bar appears in #menu div because you have used overflow: auto in its css. Use hidden instead of auto for not allowing scrollbar to appear below the divs
UPDATE- For that you have to make your menu div 100% of the body
DEMO
CSS -
#menu{
white-space:nowrap;
overflow:auto;
width:100%;
/*height:40px;*/
height: 100%;
margin:auto;
padding:0 0 12;
background:url(file:///C:/Users/Windows7/Desktop/imgbg.jpg) repeat 0 0 #f8f8f8;
border:1 solid;
border-width:0 1 1;...
I want to change the sidebars on the following template to have fixed position.
Is it possible to do it without using javascript and only css?
Template Demo
PS: Placing position fixed for the sidebards it is not an option because its changing the whole structure of the site and they are placed outside of content area.
you wanna like this??http://jsfiddle.net/kFBuD/1447/
overflow:hidden;
You can using position:fixed
.sidebar1, .sidebar2 {
background: red;
height:100%;
width: 100px;
top:0;
padding-top:60px;
**position:fixed;**
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
-o-box-sizing:border-box;
-ms-box-sizing:border-box;
box-sizing:border-box;
}
you can use overflow property of HTML if you don't want it in CSS or JavaScript.