ファイルをまとめてアップロードする jQuery のプラグイン「Uploadify」の使い方。 - Wataame Frog
上記構成で説明します。 ダウンロード 以下URLよりダウンロードします。 Download Uploadify - Uploadify 書庫ファイルを展開して、 /js/uploadify/ に設置。 js と同階層にアップロード用のフォルダ uploads を作成します。パーミッションは707とか777で。 ちなみにフォルダ名は任意です。同梱の uploadify.php にて設定可能です。 /index.php アップローダを設置するメインとなる index.php の説明。 内容はほとんど同梱されている index.php そのままです。 各ファイルへのパスと、フォームのID名をjavascriptのコードにあるセレクタ名と合わせてばOKです。 <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content=
【JS】マウスオーバーでブロックごとスライドしてくるナビゲーションバーをjQueryで組んでみた - Wataame Frog
ナビゲーションで、マウスオーバーすると画面外に隠れていたナビバー、HTMLでいうところの、liタグで出来た部分がにゅっと出てくるスクリプトは調べていていくつか見たのですが、メニュー部分そのもの（HTMLでいうところのULタグ）が出てくるってのは見かけなかったので、自分で作ってみました。 ブロックごと出現させる利点は、一回のマウスオーバーである程度の数のナビゲーションを一度に見せることが出来る点。「どのメニューだったっけな」と、全てのバーに対しマウスオーバーさせ「探させる」事が無くなったかな、と思っています。 マウスオーバーするとブロックごとスライドしてくるメニューバー イメージ おなじみ、よくわからないイメージ。 各種コード HTML ではソースコードのお披露目。 単純に、ナビゲーションとメインコンテンツ部分を書いています。 <ul id="navigation" class="navWi
jQueryでページのロード時に指定のフォームにフォーカスを当ててみる - Wataame Frog
ログインページなどでページを開いた時に、IDやユーザ名用テキストボックスにフォーカスを当てたい場合の書き方。 jQueryの小技って事で軽く。 指定フォームにフォーカスを当てる HTML / Javascript <head> <script type="text/javascript"> $(document).ready( function(){ $('#login_id').focus(); }); </script> </head> <body> <form method="post" action="#"> ログインID : <input type="text" name="id" id="login_id"><br /> ログインPW : <input type="text" name="password" id="login_pw"> <input type="submit"
【jQuery】複数対応！テキストエリアの文字数をカウントするスクリプト - Wataame Frog
複数個のテキストエリアに文字数をリアルタイムで表示するスクリプトが必要になったので、jQueryを使って作ってみました。 また、●●文字以上、●●文字以下という制限もするとのことで、カウントに応じて文字数の色を変えるということにも挑戦しています。 段階を追って作成したので、それぞれ解説しながら行きたいと思います。 Step1. 文字数の取得 まず１つのテキストエリアの文字数を取得して表示させます。 JavaScript <script type="text/javascript"> $(function(){ $('#comment').bind('keyup',function(){ var thisValueLength = $(this).val().length; $('.count').html(thisValueLength); }); }); </script>
【CSS】CSS3のflexboxで簡単に2カラムのレイアウトを作ってみる - Wataame Frog
2カラムレイアウトのページを作って欲しいと言われたので、せっかくなので HTML5 と CSS3 で作ってみようということで、調べてみましたらえらく簡単に2カラムレイアウトができることが分かりました。 ウェブサイトを作成する際、2カラムや3カラムのレイアウトにしようとすると float や position を使わないと出来ませんでしたが、CSS3 では数行のコードで実現可能。 恐らく数ヶ月以内また使う技術だと思うので、忘備録としてポストしておきます。 3カラムレイアウトを作ってみる とりあえず、3カラムのレイアウトを作成してみます。 HTML <div class="parentBox"> <div class="childA">CHILD-A<br />CHILD-A<br />CHILD-A<br />CHILD-A<br />CHILD-A<br />CHILD-A<br /></
【JS】タイトルタグを利用したツールチッププラグイン「jquery.tgHoverToolTip」をjQueryで作ってみた - Wataame Frog
Javascript,jQuery 【JS】タイトルタグを利用したツールチッププラグイン「jquery.tgHoverToolTip」をjQueryで作ってみた jQuery ネタ。 以前作成したクリックタイプのツールチップ「jquery.tgClickToolTip」のスクリプトを拡張し、クリックではなくマウスオーバーでポップアップするようにしてみました。 クリック版ではリンクタグを利用していたためにボタンに埋め込んだりは出来なかったのですが、titleタグを利用する形式にしたため、リンクの他にも使えるようにもなっています。 jquery.tgHoverToolTip イメージとデモ イメージ デモ デモはこちらから。 <form method="post" name="sampleForm" action="#"> <table> <tr> <th>タイトル <span class="
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
【CSS】角丸を表示する時のベンダープレフィックス -moz-border-radius が Firefox で効かなくなっていた件 - Wataame Frog