I have not done any web development as of late. Was wondering if there is an easy way to load a data representation of a hierarchy tree such as
node parent
---------------------------------
root
Level1.Node1 root
Level1.Node2 root
Level1.Node3 root
Level2.Node1 Level1.Node1
Level2.Node2 Level1.Node2
Level2.Node3 Level1.Node2
And get it rendered like
root
--------Level1.Node1
--------------Level2.Node1
--------Level1.Node2
--------------Level2.Node2
--------------Level2.Node3
without using fancy tables?
Use styled and nested unordered lists.
<ul>
<li>Level 1
<ul>
<li>Level 2</li>
</ul>
</li>
</ul>
Practically you just want to keep on checking the Parent's Children. This is not a HTML5/CSS thing, but a JavaScript thing to check the DOM (node) roots.
Use the WebKit/Firebug tools to dump out the HTML DOM Object and see it's attributes. You can see what their properties and methods are and use them to iterate through them until you hit the bottom of each subtag.
console.log(document);
console.log(document.head);
These just return the HTML blocks.
console.log(document.body);
This returns the actual DOM object. You can see in the inspector that you actually get back tons of info to parse on.
Check [children] and [childNodes]. That's where you want to iterate your DOM structure.
[nodeName] and [nodeType] help you identify the attributes.
Printing it out you can do with placeholders var offset = ' '; and reloop them or use CSS to render <div> tags with mathematical calculated left-margins.
Related
Here is a tricky challenge for you guys, CSS selector to get the :last-child that doesn't have a class.
What I have tried so far:
.nav-item:not(.nav-item--mobile):last-child {...}
.nav-item:last-child:not(.nav-item--mobile) {...}
I have similar query selectors that do some fun stuff, so I'd rather try and do this via CSS. The mobile items can be variable in quantity.
// Get the first child in the list when there are n or more, and
// they are not mobile. Yes, this actually works.
.nav-item:first-child:nth-last-child(n+7):not(.nav-item--mobile)
The following will give me the last child in all cases, but I want the last child that isn't a mobile only child.
.navigation-item--top:last-child
Target
generic generic generic generic generic mobile mobile
^
target this one
HTML
<ul class="nav-items-list">
<li class="nav-item"></li>
<li class="nav-item"></li>
<li class="nav-item"></li>
<li class="nav-item"></li>
<li class="nav-item nav-item--mobile"></li>
<li class="nav-item nav-item--mobile"></li>
</ul>
Yes I could figure out which is the correct one in the generated navigation, or I could find it with JS.
Unfortunately what you want cannot be achieved using CSS only.
:last-child asks only one question, no matter what else you specify: Am I the last child of my parent element?
Sadly, there is no :last-of-class, only :last-of-type, but this cares only about element type.
It is not even planned for selectors level 4 that you can specifiy a class or other limiting property.
See
https://www.w3.org/TR/selectors4/#the-last-child-pseudo
I am trying to list a descendancy starting from root and printing its children's children. The domain looks something like
class Node {
String nodeId
String label
Node parent
}
Note I dont have a reference to child instead i have a reference to its parent.
In the GSP page I want to list the entire lineage but I am not able to get proper indentation where each node will have an indent for its child. Basically need some kind of checking condition that if the previous node is the parent of the next node give it an indent otherwise find the parent of next node and put it there accordingly.
<concepts>
<g:each in="${nodes}" var="node">
<concept id="${node.id}" description ="${node.label}">
</concept>
</g:each>
</concepts>
Something like (ignore the text. i need a structure like this
This is related to: Recursion in GSP page
Update the _node.gsp template:
<g:if test="${nodes}">
<ul>
<g:each in="${nodes}" var="node">
<li>
${node}
<g:render template="node" model="[nodes:Node.findAllByParent(node)]" />
</li>
</g:each>
</ul>
</g:if>
And style accordingly.
Say I have the following DOM tree:
<div class="box">
<ul class="gallery">
<li id="1">text</li>
<li id="2">text</li>
<li id="3">text</li>
<li id="4">text</li>
<li id="5">text</li>
<li id="6">text</li>
<li id="7">text</li>
<li id="8">text</li>
<li id="9">text</li>
</ul>
<div id="random"></div>
<ul class="gallery">
<li id="10">text</li>
<li id="11">text</li>
<li id="12">text</li>
<li id="13">text</li>
<li id="14">text</li>
<li id="15">text</li>
<li id="16">text</li>
<li id="17">text</li>
<li id="18">text</li>
<li id="19">text</li>
<li id="20">text</li>
</ul>
</div>
I want to create a CSS selector that will pick every 6th <li> tag under the div with the class "box". But I need the selector to take into account the entire <li> tags in the page and not to count them per <ul> tag. So in the end, the selector should pick the <li> with IDs 6,12,18. Currently I was only able to create a selector that picks IDs 6 & 15 when I used:
div.box li:nth-of-type(6n)
Notice 1: the IDs numbers are only added for reference. In reality the <li> tags don't have a class or an ID.
Notice 2: the number of <li> tags in each <ul> tag varies from site section to site section. Sometimes there can be even a 3rd and a 4th </ul> with more <li> tags.
Notice 3: I don't have control over the hard-coded HTML, which means I cannot unify tags, add IDs or CSS classes, etc. The selector will be called from an external JS file. While I can edit the DOM with jQuery after the page loads, I prefer to avoid such a solution to make the selector easier to handle.
Thanks
Generally Agree Impossible, except...
I basically agree with Sych and Fabrício that it is not currently possible to do as a pure CSS solution. However, there are always some exceptions, depending on actual html structure.
In your case, there may be an exception, but it does depend on the full constraints of your situation.
When Would it Be Possible?
Based off your given code, if these two constraints are true, then you can still get what you want via CSS:
All ul items that are direct children of .box are of class .gallery.
All gallery groups (except perhaps the very last one) consist of exactly nine li elements (both groups in your example do, but I don't know if that was coincidence or how you are actually setting up your code).
If the above two factors in your html are true, then this code gets what you want (using color to show selection here):
ul.gallery:nth-of-type(2n+1) li:nth-of-type(6n) {
color: red;
}
ul.gallery:nth-of-type(2n+2) li:nth-of-type(6n+3) {
color: red;
}
You can see it works on the code you gave in this fiddle, then you can see it continues to work given an expansion of the html as this fiddle shows, even if the final list is short of nine as both this fiddle and this fiddle shows, but it will fail if the .gallery varies in length at some midpoint of the sequence, as seen in this fiddle (notice how the last two selected texts are not 6 apart from each other because the second to last .gallery has only 7 items).
The Overarching Principle
So in general, if your dynamic html is output in some type of a regular pattern as demonstrated here, then it can open up the possibility of a pure css solution along the lines of that given. It is when the dynamic generation is also fully random (so in your case if either #1 or #2 condition above is not guaranteed true) that a pure css solution is impossible.
CSS does not provide such scope, it only provides traversing "deeper in to the DOM" tree. It does not even have a parent element selector.
If you are in jQuery environment, you can write your own selector, call it, say, ":nth-from-top(n)" that will work using jQuery's DOM traversing functions.
Note, that this type of selector will be much slower, because it cannot take advantage of the performance boost provided by the native DOM methods.
nth-child and nth-of-type match based in the element's position relative to its siblings only.
As far as I know there's currently no CSS-only solution for that unless all lis had the same parent. You will have to add a class to every 6th element or use some JavaScript.
So, constraining the answer to CSS selectors only without altering the markup and without hardcoding the nth start indexes: impossible. I'd like to be proven wrong though.
Looking by the bright side, adding a class will provide better selector performance. nth-child is already considered inefficient, now if what you want would be possible it'd mean that browsers would be forced to recursively evaluate selectors and count matches each time the DOM is updated. Though this would be terrible performance wise, I believe it'd still be possible to implement through new "scoped" nth selectors a la CSS Counters. Just food for thought.
I understand how to create a fixed nav menu. The one I am designing has links to various anchor points on the page. What I do not understand is how to I have the menu items automatically indicate where I am on the page? Can this be done without JS?
This effect is found on many 1-page designs. For instance:
http://www.thirdculturestudios.com/
http://kevinmheineman.com/
Any help would be appreciated.
You can do the jump using <a name="resourceName" id="resourceName"> anchor tags. But the smooth scrolling to the item needs javascript.
You just use Text to just jump to it (non js world).
Edit: clarified grammar since I tried rereading it and realized it would be confusing the way I wrote it
I'm not aware of a way to do that in CSS. Both of the pages you link to involve adding/removing classes dynamically based on the click event. CSS has no way of dynamically adding classes.
If you're interested, here's how you could do the link highlighting depending on if it's clicked simply in jQuery:
<div id="container">
<ul>
<li>link 1</li>
<li>link 2</li>
<li>link 2</li>
</ul>
</div>
var a = $('#container a');
a.click(function() {
a.removeClass('active');
$(this).addClass('active');
});
http://jsfiddle.net/H5rNM/
You cannot do this without JavaScript, because CSS... well... cascades. The way those pages work is that each menu item has a class .active or similar, that is added when the item is clicked.
EDIT: I believe you're looking for jQuery's scroll() (see here) , where you can specify a function that takes place when the user scrolls. In this case, the function would check the scrollTop value and compare it to the offset of page sections, then add a class to the appropriate menu item.
A quick Google search of these terms will point you in the right direction.
No can't be done without Javascript.
I did a page and did a check on it using a software called WebKing and it tells me I have duplicate anchors??
<ul >
<li>About The Code</li>
<li>Link 2 is boring</li>
<li>3rd line in</li>
<li>Contact Manny</li>
<h3><a name="toc1" id="toc1">About the code</a></h3>
<h3><a name="toc2" id="toc2">Link 2 test</a></h3>
<h3><a name="toc3" id="toc3">3rd test</a></h3>
<h3><a name="toc4" id="toc4">Contact Manny</a></h3>
</ul>
So what am I doing wrong?? Do I change the id to something else?
This looks like it is just some bad heuristics in the analysis software you are using. There isn't anything technically wrong with that code.
That said, a modern approach (i.e. not pandering to Netscape 4) would be to say:
<h3 id="toc1">About the code</h3>
… and I suspect this would also avoid triggering the aforementioned bad heuristic.
You should probably have better ids too. id="about" — URLs that inform readers where they go are generally better than URLs that don't so /mypage/#about beats /mypage/#toc1
On the subject of bad style, the title attribute is there to provide advisory information about an element. It should contain helpful extra information. Your example has it duplicating the main text of the links. At best this will just be some extra bytes to download. At worst, you can expect some screen reader users to have to listen to the destination of every link being repeated.
The name and id attribute share the same namespace so they need to be different.
http://www.w3.org/TR/html401/struct/links.html#h-12.2.3
If you are writing valid XHTML try not to use the name tag.
http://www.w3.org/TR/xhtml1/
Section 4.10. The elements with 'id' and 'name' attributes
Note that in XHTML 1.0, the name attribute of these elements is formally deprecated, and will be removed in a subsequent version of XHTML.
Also you have some h3's that aren't inside li's but are inside of a ul.