Adding edge labels to a CSS based tree - javascript

This code is based on this.
<div class="tree">
<ul>
<li>
Great Grand Child
</li>
<li>
Great Grand Child
</li>
<li>
Great Grand Child
</li>
</ul>
</div>
https://jsfiddle.net/danyaljj/sq6wy6bq/
I want to add labels on the edges. Any idea what is the best way to do this? (the set of the possible labels is limited, like 10 labels). Something like this:

Here's a solution far from robust that will only allow a label on first and last item of your 3-items list (there's no phydical place for a label on second one...)
Fiddle https://jsfiddle.net/sq6wy6bq/2/
HTML code: I'd add the label in each item before the labelled child so:
<ul>
<li>
<span class="so-label">Label 1</span>
Great Grand Child
</li>
<li>
Great Grand Child
</li>
<li>
<span class="so-label">Label 2</span>
Great Grand Child
</li>
</ul>
Relevant CSS: yay absolute positioning (sigh)
.so-label {
position: absolute;
top: -40%;
width: 100%;
font-size: 0.8em;
}
li:first-child .so-label {
left: 50%;
}
li:last-child .so-label {
left: -50%;
}
In case of 2 or 4-10 children (wow), you can still know the number of items in the list and position by hand each label: trick from André Luís. Labels that should not be too long or it'll surimpose...
Possible improvements:
flexbox or CSS table layout can achieve a correct visual display of a row of labels but then those labels would decorrelated of their respective items (children) and that would lead to bad semantics. Improving this semantics by associating back labels and items could be achieved via WAI-ARIA (aria-describedby or similar ARIA attributes)
Or you could use (accessible) SVG :) Graphs love SVG!

Related

Bootstrap 3 Allow Column to Overflow container

I have a two column bootstrap layout and I would like for the right column to be able to overflow the container. The right column contains lists of potentially long strings, this isn't a problem when the only element within the li is the text, but if I want to do perhaps a button and the text within the li this causes the line to wrap and show the button on one line and the text on another.
Is there a way to allow the column to extend past the container even with multiple elements?
JSFiddle Example
<div class="container">
<div class="col-lg-6">
This is the left column!
</div>
<div class="col-lg-6">
<ul class="list-unstyled">
<li>
<ul>
<li>List 1!</li>
</ul>
</li>
<li>
<ul>
<li>List items may be reeeeeeeeeeeeeeeeeeealllly long, but that's ok!</li>
<li>
<span class="glyphicon glyphicon-refresh"></span> But when there are two elements it is a problem ..................................................... I don't want this wrap :(
</li>
</ul>
</li>
</ul>
</div>
</div>
Setting the number of Bootstrap columns will determine the width of your container, as well as any nested elements. Therefore, by default, the text is going to wrap.
You could try adding a CSS class that prevents word wrapping, like so:
<div class="nowrap">Don't wrap this text.</div>
The CSS:
.nowrap: {
white-space: nowrap;
}
However, this may cause layout or overlapping issues as your container widths expand with longer content.
UPDATE
Your later JSFiddle from the comments below did not have the same markup as your example HTML in the original post. You neglected to mention that you were using <button> tags, which in the current CSS are not inline elements. Given markup like this:
<div class="btn-group">
<button class="glyphicon glyphicon-refresh"></button>
<button>Reeeeeeeeeeeeaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaallllllllllyyyyyyyyyy</button>
</div>
I believe the following CSS will give you the desired effect:
.btn-group {
white-space: nowrap;
}
.btn-group button: {
display: inline;
}
See this JSFiddle, forked from yours.

My Div isn't styling?

I've tried lots and it still won't style! My css looks like this:
#subnav {
background: url(../_img/subnav.png);
height: 36px;
width: 455px;
margin: -15px 0 0 25px;
position: absolute;
}
.subnav {
font-family: verdana;
font-size: 6px;
color: #676767;
padding: 8px;
}
and my html looks like:
<div id="subnav" class="subnav">
testing 123
</div>
and it looks this way:
Side-Note: I was wondering what's the most efficient way of coding that navigation with the sub-nav? I'm kind of outdated with my html/css at the moment.
"the white bit in the picture above is my sub-nav and the blue bit is the navigation so upon click options are shown in the white bit"
LAYOUT: http://uploadir.com/uploads/v8qafb1w/downloads/new
The content of the image that you showed us is different to the content that you have present in the question.
You have sn as your class in your html and you are trying to reference subnav via css
To add a sub menu I would personally use the following.
<ul>
<li>
itsHabbo
</li>
<li>
Radio
<ul>
<li>
AM
</li>
<li>
FM
</li>
</ul>
</li>
<li>
Events
</li>
<li>
Forum
</li>
So you basically have you sub menu within the item you wish to select.
I hope this helps.
You have sn class not subnav. I changed to sn in you code and you can now see styling
<div id="subnav" class="sn"> come at me bro </div>

Changing the colour of parent item when child element is visited

I'm trying to stylize a horizontal menu item with several child items. My idea was to change the colour of the parent item and the drop down menu as well when a child item of the menu is visited. I'm not so familiar with javaScript that's whY I want to ask for an opinion - is it possible to do this only in CSS approach ?
Here is my HTML:
<ul class="gf-menu l1">
<li class="item128 parent">
<a class="item" href"services">Services<span class="border-fixer"></span>::after</a>
<div class="dropdown columns-1">
<div class="column col1">
<ul class="l2">
<li class ="item1"><a class="item" href="submenu-01">Submenu1</a></li>
<li class ="item2"><a class="item" href="submenu-02">Submenu2</a></li>
<li class ="item3"><a class="item" href="submenu-03">Submenu3</a></li>
</ul>
</div>
</div>
</li>
And the CSS:
.gf-menu .dropdown{
border: 1px solid transparent;
border-radius:0;
background-color:#a9a9a9;
padding:10% 0;
width:100%;
text-shadow:none;
font-size:85%;
.gf-menu.l1 li.item1.active.last {background-color:#abcf39;}
.gf-menu.l1 li.item2.active.last {background-color:#f39512;}
.gf-menu.l1 li.item3.active.last {background-color:#f16e68;}
Any help would be appreciated, thank you in advance!
You cannot target a parent of an element with css yet. css selectors level 4 (CSS4) makes this possible by using the "!" on the operand will come out with this feature.
What you can do is the opposite. You can use the pseudo "visited" to target the chile element and give it a certain color
.parent:visited .child {
Attributes come here
}
Using jQuery you can target the parent with ".parent()" I recommend using that approach for your menu.

Unexpected result from CSS and jQuery

What I'm trying to do is putting content of "|" after each first level anchor tag "which is the main menu not the sub-menu" follow #menuCont but exclude the last child.
tried to do it with CSS then I had unexpected result, then tried with jQuery and I had another unexpected result.
Main page menu HTML
<div id="menuCont">
<ul>
<li>
About
<ul>
<li>Vision</li>
<li>Mission</li>
<li>Values</li>
</ul>
</li>
<li>News</li>
<li>Gallery</li>
<li>Activities</li>
<li>Facilities</li>
<li>Students</li>
<li>Staff</li>
<li>Contact info</li>
</ul>
</div>
Another page menu HTML
<div id="menuCont">
<ul>
<li>Home</li>
<li>
Static pages
<ul>
<li>Homepage</li>
<li>Vision</li>
<li>Mission</li>
<li>Values</li>
<li>Contact info</li>
</ul>
</li>
<li>
Dynamic pages
<ul>
<li>News</li>
<li>Gallery</li>
<li>Videos</li>
</ul>
</li>
<li>
Administration
<ul>
<li>Create accounts</li>
<li>Edit accounts</li>
<li>Assign Students</li>
<li>Assign teachers</li>
</ul>
</li>
</ul>
</div>
CSS Controlers
CSS approch
#menuCont ul li a:after {content:"|"; font-size:30px; color:#FFF !important; font-weight:bold; color:#044c9e; margin:15px 5px;}
#menuCont ul li a:last-child:after {content:"" !important;}
CSS Approch for jQuery
#menuCont ul li a.conAfter:after {content:"|"; font-size:30px; color:#FFF !important; font-weight:bold; color:#044c9e; margin:15px 5px;}
jQuery code
$("#menuCont").children().children().children("a:not(:last-child)").addClass("conAfter")
The unexpected results in reflect of the CSS approch:
"Main page"
From Ie = it just selects all of the anchor tags and add the content to them and totally ignored where I ask to remove the content from last child.
From Ff,Gc,Sf,Op = I get the same from all of them, which is they select only first child and add the content to it.
"The other page"
From Ie = it just selects all of the anchor tags and add the content to them and totally ignored where I ask to remove the content from last child.
-This is different-From Ff,Gc,Sf,Op = I get the same from all of them, they add the content to all of the elements except the first anchor tag.
The unexpected results in reflect of the jQuery approch:
"Main page"
From Ie,Ff,Gc,Sf,Op = I get the same from all of them, which is they select only first child and add the content to it.
"The other page"
From Ie,Ff,Gc,Sf,Op = I get the same from all of them, they add the content to all of the elements except the first anchor tag.
Thanks all.
Thanks to #charlietfl I managed to reach a neutral state.
I will emphasis the solution in case somebody reaches that post with the same problem.
To get only the first level of children I need to use CSS child selector ">" start from the ancestor to the parent to the child if you get what I mean, that will give me an exact and specific selection.
And the other problem I didn’t notice that I’m calling the last child of the anchor tag instead of calling the anchor tag itself < a >, by calling the last child of < li > which is a, I got what I wanted.
Yet, IE8 didn’t understand that line, but all of the other browsers get it quiet good.
Good luck all!
If use > will denote children only
#menuCont > ul > li >a:after {content:"|";padding:0 10px; color:red;font-weight:bold ; }
#menuCont > ul> li:last-child >a:after {content:"" !important;}
Also note looking for <a> of last child <li>
DEMO
couple thing i see are the color is making the link invisible if you have a white background, but the underline needs text:decoration:none;
is this fiddle here what you are after?
http://jsfiddle.net/MV2dn/2/

Align lists on showing or hiding

I have a list where every item has a sublist. To style them i have used CSS.
<ul class="left">
<li class="itemc">Item 1
<ul class="subitem">
<li>Subitem1</li>
<li>Subitem2</li>
<li>Subitem3</li>
<li>Subitem4</li>
</ul>
</li>
<li class="itemc">Item 2
<ul class="subitem">
<li>Subitem1</li>
<li>Subitem2</li>
<li>Subitem3</li>
<li>Subitem4</li>
</ul>
</li>
<li class="itemc">Item 3
<ul class="subitem">
<li>Subitem1</li>
<li>Subitem2</li>
<li>Subitem3</li>
<li>Subitem4</li>
</ul>
</li>
<li class="itemc">Item 4
<ul class="subitem">
<li>Subitem1</li>
<li>Subitem2</li>
<li>Subitem3</li>
<li>Subitem4</li>
</ul>
</li>
</ul>
The whole script can be found here
My problem is when I press an item from the main list, the sub-list is shown, but the other items from the main list go one over the other. How or what should I modify to make it work? I mean, when an item is clicked the sublist to be shown and the next item to be aligned to the end of the sublist?
Add two additional properties to your .left li class:
.left li {
float: left;
clear: left;
}
Updated jsfiddle
The problem comes from the fact that when the subitem opens, the items positions aren't changed. They stay at the same place.
As you can see here (3D view from Firefox), items 3 and 4 still have their original place (item 2 clicked), and the subitem comes above them.
The subitem is actually not considered as being in the item. So when it's being displayed, the other items don't see any change in the item above them and stay at the same place. But the text is affected by the submenu though. And so it gets put at the end of it. All of this is due to the float: left; on the subitem.
To fix that, you just need to add clear: both; or clear: left; to .left li in the CSS.
EDIT: Seems I am late sorry...
Little note: You should avoid having .left li after .left .submenu li, it could replace some of the properties you put before.

Categories

Resources