IEではoptionタグに対してdisplayが効かないバグ - Qiita
optionタグをdisplay: none;したくてもIEではできません。 2018/01/27追記：iPhoneのSafariとかChromeでもこの現象が発生してました。 検証用コード(IEでは動かないバージョン) 本来であれば、連動して日本を選択したら日本の地域だけで絞られるんですが、IEではそうならないです。 See the Pen 単一選択プルダウンの連動(IEでは動かないバージョン) by momosetkn (@momosetkn) on CodePen. 解決策 要素を削除するやり方にする See the Pen 単一選択プルダウンの連動 by momosetkn (@momosetkn) on CodePen.
知ってて当然？初級者のためのJavaScriptで使う即時関数(function(){...})()の全て
(function(){...})()は、 (function($){ $.hoge = function() { }; })(jQuery) みたいに使われていたりするコード。GreasemonkeyとかjQueryのプラグインとか、あれこれ見かけることがあると思います。 この話題はいくつかWebでも取り上げられていますが何がどうなってんのかちょっと難しいですね。しかし、誰でも理解できるレベルではあります。というのも、こういう種の難しさは体系的な知識が備わっているか否かということなのです。 でも、この知識を体系化する作業って結構しんどくて、難しくて、まーハゲるほど悩むこともあるかもしれない。それはきっと、とても毛根に悪いかもしれない。スカルプDも真っ青の状況になるかもしれない。それは、悲しいことなのだと思う・・・っ！ 毛根にはこれからもがんばってほしい！いつだって頭を温かいまなざしで見守
最近のJavaScript開発まとめ
こんにちは、中川です。 ここ1・2年ですが、私の担当するプロジェクトでは、 PHPよりもJavaScriptの開発が多い状態が続いております。 JSのプロジェクトを重ねるにつれ、開発環境も段々と整理されてきましたので、 一旦、最近のJS開発で利用しているライブラリやツールなどをまとめてみました。 フレームワーク ●Backbone.js http://backbonejs.org/ JavaScriptのMVCフレームワーク。 何も使わない(もしくは我流)よりは、これを使って欲しいと思えるフレームワークです。 利用者が多く日本語情報も豊富にあるのと、フレームワーク自体が1500行程度と軽量なため、学習コストを低く抑えることができます。 ●AngularJS http://angularjs.org/ データバインディングを備えたフレームワーク。 高機能なテンプレートや、DIの仕組み、ルーテ
クライアントサイドJavaScriptで使えるテンプレートエンジンのメモ - Life goes on
ここ最近クライアントサイドで使えるJavaScript製のテンプレートエンジンを調べてました。業務で必要だったんで、調査してたんだけど、ここら辺有名所から、無名のまでかなりの数があるんですな…。という事で、忘れない内にメモ。 ただし、この中で実際に試してみたのは、ejsとPUREだけだったりする。感想はサイトの説明を見てのもので、そっから業務にあったのをピックアップしたらこの2つになった次第。感想とか書いてるけど、ちょっと適当。 jstparser.js Mark Gregory Turansky » Better JavaScript Templates 更新されてるのか不明 jsRender&jsViews JsRender: Demos jQuery templateプラグインがこちらに切り変わる模様 jQuery Smarty balupton/jquery-smarty · Gi
15 Useful Code Snippets for Smartphone Website
2014年8月22日 Webサイト制作, スマートフォン スマートフォンが普及してきて、Webサイトを作る時、スマートフォンサイトも一緒に制作している方も多くなってきていると思います。私もスマホサイトを制作する機会が増え、だんだんEvernoteに保存していたスマートフォンサイトを作る時の小技がたまってきたので、iPhoneで使える小技を中心にまとめて記事にしてみます。いくつかサンプルも作っているので、スマートフォンからあわせてご覧下さい！ ↑私が10年以上利用している会計ソフト！ スマートフォンサイト用小技集 目次 いくつかサンプルも作ったのでスマートフォンから、もしくはブラウザーからユーザーエージェントをiPhoneなどに切り替えてご覧ください！ 横幅をデバイスの幅にあわせる 文字サイズの自動調整をオフ リストのクリック（タップ）範囲を広げる 画面の幅にあわせてCSSを変える リンクテ
JavaScriptでパスワードの強度チェック「Password Strength」
twitter facebook hatena google pocket パスワードの入力で1111などとするユーザーがいたりします。 こういった方にはPassword Strengthを利用し、その危うさを示してあげるといいかもしれません sponsors 使用方法 Password Strengthからファイルをダウンロード。 <script type="text/javascript" src="jquery-1.6.1.min.js"></script> <script type="text/javascript" src="password_strength.min.js"></script> <script> $(function(){ $(".class名1").password({ score: '.class名2' //強度表示するclass }) }); </scri
全画面をスライドとして使うダイナミックなナビゲーションを構築する2KB以下の軽量jQueryプラグイン
全画面をスライドギャラリー風にするダイナミック なナビゲーションをjQueryを使って実装するサン プルです。透過処理が必要ですが、IE6、IE7の 両問題児でも問題なく動いてくれますので、実践 でもプロモーションなどに利用できるっぽいですね。 スライドするとロゴが平行してスライドする事で視差 効果も出しています。 クロスブラウザ対応なので使いどころも出て来るかもしれませんね。ダイナミックに動いてくれますのでプレゼンテーションやポートフォリオ、キャンペーンなどに使うのも面白そうです。 Awesome Scrolling Navigation 全画面がスライドします。背景に画像を指定しているのでテキストなんかも入れられるっぽいですね。試していませんけどこれは結構使えそうです。 動作確認していただくと分かるかと思いますが、左上のロゴ部分も微妙なスライドをして視差効果を出しています。 マークアッ
Dragdealer JS
Drag provider – the good stuff Dragdealer is a drag-based JavaScript component that embraces endless front-end solutions. Elegantly crafted for JavaScript-aware coders. 2D drag and tap, mouse and touch (mobile tested), 12kB unminified. No dependency. Take a look through all the demos below to understand how it works. Links / download code.google.com/p/dragdealer/ blog.ovidiu.ch/dragdealer-js HTML
つまづきがちなiPhoneコーディングのTips（JS多め） | バシャログ。
来月はキャプテン・アメリカ見るし、気が付いたら年中アメコミ映画を見ているminamiです。 来月にはまた大きな発表がいろいろありそうなiPhone界隈ですが、iPhoneサイトのコーディングをする際につまづいてきたポイントを挙げてみました。 [HTML] input type="file"は使えない 画像をアップするコンテンツだからフォームに input type="file" を・・・と考えがちですが、iPhone版のSafariでは使用不可です。 [HTML] <meta name="viewport" content="user-scalable=no">が効かない 最近ハマったポイントです。ユーザーに画面の拡大をさせなくすることができるviewportのuser-scalableプロパティですが、本体のアクセシビリティ設定で「ズーム機能」をオンにしているとバッチリ拡大できてしまいま
Excelの表（QA表, 不具合表... etc）を、すごく検索しやすくするツールを作りました。 - 地平線に行く
最近、仕事でやたらExcelを使うようになったので、こういうツールを作ってみました。 Excelインクリメンタルサーチ Excelの表を、すごく検索しやすくするツールです。 （QA表, 不具合表... etc） サンプルはこちら！ このツールを使うと、Excelの表をブラウザ上で素早く、わかりやすく検索できます。 データの自動変換スクリプトがついているので手間はほとんどかかりません。 また、複数のファイルにまたがるような場合でも、簡単に検索できるようになります。 日頃、Excelでバリバリ仕事をこなさなきゃいけないSIerの方にうってつけのツールです。 ぜひ、ご利用ください！ ダウンロード：ダウンロード - 地平線に行く 紹介ページ：Excelインクリメンタルサーチ - 地平線に行く 経緯 お客様とのやり取りは、どうしてもExcelで情報をやりとりしなくてはいけません。 しかし、Excel
実装が簡単で、フォームの使い勝手を向上させるJS 3種
Web屋の私がブックマークしているサイト65 | Webクリエイターボックス の、CSSんところにちゃっかり、CSS HappyLife ZERO が載ってて嬉しい＞＜ さて、今回はフォームです。 お問合わせフォームとか資料請求フォームとか、ウェブサイトには結構な確率で何らかのフォームが有るかと思います。 このフォームの使い勝手の良し悪しが、とても重要なのは言うまでも有りません。 でもまぁ、ビミョーなフォームが多いですよね。 本気でやり出すと、サーバーサイドに手を加えたりして云々だと大変なので、コストがかかるとかで出来ない場合も有るかも知れません。 しかし、フロントエンドで出来ることも有るので、フォームを実装する際に何事もなかったかのように極々自然と使い勝手が良くなる（だろう）機能を盛り込んだらステキですよね。きっと。 しれっとコーダーが、フォームに今回紹介する機能を実装しておけば「おー！
yuga.js :: Kyosuke.jp
yuga.jsって？ ウェブサイトを作る上で面倒な部分を自動で実装したり、ちょっとした機能を簡単に追加したりするJavaScriptです。jQueryを使って作られています。Web制作を優雅にするために作られました。 設置方法 まず、ファイル一式をダウンロードし、読み込みたいサイトの任意のフォルダに配置します。 yuga.jsを使いたいHTMLファイルのhead要素でjavascriptを読み込みます。 <link rel="stylesheet" href="css/thickbox.css" type="text/css" media="screen" /> <script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript" src="js/thickbox.js"></s
Highslide JS - JavaScript thumbnail viewer
What is Highslide JS? Highslide JS is an image, media and gallery viewer written in JavaScript. These are some of its advantages: Tip! Use the visual Highslide Editor to set up your Highslide installation without writing code. Quick and elegant looking. No plugins like Flash or Java required. Popup blockers are no problem. The content opens within the active browser window. Single click. After ope
Facebox 1.3
What is it? Facebox is a jQuery-based, Facebook-style lightbox which can display images, divs, or entire remote pages. It's simple to use and easy on the eyes. Download the tarball, view the examples, then start enjoying the curves. Why another lightbox? Because we wanted, nay, needed a Facebook-style lightbox on FamSpam. Download Requires jQuery 1.2.1. You'll need a loading image, close label, fo
yuga.js で自ページへのリンクを設定している画像がロールオーバーしてくれない。
Web 制作のことを中心に、ちょっとした Tips などを掲載しています。「自分用メモ」が基本スタンス。 btmup Blog yuga.js という非常に便利な JavaScript があります。 多くの機能が一つにまとまっていて、使い方も簡単で重宝させていただいているのですが、今回はその多機能が故にハマってしまったという例をご紹介。 ロールオーバーとハイライトの関係 まずは使い方のおさらい。 yuga.js でロールオーバーする際は、元になる画像と、そのファイル名に「_on」を付加した画像を用意します（例えば「btn.jpg」と「btn_on.jpg」）。 で、後は HTML で <img> タグに「class="btn"」を設定してやるだけ。 とても簡単にロールオーバーが実現できます。 （親要素に「class="allbtn"」を設定すれば、その子要素すべてに「class="btn"
イメージスライダーを付けてみよう
それでは順を追って説明していきますね。ダウンロードしたファイルを解凍すると、以下のようにたくさんのファイルやフォルダがありますね。今回は Anything Slider を使っていますが、大体どんなプラグインも似たような構成になっていると思います。 anythingslider folder 2. HTMLをマークアップ HTML ファイルがいくつかありますが、これはデモ用のファイルです。プラグインによっては 1枚しかない場合も多いですね。Anything Slider の場合は、たくさんのデモファイルが用意されています。これら HTML ファイルは、HTML でのマークアップを参考にしたりするのにも使えますよね！ それではデモファイルを参考にして、HTML をマークアップしていきましょう。今回は一番シンプルなスライダーを作ってみたいと思います。マークアップは単純に<ul>と<li>で画像
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
地獄のJavaScriptセキュリティ
GitHub - carhartl/jquery-cookie: No longer maintained, superseded by JS Cookie:
502 Bad Gateway nginx openresty 133.242.243.6
http://wex.im/