タグ

JavaScriptとJavascriptに関するkaeru333のブックマーク (122)

  • あるSEのつぶやき: HTML5.JPのJavaScriptグラフライブラリがすばらしい

    HTML5.JPのJavaScriptグラフライブラリがすばらしいです。 表示できる項目数は10個に限定されているものの、JavaScriptでこれだけキレイなグラフを表示できて、日語も問題ないというのは非常にいいです。使い方も簡単ですし。 ライセンスは Apache License, Version 2.0 になっています。 (2007.10.29追記) このライブラリのグラフ描画は、Canvasを使用しています。IEにはCanvasがないので、ExplorerCanvasが同梱されています。 あと、はてブコメントにて、テキストを大きくするとレイアウトが崩れるとの情報をいただきました。id:vantguardeさん、情報ありがとうございます。 ■棒グラフ(垂直) 棒グラフ(垂直)(HTML5.JP) ↓FireFox2.0で表示 ↓IE7で表示 - IEだとグラデーションが消える模様

  • CSS レイアウト切り替えスイッチ | WWW WATCH

    Web サイトのレイアウトに関しては、横幅を固定した固定レイアウト、ブラウザのウィンドウサイズと連動するリキッドレイアウト、文字サイズと連動するエラスティックレ... Web サイトのレイアウトに関しては、横幅を固定した固定レイアウト、ブラウザのウィンドウサイズと連動するリキッドレイアウト、文字サイズと連動するエラスティックレイアウトの 3種類がよく使われますが、どのレイアウトが一番文章が読みやすかったり、利便性が高いのかって考えたときに、当然好みは人それぞれ。 じゃあ、その人の好みで、3つのレイアウトを切り替えられるようにしたらいいじゃんということで、そんな CSS 切り替えスイッチを作ってみました。 サンプルはこちらで確認できます 全ファイルのダウンロードはこちら (zip ファイル / 10KB) デフォルトでは横幅固定のレイアウトになっています。スイッチを押すたびにレイアウトが選択

    CSS レイアウト切り替えスイッチ | WWW WATCH
    kaeru333
    kaeru333 2007/10/22
    面白そう・・・。 やってみたいけどなぁ〜
  • 超簡単に画像にlightbox効果を与えられる『jQuery lightBox plugin』 | CREAMU

    画像をクリックすると拡大してポップアップするデザインにしたい。 そんなあなたにおすすめなのが、『jQuery lightBox plugin』。超簡単に画像にlightbox効果を与えられるjavascriptだ。 『jQuery lightBox plugin』は、とてもシンプル。 <div id=”gallery”></div>といったタグで囲み、その中にimgタグを入れるだけで簡単にlightboxを実装できる。画像一つ一つにclassを割り当てたりする必要がなくていい。 また、カスタマイズも可能で、背景色を白以外に変えたり、透過度を変更したりすることができる。 サイトやブログのデザインを一歩前に進めるのに使えるのではないだろうか。 超簡単に画像にlightbox効果を与えられるjavascript、チェックして使っていきたいですね。 を買いました。斉藤和義の初めてのな気がする。

  • マウスオーバでテーブルのセルをアクティブ状態にするjavascript『Tablecloth』 – creamu

    テーブルのユーザビリティを上げたい。 そんなあなたにおすすめなのが、『Tablecloth』。マウスオーバでテーブルのセルをアクティブ状態にするjavascriptだ。 シンプルなコードを2行追加するだけで、ユーザを魅了するテーブルを作ることができる。 ↑の画像のように、マウスオーバでセルの行と列の背景色が変化する。どのセルが選択状態かがとてもわかりやすい。セルをクリックすると、背景色がより濃い色に変化する。 「Tablecloth」というネーミングもいい。ユーザビリティを上げるために使えるのではないだろうか。 マウスオーバでテーブルのセルをアクティブ状態にするjavascript、チェックして使っていきたいですね。 iPod touchを見てきました。かなりかっこいいけど、音楽を聞くのがメインだからどうしようかな。インターフェースを楽しむ分にはいいんだけど容量が少ないしなーって今日買った

  • 無料のアイコン配布サイト50を書いたデザイナー向けのブログ『DezinerFolio』*ホームページを作る人のネタ帳

    いやーすごい。 海外では、たまにこういうごついまとめを見かけますが、当にすごいですね。 見ているだけでもちょっと素敵な気分にさせてくれます。 今回は、無料で使えるアイコンサイト50のほか、この投稿をしてくれたブログについてご紹介いたします。 無料アイコン配布サイト50エントリ 無料で使えるアイコンサイト50はこちら » Top 50 Supercool Free Icon Sets 今回ご紹介したサイト。 『DezinerFolio』というサイト。 既に見たことはあると思いますが、もしもまだ見た事が無いなら、WEBデザイナーさんなら一度は見ておいたほうがいいブログです。 例えば、次のようなエントリーなど、すごく参考になるところがあります。 3D Design Inspiration この記事は、人工的に作られた画像をまとめたエントリー。 リンク先には、もっと沢山の画像がありますので、参考

    無料のアイコン配布サイト50を書いたデザイナー向けのブログ『DezinerFolio』*ホームページを作る人のネタ帳
    kaeru333
    kaeru333 2007/10/04
    あとで・・・・・
  • LightBox風にコンテンツを表示するModalbox

    LightBox風にコンテンツを表示するModalbox ModalboxはLightBox風にコンテンツを表示するjavascriptライブラリになります。 Modalboxを使えば画面遷移することなく、コンテンツを表示する事が可能です。 設定方法 Modalboxはprototype.jsとscriptaculous.jsを利用しています。 ダウンロードしたprototype.jsとscriptaculous.js、そしてmodalbox.jsをhead要素などで読み込みます。 <script type="text/javascript" src="lib/prototype.js"></script> <script type="text/javascript" src="lib/scriptaculous.js"></script> <script type="text/javas

    LightBox風にコンテンツを表示するModalbox
  • 画像に鏡面効果を与えるreflection.js[to-R]

    画像に鏡面効果を与えるreflection.js reulection.jsは画像に鏡面効果を与えるjsライブラリになります。 このライブラリを使用すれば、画像を加工することなく画像の下に鏡に反射したようなエフェクトが追加されます。 設置方法 ダウンロードしたreulection.jsをhead要素などで読み込みます。 <script tyle="text/javascript" src="./reflection.js"><script> エフェクトを追加したい画像のclass名にreflectを設置します。 <img src="[画像]" alt="" class="reflect" /> これだけで鏡面効果が与えられます。 サンプル 初期段階で画像が作るのが困難な場合や、背景が設定されている場合はこのライブラリを使えば効率的に作業ができるでしょう。 rheight20~80のクラス名

    画像に鏡面効果を与えるreflection.js[to-R]
  • [JS]ページをめくったような効果を出すスクリプト -curl.js | コリス

    curl.jsは、先日エントリーした「画像に鏡面効果を与えるスクリプト」と同じ作者が作成した、画像にページをめくったような効果を出すスクリプトです。 curl.js (with IE 6/7 support) 画像にページをめくったような効果を与えるには、curl.jsを外部スクリプトとして記述し、画像にclass指定をします。 classには、デフォルトの「curl」、サイズ変更ができる「isize」、色を変更できる「icolor」、影をつける「ishadow」があり、数値を入れ微調整をすることも可能です。 マウスのホバーやクリックなどのアクションにも対応しており、その場合は「cvi_curl_lib.js」を使用します。

  • ロールオーバーを簡単に実装する-Image Rollover Code-

    ロールオーバーを簡単に実装する-Image Rollover Code- Image Rollover Codeはロールーオーバーを簡単に実装する為のjsライブラリです。 設置方法 配布元のDaniel Nolanのサイトよりrollover.jsを取得し、head要素内などで読み込みます。 <script src="rollover.js" type="text/javascript"></script> ロールオーバーを実装したいimg要素のclass名に『imgover』を指定します。 <img src="sample.jpg" alt="Some Image" class="imgover" /> すでに、他のclass名がつけられている場合は、半角スペース区切りで指定することにより複数のclass名を指定する事が可能です。 <img src="sample.jpg" alt="S

    ロールオーバーを簡単に実装する-Image Rollover Code-
    kaeru333
    kaeru333 2007/09/13
    これなら簡単にできそうです。 で、どこでしようかな・・・・・
  • WingMemo: 新着エントリ・カテゴリ等に一定期間new表示をする

    カスタマイズカテゴリ再編成に伴い、一定期間新着表示をするjavascriptを取り入れてみたので覚え書きしておきます。javascriptjavascript無効の環境では表示されないというデメリットがありますが、new表示くらいなら表示されなくても別に問題ないし、何より静的・動的を問わず手軽に導入できるのがいいところです。 以下のサイト様よりお借りしたスクリプトをMT用にアレンジして使ってみました。ありがとうございました。 OpenSpace 一定期間だけNEWの文字を表示する ■スクリプトの設置 ●テキスト表示の場合 以下のスクリプトを<head>~</head>内に貼り付けます。 赤字の部分を自分の設定に合わせて書き換えます。数字は表示させる日数、new! 部分が表示される新着マークになります。 <script type="text/javascript"> <!-- functi

  • [JS]mootools.jsを使用した気持ちいい動きをする画像ギャラリー

    aaronbirchphotography 実装方法は、下記ページにて紹介されています。 mootools gallery with XML parser Image Menu 使用しているスクリプトは、下記になります。 mootools.js lightboxは、有名なlightbox.jsではなく、slimbox.jsをベースに開発したMITライセンスのスクリプトです。

  • http://youmos.com/news/cooltips

    kaeru333
    kaeru333 2007/08/28
    よし
  • http://javascript.maxux.com/

  • youmos.com - このウェブサイトは販売用です! - youmos リソースおよび情報

    This webpage was generated by the domain owner using Sedo Domain Parking. Disclaimer: Sedo maintains no relationship with third party advertisers. Reference to any specific service or trade mark is not controlled by Sedo nor does it constitute or imply its association, endorsement or recommendation.

  • GeneralSurf.com is for sale | HugeDomains

    Make 12 monthly payments Pay 0% interest Start using the domain today. See details

    GeneralSurf.com is for sale | HugeDomains
    kaeru333
    kaeru333 2007/08/07
    お気に入り
  • JavaScript でバナーをクロスフェード表示

    以前、「div要素をクロスフェード表示する JavaScript」 として紹介した 「Javascript / CSS Crossfader」 を実際に当サイトで使用したので、ひとつの使用例として公開したいと思います。 といっても普通に使っているだけで特に変わったことをやっているわけではないのですが、前回紹介した際に div 要素をクロスフェードすると書いたので div 要素専用っぽい説明になっていましたが、実際は div 要素以外でも使用することができるので、その辺も合わせて説明を。 実際に使用しているものは、サイドメニュー部分に設置してありますのでそちらを参考に。では実際の使用方法です。 2007/12/14 追記 サイトリニューアルでサンプルとなるバナーは撤去してしまいました。 まずは JavaScript ファイルをダウンロードして、文書に読み込んでおきましょう。 <script

    JavaScript でバナーをクロスフェード表示
    kaeru333
    kaeru333 2007/07/19
    これがしたい♪ JavaScriptの埋め込み方だけでも覚えなきゃ
  • ライブラリ活用編 - JavaScriptist

    カラーピッカーを表示し、HTMLの色情報入力の際に便利に使えるJavaScriptウィジェットを紹介します。 > ライブラリを見る

  • http://youmos.com/news/glossy_js

    kaeru333
    kaeru333 2007/06/21
    なんでもポップ見せることができそう
  • ITmedia Biz.ID:動的に変化するグラフをブログに貼り付ける

    かっこいいグラフをブログやWebサイトに貼り付けるときは、Excelグラフの画面キャプチャではなく、オンラインのグラフ作成アプリケーションを使ってみよう。 ブログにグラフを貼り付けるユーザーが増えている。ブログ以外でも、Webページに棒グラフや線グラフ、円グラフなどを使って表現力を上げたいことも多いだろう。普通に考えると、Excelでグラフを作って、画面をキャプチャーして画像としてアップする……わけだが、さすがにそれは格好も悪いし、後でグラフを修正しようと思ったらイチからやり直しになる。 そこで今回は、Web上でグラフを作成して、それをリンクとしてブログやWebページに貼り付けられるサービスを紹介しよう。 画像としてグラフを“随時”生成してくれる「Zoho Sheet」 「Zoho」はオンラインアプリケーションとして提供されるオフィススイートだ。ワープロやグループウェア、プロジェクト管理か

    ITmedia Biz.ID:動的に変化するグラフをブログに貼り付ける
    kaeru333
    kaeru333 2007/06/08
    これは結構便利かもです。
  • WEB制作者とブロガーの『遊び心をくすぐる』26のブックマークまとめ*ホームページを作る人のネタ帳

    今回まとめた内容をあらかじめ言っておきます。 CSS JavaScript イメージギャラリー Generator Ajax です。 とりわけJavaScriptCSSは色々なブログでも使える為、ブロガーも頑張れば導入可能なプログラム等をなるべく多めにまとめました。 これは『個人的な感想』のテーマで、私個人が遊び心をくすぐられたものをまとめています。 あくまで私がくすぐられたもので、他の人がくすぐられるかどうかまでは保障できませんので、上記キーワードに興味の無い方は特にあらかじめご了承ください。 送信ボタンなどをちょっとセクシーにするCSS 送信ボタンなどをちょっとクールにかわいらしくする為の知識。 JavaScriptがいらないイメージマップの切り出しサンプル 画像にマップを埋め込んで華麗に表示する為の知識。 口で言うより、デモを見たほうが早い。 チェックボックスとラジオボタンをオシャ

    WEB制作者とブロガーの『遊び心をくすぐる』26のブックマークまとめ*ホームページを作る人のネタ帳
    kaeru333
    kaeru333 2007/06/06
    素材やらなんやらのまとめ。これまた参考にします