jQueryで入力フォームに文字カウント（カウントダウン）を設置する方法｜BLACKFLAG
今やTwitterで有名になった、入力フォームに文字を入力した際のリアルタイム文字カウント表示。 この様なINPUTやTEXTAREAに入力されたテキストの文字数を数えるには jQueryの「$(●●●●).val().length;」を使うと簡単に取得することが出来るようだったので 文字カウント、カウントダウンのいろいろな取得パターンを作ってみました。 jQueryで入力フォームに文字カウント（カウントダウン）を設置【SAMPLE１】 まずは単純に入力された文字数を表示するパターン。 HTMLには文字数を表示するエリアと 入力フォーム（ここではTEXTAREA）を設置します。 ◆HTML <span class="count">0</span> <textarea name="textarea" rows="10" cols="30"></textarea> CSSは特に動作には関係しな
コピペでOK！スムーススクロールでページ内リンクやトップへ移動！#なしで
記事が長い場合、目次やページ先頭「#」へのページ内リンクはとても便利です。しかもスムーズスクロールで移動すれば動きもわかりやすいし気持ち良い。今回はJavaScriptやjQueryのプラグインを使わずに実現する方法です。 最近は多くのブログ・サイトで右下に「ページ先頭へ」戻るボタンやリンクを見かけます。しかしクリックして一気に最上部までワープすると味気ないし自分の位置を見失いがちです。目次の場合も同様です。 ゆめぴょんです。こんちはっ(^^)/ ページ内リンクはSEO対策にもなると聞いたことがあります。しかし私はむしろ訪問者のためのナビゲーションの1つとして便利だと思っています。 ページ内部リンクのしくみと弊害 そのしくみはとても簡単です。現在のURLの後に「#」をつけるとページ先頭へ、「#pyon」などをつけると「id="pyon"」を設定してる位置へジャンプします。 だから見出しに「
CSS Animation - Free CSS tutorials and guides - CSS Animation
CSS animation articles, tips and tutorials. Level Up Your CSS Animation Skills Enrol and save 90% today CSS Animation Tutorials Parallax scrolling Scroll animations UI Animation in React Animating Links Create an animated scroll cue Transitions in space Build an awesome Hero Header Animating your hero header Why animate? Star Wars Stereoscopic CSS Spheres Portal CSS Buffer's loading animation WWDC
スクロール途中から位置が固定されるナビゲーションを作ってみる
ある程度スクロールすると、途中から位置が固定になるコンテンツを見かけたことはありませんか？ 今回はjQueryを使ってそれを作ります。 デモ1 デモ2 途中から位置が固定されるナビゲーションのデモ 1 & 2 ダウンロード 今回使うHTMLはこんな感じです。 <div id="header"> <h1>タイトル</h1> </div> <div id="container"> <div id="main">左カラム（メインコンテンツ）</div> <div id="sidebar"><!-- サイドバー --> <div id="nav">ここを固定する</div> </div> </div>#mainと#sidebarはfloat: leftしています。 これの#navが表示エリア上部から20pxの位置まで来たら位置を固定したいと思います。 position: fixedを使って固定する
フリーフォントM+を丸ゴシック化 ― Rounded M+ - itouhiroはてなブログ
M+（エムプラス）フォント wikipedia:M+ FONTS を丸ゴシック化 wikipedia:丸ゴシック体 しました！ Rounded M+（ラウンデッド・エムプラス）という名前です。 ダウンロード 追記 2013-07-05 MM様が、より新しいRounded M+を作成されました！ http://jikasei.me/font/rounded-mplus/ 漢字を多く含みますので、ここで配布しているのよりオススメです。 ※2012-02-29 一部の文字（全角の０〜７）がおかしい問題を修正しました。 ※2012-02-27 フォント名の問題（Windows7のフォントフォルダで見ると「Rounded M+」ではなく「M+」フォントにインストールされる）を修正しました。 フリーフォントです。 プロポーショナル（可変幅） Rounded M+ 1p http://sourcefor
右クリック禁止を回避する
ブラウザの右クリックには、文字コードの変更やナビゲーションのための進む、戻るなどがあるわけですが、右クリックを禁止するという嫌がらせをしている困ったWebサイトがあります。右ボタンを押しながらのマウス操作で動作を指示できるマウスジェスチャ機能を利用するたびに警告が表示されるとかなりウザいと感じるわけですね。 まあ、右クリック禁止はJavaScriptの機能で実現しているわけなので、ブラウザの設定をScriptを実行しないようにしておけば何ごともなく右クリックできるわけで、右クリック禁止ははっきりいって無意味な行為で無駄な努力です。そうはいっても、ブラウザの設定を変えてScriptを無効にするのは現実的ではありません。ナビゲーション関連はブラウザ上部のメニューバーから使ったりキーボード操作でよいとして、おそらく画像の保存やソースを見てみようというときに障害となる程度でしょう。 Firefox
jquery小技まとめ３２
作成：2013/07/1 更新：2014/11/01 Web制作 > 先日ECサイトを制作したときに、動きのあるサイトにしないといけなかったので、色々調べて組み込んでみたんですが、jQueryでもう何でも出来ちゃいますね。近い将来ローカルで画像なんかを編集しなくても、ブラウザだけで色々できるようになるんじゃないでしょうか。今回は定番からちょっとマイナー（Google Analytics関係とか）なものまでjQueryの小技、プラグインを集めさせていただきました。 エンジニア速報は Twitter の@commteで配信しています。 もくじ スクロール １．ページ内リンク／フッターまわり／トップに戻る ２．パララックス スライド ３．カルーセル ４．レスポンシブなスライダー ５．ヌルヌルサクサクなスライドメニュー ６．サムネイル付きクロスフェードスライドショー 補助 ７．Google Ana
window.open()メーカー
ページのURL ページのtarget ウインドウの横幅 ウインドウの縦幅 ウインドウの表示領域の高さ ウインドウの表示領域の横幅 ウインドウの外周の高さ ウインドウの外周の幅 ディスプレイ左上からのX軸の位置 ディスプレイ左上からのY軸の位置 他のウインドウより前に来るウインドウ 他のウインドウより後ろに来るウインドウ チャンネルモード 現在のウインドウの子ウインドウ デレクトリーボタン(リンクバー) 全画面表示 ホットキーを無効にする URLバー メニューバー サイズ変更許可 スクロールバー ステータスバー タイトルバーの表示() ツールバー フォオーカスが移っても他のウインドウの前に来ないウインドウ ページを履歴に追加しない オプションを一つでも指定した場合、指定されないものは全て「=noまたは=0」 オプションの全てを省略した場合は、全て「=yesまたは=1」 よって、widthやh
HTMLDocument の動的な作成: Days on the Moon
ブラウザ上で、JavaScript を使って HTML のソースから HTML 文書を生成するのに、どんな方法があるのか調べました。なお、以下のスクリプトは HTML 文書上で実行することが前提です。 表の見方 XSLT の HTML 出力 createHTMLDocument メソッド createDocument メソッド createDocument メソッドと名前空間の指定 createDocument メソッドと文書型宣言の指定 createDocument メソッドと文書型宣言及び名前空間の指定 cloneNode メソッド iframe 要素 ActiveXObject CID からの作成 まとめ 表の見方 以下の表において、各項目の意味は次の通りです。 doc HTML 文書を作成できれば○、XML 文書を作成できれば△、それ以外なら×です。HTML 文書かどうかは、cre
jQueryで作るマウスオーバーアニメーションするテキストタイプの縦型ナビゲーション10種
ベースとなるhtml 今回はテキストタイプなので文字列をリストで並るだけですね。 一部spanを入れた方が動作が安定することがあったので入れてます。javascriptのコードにspanを指定していなかったら外してください。 html <ul id="nav1"> <li><a href="#">HOME</a></li> <li><a href="#">ABOUT</a></li> <li><a href="#">GALLERY</a></li> <li><a href="#">LINK</a></li> </ul> 1.マウスオーバーでスライドするボタン 単純に横にスライドするアニメーションは「marginLeft」を変化させます。 テキストの色はcssで変えてます。 このナビゲーションに限ってはliにspanを入れると安定して動作するっぽいです。 html <li><a href="
JavaScriptを使わずCSSのみでシンプルなツールチップ実装:phpspot開発日誌
Easy CSS Tooltip | Kollermedia.at JavaScriptを使わずCSSのみでシンプルなツールチップ実装。 CSSの a:hover を応用して、次のようにシンプルなツールチップを実装するサンプル。 コードは以下のようにシンプルにかけます。 <html> <head> </head> <style> a:hover {background:#ffffff; text-decoration:none;} /*BG color is a must for IE6*/ a.tooltip span {display:none; padding:2px 3px; margin-left:8px; width:130px;} a.tooltip:hover span{display:inline; position:absolute; background:#fffff
jQueryだけで作る、サムネイル画像を魅力的に見せる方法 (1/5)
普段あまり目にしないようなインパクトのあるサイトを作りたい。そんなときにはいつも見ている日本国内のWebサイトだけでなく、海外サイトに目を向けてみるといいかもしれません。これまでにもこの連載ではいくつかの海外サイトを紹介してきましたが、今回見つけたのはアルゼンチンのWebサイトです。 「Sikker」という名前のサイトは、Webデザイナー・Nicolas Calabreseさんのポートフォリオサイト。1ページのみ、スクロール無しの“1枚絵”のようなごくごく小さなサイトですが、その分、CSSやJavaScriptの小技を効かせて、カッコよく楽しいサイトにデザインされています。今回は、このSikkerをお手本とさせてもらうことにします。 今回のお手本サイト：『Sikker』 アルゼンチンのWebデザイナー、Nicolas Calabreseさんのポートフォリオサイト。グローバルブランドのロゴが
stu nicholls | CSS PLaY | experiments with cascading style sheets | home page
What it's all about... "Cascading Style Sheets (CSS) is a simple mechanism for adding style (e.g. fonts, colors, spacing) to Web documents." The above quote, taken from the W3C website, is one of the reasons for this site. Whilst I agree that it is a mechanism for adding style to web documents, I do not agree that it is a SIMPLE mechanism. It can be very complicated, as I found out when I took my
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Javascriptで前のページに戻るを実装 - Qiita