Groups | Search | Server Info | Keyboard shortcuts | Login | Register [http] [https] [nntp] [nntps]

Groups > comp.lang.javascript > #23102 > unrolled thread

Jquery/Javascript TOC

Back to article view | Back to comp.lang.javascript

Contents

  Jquery/Javascript TOC luca.saracino@gmail.com - 2014-02-15 14:56 -0800
    Re: Jquery/Javascript TOC Thomas 'PointedEars' Lahn <PointedEars@web.de> - 2014-02-16 03:04 +0100
    Re: Jquery/Javascript TOC Hans-Georg Michna <hans-georgNoEmailPlease@michna.com> - 2014-02-16 18:59 +0100
      Re: Jquery/Javascript TOC luca.saracino@gmail.com - 2014-02-16 10:52 -0800

#23102 — Jquery/Javascript TOC

Hi, I'm trying to put in place a nice Javascript/jQuery plugin index within a wordpress page:
http://css-tricks.com/automatic-table-of-contents/

No way for me to make this working! I get these errors:
Mozilla console: SyntaxError: missing ; before statement
Chrome console: Uncaught SyntaxError: Unexpected identifier

var ToC =
  '<nav role='navigation' class='table-of-contents'>' +
-> error here <------------
....

someone suggest to modify by this but same results:
'<nav role="navigation" class="table-of-contents">' +

Also checked with vim if any hidden or special characters in my html but the only one found were normal carriage return symbolized with "$" character.

Have tried same code copied and pasted roughly from the tutorial above and works nicely here:
http://jsfiddle.net/zEvJ5/ and here http://codepen.io/chriscoyier/pen/EnLwb

many "mini" jQuery plugs works fine like this one:
<script>
$(document).ready(function(){
  $("p").click(function(){
    $(this).hide();
  });
});
</script>

Don't really know what's wrong! If anyone can makes this working, I would be really curious to know how has it done!

[toc] | [next] | [standalone]

#23104

luca.saracino@gmail.com wrote:

> Hi, I'm trying to put in place a nice Javascript/jQuery plugin index
> within a wordpress page:
> http://css-tricks.com/automatic-table-of-contents/
> 
> No way for me to make this working! I get these errors:
> Mozilla console: SyntaxError: missing ; before statement
> Chrome console: Uncaught SyntaxError: Unexpected identifier
> 
> var ToC =
>   '<nav role='navigation' class='table-of-contents'>' +
> -> error here <------------
> ....

Actually, the syntax error is after the second apostrophe already.  You must 
not use the apostrophe both for the script string delimiter and the 
attribute value delimiter, at least not an unescaped attribute delimiter: 
the script engine will consider the string literal to have ended where your 
attribute value begins.  Likewise for double-quotes.

> someone suggest to modify by this but same results:
> '<nav role="navigation" class="table-of-contents">' +

Exactly.  However, depending on what precedes this code and what follows the 
plus operator (which means string concatenation here), the program could 
still be syntactically in error.
 
> Also checked with vim if any hidden or special characters in my html but
> the only one found were normal carriage return symbolized with "$"
> character.

Last I checked, Vim did not use “$” to represent <CR>, but a differently 
(blue, as compared to the default light-gray) colored “^M”.  Your Vim might 
be configured to mark the end of a line with “$”; that is a different thing.

> Have tried same code copied and pasted roughly from the tutorial above and
> works nicely here: http://jsfiddle.net/zEvJ5/ and here
> http://codepen.io/chriscoyier/pen/EnLwb

Well, the programs presented there are not syntactically in error.  Also, 
the example uses double-quotes as string delimiter and apostrophes as 
attribute delimiter, which might be significant (depending on how cluelessly 
the generator was programmed).

That said, it is of course a stupid idea to have the table of contents of a 
document generated dynamically *client-side*: what about search engines, 
what about users in whose user agents the script is not executed for various 
reasons?

> many "mini" jQuery plugs works fine like this one:
> <script>
> $(document).ready(function(){
>   $("p").click(function(){
>     $(this).hide();
>   });
> });
> </script>
> 
> Don't really know what's wrong! If anyone can makes this working, I would
> be really curious to know how has it done!

Struggling with basic ECMAScript syntax already, you should refrain from 
using libraries until you have gotten a minimum clue about the programming 
languages you are using.  That said, you should avoid jQuery anyway.

-- 
PointedEars

Twitter: @PointedEars2
Please do not Cc: me. / Bitte keine Kopien per E-Mail.

[toc] | [prev] | [next] | [standalone]

#23112

There is absolutely nothing in a table of contents that could
benefit from jQuery. You could instead use this ready-made TOC
Javascript program:

<script src="http://winhlp.com/jstoc.js"></script>

Just insert this line in your page. If it does not work
properly, you may have to add a little HTML code to direct the
TOC to the right place. Read http://winhlp.com/node/682 for
details.

On a high-traffic page I would appreciate if you copied the
jstoc.js file to your server and called it from there.

Hans-Georg

[toc] | [prev] | [next] | [standalone]

#23113

That's definitively the best! Many thanks for the tip ;)

Sure, script will be placed and referenced from the server side.

Cheers,
LS
On Sunday, February 16, 2014 6:59:24 PM UTC+1, Hans-Georg Michna wrote:
> There is absolutely nothing in a table of contents that could
> 
> benefit from jQuery. You could instead use this ready-made TOC
> 
> Javascript program:
> 
> 
> 
> <script src="http://winhlp.com/jstoc.js"></script>
> 
> 
> 
> Just insert this line in your page. If it does not work
> 
> properly, you may have to add a little HTML code to direct the
> 
> TOC to the right place. Read http://winhlp.com/node/682 for
> 
> details.
> 
> 
> 
> On a high-traffic page I would appreciate if you copied the
> 
> jstoc.js file to your server and called it from there.
> 
> 
> 
> Hans-Georg

[toc] | [prev] | [standalone]

Back to top | Article view | comp.lang.javascript

csiph-web