プログラミング-JavaScript
今日は、JavaScriptでテキストカウンターを作ってみました。 普段文章を作っていて、 「今、どれくらいの文字数なんだろう？」 って思う時がありますが、そんな時にはこうしたテキストカウンターがあると便利です。文字数の入力に応じてリアルタイムに入力文…
先日作成したパラメータ引き継ぎスクリプトをWordPressにも流用しようとしたところ、まったく機能しない。 デバッグしてみるも、スルー。 コードは合っているはずなのに、なぜだろう？ということで、原因と解決策を調べてみました。ちなみに、先日のパラメー…
今日は、パラメータ引き継ぎ用のJavaScript第2弾を作成しました。【関連記事】 times-diary.hatenablog.com ちなみに、 パラメータとは？と思われた方は、 こちらの記事が参考になると思いますよ。↓ getパラメータ/クエリーストリングとは？ « アクセス解析Q…
今日は以下記事を参考にさせていただき、少しアレンジしてCSS + JS で実装するタブメニューを作ってみました。[ 参考記事 ] coliss.com 今回Demoに実装したコードは、以下の通りです。[ HTML ] <html> <head> <meta charset="utf-8"> <title>Tub</title> <link href="style.css" rel="stylesheet" type="text/css"> </head> <body> <h1>タブメニュー</h1> <div class="box"> </div></body></html>
こんばんは。今日は、JavaScriptのMath.randomで複数のページに均等の確率でリダイレクト実行する機能を作りましたので、ご紹介します。 リダイレクト (3ページに均等・ランダムにリダイレクト) <script> var url = ""; var ua = navigator.userAgent; var random = …
今日は、画面サイズによって文字列を置換する jQueryを作成しました。[ 作成理由 ] モバイルデバイス表示時のレイアウト切り替えに伴い、 表示テキストを変更したかったため。 特定の文字列を置換するjQuery 仕様 画面サイズが1,024 px 以下の時、 actionク…
リファラ (REFERRER) 制御方法を確認しました こちらについてご説明する前に、「リファラって何？」という方のために、以下ご説明いたします。 リファラ (REFERRER) とは？ どこから現在のページに来ているか、ユーザーのアクセス元を示す情報のことです。 ※…
パラメータ引き継ぎスクリプト 今日は、現在のページに埋め込まれたリンクから遷移先にジャンプした際、遷移先で遷移元ページURLをパラメータで取得するためのJavaScriptをご紹介します。【目的】 遷移元URL情報が引き継がれているため、 どういった被リンク…
グローバルナビのテキストをhoverで切り替える方法 グローバルナビにマウスを重ねた時、文字を変更する方法を確認、実装してみました。ここでは、下図のように、 ↓ 標準時英語表記のグローバルナビメニュー ↓ (マウスホバー) ↓ 日本語表記するという動作を実…
DataTables とは、 HTMLテーブルをとっても高機能にしてくれる jQueryのプラグイン たとえば、以下のような機能がとっても簡単に実装できます。 テーブルヘッダにソート機能を付け、列ソートができます。 フィルター機能で、検索がとっても簡単にできます。 …
RSSフィードを簡単にサイトに表示するには Google Feed APIを使って、簡単にRSSフィードをサイトに表示する方法 Google Feed APIを使うと、簡単にRSSフィードをサイトに表示することができると知りました。 試しに、自身のブログサイトからfeed用URLを取得し…
[jQuery] タブパネル 【演習】所定サイトのデモプログラムを修正・実装する手順：1.「jquery.com」にアクセスhttp://jquery.com/ 2.「jQueryUI」タブ（画面）を選択http://jqueryui.com/ 3.「Tabs」を選択http://jqueryui.com/tabs/ 4.jQueryの以下所定配布…
![はてなブックマーク - 4/23 [jQuery]タブパネル](https://b.hatena.ne.jp/entry/image/https://times-diary.hatenablog.com/entry/2014/04/23/202447)
jQuery（Slider） jQuery（Slider） Sliderプラグインを利用する 【演習】EasySlider 【準備】 以下サイトより、「Easy Slider 1.7」をダウンロード Numeric Navigation jQuery Slider http://cssglobe.com/easy-slider-17-numeric-navigation-jquery-slider…
![はてなブックマーク - 4/18 [jQuery] Slider](https://b.hatena.ne.jp/entry/image/https://times-diary.hatenablog.com/entry/2014/04/18/193000)
jQuery toggle()メソッド 【演習】toggle()メソッド 演習1. ボタンをクリックする都度表示画像が変化する以下のような画面を作成します。 ① ② ③ ④ この演習のポイント a要素となっている画像をクリックした場合、通常href属性に設定されたリンク先にジャンプ…
![はてなブックマーク - 4/17 [jQuery] toggle()メソッド / LightBox（プラグイン）](https://b.hatena.ne.jp/entry/image/https://times-diary.hatenablog.com/entry/2014/04/17/213000)
[jQuery]クリックイベントを扱う [jQuery]HTML/CSSを操作する [jQuery]クリックイベントを扱う 【演習】クリックイベントでアラート表示 課題：下図ボックスをクリックすると「クリックされました」というダイアログボックスが表示されるようにプログラムを…
![はてなブックマーク - 4/15 [jQuery]クリックイベント・HTML/CSSを操作する](https://b.hatena.ne.jp/entry/image/https://times-diary.hatenablog.com/entry/2014/04/15/210000)
[jQuery] 記述練習 クロスフェード 使用テキスト： Web制作の現場で使うjQueryデザイン入門[改訂新版] (WEB PROFESSIONAL)posted with amazlet西畑一馬（著） アスキー・メディアワークス Amazon.co.jpで詳細を見る同内容掲載のサイトはこちらです。↓ http:/…
![はてなブックマーク - 4/14 [jQuery] 記述練習 （セレクタ） / クロスフェード](https://b.hatena.ne.jp/entry/image/https://times-diary.hatenablog.com/entry/2014/04/14/203000)
本日の授業テーマ [Java Script] 配列の操作 本日の学習内容 [Java Script] 配列の添え字を活用する 配列の添え字を活用する 配列を操作する 授業の関連記事： http://d.hatena.ne.jp/web-0127/20140506/p1 [演習] 今日の曜日を表示 JavaScriptで今日の曜日…
![はてなブックマーク - 4/8 [Java Script] 配列の操作](https://b.hatena.ne.jp/entry/image/https://times-diary.hatenablog.com/entry/2014/04/08/210000)
JavaScript 本日の授業 オブジェクトを生成する Dateオブジェクト [課題]オブジェクトを生成する 1 (toStringメソッドで現在日時を文字列として表示する ) [課題]オブジェクトを生成する2 (new Dateで現在日時を取得して表示する ) [課題]オブジェクトを生成…
![はてなブックマーク - 4/3 [JavaScript] オブジェクトを生成する](https://b.hatena.ne.jp/entry/image/https://times-diary.hatenablog.com/entry/2014/04/03/213000)
本日の授業テーマ [JavaScript] 画像置換 本日の学習内容 【演習】 サムネール画像にマウス移動すると、メインの画像が置換されるようにする[ポイント] JavaScript onmouse属性を使用したロールオーバー 要素に直接画像置換命令を記述 [習作] [ソース] <html> <head> <meta charset="utf-8"> <title></title></meta></head></html>…
![はてなブックマーク - 3/15 [JavaScript] 画像置換](https://b.hatena.ne.jp/entry/image/https://times-diary.hatenablog.com/entry/2014/03/15/203000)
