タグ

JavaScriptに関するmagpepenのブックマーク (88)

  • ブロックレベル要素の高さを揃えるheightLine.js[to-R]

    ブロックレベル要素の高さを揃えるheightLine.js Web標準の日々のグループディスカッションで出たライブラリ案を作っていく企画、第一弾。 ブロックレベル要素の高さを揃えるjsライブラリを作ってみました。 このライブラリは新バージョンがあります。 レスポンシブWebデザインに対応した「jquery.heightLine.js」 CSSでは複数のブロックレベル要素の高さを揃えれないという問題があります。 このheightLine.jsは、複数のブロックレベル要素の高さを揃える事ができ、2カラムレイアウトや3カラムレイアウトのそれぞれのカラムの高さを揃えたり、複数のブロックレベル要素をfloatで配置する際の高さを揃えたりできる、便利なライブラリになります。 設置方法 head要素内にダウンロードしたheightLine.jsを読み込みます。 <script type="text/ja

    ブロックレベル要素の高さを揃えるheightLine.js[to-R]
  • ページ移動せずに内容を変更するタブを作る - [ホームページ作成] All About

    初心者向けの「わかりやすさ」を重視した解説に定評があるウェブ系テクニカルライター。ウェブの黎明期に趣味で始めた個人サイト製作からその「楽しさ」に魅了され、作成方法に関する様々な情報を発信。企業や団体のウェブサイト製作・解説書籍の執筆なども行っている。 ...続きを読む タブを押すと一瞬で表示内容が切り替わる機能の作り方 ウェブページを移動することなく指定範囲の表示内容を切り替えられるタブ機能は、狭い領域にたくさんの情報を掲載したい場合に便利です。ジャンル別に記事を掲載するニュースサイトや、地域別にお知らせを掲載する情報サイトなど、多数のウェブページで見かけます。 このようなタブ機能は、ほんの少しのHTMLCSSJavaScriptソースを記述するだけで簡単に作れます。そこで今回は、ウェブページ上にタブ機能を作る方法をご紹介いたします。 記事では、上図のように見えるタブ機能を作ることを

    ページ移動せずに内容を変更するタブを作る - [ホームページ作成] All About
  • 【ga.js版】Google Analyticsでリンククリック数を追跡する方法|WEBマーケティング ブログ

    ga.jsに切り替えてから、しばらく放置していたのですが、urchin.jsでは計測できていたリンククリックがそのままではとれないことが発覚。てなわけでいろいろ探したら出てきたのでご紹介しておきます。 組織のマインドマップツールをマインドマイスターにすべき理由 伸びてる産業、会社、事業を紹介しまくるStrainerのニュースレターに登録!! ga.jsでリンククリックを計測する方法 デフォルトでリンクのクリックを追跡できるアクセス解析ツールもありますが、敢えてここはGoogle Analyticsで追跡するにはという方法をご紹介。ついでに「urchin.js」での追跡の仕方もご紹介しておきます。 「urchin.js」でリンククリックを追跡していました もともと、いままでのGoogle Analyticsの解析タグ「urchin.js」でも内部リンクだろうが外部リンクだろうがリンククリック

    【ga.js版】Google Analyticsでリンククリック数を追跡する方法|WEBマーケティング ブログ
  • e-research.biz

  • ColorBox - ポップアップ内を自由に設定できる活かしたjQuery

    View Demos 1 2 3 4 5 Released under the MIT License, source on Github (changelog) Download Install via NPM npm install jquery-colorbox Compatible with: jQuery 1.3.2+ in Firefox, Safari, Chrome, Opera, Internet Explorer 7+ Supports photos, grouping, slideshow, ajax, inline, and iframed content. Lightweight: 10KB of JavaScript (less than 5KBs gzipped). Appearance is controlled through CSS so it can

  • どんなフォームにも使えるjQueryのフォームバリデーション exValidation :: 5509

    jquery.validation.jsというフォームバリデーションプラグインを公開していますが、使える場面が割と限定されてしまうような作りだったので、より幅広く使えるようにexValidationという名前で新しいjQueryプラグインとして作り直しました。伴って仕様や使い方が異なる部分も多いので、ドキュメントとして書いておきます。ただし前半のバリデーションルール周りは同じエンジンを使ってるので、ほぼ同じです。ちなみにすごい長いです。。 ルールを割り当てる際のclass名がhogeからchkhogeに代わりました。アップデートして使う場合は注意してください。 サンプル1: エラーを右上に表示 サンプル2: エラーを下に表示 トピックス ダウンロード 使い方 1. JSファイルを読み込む 2. 基バリデーションルール 3. select, checkbox、radio、複数項目の場合 4

  • 簡単お知らせビューア - PHPスクリプト | サイト作りの小役立ち工房

    sezinfo.php体】 sezinfo.css 【スタイルシート】 sample.html 【表示サンプル】 data(ディレクトリ) 【データ格納ディレクトリ】 - sample.dat 【データ保存用ファイル】 - sample.js 【表示用JavaScript書き出しファイル】 - sample.txt 【非同期表示用テキスト書き出しファイル】 js(ディレクトリ) - doc_async.js 【非同期ファイル読み込み用JavaScript】 使い方 スクリプト内28〜54行目の設定をします。 $pageTitle='タイトル'; このページのタイトルです。 $password='1234'; ログインパスワードを設定します。表示用javascriptファイルの反映も同じパスワードになります。 $maxData='20'; 表示するデータの最大保存数です。設定した数を超

  • HTMLもCSSも書換不要!気持ちいいスクロール (1/5)

    Webサイトを作るにあたって、ネット上でデザインの参考になるサイトを探していると、プロのWebデザイナーのポートフォリオサイトに行き当たることがあります。ポートフォリオサイトはデザイナーにとってのショーケース。気合の入った作りや実験的な要素を盛り込んでいるサイトもあり、単純に眺めても楽しいものです。 今回取り上げるサイト「Cosmive」は、Webデザイナー・Muhammad Uzairさんのポートフォリオサイト。色鮮やかで美しいグラフィックに、JavaScriptによるダイナミックなユーザーインターフェイスを合わせています。今回はこのサイトから参考にさせてもらいましょう。 今回のお手サイト:『Cosmive』 パキスタン在住のWebデザイナー、Muhammad Uzairさんのポートフォリオサイト。自身のプロフィール、手がけた作品の紹介、問い合わせフォームまで、1ページにコンパクトにま

    HTMLもCSSも書換不要!気持ちいいスクロール (1/5)