Home › Forums › JavaScript › Jquery/Javascript TOC don't run
- This topic is empty.
-
AuthorPosts
-
February 10, 2014 at 5:54 am #162341
lucsar
ParticipantHi 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 #162342Paulie_D
MemberSeems to work in Codepen: http://codepen.io/Paulie-D/pen/zbxnu
February 10, 2014 at 6:10 am #162345lucsar
ParticipantYes, 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 #162351nkrisc
ParticipantI don’t think it should matter, but could it be the line breaks for some reason?
February 10, 2014 at 8:40 am #162356lucsar
ParticipantCan 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.
-
AuthorPosts
- The forum ‘JavaScript’ is closed to new topics and replies.