Jquery/Javascript TOC don't run - CSS-Tricks

This topic is empty.

Viewing 5 posts - 1 through 5 (of 5 total)

Author

Posts

February 10, 2014 at 5:54 am #162341

Participant

Hi all,

I’m trying to put in place a simple table of content (https://css-tricks.com/automatic-table-of-contents/) but I cannot make it to run!

I’ve tested on both local page and on live page. The only differences are the errors showed in chrome and Mozilla console when in live with wordpress: – Mozilla: SyntaxError: missing ; before statement – Chrome: Uncaught SyntaxError: Unexpected identifier

Locally, no errors are showed but nothing happen, just the body content is displayed. I’ve tested other jQuery plugs and they works fine. Do not really understand what’s wrong with this one.

I report a simple and basic html page on which I’m testing on:

<!DOCTYPE html>
<html>
<head>
<title>jQuery script that doesn't work!!!</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js">
</script>
<script type="text/javascript">

var ToC = "<nav role='navigation' class='table-of-contents'>" +

------------> error here <------------------

"<h2>On this page:</h2>" +
"<ul>";

var newLine, el, title, link;

$("article h3").each(function() {

el = $(this);
title = el.text();
link = "#" + el.attr("id");

newLine =
"<li>" +
"<a href='" + link + "'>" +title +
"</a>" +
"</li>";

ToC += newLine;

});

ToC +=
"</ul>" +
"</nav>";

$(".all-questions").prepend(ToC);
</script>
</head>
<body>

<article>
<h1>Documentation</h1>

<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p> 

<div class="all-questions">

<h3 id="one">How do you smurf a murf?</h3>

<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p> 

<h3 id="two">How do many licks does a giraffe?</h3>

<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p> 

.... 

</div>

</article>

</body>

</html>

Thanks for help LS

February 10, 2014 at 6:04 am #162342

Paulie_D

Member

Seems to work in Codepen: http://codepen.io/Paulie-D/pen/zbxnu

February 10, 2014 at 6:10 am #162345

lucsar

Participant

Yes, and on jsfiddle also: http://jsfiddle.net/zEvJ5/

They probably parse the code in different ways or whatever, don’t know.

Very enigmatic…

February 10, 2014 at 7:59 am #162351

nkrisc

Participant

I don’t think it should matter, but could it be the line breaks for some reason?

February 10, 2014 at 8:40 am #162356

lucsar

Participant

Can someone try to copy/paste the code above as it is and test it for its own? Would be very curious to see what happen.

For lines break detection, I use kate under linux and it doesn’t show me any kind of special or hidden characters, but have to try with other editor to check that.

Author

Posts

Viewing 5 posts - 1 through 5 (of 5 total)

The forum ‘JavaScript’ is closed to new topics and replies.