We Keep Coding

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

CKEditor: I want to disallow <ul> tag in WYSWYG editor

I have used the allowedContent=true that stops the HTML cleanup. But now I got stuck with other issue.
Issue is, when I enter the some text like <li> test text </li> in source and after I click source and again click source now the text changing to <ul><li> test text <\li><\ul>. It's adding ul tag. So I will want to disallow this. Can you advise.
Thanks in advance.

There's no configuration option which would allow such thing because CKEditor must produce valid HTML and the <ul> tag is requires in this case.

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>

Recommendation for mass abundance file management

I have a photographer client who has 10,000 + photo files ( jpegs ) on their site. When on the site viewing the photographs, you have to click EACH one individually and X out of it when done viewing. Another words, no lightbox that allows scrolling through the photos.
I am searching for a method or recommendation on how to "drop"/transfer/convert the existing jpeg files into a lightbox environment with out having to hand type each file indivually and place in the html structure.
Here is an example of one of his pages. You will see all the photos displayed as thumbnails. Click one and then it opens it in a lightbox. I would be open to be able to add a scroll function to the existing light box if possible
Thanks in advance.

My recommendation: Batch name all the files to some sort of pattern, like "Pic1, Pic2, Pic3" - something that can be accesed programmatically. Use your server-side language (if you're using one) to fetch the first 15 or so pictures and send them back. jQuery can then use the first 15 or so in the lightbox or whatever, and when you get past the first 15, make an Ajax call to call the next 15, etc.

You might be able to drop in a lightbox like prettyphoto and use jquery selectors to target your image links. And like tskuzzy said, if you want to be able to cycle through them from within the lightbox, you'll have to do a search and replace to add a rel attribute.
It might help if you describe how the page is currently built or have a link to it.

Depending on the structure of the current page, you could likely just do a smart find and replace. If it's a little more complicated, you could write a simple script to do the conversion for you.
EDIT:
Let's say you're current code is something along the lines of:
<ul>
<li><a class="showimage" href="pic1.jpg"><img src="pic1thumb.jpg" /></a></li>
<li><a class="showimage" href="pic2.jpg"><img src="pic2thumb.jpg" /></a></li>
</ul>
To put it into a lightbox environment, you'll want it to be in this format:
<ul>
<li><a rel="lightbox" href="pic1.jpg"><img src="pic1thumb.jpg" /></a></li>
<li><a rel="lightbox" href="pic1.jpg"><img src="pic1thumb.jpg" /></a></li>
</ul>
Then you'll need to find:
class="showimage"
and replace it with
rel="lightbox"
I hope that explains it. You'll have to post a snippet of your current code/html if you want a more specific answer tailored to your needs.

it seems that your friend created his own static html website for his portfolio. I would suggest, if your friend cannot afford a custom dynamic website (PHP, asp.net, jsp), he should subscribe to any blogging site that already has these management tools available.

Can't nest links in html5?

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)