I have a list of items with different content floated left, I need to display them as a row.
<ul>
<li>small content..</li>
<li>medium Content..</li>
<li>large content..</li>
..
<!-- many item random contnet -->
</ul>
I would like to display the list items in a row.
row height depends on max height item in row,
How to get it?
Demo
Add display:table-cell so it acts as table column. remove float:left as well.
#contentpane{}
#contentpane li{
padding:10px;
width:80px;
border:1px solid #000;
display:table-cell
}
DEMO
CASE 2
In case you need it with auto height then use the below white-space:nowrap; method
ul#contentpane{
width:100%;
white-space:nowrap;
}
#contentpane li{
padding:10px;
width:80px;
border:1px solid #000;
height:auto;
display:inline-block;
white-space:normal !important;
}
DEMO 2 || DEMO (Vertically aligned to the top)
you should go with javascript to set clear:both to row overflow element.
var ch=$("#container").width();
var itemsPerRow=Math.floor(ch/102);
var itemsCount=$("#contentpane li").length;
var loopRound=Math.floor(itemsCount/itemsPerRow);
for(var i=1;i<loopRound+1;i++)
{
var nextFirstItem=i*itemsPerRow+1;
$("#contentpane li:nth-child("+ nextFirstItem +")").css({"clear":"both"});
}
demo
ul {
display: table-row;
}
ul > li {
display: table-cell;
}
Note that you should have a wrapper with display: table in order to built a complete table representation.
Set height to the li.
#contentpane{
}
#contentpane li{
float:left;
padding:10px;
width:80px;
height:180px;
overflow:auto;
display:table-cell;
border:1px solid #000;
}
FIDDLE
Try this one
var maxHeight = 0;
$("#contentpane li").each(function( index ) {
var height = $(this).height();
if(height > maxHeight){
maxHeight =height;
}
});
$("#contentpane li").css("height",maxHeight);
Fiddle Demo
Drop the float and use inline-block instead:
http://jsfiddle.net/CmkSb/10/
#contentpane li{
padding:10px;
width:80px;
display:inline-block;
vertical-align: text-top;
border:1px solid #000;
}
Related
I'm trying to draw a 6x6 grid with divs, but when I create them with javascript and css, it doesn't show as expected.
css:
div{
width:30px;
height:30px;
margin:0px;
border:1px solid black;
float:left;
}
div:nth-child(6n+1){
clear:both;
}
javascript:
for(var i=0; i<36; i++){
document.body.appendChild(document.createElement('div'));
}
https://jsfiddle.net/kqzhorq0/
The above link demonstrates what I see in the browser.
But, when I select onload or onDomReady settings in jsfiddle, the grid shows as expected.
How can I get the grid to show properly using onload or onDomReady, and why isn't it showing properly without it?
If you can wrap your divs in a container and specify your selectors to target from within the container your code will work.
Here is a working snippet:
for(var i=0; i<36; i++){
document.getElementById("foo").appendChild(document.createElement('div'));
}
#foo div{
width:30px;
height:30px;
margin:0px;
border:1px solid black;
float:left;
}
#foo div:nth-child(6n+1){
clear:both;
}
<div id="foo"></div>
I also created an interactive demo on nth-child to help explain it further: http://xengravity.com/demo/nth-child/
The problem here, the first child of the body in the fiddle is the script element. You can inspect the html of the result panel to see the script element.
The nth-child will consider all the elements while using the index to search for an element, but using nth-of-type you can search for a particular type.
One choice is to use the :nth-of-type selector as below
div {
width:30px;
height:30px;
margin:0px;
border:1px solid black;
float:left;
}
div:nth-of-type(6n+1) {
clear:both;
}
Demo: Fiddle
Another is to insert the divs before the script like
for (var i = 0; i < 36; i++) {
document.body.insertBefore(document.createElement('div'), document.body.firstChild);
}
Demo: Fiddle
But a better solution will be use a custom container element instead of the body element
var ct = document.getElementById('container');
for (var i = 0; i < 36; i++) {
ct.appendChild(document.createElement('div'));
}
then
#container > div {
width:30px;
height:30px;
margin:0px;
border:1px solid black;
float:left;
}
#container div:nth-child(6n+1) {
clear:both;
}
Demo: Fiddle
I have an issue with the toggle button when window resizes. The issue is that I clicked on the toggle which shows up a list of items and i left it open, however when I resize the window the toggle is still left open despite the fact that I put display:none;on the media query.
HTML CODE:
<section id="nextprevsection">
<h2 id="nextprev">View more projects?</h2>
<ol class="select">
<li>Previous Project</li>
<li>Next Project</li>
<li>Back to work</li>
</ol>
</section>
CSS:
.nextprev{
display:none;
}
#nextprev{
display:none;
font-size:16px;
width:200px;
background:url(../img/work/downarrow.png) right no-repeat #333;
color:#FFF;
cursor:pointer;
padding:10px;
margin:auto;
margin-top:-150px;
}
ol.select {
display: none;
background:#666;
width:220px;
margin:auto;
padding:0px;
list-style-type:none;
}
.select{
display:none;
}
.select a{
color:#FFF;
text-decoration:none;
}
ol.select > li:hover {
background: #aaa;
}
JQUERY CODE:
//next previous
var nav = $('#nextprev');
var selection = $('.select');
var select = selection.find('li');
if ($(window).width() >= 768) {
nav.removeClass('active');
selection.css("opacity","none");
}
else{
nav.addClass('active');
}
nav.click(function(event) {
if (nav.hasClass('active')) {
nav.removeClass('active');
selection.stop().slideToggle(200);
} else {
nav.addClass('active');
selection.stop().slideToggle(200);
}
event.preventDefault();
});
select.click(function(event) {
// updated code to select the current language
$(".select").css("display","none");
select.removeClass('active');
$(this).addClass('active');
});
</script>
MEDIA QUERIES CODE:
#media screen and (max-width: 768px){
/*Next and previous*/
#nextandprev{
display:none;
}
.select{
display:block;
}
#nextprev{
display:block;
}
#nextprevsection{
height:200px;
margin-bottom:100px;
}
}
Well, a screen re-size isn't necessarily going to invoke your code that detects the screen size. One option you have is setting a short timer that periodically checks the screen size and invokes your code.
But that's the lame answer. Try $(window).resize(function(){});
http://api.jquery.com/resize/
Basically it wraps the window.onresize event (which I honestly didn't know existed til recently, stupid DOM!!) and let's you do your own thing with it :)
I'm trying out a vertical ticker that displays a few text list items one after the other, but I need some help in positioning them.
You'll see a web ticker with two items. To display only one item at a time, I have to set 'overflow:hidden' in #tickerContainer.
However, the text in the ticker is not being positioned at the center of the ticker(As you see it is sitting at the bottom).
Also, when I remove 'overflow:hidden' from #tickerContainer, which is the whole ticker moving away from the top of the page?
Please help me fix this.
http://jsfiddle.net/nodovitt/NYhY4/2/
<div id="tickerContainer">
<ul id="ticker" class="js-hidden">
<li class="news-item">Item Number 1</li>
<li class="news-item">Item Number 2</li>
</ul>
</div>
The jQuery function:
<script>
function tick() {
$('#ticker li:first').slideUp(1000, function () {
$(this).appendTo($('#ticker')).slideDown(1000);
});
}
setInterval(function () {
tick()
}, 2000);
</script>
The CSS:
#tickerContainer {
background-color:white;
border-radius:15px;
text-align:center;
margin:10px;
box-shadow:0 0 8px black;
color:#2B7CD8;
font-size:50px;
width:500px;
height:100px;
overflow:hidden;
}
.news-item {
font-family:Times New Roman;
font-style:oblique;
}
#ticker li {
list-style-type:none;
}
You haven't put any specifications on your ticker id. So something like this http://jsfiddle.net/NYhY4/10/
#ticker {
padding:0px;
margin:0px;
padding-top:20px;
height:55px;
overflow:hidden;
}
Here is my answer as requested by OP
Add this css to your #ticker
#ticker {
margin: 0;
padding: 0;
line-height: 100px;
}
NOTE The line-height will always have to be the height of the #tickerContainer
You can see it here http://jsfiddle.net/NYhY4/3/
#ticker li {
list-style-type:none;
position: relative;
bottom:20px;
}
I didn't like the current item being hidden by seemingly "nothing" (the blank part of li box above the text) so I used this approach:
Remove the margins from the '#ticker'
set '#ticker' padding-top (.5em worked best for me)
set '#ticker li' padding-bottom to push the next item out of view (I used '1em' to be safe but '.5em' worked too)
The words didn't look perfectly centered so
set '#ticker li' line-height to '1em'
#ticker {
margin: 0;
padding-top: .5em;
}
#ticker li{
line-height: 1em;
padding-bottom: 1em;
list-style-type: none;
}
http://jsfiddle.net/JvuKU/2/
Note This depends on the font-size of the '#tickerContainer'. If you change the height or font-size of the '#tickerContainer', just adjust the values of '#ticker' padding-top and '#ticker li' padding-bottom.
Here's my situation. I have a sliding jquery menu like this: http://tympanus.net/codrops/2011/07/03/sliding-background-image-menu.
The code of menu is:
<div id="sbi_container" class="sbi_container">
<div class="sbi_panel" data-bg="images/1.jpg">
About
<div class="sbi_content">
<ul>
<li>Subitem</li>
<li>Subitem</li>
<li>Subitem</li>
</ul>
</div>
</div>
<div class="sbi_panel" data-bg="images/2.jpg">
...
</div>
CSS:
.sbi_content{
position:absolute;
border-top:2px solid #000;
bottom:90px;
left:0px;
width:100%;
background:transparent url(../images/pattern.png) repeat top left;
display:none;
overflow:hidden;
}
.sbi_content ul{
padding:10px;
}
.sbi_content ul a{
display:block;
color:#f0f0f0;
font-size:16px;
padding:4px 6px 4px 14px;
background:transparent url(../images/triangle.png) no-repeat 3px 50%;
opacity:0.9;
}
.sbi_content ul a:hover{
background-color:#000;
color:#fff;
-moz-box-shadow:1px 1px 5px #000;
-webkit-box-shadow:1px 1px 5px #000;
box-shadow:1px 1px 5px #000;
}
And here's a JavaScript piece I have a problem with:
$content.each(function(i) {
var $el = $(this);
// save each content's height (where the menu items are)
// and hide them by setting the height to 0px
var num = $el.find('ul li').size();
$el.data( 'height', num * 35 + 10 ).css( 'height', '0px' ).show();
});
I need to count a height of these <ul>.
That I'm doing now is counting how many there are <li> items, then multiply it by number of one's height (35) and adding a 10px for margin..
Everything would be ok, but when there is a realy long <li> item, it jumps to second row and problem is that this code doesn't count that second row height.
Any ideas how can I solve this problem?
Thank you.
You can use the scrollHeight property:
$("ul")[0].scrollHeight
For your specific case -
$content.find('ul')[0].scrollHeight
You can count the height of all the lis in the content using this:
var totalLiHeight = 0;
$el.find('ul li').each(function() {
var currentLiHeight = $(this).height();
totalLiHeight += currentLiHeight;
});
Then you can add the margin to that.
I'm working on a Facebook-like toolbar for my website.
There's a part of the toolbar where a user can click to see which favorite members of theirs are online.
I'm trying to figure out how to get the div element that pops up to grow based on the content that the AJAX call puts in there.
For example, when the user clicks "Favorites Online (4)", I show the pop up div element with a fixed height and "Loading...". Once the content loads, I'd like to size the height of the div element based on what content was returned.
I can do it by calculating the height of each element * the number of elements but that's not very elegant at all.
Is there a way to do this with JavaScript or CSS? (note: using JQuery as well).
Thanks.
JavaScript:
function favoritesOnlineClick()
{
$('#favoritesOnlinePopUp').toggle();
$('#onlineStatusPopUp').hide();
if ($('#favoritesOnlinePopUp').css('display') == 'block') { loadFavoritesOnlineListing(); }
}
CSS and HTML:
#toolbar
{
background:url('/_assets/img/toolbar.gif') repeat-x;
height:25px;
position:fixed;
bottom:0px;
width:100%;
left:0px;
z-index:100;
font-size:0.8em;
}
#toolbar #popUpTitleBar
{
background:#606060;
height:18px;
border-bottom:1px solid #000000;
}
#toolbar #popUpTitle
{
float:left;
padding-left:4px;
}
#toolbar #popUpAction
{
float:right;
padding-right:4px;
}
#toolbar #popUpAction a
{
color:#f0f0f0;
font-weight:bold;
text-decoration:none;
}
#toolbar #popUpLoading
{
padding-top:6px;
}
#toolbar #favoritesOnline
{
float:left;
height:21px;
width:160px;
padding-top:4px;
border-right:1px solid #606060;
text-align:center;
}
#toolbar #favoritesOnline .favoritesOnlineIcon
{
padding-right:5px;
}
#toolbar #favoritesOnlinePopUp
{
display:block;
border:1px solid #000000;
width:191px;
background:#2b2b2b;
float:left;
position:absolute;
left:-1px;
top:-501px; /*auto;*/
height:500px;/*auto;*/
overflow:auto;
}
#toolbar #favoritesOnlineListing
{
font-size:12px;
}
<div id="toolbar">
<div id="favoritesOnline" style=" <?php if ($onlinestatus == -1) { echo "display:none;"; } ?> ">
<img class="favoritesOnlineIcon" src="/_assets/img/icons/favorite-small.gif" />Favorites Online (<span id="favoritesOnlineCount"><?php echo $favonlinecount; ?></span>)
<div id="favoritesOnlinePopUp">
<div id="popUpTitleBar">
<div id="popUpTitle">Favorites Online</div>
<div id="popUpAction">x</div>
</div>
<div id="favoritesOnlineListing">
<!-- Favorites online content goes here -->
</div>
</div>
</div>
</div>
Maybe you could remove the height property (make sure it's not set in the CSS) and let the DIV expand in height by itself.
Make it a float element and don't use a clearing element after it.
You should take out the CSS height:25px property in the toolbar, the contents will expand the container. Also, ID selector tags are unique and you can specify directly to them without having to reference the ancestor:
INCORRECT:
#toolbar #popUpAction { /*some css */ }
#toolbar #popUpAction a { /*some css */ }
CORRECT:
#popUpAction { /*some css */ }
#popUpAction a { /*some css */ }