This domain may be for sale!
PrettyPhotoのハッシュタグを消す方法を記載します。 jQueryプラグインのprettyPhotoを使うと、URLにハッシュタグが追加されてしまうのを防ぐ方法です。jQueryの素敵なプラグインPrettyPhoto。 私もすんごいお世話になっていて頭が上がらない限りですが、たまに「あぁ・・・」と思う所もあります。 今回は、そんな中のひとつPrettyPhoto実行時にURLに追記されるハッシュタグ 「#prettyPhoto」 を非表示にする方法を記載しておきます。 方法はとっても簡単。jquery.prettyPhoto.js内の2か所をコメントアウトするだけです。function setHashtag(){ if(typeof theRel=='undefined')return; /* location.hash=theRel+'/'+rel_index+'/';//U
フォームのテキスト入力中にうっかりリターン(Enterキー)を押してしまい、中途半端なフォームが送信されてしまったという経験をした人は結構多いのではないかと思います。 ということで、リターン(Enterキー)でフォームを送信しないようにする方法を紹介します。この記事の投稿時点でのGoogle Chrome・Firefoxの最新版とIE9で同じ動作になることを確認しています。 1.リターンでフォームが送信される原因 次のように、type属性が「text」のinput要素、いわゆるテキストフィールドが含まれるフォームで、テキストフィールドがアクティブなときにリターンを押すとフォームが送信されてしまいます。 <form action="hoge.cgi"> <input type="text" name="foo" /> <input type="text" name="bar" /> <inp
「フローティングウィンドウ」は、Webページ本文に重ねて表示し、ドラッグ&ドロップ操作で移動できる子ウィ ンドウのことです。といっても、ブラウザーの画面内にウィンドウのように表示するだけですので、ブラウザーやウイルス対策ソフトのポップアップブロック機能に規制されることもありませんし、追加的な情報を元のWebページのレイアウトを崩さずに表示できるメリットがあります。 基本のフローティングウィンドウを作成する 今回は、「フローティングウィンドウを表示」のリンクをクリックするとフローティングウィンドウを開くWebページを作成します。開いたウィンドウはドラッグ&ドロップ操作でページ内を自由に移動でき、右上に配置した「×」ボタンで閉じられます。 まず、以下のようなHTML/XHTML(以下、HTML)を用意します。リンクのテキストをa要素で包み、class属性に「open」を付けます。このa要素は、
メインウィンドウ内のアクションで、サブウィンドウを操作するスクリプトです。 (例:ページの移動時にサブウィンドウを閉じる) ポップアップブロックが作動してしまう場合があります。 サンプル画面のソース <html> <head> <title>TAG index Webサイト</title> <script type="text/javascript"> <!-- var win1; // サブウィンドウを開く処理 function disp(url){ win1 = window.open(url, "window_name", "width=300,height=200,scrollbars=yes"); } // サブウィンドウを操作する処理 function subwin(){ if(win1 && !win1.closed){ // サブウィンドウの存在をチェック win1.clo
PHPからbit.lyやtr.im等のURL短縮サービスをまとめて扱える「PEAR::Services_Sho... 次の記事 ≫:Windows7風ナビゲーション作成チュートリアル ブラウザのサイズに合わせて画像を伸縮する作業を全自動化するjQueryプラグイン「maxImage」。 このプラグインを使えば、画像のサイズをブラウザサイズの変更があったとしてもページのサイズに合うように調整してくれ、デザイン崩れを防ぐことが出来ます。 以下にその機能を紹介してみます。 活用例1 背景画像自動 背景画像をブラウザサイズ変更に合わせて自由に伸縮 ブラウザのサイズを変えても違和感がないようにすることが可能 活用例2 ブラウザ幅にあわせた画像の自動伸縮 ページの右端に画像があって、自由に伸縮します。 サイズを変えてもこの通り、画像が残りスペースのサイズになります 活用例3 ブラウザ幅に合わせる、がオ
今日は、SEOにも効くGoogle Analytics用の便利なスクリプトを紹介します。少しマニア向けですが、「utm_medium」や「utm_source」などのトラッキングパラメータが付いた長くて汚いURLを、パラメータどおりにちゃんと解析しつつ、ユーザーに対してはキレイなURLで見せられるというものです。 この記事のタイトルは長いですが、これでURLは短くキレイになります。 ダウンロード&使い方Web担特製のカスタムJavaScriptを以下のURLからダウンロードします。 ・特製トラッキングコードのダウンロード → http://web-tan.forum.impressrd.jp/files/images/nakanohito/bancho_ga_canonicals.js (または、ここをクリックしてこの下にコードを表示) ダウンロードしたJavaScriptをテキストエディ
サイトやブログをJavaScriptを使って動きのあるページに、スタイルシートで見栄え良く装飾してみませんか? コピーしてご自由にご利用ください。 textarea 制限文字数を超えたら警告を表示し オーバーした文字列を削除します。 制限文字数15文字 9文字 無料どころか、稼げるブログ。Seesaa 無料レンタルカウンター「デジデジ」 サンプルソース <html> <head> <title>テキストエリアの文字数制限</title> <script language="JavaScript"> <!-- var max=15; //制限文字数 function Limit(event){ Tarea= document.getElementById("Tobj1"); Mcnt= document.getElementById("msg1"); mojiVal= Tarea.value
textareaって入力文字数制限できなくて不便ッ! てことでJavaScript書きました。 多分車輪の再発明なのは気にしない。 .js function limitMaxLength(target, len, err) { if( target.value.length > len ) { target.value = target.value.substr(0, len); if( "undefined" != typeof(err) ) { alert(err); } } } .html <textarea onchange="limitMaxLength(this, 10, 'hoge')"></textarea> って具合に設定すると10文字を超過するとalertで通知して10文字目以降を削除します。 alert出したくない場合は第三引数を省略すればOK。 第一引数はthis固
javascript & ajax samples to improve your web development. トップページ / エレメントスタイル-element.style エレメントスタイル-element.style スタイル背景色 - element.style.background 透かし効果、背景の画像 - element.style.backgroundAttachment 背景色 - element.style.backgroundColor 背景イメージ - element.style.backgroundImage 背景位置 - element.style.backgroundPosition 背景リピート設定 - element.style.backgroundRepeat ボーダー - element.style.border ボーダー(下) - eleme
Lightweight Circle slideshow〔くるくる回して画像を切り替える円形のイメージギャラリー〕 Smooth Div Scroll〔水平方向に並べた画像をマウス操作でするするスクロール〕 Nivo Slider〔9種類のエフェクトがかけられるイメージスライダー〕 Galleriffic〔画像ギャラリーをリッチかつ高速にレンダリング〕 IMGPREVIEW〔マウスオーバーでリンク先の画像をプレビュー表示〕 jQuery largePhotoBox plugin〔大きな画像対応ポップアップ(マウス移動で画像全体を閲覧可能)〕 PIROBOX〔シンプルかっこいい画像ポップアップ〕 bxGallery〔シンプルな画像ギャラリー〕 A Simple jQuery Slideshow〔シンプルなスライドショー〕 Accessible News Slider〔全件表示や件数に応じて前
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta http-equiv="Content-Language" content="ja" /> <meta http-equiv="Content-Script-Type" content="text/javascript" /> <meta http-eq
備忘録的に。今日ちょうどdiv要素をランダムで表示させたいと思って色々調べてて、良いプラグインがあったので、紹介&まとめておきます。まぁphpで処理できるところではあるのですが、結構手軽だったので活用できるシーンは多いのではないでしょうか。 「ランダムに要素を選択・表示する」動きはjQueryで解決! 元ネタはむらQさんのjQueryランダム表示プラグインと、jQueryプラグインの書き方。 jQureyとプラグイン、そしてhtmlソースに追記するだけで、特定の要素を任意の数だけランダムで表示できるようになります。 例を挙げると、10個の情報のうちう3個を表記順も含めてランダムに表示させてくれます。 なんて便利!! ちょっとした情報ソースの追加などで使えます。画像や孫タグを内包した子タグなどにも活用できるので、色々と活用法を考えるとできることは広がりそうです。 javascript jQ
リスト要素の各アイテムに指定したメッセージをMarquee風に切替表示するjQueryプラグイン。 文字を流すスタイルは上から下、下から上、左から右など、垂直・水平共にオプションで指定することができます。 初期化時、メッセージ切替前/切替時、スクロール終了時に呼ばれるコールバック関数が用意されています。 長いメッセージを垂直方向に切り替える場合は、メッセージ切り替え表示後、更に表示されたメッセージを水平方向にスクロールさせることで、長いメッセージをすべて表示させることができます。 APIが用意されているので、動的にリスト要素にアイテムを追加したり、スクロールの一時停止や再開なども簡単に実装することができます。 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1
twitterとかgmailとかでやってる、一番下までスクロールすると「もっと見る」みたいなリンクがあって、それをクリックすると下にもっと広がるアレ。 やってることは、クリックされるたびにjavascriptで データを用意する テンプレートを用意する テンプレートにデータを埋め込んで既存のDOMにappendする みたいな。いくらでも実装はあるけど、基本こんなの。 同じ事をしたいと思ったときに自分で0から実装するのがめんどかったので、javascriptでテンプレートエンジンいいの無いかなーと探してもどれもイマイチだったんだけど、lyase_viewというのがかなり良かった。 軽いし分かりやすいし、javascript何でも書けるし、ERBとタグ同じだし。 inforno :: 埋め込みjavascriptを実装してみました。 というわけでサンプル作った。 https://github.
自分用に備忘録。そろそろチートシート が出てくる頃じゃないかと思うので、そう 焦ることも無い情報だと思いますが、近々 使いそうなのでその時に面倒な事になら ないようによく使いそうなマークアップを リストとしてメモしておきます。 ちゃんとしたデモは本家で確認して下さい。ここにあるサンプルは僕のいい加減なサンプルです。尚、マークアップが見やすい様にするだけの為にコメントアウト入れていますが気にしないで下さい。 [note]追記 もう少し増やして見やすくしたものをダウンロード出来るようにしました。 [/note] プラグイン読み込み <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a1/jquery.mobile-1.0a1.min.css" /> <script type="text/javascript" src="
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く