スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

[ブログパーツ] Smooth Scroll スクリプトを書いてみた

ページ内リンクの移動をスムーズにするSmooth Scroll

Javascriptのクロスブラウザの勉強がてらにページ内の移動をスムーズに行うJavascriptをSmooth Scrollのブログパーツ作りましたや、ページ内リンクをスマートにするsmoothScroll.js[to-R]を参考に作成してみました。縦だけでなく横スクロールもできるようにしてみました。

デモ

Top

Bottom

使い方、仕様

smoothscroll.jsをダウンロードして,head内でもbody内でもいいので以下のhtmlを追加してください。

<script type="text/javascript" src="smoothscroll.jsのパス"></script>

ページ内での#(ハッシュ)付きのリンクであればスクロールする仕様になっています。

例:

<div id="header">Hoge hoge hoge</div>
<a href="#header">Go to header</a>

対応ブラウザ

  • Firefox
  • Chrome
  • Opera
  • Safari
  • IE 6.0+

スピードの調節など

スクロールスピードを調整したい場合、ソースの先頭にある変数のSPEEDの数字を変えてください。数字を大きくすると遅く、小さくすると速くなります。デフォルトは10になっています。

var SPEED = 10;//大きくすると遅く、小さくすると速くなる

クリックするたびランダムにスピードをかえる。

var SPEED = Math.max(5,parseInt(Math.random() * 50));

適当にダウンロードして使ってください。

続きを読む

スポンサーサイト

Tag : javascript ブログ カスタマイズ ブログパーツ

[Fc2カスタマイズ] JavascriptでFc2独自変数使ってみる

Fc2ブログでブログのURLなどが取得できる独自変数(独自タグ)をJavascriptからつかってみたメモです。

変数に代入してみる

試しにどこでも有効な単変数を使って変数に代入してみる。

var blogUrl = '<%url>'; // http://jsfirefox.blog39.fc2.com/
var blogId  = '<%blog_id>';// jsfirefox

文字列を切り離したり、代入すると駄目みたい。

var blogUrl = '<%'+'url'+'>'; // <%url>
var blogId  = '<%'+'blog_id'+'>';// <%blog_id>
var s = 'url'
var blogUrl = '<%'+s+'>';//<%url>
s = 'blog_id';
var blogId  = '<%'+s+'>';//<%blog_id>
var blogUrl = ['<%','>'].join('url'); // <%url>
var blogId = ['<%','>'].join('blog_id'); // <%blog_id>

エントリーなど複数表示できる変数を配列に格納してみる

カテゴリの一覧を配列に格納してみる。

カテゴリの一覧を表示する変数を書き、その中でカテゴリ内で有効になる単変数を定義したオブジェクトリテラルをpushをつかって配列に追加。

var categories = [];
('<!--category-->'+ categories.push({
	no   : '<%category_no>',
	name : '<%category_name>',
	url  : '<%category_link>',
	count: '<%category_count>'
}) +'<!--/category-->');

Firebugでソースを見ると以下のようになって、pushが繰り返されてた。

var categories = [];
(''+ categories.push({
 no : '0',
 name : 'Javascript',
 url : 'http://jsfirefox.blog39.fc2.com/blog-category-0.html',
 count: '1'
}) +''+ categories.push({
 no : '1',
 name : 'FC2 カスタマイズ',
 url : 'http://jsfirefox.blog39.fc2.com/blog-category-1.html',
 count: '2'
}) +''+ categories.push({
 no : '2',
 name : 'Firefox',
 url : 'http://jsfirefox.blog39.fc2.com/blog-category-2.html',
 count: '1'
}) +''); 

ページ移動関連の変数をオブジェクトリテラルに代入してみる


/*
このエントリーで試してみる。http://jsfirefox.blog39.fc2.com/blog-entry-3.html
alert(dic.url); // http://jsfirefox.blog39.fc2.com/blog-entry-2.html
alert(dic.title); // [Firefox] Firefoxのプロファイルを取得するコード
*/
var dic = {};
var e = '<!--nextentry-->' + (dic.url = '<%nextentry_url>', dic.title = '<%nextentry_title>') + '<!--/nextentry-->';

その他、メモ

プラグイン用の変数を取ろうとするとブログの表示がおかしくなった。

エントリーの本文、要約が複数行の場合、[SyntaxError: unterminated string literal]で取得できない。

そんなんでエントリーやタグ等の情報をひとまとめにしたコードを書いてみました。

続きを読む

Tag : javascript カスタマイズ fc2 ブログ

[Firefox] Firefox4のアドオンバーに要素を追加する

アドオンバー

Firefox 4はウィンドウの下部に新しいツールバーを付けたいがためにブラウザウィンドウの下部からステータスバーを削除します。この新しいツールバーは ID "addon-bar"を持った、標準の XUL toolbar です。アドオンはこのバーにコンテンツを挿入することができますし、ユーザーはツールバーのカスタマイズにおいてボタンをアドオンバーにドラッグすることができます。このことはアドオンバーと旧ステータスバーの間の主要な相違点です。通常のツールバーですから、どんな XUL 要素でもアドオンバーに配置することができます。

注: 当分の間、ステータスバーの「くさび」 を置いておき、ステータスバーが存在することを期待するアドオンがうまく動作するようにします。これはすぐになくなりますので、あなたのアドオンをアップデートしてください!

上の記述のとおり、Firefox4になってステータスバーが削除され、アイテムのカスタマイズ可能なアドオンバー(ツールバー)になったのでちょっと遅いですが、以前のステータスバーのようにアドオンバーにアイコンをデフォルトで表示させる方法を書いておきます。

続きを読む

Tag : Firefox javascript

[FC2 ブログカスタマイズ] はてなブックマークボタン

FC2のブログにはてなブックマークボタンを取り付ける方法。

ブログに表示させる

ブログURLのボタンを表示させたい場合。
<a href="http://b.hatena.ne.jp/entry/<%url>" class="hatena-bookmark-button" data-hatena-bookmark-layout="standard" title="このエントリーをはてなブックマークに追加"><img src="http://b.st-hatena.com/images/entry-button/button-only.gif" alt="このエントリーをはてなブックマークに追加" width="20" height="20" style="border: none;" /></a><script type="text/javascript" src="http://b.st-hatena.com/js/bookmark_button.js" charset="utf-8" async="async"></script>

各記事(エントリー)に表示させる

FC2独自変数<!--topentry-->~<!--/topentry-->内で以下のHTMLタグを追加すればいい。
<a href="http://b.hatena.ne.jp/entry/<%topentry_link>" class="hatena-bookmark-button" data-hatena-bookmark-layout="standard" title="このエントリーをはてなブックマークに追加"><img src="http://b.st-hatena.com/images/entry-button/button-only.gif" alt="このエントリーをはてなブックマークに追加" width="20" height="20" style="border: none;" /></a><script type="text/javascript" src="http://b.st-hatena.com/js/bookmark_button.js" charset="utf-8" async="async"></script>

全ての記事のタイトル(archives.html、?all)に表示させる

FC2独自変数<!--titlelist-->~<!--/titlelist-->内で以下のHTMLタグを追加すればいい。
<a href="http://b.hatena.ne.jp/entry/<%titlelist_url>" class="hatena-bookmark-button" data-hatena-bookmark-layout="standard" title="このエントリーをはてなブックマークに追加"><img src="http://b.st-hatena.com/images/entry-button/button-only.gif" alt="このエントリーをはてなブックマークに追加" width="20" height="20" style="border: none;" /></a><script type="text/javascript" src="http://b.st-hatena.com/js/bookmark_button.js" charset="utf-8" async="async"></script>

ボタンの表示を整える

cssに次のコードを追加。
a.hatena-bookmark-button img, /* javascript無効時 */
iframe.hatena-bookmark-button-frame { /* javascript有効時 */
	vertical-align: middle;
}

FC2ノウハウ
プロフィール

Yamapikarya

Yamapikarya

Firefox アドオンとかを開発してます。

最新記事
最新コメント
カテゴリ
月別アーカイブ
検索フォーム
RSSリンクの表示
QRコード
QR
その他
  • あわせて読みたい
アフィリエイト
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。