I have an html page with several lists nested within one parent list. I want to create a link at the bottom of each list that when clicked will take the user to the top of the list item.
I understand that it is possible to create a link to the top of the page like this:
Top of Page
An example of what I'm looking for would be
Top of List
The href can point to whatever the id of your list is.
So, if you have
<ul id="MyList">
<li>Example one</li>
<li>Example two</li>
<li>etc...</li>
</ul>
you could link to it with:
Top of list
The initial example you give, linking to "#" jumps to the top of the page, because that's essentially an unused id, which will always go to the top of the page.
You need the # symbol to reference ids:
<ul id="firstlist">
<!-- List goes here -->
</ul>
Go to top
use <a name="name"> tag
JSFIDDLE
<li>list </li>
<li> list </li>
<li> list </li>
<li> list </li>
<li> list </li>
<li> list </li>
<li> list </li>
<li> <a name="name"> here </a></li>
<li> list </li>
<li> list </li>
go to top
Related
I have a pice of code that creates the list shown bellow.
home
page2
page3
I want to remove the unused dot, and understand where it is coming from.
<ul>
<li>Home
<li>
<li> page2 </li>
<li> page3 </li>
</ul>
Actually, you forgot to close
<li>
It should be:
<li>Home</li>
The second open <li> signifies a new <li> nested within another, hence, an empty bullet point.
It is a syntax error, and must be a </li> rather than a <li>
<doctype html>
<html>
<body>
<ul>
<li>Home</li>
<li> page2 </li>
<li> page3 </li>
</ul>
</body>
</html>
<li> with only the opening tag is perfectly valid, when this is followed by another <li> or by any ending tag.
In your case the second <li> creates a new empty bulletpoint as browsers see your code like this:
<ul>
<li>Home
{</li>}<li>
{</li>}<li> page2 </li>
<li> page3 </li>
</ul>
The {</li>}'s (without {}) are the tags what browsers add before next starting tag to end previous <li> elements.
The same is true for example for <p> as well.
More information: https://www.w3.org/TR/html5/syntax.html#optional-tags
I have the following HTML:
<ul>
<li>
Home
</li>
<li>
About
<ul>
<li>
History
</li>
<li>
Contact
<ul>
<li>
Email
</li>
<li>
Phone
</li>
</ul>
</li>
</ul>
</li>
<li>
FAQ
</li>
</ul>
I want to be able to select nodes based on part of the a tag href using an XPATH expression.
I don't have the full href, only the last part.
So say I want to find the node that links to "History.aspx" I would use something like:
//#href()[. = 'History.aspx']
It looks like you want //a[contains(#href, 'History.aspx')] to get the entire anchor node. if you want just the href path, then //a[contains(#href, 'History.aspx')]/#href.
Hope that helps.
My code is as follows :
<ul>
<li> Custom Decor</li>
<li> Home Exterior </li>
<li> Cleaning Services </li>
<li> Heating & Cooling </li>
<li> Parts, Repair & Maintanence </li>
<li> Energy Effeciency </li>
<li> Sears Telecom </li>
<li> Protection Agreements </li>
</ul>
What I have is --
What I want is --
-Decor below Custom
-Exterior under Home
-Services under Cleaning , etc.
Something like this
two lines, 2 words .. How do I do this in CSS?
I can suggest you two solutions (second recomended):
Insert <br /> into your text, where new line should be inserted, or
Specify in CSS width of your item, and put between the words which should appear in one line.
I'm new with jsTree and I would like to create a tree starting from a <ul> and <li> list inside my HTML page. This using html_data plugin (I hope it's the right way).
I'm wondering: which is the correct way to write in HTML the data that will be turned into a tree by jsTree?
jsTree documentation suggests this one:
<li>
Node title
<!-- UL node only needed for children - omit if there are no children -->
<ul>
<!-- Children LI nodes here -->
</ul>
</li>
But it doesn't specify where to put the id attribute that jsTree uses to refer to the data.
Moreover it doesn't seem to work so well. I've seen someone who embeds that code with a <div> and a <ul> tags. For instance:
<div id="categories">
<ul>
<li>Category 1
<ul>
<li>SubCategory 1</li>
<li>SubCategory 2</li>
</ul>
</li>
<li>Category 2</li>
</ul>
</div>
Note that the id in the div tag.
Is this a correct way?
For me it seems not so comfortable using <a href="#"> tags only to write the text of a node... And if I use a <span> I loose the item icon...
Hope someone has a clearer head than mine.
This seems to be the pattern used by jsTree to draw the tree:
<div id="mytree">
<ul>
<li>
Node 1
<ul>
<li>
Node 1.1
</li>
<li>
Node 1.2
<ul>
<li>
Node 1.2.1
</li>
</ul>
</li>
</ul>
</li>
<li>
Node 2
</li>
</ul>
</div>
That is each node has the structure recommended by jsTree documentation:
<li>
Node title
<!-- UL node only needed for children - omit if there are no children -->
<ul>
<!-- Children LI nodes here (recursively apply the same pattern)-->
</ul>
</li>
And all the structure must be wrapped with (what documentation doesn't say):
<div id="mytree">
<ul>
<!-- all the tree here -->
</ul>
</div>
I am trying to develop/design a main menu/site map for our website.
The brief is that the menu should look like a directory tree and each item on the menu should either expand to reveal more menu items or link to another page on the site.
On top of this, every item should have the functionality to be added to the sites "Favourites" application, so that every user can more quickly find items that are buried deep within the menu structure.
Because of my insane OCD to make sure that everything is done correctly and to the best possible standards, I am having issues getting my markup to be semantically correct and accessible.
Here's what I've got so far:
<ul>
<li>
<ul>
<li>
Collapse "Menu Item 1"
</li>
<li>
Add "Menu Item 1" to Favourites
</li>
<li>
Menu Item 1
<ul>
<li>
<ul>
<li>
<a href="example3.html">Open "Menu Item 1's
First Child"</a>
</li>
<li>
<a href="example4.html">Add "Menu Item 1's
First Child" to Favourites</a>
</li>
<li>
<a href="example3.html">Menu Item 1's First
Child</a>
</li>
</ul>
</li>
<li>
<ul>
<li>
<a href="example5.html">Open "Menu Item 1's
Second Child"</a>
</li>
<li>
<a href="example6.html">Add "Menu Item 1's
Second Child" to Favourites</a>
</li>
<li>
<a href="example5.html">Menu Item 1's Second
Child</a>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<li>
<ul>
<li>
Expand "Menu Item 2"
</li>
<li>
Add "Menu Item 2" to Favourites
</li>
<li>
Menu Item 2
</li>
</ul>
</li>
<li>
<ul>
<li>
Open "Menu Item 3"
</li>
<li>
Add "Menu Item 3" to Favourites
</li>
<li>
Menu Item 3
</li>
</ul>
</li>
</ul>
As you can see, things start to get very complicated very quickly.
Is this the best way to convey this information or am I over complicating the matter?
Can you think of a better way for me to do this?
IMO you're using this list wrong. Collapse/Open/Add to favs... these elements don't belong to the tree, but you treat them as if they were part of it.
Your tree should has following structure:
<ul>
<li>
<span>menu item 1<span>
<ul>
<li>
<span>child node 1</span>
</li>
<li>
<span>child node 2</span>
</li>
</ul>
</li>
...
</ul>
That's the base of the tree. Now you should add actions (open/add... etc.). They might by placed as another, independent list after span element. Then just use class to separate childNodes list from actions list:
...
<li>
<div>
<span>menu item 1</span>
<ul class="actions"> ... </ul>
</div>
<ul class="childNodes"> ... </ul>
</li>
...
Well... in theory classes aren't required but it's much easier to handle with classes rather ... ul > li > div > ul selectors etc.
According to first comment
Base functionality of the website shouldn't rely on JavaScript. That's why I thing addition of whole tree using JS is bad idea. Actions like add to favs should be available without JS, but you may feel free to take control over that action, and overwrite it's functionality. So in HTML you have:
Add to favs
But using JS you do something like this (pseudo-code):
actionLink.addEventListener("click", function...
var id = take id: 123
do ajax request here
return false;
});
It's the best way to provide good availability and functionality at the same time.
About open/collapse actions. These requires JS by their nature so they can be added to actions list by JS. But once again... remember about "non-JS users". HTML/CSS should display a whole tree - JS should collapse its branches.
Sometimes I do as per Crozin's answer above but on a large site it can be impossible to load such a large tree (I have built systems for sites with over 100k pages).
A hybrid solution is to load in the tree so that the path down to the parent page only contains the current path and then display all the children of the parent. Then add JavaScript behaviour to add additinal parts of the tree.
Doing things this way means that non JS browsing can completely navigate the site but JS browsing gets the enhance functionality, all without the performance hit of building the entire tree.