問題タブ [jquery-tocify-js]

Tocifyを使用して、自分のサイトの一部のコンテンツの目次を作成しています。私のサイトが呼び出さwww.example.comれ、目次の要素をクリックするとします。Tocifyのデフォルトのオプションは、URLを次のように変更することです。www.example.com?elementclicked

しかし、私のサイトはwww.mysite.com/index.php?page=folder/test/ShowSite&tabid=1&site_id=87です。要素をクリックすると、URLがに変わりますwww.mysite.com?elementClicked。リンクをに変更するにはどうすればよいwww.mysite.com/index.php?page=folder/test/ShowSite&tabid=1&site_id=87?elementClickedですか？

Tocify https://github.com/gfranko/jquery.tocify.jsを使用して、サイトの一部のコンテンツに TOC を作成しています。うまく機能しますが、Tocify がコンテンツを並べ替える方法に問題がありました。それを示す最良の方法は、次の写真だと思います。

私のクエリでは、Testeoverskrift 5 は Testeoverskrift 6 の前に配置されますが (これが正しいはずです)、Tocify は Testeoverskrift を Testeoverskrift 6 の後に配置します。予想される結果は、Tocify が Testeoverskrift 5 を Testeoverskrift 9 と同じレベルで、Testeoverskrift 10 の下に配置することです。 .

私が間違っていることへの提案はありますか？

jQuery.tocify.js JavaScript プラグインを使用して、目次をプログラムで生成しています。しかし、私は少し問題を抱えています。h1プラグインの動作方法は、すべての 、h2、などのタグを引き出しh3、深さを尊重しながらネストされたリストを作成します。

私が抱えている問題はh2、長い文字列がある場合、目次の書式設定が「間違っている」ことです。特に、リスト アイテムの最初の行はネストされていますが、コンテンツは段落のように流れています。

トップレベルの見出し

二次見出し

長いタイトル

別の副見出し

概算が悪くて申し訳ありませんが、私が見ているものが得られることを願っています。

二次見出し全体を同じ深さにインデントするようにリスト項目を設定する方法はありますか?

トップレベルの見出し

二次見出し

長いタイトル

生成された目次 (長い名前) の例を次に示します。

navBootstrap から来ているように見えますnav-listが、Bootstrap3 にnav-listもうクラスがあるかどうかはわかりません。

編集: うん、プラグインは Bootstrap 3 と互換性がないようです。別のプラグインを探し回ると思います。

tocify jquery scriptを使用したいと思います。この単純なページでは、Firefox 38.0.1 では期待どおりに動作しません。

#toc div に小さな目次が表示されます。ボディ内のスキャンされたタグから生成されます。しかし、このページを Firefox でレンダリングしても何も起こりません。tocifyが生成するはずの目次なしで、「hello」と「hello2」を表示するだけです。

このhtmlコードで何か間違っていますか?

プラグインのアニメーションが終了した後に関数を実行するにはどうすればよいですか?

私はTocifyプラグインを使用しており、現在取り組んでいるプロジェクトの機能をカスタマイズしています。

自動的に生成された目次のエントリをクリックすると、 を使用してそのエントリまでスクロールし$('html, body').animate({'scrollTop', ... ます。それが終わった後、私は何かをする必要があります。

現在、私の回避策はclick、ToC アイテムのイベントにハンドラーをアタッチして、グローバル変数でターゲットを識別する変数を設定しscroll、変数の値をチェックして適切なアクションを実行するウィンドウのイベントに別のハンドラーをアタッチすることです。変数を未定義に設定します。

私の回避策のコードは次のとおりです。

これはずさんなようです。これを行うより良い方法はありますか？

Tocify が使用$('html,body').promise().done()するイベントのハンドラーで使用しようとしましたが、すぐに起動するので、アニメーションが開始する前に発生すると推測しています。click.tocify

私の回避策を含むすべてのコードを含む CodePen のページがあります: http://codepen.io/Ghodmode/pen/dGdWqV

アップデート：

以下は、わずかに優れた回避策のようです。その余分な変数は必要なく、ユーザーがスクロールするたびに起動するわけではありません。

私のテスト環境では動作しますが、その 100 ミリ秒は完全に任意です。click.tocifyイベントが最初に発生してからアニメーションが開始されるまでの時間がわかりません。一部のブラウザでは動作しない可能性があることを懸念しています。

この質問は、ハッシュ化された URL ( などmydomain.com/somepage#SomeAnchor) を取得して、固定ページ ヘッダーの下からスクロール アウトすることに関するものです。これらの URL はジャンプ ターゲットです。これは、この回答済みの質問から派生したものですが、Tripit Slate のドキュメント公開フレームワークに完全に取り組むための回答を得た人がいるかどうか疑問に思っています。

この Slate ベースのサイトは私たちのものではありませんが、私たちの苦境を示しています。

• 左側のナビゲーションからリンクをクリックすると、中央のテキスト列が選択した見出しまでスクロールします。すべては順調です。

• ただし、本文のリンクをクリックしてみてください。たとえば、 http://buddycloud.com/api#accountspush notificationから、 リンクをクリックします。まったく別の小見出しまでスクロールします。リクエストしたターゲットには実際にフォーカスがありますが、上部のナビゲーション バーの下に隠れています。（上にスクロールすると表示されます。）

左のナビゲーションリンクは、 buddycloudサイトのようにきれいに機能します。シドニシャスの 4086107 回答のおかげで、Nicolas Gallagher によって考案されたように、すべての見出しの上に目に見えない疑似要素を配置しました。CSS クラスは次のとおりです。

そして、これを見出しに適用する方法は次のとおりです。

これは、左のナビゲーションでうまく機能するものです。css-tricks から、「ページ内」のハッシュ化されたリンクに対して失敗する理由を学びました。

次のように、リンクにハッシュが含まれている場合: <a href="#section-two">Section Two</a> ...ブラウザ ウィンドウがスクロールします...その要素が完全に表示されるように、可能な限り最小の位置までスクロールします。...ブラウザ ウィンドウの上端と同じ高さになります。これは...、固定位置の先頭に留まるヘッダーの場合、非常に問題になる可能性があります。

確かに、私たちの固定トップ ナビゲーションは buddycloud のものによく似ています (私たちのものは高さ 82 ピクセルです)。そして、ページ内のハッシュ化されたリンクは、彼らのリンクと同じように、その下に隠れています。

2 つの重要な例外があります。1 つ目は、ターゲットの「ハッシュ化された」URLがアウトバウンドリンクと同じマークダウン ファイル内に存在する場合、左ナビゲーション リンクと同様に、ターゲットは固定ヘッダーの下からきれいに覗き出されます。(ソース側では、スレートはすべてのコンテンツを.mdファイルとして保存します。) これにより、問題が局所化されます。リンク ターゲットは、スレートが別のターゲットファイルにトラバースし、連結して URL を完成させる必要がある場所のみを非表示にします。.md#<SomeAnchorName>

次に、すべての「ページ内」のハッシュ化されたリンクを取得してトップ ヘッダーをクリアするハックを発見しました。これには、2 つのスパンを使用して、HTML で見出しを二重タグ付けすることが含まれます。1 つ目は、実際の見出しテキストの上にある空のダミー スパンで、スクロール動作をだまします。(上記のクラスでタグ付けされていますjumptarget。) 見出し自体に、最初のハックからの左インデントを修正するクラスで別のスパンを適用します。二重タグ付けは次のようになります。

しかし、これにより「ページ内」のハッシュ化されたリンクが明らかになりますが、左側のナビゲーションが完全に壊れてしまいます。Slate の左ナビゲーション ジェネレーターとの相互作用によりtocify、この方法でタグ付けされた見出しは次のように誤動作します: (1) 左ナビゲーションで子を非表示にします。(2) クリックすると、jumptargetクラスが上部ヘッダーの下からスクロールアウトしないようにします。(3) クリックすると、左側のナビゲーションで親が折りたたまれます。

全体として、私たちのジレンマは次のとおりです。左側のナビゲーションからのリンクを修正すると、テキスト内リンクが壊れたままになります。一方、テキスト内リンクの修正により、左側のナビゲーションの修正が壊れます。

Tripit Slate、またはtocify、または別のフレームワークでこれをグローバルに解決した人がいる場合は、ポインタに非常に感謝しています。きれいな CSS、ハックな HTML、または jivey JavaScript – 私たちはとらわれません。ありがとう！

[2016 年 7 月 13 日更新:] これはlayout.erb、永続的なヘッダーによってリンク ターゲットが非表示になるのを防ぐために、開発者が に追加したスクリプトです。すべてのリンクで機能するかどうかをテストしています。コメントをお待ちしております: