I have a nested list that lists child nodes when the parent node is expanded. The parent node is expanded by clicking an image to the left of the text.
Unfortunately, it expands right off the page. I would like a scrollbar to appear when the content is off the page.
When I set "overflow: auto", a scrollbar never pops up, it just expands off the page and removes the expansion image on left of the list items.
Here's sample .html:
<body>
<div id="theDiv" style="clear: left;">
<ul id="theList">
<li id="1" class="parent">
<img class="expanded" align="absmiddle" src="./tree_expanded.gif"/>
Parent1
<ul style="display: block;">
<li id="10">
.....
</ul>
</li>
....
</ul>
</div>
</body>
Here's sample .js:
function expand() {
if(this.className == "expand") {
jQuery(this.parentNode).children("ul").show();
this.className = "expanded";
this.src = "/_images/tree_expanded.gif";
}
else {
jQuery("ul", this.parentNode).hide();
this.className = "expand";
this.src = "/_images/tree_unexpanded.gif";
}
}
Here's sample .css:
#theList {
margin-top: 0;
}
#theList, #theList ul {
list-style: none;
margin: 5px 20px;
padding: 0;
}
#theList .expand, #theList .expanded {
margin-left: -20px;
cursor: pointer;
}
#theList img {
margin-right: 5px;
}
#theList ul {
display: none;
}
#theList li {
white-space: nowrap;
margin-bottom: 4px;
}
First of all, set a definite width of the container div, so it knows when to start scrolling. Next, set it to overflow-x:scroll; or something to that effect. It should work :)
Ok, I was on the right track but not persistent enough. CSS really drives me nuts. I need to set both the div and the list height to get it to scroll. I was trying one or the other, not both.
I'm such a n00b.
Related
I am displaying a list of files in a container.
This list is generated by a php script.
For each file I associate a trash button in order to delete the file if user needs to. To do so I set float to right on the trash button.
But in some cases where the file name is too long, because of the overflow, the button is not displayed on the same line.... any idea how to fix that ?
Here is the generation script :
$list_docs = '<ul class="listDocs">';
foreach ($iterator as $file) {
// ignore filenames starting with . dot.
if (substr($file->getBasename(), 0, 1) === '.') {
continue;
}
$entryId++; // unique list entry id...
// use this and $prevDepth to check for nesting into and out of directories...
$curDepth = $iterator->getDepth();
$dirStart = $curDepth > $prevDepth; // nest down a directory?
$dirEnd = $curDepth < $prevDepth; // end of the directory
if ($dirEnd) { // UL end...
$list_docs .= '<!-- dir-end --></ul>';
}
if ($file->isDir()) { // display path details...
if ($dirStart) { // UL start... with Directory so will nest...
$list_docs .= '<ul class="listDocs indent">';
}
// display directory details
$list_docs .= '<li class="docResult"><i class="fa fa-folder"></i> <span id="file_'. $entryId. ' data-folder="'.$file->getPathname().'" class="folderClic">'.$file->getFilename().'</span><span class="file-remove fa fa-trash-o"></span></li>';
} else {
if ($dirStart) { // UL start... first time for this directory...
$list_docs .= '<ul class="listDocs indent">';
}
// display file details
$list_docs .= '<li class="docResult"><i class="fa fa-file-o"></i> <span id="file_'. $entryId .'" data-file="'.$file->getPathname().'" class="fileClic">'.$file->getFilename().'</span><span class="file-remove fa fa-trash-o"></span></li>';
}
$prevDepth = $curDepth; // record depth so we can check next time...
}
$list_docs .= '</ul>';
This code is pasted into a div :
<div class="documentList" id="documentList">Explorer</div>
And here is css :
.file-remove {
float: right;
color: #700;
cursor: pointer;
}
.documentList{
display: inline-block;
background-color: rgba(255,255,255,1);
border-style: solid;
border-width: 2px;
border-color: rgba(0,0,0,0.3);
color: rgba(116,119,123,1);
padding: 0.5em 0.5em;
width: 20%;
min-height: 500px;
vertical-align: top;
}
.listDocs{
list-style: none;
text-align: left;
padding: 0em 0em;
margin: 0em 0em;
overflow: auto;
}
I have also tried to display it as a table, but I don't manage to get the proper width for the filename column.
EDIT: here is a picture of the issue :
I also tried with word-wrap: break-word; on the docResult class, then I got the following :
I would probably change the inline elements:
<li class="docResult">
<i class="fa fa-file-o"></i>
<span id="file_'. $entryId .'" data-file="'.$file->getPathname().'" class="fileClic">'.$file->getFilename().'</span>
<span class="file-remove fa fa-trash-o"></span>
</li>
Into:
<li class="docResult">
<div class="file"><i class="fa fa-file-o"></i></div>
<div class="title" id="file_'. $entryId .'" data-file="'.$file->getPathname().'" class="fileClic">'.$file->getFilename().'</div>
<div class="file-remove"><i class="fa fa-trash-o"></i></div>
</li>
This way we can display them as "inline-block", and have long file titles grow vertically without interrupting either side icons.
Then, we can:
.docResult{
font-size: 0; /* Remove children spacing */
}
.docResult div{
display: inline-block; /* Allows for horizontal positioning of siblings */
vertical-align: top; /* They will stick to the top, even if a long title expands the row */
font-size: inital; /* Resets font-size from parent's 0px */
}
.docResult .file{
width: 50px; /* Example icon width */
}
.docResult .file-removed{
width: 50px;
}
.docResult .title{
width: calc(100% - 50px - 50px); /* We want the title to be as long as it can be without overlapping icons */
}
So, basically we're using block elements instead of inline elements, this way elements don't wrap around each other like text. Afterwards, we're defining we want each element to position horizontally, keeping both icons aligned with the first line of the title, and giving the title's element the maximum possible without getting in the way of either icon.
My issue is that I have cart section of the website where it automatically picks 5 related products on the right side of the page. I added a bottom-border style so you can tell the difference between each product. The issue here is that there's 4 dividers, or border lines, whatever you wish to call it. However as you can see in the picture below, having the 4th divider is completely redundant since it's already the last item. My question is what code would be necessary to add to take off the last divider to this stylesheet. I only have 1 line of code for the add to cart bottom border since it repeats itself every time a new object is added, and the max is 5 items every time.
I was going to take a picture and upload it directly but apparently you need more points just to post a picture, so I uploaded a picture at imgur until I have enough points. Cheers.
Code:
HTML Page:
<div class="addToCart_bottomBorder"></div>
CSS Page:
.addToCart_bottomBorder {
border-bottom: #d9d9d9 1px solid;
margin-top:3px;
margin-bottom: 5px;
clear:both;
}
.addToCart_bottomBorder li:last-child {
border-bottom: none;
}
Reference pic:
Might have better results using border-top and removing it from the first child :)
IE8 and below, from memory, don't support last-child
.addToCart_bottomBorder li {
border-top: #d9d9d9 1px solid;
margin-top:3px;
margin-bottom: 5px;
clear:both;
}
.addToCart_bottomBorder li:first-child {
border-top: none;
border-bottom: none;
}
and here is the html
<ul class="addToCart_bottomBorder">
<li class="">content</li><br />
<li class="">content</li><br />
<li class="">content</li><br />
<li class="">content</li><br />
<li class="">content</li><br />
</ul>
and a jsFiddle for good measure
edit
Updated code and added a fiddle.
You could use the CSS adjacent sibling selector (+).
Assuming your HTML looks like this:
<div class="addToCart_bottomBorder">
<ul>
<li>First</li>
<li>Second</li>
<li>Third</li>
<li>Last</li>
</ul>
</div>
Then the CSS would be:
.addToCart_bottomBorder {
margin-top:3px;
margin-bottom: 5px;
clear:both;
}
.addToCart_bottomBorder li+li {
border-top: #d9d9d9 1px solid;
}
Fiddle: http://jsfiddle.net/M8kN2/
Lets break this down, .addToCart_bottomBorder li:last-child,
.addToCart_bottomBorder This is the parent
li and this is the child
With the following selector you are targeting the li of your parent, .addToCart_bottomBorder, and then removing the border from the last li but since those styles are on the parent you are removing nothing from them.
Without more of your html and css it is hard to tell how you have it structured but this is how it should be structured.
<ul class="pickFive">
<li class="addToCart_bottomBorder">
Some content in here
</li>
<li class="addToCart_bottomBorder">
Some content in here
</li>
<li class="addToCart_bottomBorder">
Some content in here
</li>
<li class="addToCart_bottomBorder">
Some content in here
</li>
<li class="addToCart_bottomBorder">
Some content in here
</li>
</ul>
With this css,
.addToCart_bottomBorder {
border-bottom: #d9d9d9 1px solid;
margin-top:3px;
margin-bottom: 5px;
clear:both;
}
.pickFive li:last-child {
border-bottom: none;
}
If you structure it like so the last child of the parent will have no border. Check this JSFIDDLE to see how it works.
Instead of this
.addToCart_bottomBorder li:last-child {
border-bottom: none;
}
Do This
.addToCart_bottomBorder li:last-child {
border-bottom: #FFFFFF 0px solid;
}
that's how i do it anyways, and it works fine
I have a css menu which has a width of 400 for non-Admins... and a width of 500 for Admins. If I set the UL width to 500, the menu centers fine and nicely for Admins. But for non-admins, whose mneu is really only 400 wide... it's off-kilter.
So I removed the width attribute from the UL to try and remove this and then it lost centering altogether; the whole menu is now stuck to the left side of the container.
Anyone have a simple idea for how to make it always centered? Site is here:
http://www.runic-paradise.com/
ul.menu{
height: 40px;
list-style: none outside none;
margin: 0 auto;
/*width: 500px;*/
}
/*li{
width:100px;
height:50px;
float:left;
color:#191919;
text-align:center;
overflow:hidden;
}*/
a.menu{
color:#FFF;
text-decoration:none;
}
p.menu{
padding-top: 10px;
padding-right: 5px;
padding-left: 5px;
}
.subtext{
padding-top: 10px;
}
ul.menu li{
width: 100px;
height: 40px;
float: left;
color: #191919;
text-align: center;
overflow: hidden;
}
/*Menu Color Classes*/
.green{
background:#6AA63B url('/img/menu/green-item-bg.jpg') top left no-repeat;
}
.yellow{
background:#FBC700 url('/img/menu/yellow-item-bg.jpg') top left no-repeat;
}
.red{
background:#D52100 url('/img/menu/red-item-bg.jpg') top left no-repeat;
}
.purple{
background:#5122B4 url('/img/menu/purple-item-bg.jpg') top left no-repeat;
}
.blue{
background:#0292C0 url('/img/menu/blue-item-bg.jpg') top left no-repeat;
}
<ul class="menu">
<li class="green">
<p class="menu">Home</p>
<p class="subtext">The front page</p>
</li>
<li class="yellow">
<p class="menu">-</p>
<p class="subtext">More info</p>
</li>
<li class="red">
<p class="menu">Forums</p>
<p class="subtext">Get in touch</p>
</li>
<li class="blue">
<p class="menu">-</p>
<p class="subtext">Send us your stuff!</p>
</li>
<?php
if ($user->data['group_id'] == 5)
{
echo ' <li class="purple">
<p class="menu">Admin</p><p class="subtext">Legal things</p>
</li>';
}
?>
</ul>
Your CSS sets the ul.menu width to 400px. If the user is admin, the php script adds another 100px wide li to ul.menu. When this happens, you have to set the ul.menu width to 500px. If you do this, the css rule margin:0px auto; will handle the centering as expected.
A simple jQuery fix would be something like this:
<script>
$(document).ready(function() {
var menu=$('ul.menu');
if(menu.find('li')>4) {
//if there are more then 4 menu items, reset menu width to 500px
menu.css('width','500px');
}
});
</script>
Use max-width:500px;for UL.Demo for these http://jsfiddle.net/dhanith/ZMB93/
Can you please try this,
In animated-menu.css (demo url: http://www.runic-paradise.com/), Change margin style as like below
ul.menu {
height: 40px;
list-style: none outside none;
margin: auto 25%;
}
I'm developing a header part of a responsive design. Can anyone tell me how to keep same height in both list items total height and responsive image height, responsive image height will be change according to the resolution, what i need to do is according to that height add more list items or change list items bottom margin and height (both should be increase or decrease and add/remove items to keep a clean look.)
Can anyone help me in this matter to solve? (I'm using HTML5, CSS3, Jquery and PHP if needed)
http://jsfiddle.net/ST7xy (This is a demo)
<div class="navigation">
<ul class="list">
<li>List Item</li>
<li>List Item</li>
<li>List Item</li>
<li>List Item</li>
<li>List Item</li>
<li>List Item</li>
<li>List Item</li>
<li>List Item</li>
</ul>
</div>
<div class="image">
<img src="http://placehold.it/500x200" width="100%">
</div>
I would recommend floating it all inside a div, with an adjustable height depending on resolution then using percentages on your heights, so making the main image 100% and the list's (4 in your example) 25% each.
JSfiddle
css:
.container {
height: 200px;
}
.navigation{
float: left;
width: 200px;
height: 100%;
}
.list{
padding: 0;
margin: 0;
height: 100%;
}
.list li{
margin:0;
padding:0;
margin-right: 5px;
margin-bottom: 2%;
height: 23.5%;
}
.list li:last-child{
margin-right: 5px;
margin-bottom: 0;
height: 23.5%;
}
.list li a{
display: block;
background: grey;
line-height: 100%;
height: 100%;
}
.image{
float: left;
}
You cannot get this to work with css alone. You need to use jquery.
Use
var navHeight = $(".navigation").height();
to get the height of the navigation div. And on any change you need to assign that height to div image like :
$(".image").height(navHeight);
So basically :
$(window).resize(function(){
var navHeight = $(".navigation").height();
$(".image").height(navHeight);
});
$(window).resize(); //on page load
Jus giving an insight and you can build on from here..:)
This is what you want and what you need
Working Solution
Jquery
$(document).ready(function () {
var leftHeight = $('.image').height() - 5;
$('.navigation').css({
'height': leftHeight
});
var rightHeight = $('.navigation').height();
});
CSS
.navigation {
float: left;
width: 200px;
}
.list {
padding: 0;
margin: 0;
background-color:#000;
height:inherit;
}
.list li {
padding:0;
height:25%;
margin-right: 5px;
}
.list li a {
display: block;
background: gray;
height:90%;
}
.image {
padding: 0;
margin: 0;
float: left;
}
As you can see the query is simple ad straight forward. I assign the height of the image div to the navigation div.
In the CSS i have used percentages to match the parent ul. So incase you using 4/6/8 list item's you will have to change this percentage accordingly.
Enjoy!
I'm building a navigation system using jquery scrollto. I have my navigation menu in a separate file (( navigation.php )). It is included in 5 locations on the first page (( 5 different sections w/ text following each )). I'm trying to figure out a way to have the current "tab" highlight'd. I could hard code the navigation in each location to ensure it shows up the correct way, but I'd rather use the phpinclude() method. The other issue is that each "tab" has it's own unique color (( cmykd )). Here is the alpha version of what I'm doing (( when you click && the page slides, the "active tab" still stays grey -- I'd like it to be the corresponding color )).
Hope this all makes sense && thanks in advance !!
Few things first.
You have the same <ul> in multiple places, each with the same id. Same with the multiple <li> elements sharing IDs. This is not only invalid HTML but just a bad practice in general.
Secondly, your document outline is backwards. Your text is in <h2> elements whereas your navigation/headers are in <h3> elements. This is also invalid and a bad practice.
Next, let's talk about rest of the HTML for your navigation bars (which are doubling as section headers) and their content sections. Let's look at new HTML for two of them (Creativity and Minimalism)
<div id="a1" class="section creativity">
<ul class="nav">
<li class="creativity">Creativity</li>
<li class="minimalism">Minimalism</li>
<li class="youthfulness">Youthfulness</li>
<li class="kuler">Kuler</li>
<li class="design">Design</li>
</ul>
<p>Lorem ispum...</p>
</div>
<div id="a2" class="section minimalism">
<ul class="nav">
<li class="creativity">Creativity</li>
<li class="minimalism">Minimalism</li>
<li class="youthfulness">Youthfulness</li>
<li class="kuler">Kuler</li>
<li class="design">Design</li>
</ul>
<p>Lorem ispum...</p>
</div>
The key takeaways here are
Semantic use of elements
Semantic use of class names
No behavior
Next, the CSS changes
div.section ul.nav {
font: 35px 'ChunkFiveRegular', Arial, sans-serif;
letter-spacing: 0;
padding: 0px;
margin: 0px;
border-top: 1px solid black;
border-bottom: 1px solid black;
width:100%;
list-style-type: none;
}
div.section ul.nav li {
display:inline;
padding: 0px;
margin: 0px;
}
div.section p {
font: 36px 'ChunkFiveRegular', Arial, sans-serif;
letter-spacing: 0;
}
div.section.active ul.nav li a {
color: #ddd;
}
a:link {color:#999; text-decoration: none;}
a:visited {color:#999; text-decoration: none;}
a:hover {color:#000; text-decoration: none;}
li.creativity a:hover, div.creativity.active li.creativity a {color:#00ffff !important;}
li.minimalism a:hover, div.minimalism.active li.minimalism a {color:#ff00ff !important;}
li.youthfulness a:hover, div.youthfulness.active li.youthfulness a {color:#ffff00 !important;}
li.kuler a:hover, div.kuler.active li.kuler a {color:#000000 !important;}
li.design a:hover, div.design.active li.design a {color:#666666 !important;}
Key takeaways here are
Semantic use of class names
Inheritance based coloring
And finally, the modification to your jQuery
jQuery.noConflict();
jQuery(function($)
{
$("ul.nav li a").click(function( event )
{
event.preventDefault();
var target = $(this).attr( 'href' );
$.scrollTo(
target.replace( '#', '' )
, { duration: 800
, axis: "y"
, onAfter: function()
{
$( 'div.section.active' ).removeClass( 'active' );
$( target ).addClass( 'active' );
}
}
);
});
$(".return-top").click(function()
{
$.scrollTo("body", {duration: 800, axis:"y"});
});
});
Key takeaways here are
Behavior removed from links is added here
Now relies on CSS classes, not IDs
Once you change your multiple ids to classes (since ids must be unique), you could do something like this:
.a1 .q1 a
{
color: cyan;
}
.a2 .q2 a
{
color: magenta;
}
...