Can't nest links in html5? - javascript

In xhtml I usually nest lists, close the tag then begin a new before the closing tag. This technique makes a the list structure clear when rendered without any css and it's a convenient structure for applying JS to.
Today I come up against a problem nesting links in a html5 document:
<header>
<nav>
A link
<a href="#">A link
<ul>
<li>nested link</li>
<li>nested link</li>
<li>nested link</li>
</ul>
</a>
</nav>
</header>
Which doesn't work. The nested list is nested in another a tag.
So a technique I used regularly in xhtml doesn't work in html5. My question is what do you do in the situation where you want to create a flyout menu? Is there a technique I can use in html5 to make it as easy as it is in xhtml? I know I can create this flyout menu without nested links but I liked the conciseness of the old method.

Build your menu structure in nested lists, and have the first element in every list be a link. Works just fine and you can make it look right in CSS.

I never want to make a flyout menu, but if a client cannot be convinced otherwise then:
The list of links at the top level would be represented as a list, not a bunch of anchors directly under the nav element
I would structure the DOM so a submenu would be represented as a list that appeared after a link, and not inside it.
I would use JavaScript to handle the opening/closing since :hover is inadequate as it:
doesn't work with keyboard access or
allow time to pass after the point leaves the menu before closing it (it is hard not to wobble across the edges for some people, e.g. those with arthritis)

Related

I can't get scrollspy to work with my bootstrap navbar

I know this is a very common problem, but I have spent ~two days crawling the forums, trying fixes, can't seem to find the answer.
I have a standard bootstrap setup that uses some parallax scrolling. I have a navbar fixed to the bottom of the page. Each <li> is shaped like a circle, and inside the <li> is an <a> tag. Each 'circular' <li> is linked to an anchor tag on the page in order to provide navigation around the page. This is a one-page template set up.
Here is a fiddle:
https://jsfiddle.net/k8g3qydw/1/
I have the bootstrap.css and .js files properly enqueued, I added data-target=".scrollspy" data-spy="scroll" data-offset="0"
to the body tag and added the class .scrollspy to the parent element of my <ul> like so:
<div class="scrollspy board-inner">
<ul class="nav nav-tabs" id="myTab">
<div class="liner"></div>
<li class="nav-item active">
So, I am pretty confused as to what to do!
Any help is much appreciated!
There are multiple mistakes in your code.
You should use one method to add Bootstrap ScrollSpy to your page, not both:
via Data Attributes or JavaScript. So you should delete your body attributes or javasript line $('body').scrollSpy({...});
ID attribute must be unique to the whole document. You have repeated IDs on page. And.. In wrong place. On working fiddle #spy was assigned to nav wrapper, since it is the one which is being spied.
Navbar links should point to "resolvable id targets" instead of <a name="service">. You should use <a id="service">.
And also make sure that bootstrap.min.js is included after jQuery in your document. Since jQuery is required for Bootstrap, not other way.
Here is a working JSFiddle

menu on only a single page

I am not really into all those coding terms, so I am having some difficulties to find answer to my problem. I want to create a single site menu. So if i press on a list item the browser should open an other content but on the same page. I tried using css with targets but everytime i click a new target the tagets will overlap and the old content will not disappear. I tried using Javascript with innerHTML but in javascript i need to write the whole page in a single line (.innerHTML ='websitecode') this will create a horrible overview.
Is there any other possibility to create something like this? Maybe with the require() / involve() function in php?
Thank you
From your question, what I understood is you want menu navigation without loading the content again.
`http://codepen.io/ArslanRafique/pen/raZybL`
Above is the snippet, I recently developed, simple menu navigation by using simple CSS and HTML. You can achieve simple menu navigation by using HTML label and can swap your views accordingly.
Please have a look at shared snippet, hope it will help you.
Sounds like you would like to create a single page web application:
There are many great javascript frameworks for this, try angular.
https://www.airpair.com/angularjs/building-angularjs-app-tutorial
Put your menu in the header file, and the content you want to replace in to views.
Or use angular UI-router https://github.com/angular-ui/ui-router/wiki
There are few possibilities to achieve your goal.
The simple and not so elegant one would be to generate the complete content and set anchors on the page. From the menu the user can call the anchors and will be brought to a desired part of the page. Example:
<!-- Menu -->
<ul>
<li>About us</li>
<li>Products</li>
</ul>
<!-- Page contents -->
<div id="aboutus">This is about us.</div>
<div id="products">Our products.</div>
More elegant, sophisticated and professional approach would be creating a SPA (single page application). It would include some techniques like AJAX, where you can load (or remove) contents on the page without refreshing.
There are many modern JS frameworks that can help you, for example AngularJS, ReactJS, etc.
Wikipedia offers also more information on SPA:
https://en.wikipedia.org/wiki/Single-page_application
So Arlan's version looks a lot prettier, but you can also use javaScript with divs that you can hide or display with functions. You can format the divs in your css with whatever you want. May get a little clunky if you have a long menu...
<div id="divOne">This will show some text</div>
<div id="divTwo"><p>This will show even more text</p><p>I may even format it differently</p>
</div>
<div id="divThree">This shows text that is different from the other two</div>
var formatOne = document.getElementById("button1"); //create handle for first button
formatOne.onclick = function() { //add functionality
document.getElementById("divOne").style.display = "block";
document.getElementById("divTwo").style.display = "none";
document.getElementById("divThree").style.display = "none";
}
Jsfiddle to show the functionality.
https://jsfiddle.net/lattivalidus/s7a9dLe7/

a href external link to specific area on page

So I have a nav bar that I want to link to different pages that all look the same but have one different section on them. When I came to creating the links I realized that it will only link to the other page but not the specific section on the page . So basically I had the idea of an anchor tag but linking to another page.
I did it this way because I have a basic knowledge of coding and don't know how to use php and javascript. Is there a way to do this with what I have? Or do I have to try a different method entirely?
I am just learning javascript now so that can be an option. I heard you could do something with arrays? (But not any jquery as we are not allowed to use that for our assignment) I've also heard about iframes also but I don't know too much about them.
CODE:
HTML
<nav>
<ul>
<li>TOURS,PRICES & STANDARD FLIGHTS</li>
<li>MEET THE STAFF</li>
<li>CHARTERS</li>
</ul>
</nav>
if your page toursprices.html contains a div with id "abc", and you want to link to that section, you just have to write the href like this:
TOURS,PRICES & STANDARD FLIGHTS
You can use:
<a id="different_section_1">Different Section</a>
in the target page and in the navbar use:
Page
But if your pages are essentially the same with one area that changes. You'd probably be better of using an iframe or switching out blocks with javascript.
As "user3472089" said you can point the a certain element through its id.
I use this at the top of my gallery:
And at the bottom I just put a link or a simulated button that leads to that anchor:
<a href="#top">
<div id="top_anchor">
UP
</div>
</a>

jQuery mobile list

I am giving my users the option to use ckEditor to build content for their mobile sites.
When adding a ordered or unordered list, if the link is the hole content of the list like:
<li>Some Link
The everything works fine.
But if the user adds something like
<li>This is the link to some site</li>
Then the list is displayed wrong.
The css puts the link in a weird position - with all the elements and tags that jquery mobile adds and its default css.
Any idea on how to solve this?
in your question the second example is invalid html, it closes the anchor tag twice and doesn'[t close the LI.
<li>This is the link to some site</a>
should be
<li>This is the link to some site</li>
Not sure if this solves your issue, but just something i noticed.
When you include <A> tags within listviews, jQM makes some assumptions about what you are trying to do and 'enhances' the link in a particular way. I think an easy way to override this and get an inline link is to surround the link in a <span>:
<li>This is <span>the link</span> to some site</li>

How to make a progressive enhancement on an HTML list with angularjs?

Let's say I'm tied to have an accessible site that will be consultated with JS disabled.
I have a news list that I can summary this way:
<ul>
<li>News 1</li>
<li>News 2</li>
<li>News 3</li>
</ul>
Everytime you reload the page, you get the most recent news added, and the old one are discarded if you got more than 10 news.
Now, If I used Angulard JS, I have to put the data in a model, and an ng-repeat, and get rid of my static HTML. The list will be populated dynamically, so people with JS will see the list updated in almost real time.
What I need is to make the two work together. I need the static list, and if JS is activated, I want the current elements to be insert in the model and manage by angularjs.
Now my current way to do it is:
when my model initialize, parthe the list DOM, extract the data manually, and remove all the child list
inject angular template code in the list
let angular do its magic
It sucks because you loose the declarative goodness of angular, plus you have a lot of boiler code is isn't even generic, so you rewrite it for every widget in you page.
It's a good question that already crossed my mind when using some js frameworks.
For the moment I would just hide the static html and display the angular DOM when javascript is enabled.
You'll need to inject the js model equivalent to the static html you generate, it's not really nice (not DRY) but trying to get initial data from DOM will be harder to maintain IMHO.
You can bundle all the javascript/templates in one js file, that way the static page will only have one script import and the page weight will not be impacted for noscript viewers.

Categories