gfranko / jquery.tocify.js Goto Github PK
View Code? Open in Web Editor NEWA jQuery Table of Contents plugin that can be themed with Twitter Bootstrap or jQueryUI.
Home Page: http://gregfranko.com/jquery.tocify.js/
License: MIT License
A jQuery Table of Contents plugin that can be themed with Twitter Bootstrap or jQueryUI.
Home Page: http://gregfranko.com/jquery.tocify.js/
License: MIT License
I had another issue in that this
self.hide($(".sub-header").not(elem.closest(".header").find(".sub-header")));
didn't work, as the subquery elem.closest(".header").find(".sub-header")
again returned all elements in the TOC wherefore nothing was hidden.
When I changed it to
self.hide($(".sub-header").not(elem));
it worked.
I'm trying to generate hash with hastags like "#feature-id-456".
<h2 id='feature-id-456'>Text 456</h2>
I've tried this
$(function() {
$("#toc").tocify({
hashGenerator: function(element) {
return element.getAttribute('id');
}
});
});
But it throws an error: Uncaught TypeError: Object Тесты проекта billing has no method 'getAttribute'
Also I've tried element.id
, but get error Uncaught TypeError: Cannot read property 'top' of undefined
How can I do this?
If showAndHide is set to false and one use a link with an anchor (for example http://gregfranko.com/jquery.tocify.js/#OptionsAPI ) the scrolling won't happen.
There is a specific test about it in the code:
https://github.com/gfranko/jquery.tocify.js/blob/master/src/javascripts/jquery.tocify.js#L322-L327
However I can't think of any case where this test is necessary.
Removing the condition fixes the problem.
Want to back this issue? Post a bounty on it! We accept bounties via Bountysource.
see http://jsfiddle.net/6xqKW/16/ for an example of the problem.
When you add lots of items to the menu, the bottom few items can be cut off on smaller or even average size screens, meaning you can't actually scroll to the bottom items because the menu stays fixed in position.
Here is an example:
http://www.linkbuildingbook.com/link-building-resources.html
Add an extendPageElement
option that allows a user to choose which DOM element to inject to increase the page height. Currently, the <body />
element is used and no option is given.
Want to back this issue? Post a bounty on it! We accept bounties via Bountysource.
is there anyway to exclude a class of Headers for the plugin
Hi,
another bug :) I noticed that when having a structure like
<h1>
<h3>
<h2>
<h2>
the indentation is broken. Here's the according JSBin sample.
Just a quick note, would it be possible to submit tocify to CDN.js?
Hi,
I have some documents I want to use tocify on. I'm having trouble to get tocify to use the elements I want. The document looks as follows:
div.section
h1.title This is a chapter
div.section
h2.title This is a section
div.activity
h1.title This is an activity title
div.section
h3.title This is a subsection
div.section
h2.title This is another section
In which case the toc should look like:
1. This is a chapter
1.1 This is a section
1.1.1 This is a subsection
1.2 This is another section
and the div.activity > h1 should be ignored.
I've tried to use the selectors option in various ways e.g.
selectors : "div.section>h1.title, div.section>h2.title, div.section>h3.title"
and
selectors : "h1#toc-id-0,h2#toc-id-1,h3#toc-id-2,h3#toc-id-3,h2#toc-id-4,h3#toc-id-5,h2#toc-id-6"
but it won't give the correct ToC. Can tocify do what I want? If not can you give me some pointers as to what I can do to add this functionality and send a pull request?
If a user quickly scrolls to the top of the page, Tocify occasionally does not recognize that the first TOC item should be the current item.
Hi, I've noticed that when opening a section from the sidebar where the page should be extended (see http://gregfranko.com/jquery.tocify.js/ and click on donation on the toc) the page is extended only when you click for the second time "Donation" and the same happens when you open the page with an hash in the url (http://gregfranko.com/jquery.tocify.js/#Donation)
Thanks for your work on Tocify, it's been as extremely helpful tool.
I've noticed when I add selectors (ex. h2,h3,h4,h5) that the highest level must be present for Tocify to create the list. When I create a page, I obviously prefer for the headings to be organized properly....however when I turn the project over to the end user, they may (incorrectly) start the page off with h4. Currently if that happens Tocify will hide completely when I have h2 set as the first selector. Is there anything I can do on my end to prevent that, or is this unexpected behavior?
Want to back this issue? Post a bounty on it! We accept bounties via Bountysource.
Hi, thank you for a nice plugin!
I'm getting this error:
"Uncaught Error: Syntax error, unrecognized expression: div[data-unique=B.5CodeTable(TEST_MEDIUM)]"
This happens in http://localhost/scripts/jquery-1.8.3.js on line 4680.
(But I'm assuming tocify attached the failing event or?)
When I scroll to the bottom of the page. (my last h1 is "B.5CodeTable(TEST_MEDIUM)")
Tried to reproduce on jsbin, but didn't manage, sorry.
Let me know if this isn't enough and I'll give reproducing it online another shot.
Edit: If I comment out this line(634), everything works fine:
self._scrollTo($("div[data-unique=" + currentElem.attr("data-unique") + "]"));
Hey!
It seems the show/hide behaviors fails with nested selectors & scroll. If I use this structure:
level 1
level 1.1
level 1.1.1
level 1.1.2
level 1.2
level 1.2.1
level 1.2.2
level 1.3
level 1.3.1
level 1.3.2
When I scroll to the level 1, the lib works fine but when I scroll to the level 1.1, the level 1.2 and 1.3 show. It is the same if I scroll to level 1.2 or 1.3.
If I scroll to the level 1.1.1 the level 1.2 and 1.3 hide.
Thanks for reading :)
For e.g., an element named "Is this a question?" generates a hash value of "#Isthisaquestion?". however, when window.locaiton.hash is set to this value, Chrome, Firefox, and Safari seem to be dropping the hash thereby mangling the URL. The fix (which I'm hoping to push and request a PR is to strip out all non-alpha-numeric from the element in the generateHashValue function.
I've written test code to show the issue that I'm seeing:
https://github.com/joaquincasares/jquery.tocify.js/tree/Issue-20/Issue-20
To reproduce the issue:
Click on the second header,
Refresh the page,
Scroll down until the last line of text can be seen,
Issue: the page jumps back to the second header.
Tested in Chrome, Safari, and Firefox.
Other than that, it looks and acts amazingly! Thanks!
The HTML generated by this plugin is not W3C compliant.
There are 2 issues:
Want to back this issue? Post a bounty on it! We accept bounties via Bountysource.
When there is a #
in the URL on page load, we expect the navigation to jump to that position.
On that page, since #Security
appears in the URL, it should jump down to the Security section.
Tested in:
Hey! There is a small issue with the show/hide behaviors. Take this structure:
level 1
level 1.1
level 1.1.1
level 1.1.2
level 1.2
level 1.2.1
level 1.2.2
level 1.3
level 1.3.1
level 1.3.2
level 2
When I am on the level 2 and then, scroll to top, the level 1.1, 1.2 & 1.3 show.
Right now, when you scroll, the stuff after the #
in the page's header doesn't change. It only changes when you click on a link in the ToC.
The option to set that automatically as you scroll would be a really nice feature — that way, on a long document, users can just copy the URL for that exact part of the page without worrying about clicking on the ToC first.
Awesome plugin by the way! Loving it!
Your plugin is very useful, but I have a suggestion for a feature.
When we make a responsive navbar, the navbar menu turns into a button on small devices, like shown in this video, for instance.
http://www.youtube.com/watch?v=qpWlaOeGZ_4
It would be cool if the data-target attribute for the button could refer to the generated tocify ul navlist (and equivalent for the Bootstrap 3 version).
Then we could use default Tocify menu for large screens and the button for small devices. That would be marvelous.
I guess this is a challenge, but I hope you like that!
Want to back this issue? Post a bounty on it! We accept bounties via Bountysource.
This is usefull in situations where scrollTo is not constant.
I've got some html code from another system I have to render.
The html code has a certain structure which tocify can apparently not correctly analyse. Only the first heading is rendered in the toc. In the case I want tocify h1,h2,h3 I only see "Section 1 - H1" in the toc.
The problem seems to be that the headings are inside of a-tags.
<article>
<section>
<a name="section1_h1">
<h1>Section 1 - H1</h1>
</a>
<section>
<a name="section11_h2">
<h2>Section 1.1 - H2</h2>
</a>
<section>
<a name="secton1_h3">
<h3>Section 1.1.1 - H3</h3>
</a>
</section>
</section>
</section>
</article>
If I put the a-tags inside the headings everything's fine. But changing the html is out of my scope :-(
Is there a fix or workaround for this issue?
Thanks!
Hi,
I've been trying to get each click in the Tocify TOC to register as an event in Google Analytics but to no avail.
I've tried adding:
_gaq.push(['_setAllowAnchor', true]);
to the GA script block but it doesn't seem to make any difference.
I wonder if anybody knows how to do this.
Many thanks, Pete.
Hello!
I'm testing the default.html included in 'demos' folder in this zip download.
I modified that file adding some "h2".
I found that the scroll doesn't work with the TOC when it is larger than the page height.
I don't know if I'm doing something wrong or if I have to change some option. I'm having 'extendPage: true' and 'extendPageOffset: true'.
Can you help me?
Thank you so much!
Maybe its not considered semantically meaningful to have something like the following
<h1>Level 1 header</h1>
<h3>Level 3 header</h3>
But tocify
fails with error
Uncaught TypeError: Cannot read property 'top' of undefined, jquery.tocify.js:564
See this demonstration.
Hello there. Would it be possible to have the option to add a link to the bottom of the contents list which navigates to the top of the webpage.
I know the user can click on the top contents item, but this doesn't take them to the very top of the web page, and also visitors are very used to seeing, and using, "Go back to top" links?
Thanks very much!
Want to back this issue? Post a bounty on it! We accept bounties via Bountysource.
Open this page http://gregfranko.com/jquery.tocify.js/#BrowserSupport
The page scrolls down but not exacly to #BrowserSupport but a bit over, at least using Chrome
Why doesn't Tocify stay its assigned div? When I do the following it floats instead of staying in the div.
<div class="container">
<div class="row">
<div class="span3">
<div id="toc"></div>
</div>
<div class="span9">
</div>
</div>
</div>
Currently Tocify removes whitespace from headings in order to generate the hash values (i.e. the bookmark after the #
in the URL), which is sensible. So "Tell me About It" becomes #TellmeAboutIt
.
What if it replaced the spaces with hyphens -
and made it all lowercase, so you would end up with #tell-me-about-it
.
Pros:
Cons:
Tried this:
var toc = $("#toc").tocify({ selectors: "h1,h2,h3,h4,h5" }).data("toc-tocify");
Now only the first h1 header and its child shows up in the toc.
When you have bootstrap with a navbar list and one element in this navbar is active (has 'active' class) tocify reset (remove) this class at init.
<nav class="navbar">
<div class="navbar-inner">
<div class="container">
<ul class="nav">
<li><a href="/alatriste/1">One</a></li>
<li class="active"><a href="/alatriste/2">Two</li>
<li><a href="/alatriste/3">Three</li>
</ul>
</div>
</div>
</nav>
Hi,
Thanks you for brilliant piece of work that the tocify plugin is. Also very impressed by the annotated source code.
The generated markup includes classes from the bootstrap docs.css file. Specifically bs-docs-side-bar for the "toc" container and bs-docs-side-nav for each toc item.
When the table of contents is rendered with these classes included, it looks very different from the original demo.
Thanks again,
Using Google Chrome:
Notice that the address bar updates, but the view of the page does not.
Want to back this issue? Post a bounty on it! We accept bounties via Bountysource.
Hello,
You can observe this error in the wild by going to the following URL and observing - http://dev.mendeley.com/slate/
It seems having the same text more than once on the same page will result in undesirable URLs.
It would be desirable to be able to provide a desired URL or at least include the main resource and sub resource together in the final URL.
With the "currently" newest version of jQuery 1.9.0 the jQuery.browser option which was deprecated has been removed. This causes errors when scrolling and seems to break the "scroll spy" feature.
Error:
Uncaught TypeError: Cannot read property 'webkit' of undefined jquery.tocify.js:455
Hey!
I just updated the theme of a project which uses your lib & it seems the nested toc elements are not hidden properly if the toc is not visible.
My theme hides by default the toc & allows to show it by clicking on a button.
I have created a jsbin to reproduce the issue.
This is related to issue number #36
I figured I'd start a new issue since the other one is "Old" and my comments there might be missed.
I was going to do a write up on what type of structure tocify expects and it turns out there's already an official spec for the algorithm that determines the document outline. The mozilla article sort of hints at it, but this makes it a lot more clear:
http://coding.smashingmagazine.com/2011/08/16/html5-and-the-document-outlining-algorithm/
http://developers.whatwg.org/sections.html#headings-and-sections
Do you think it's good enough to just reference this material?
Allow users to refresh/destroy the TOC after initialization. This will go out very soon in the next release.
Want to back this issue? Post a bounty on it! We accept bounties via Bountysource.
Hey! First, thanks for your jQuery plugin! :)
I'm currently trying to integrate your lib into a build-in Sphinx documentation. All works fine except for nested selectors.
The context use by the plugin follow this structure:
<div id="context">
<h1>First level title</h1>
<div>
<h2>Second level title</h2>
<div>
<h3>Third level title</h3>
</div>
<h2>Second level title</h2>
<div>
<h3>Third level title</h3>
</div>
</div>
<h1>First level title</h1>
<div>
<h2>Second level title</h2>
<div>
<h3>Third level title</h3>
</div>
</div>
</div>
The javascript use in order to tocify the context is:
$(selector).tocify({
"context": "#context",
"selectors": "h1,h2,h3"
});
The TOC only shows h1.
It seems selectors are defined on the same level in the demo. I don't know if it is the reason of the issue. Anyway, is there a solution?
Bootstrap 3 has some marvelous features that makes it the Bootstrap version to use for our web projects. Your Tocify plugin is marvelous as well, but it is not working on Bootstrap 3.
It would be wonderful if your plugin could be updated to the new Bootstrap version.
Want to back this issue? Post a bounty on it! We accept bounties via Bountysource.
3rd level nesting appears to be broken with the latest update.
Given the validating HTML that exists here: http://microcosm-cc.github.io/
And using Chrome v26 stable and Firefox v20 stable.
When one expands the Conventions ToC entry: http://microcosm-cc.github.io/#Conventions
The Conventions menu contains entries to /microcosms, /conversations, /events, etc... all of which exist in the API Reference section.
When one expands the API Reference ToC entry: http://microcosm-cc.github.io/#APIReference
All of the menu items render correctly.
However, when you click on /conversations http://microcosm-cc.github.io/#/conversations
The /site and /microcosms menu entries in the ToC below API Reference are removed. This is also true of each subsequent child menu in the ToC below API Reference, i.e. clicking /events removes the menu items preceding it.
The HTML shows that all of the /item links exist in the API Reference section only.
This updated version feels more broken than the prior version. Am happy to make a PayPal donation of £50 to sponsor a fix that allows the 4 level menu to work as expected (let me know your PayPal).
I'm using tocify with Wordpress, and noticed that the page title that Wordpress renders is causing a bug with the TOC.
In order for the other headings to get rendered and displayed properly, I need to add another H1 to the top of the page...which isn't really ideal. If I don't add a second h1 tag, only the page title will display in the table of contents.
Has anyone else encountered this and/or have a workaround?
For what it's worth I'm using the Roots theme.
Having the option to have the first TOC entry be marked as active
, by default, would be a great addition.
Ideally, this would occur when a fresh webpage is first loaded, without an anchor tag location.
This issue can also be seen via the example in:
https://github.com/joaquincasares/jquery.tocify.js/tree/Issue-20/Issue-20
There are two symptoms of a problem with highlighting:
When scrolling larger pages really fast, sometimes the highlighting is not updated due to events being skipped. This is because for some reason we never get a position within the offset, so the update is skipped entirely (line 622)
javascript
if ((Math.abs($(this).offset().top - winScrollTop) < self.options.highlightOffset))
#### Highlight wrong item after clicking in toc
Sometimes, based on the structure of the page, another item is highlighted in the TOC, because after scrolling tocify consider an item on top within the highlightOffset. However, the item below is closer, so should be highlighted instead of the first item within the highlightOffset.
#### Proposed solution
Instead of the first element within the highlightOffset, use the one closest to the current position. I've made this improvement in a fork and will create a pull request.
It seems that if the table of contents is longer than the height of the page, it will have a scrollbar, so that works! But sometimes you'll scroll down on the main page, and the currently selected ToC item will be outside of the visible part of the ToC...it's still there, it's just hidden because the ToC div is scrolled above it. This means that sometimes you'll scroll down a ways and suddenly there will be no visibly selected ToC item, which can be confusing.
Dropbox has a solution: with Dropbox's API docs on a smallish browser window, if you scroll way down you can see that the scrolling table of contents on the left scrolls so that the currently active item is always visible when it is scrolled to.
If you'd like, I can make a small example that demonstrates the issue.
So yea, an option that automatically scrolls the table of contents (when necessary) so that a newly activated ToC item is always visible would be awesome!
Thanks again for the awesome plugin!
Want to back this issue? Post a bounty on it! We accept bounties via Bountysource.
For the given HTML:
<h1>Depth 1</h1>
<h2>Depth 2</h2>
<h3>Depth 3</h3>
<h4>Depth 4</h4>
<h5>Depth 5</h5>
<h3>Depth 3</h3>
<h2>Depth 2</h2>
And ToCify configured thus:
var toc = $("#toc").tocify({ selectors: "h2, h3, h4, h5" }).data("toc-tocify");
The generated menu will incorrectly nest the second Depth 3 as a sibling to Depth 4, rather than as a sibling to Depth 3.
I believe in the unminised code the bug is on line 411, but I don't know how to fix it.
Hi,
I love the Tocify plugin but would also love to see a filter option. Something along the lines of http://sebastien-roch.github.io/collapsible-list/demo.html
Is this possible?
I'd be happy to make a donation to have this functionality.
Many thanks, Peter.
Want to back this issue? Post a bounty on it! We accept bounties via Bountysource.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.