タグ

jQueryとHTMLに関するemj1025のブックマーク (7)

  • javascriptを使って複数のYoutube動画を貼り付けても重くならないようにする方法 - Qiita

    昔**「◯◯な動画100選」**っていう記事を開いたら1ページにYoutubeが100個掲載されていて、 パソコンが爆発した事があったので、これ以上被害者を増やさない為に紹介をします。 動作 iframeタグを見つけたら全てその動画のサムネイル(img)に置換する。 サムネイルをクリックすると、その動画のiframeが呼び出されてimgがiframeに置換される。 コード $(function (){ var movies = []; var images = []; //全てのiframeタグに対して処理を実行する。 $('iframe').each(function(index, element) { //iframeの中のsrc(埋め込みタグのURL)を取得。 var movie_src = $(this).attr('src'); //取得したURLはmovies配列に格納。 mo

    javascriptを使って複数のYoutube動画を貼り付けても重くならないようにする方法 - Qiita
  • 早く・それなりの UI を実現する React コンポーネントセット 16 選 - Qiita

    Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? これまで、開発者が「早く・それなりの UI 」を実現するために、Bootstrap などの CSS フレームワークが重宝されてきました。 しかし今では、React などのライブラリを使って UI をコンポーネント化するようになってきています。 React であっても、事前に CSS フレームワークを読み込んでおき、クラス名を付与することでこれまでと同じように使うことができます。 ただ、既存の CSS フレームワークは内部で jQuery を使用していることが多いので、React と jQuery を共存させるか、jQuery 部分を自前

    早く・それなりの UI を実現する React コンポーネントセット 16 選 - Qiita
  • [JS]レスポンシブにしっかり対応!高さの異なるパネルを揃えたり、成り行きにするスクリプト -EqualHeight.js

    divなどで配置したパネル内の要素の量が異なっていても、全てのパネルの高さを揃えるjQueryのプラグインを紹介します。 高さを揃える系としては後発のスクリプトですが、レスポンシブにしっかり対応しているのがポイントです。 一列のパネルはもちろん、段組でもOK、省スペースのスマフォ用に成り行きもコントロールできます。

  • jQuery でイメージマップ:ほんっとにはじめてのHTML5 サンプル

    jQuery プラグイン ImageMapster で、イメージマップのロールオーバーを変化させる このサンプルは、jQueryベースの「ImageMapster」というプラグインを使っています。 画像を最低2種類(ノーマル、ロールオーバー用)だけ用意すれば良いので簡単です。 「九州」のみ、リンクを外部サイトにしています。(他はこのページの下部にリンク) ★イメージマップは来「target="_blank"」が設定できますが、「ImageMapster」を使うと無効になるようです...。 サンプルを修正しました(2013年4月) このサンプルは「リンクできない」というご指摘をいただき、ソースを修正しました。 ご迷惑をおかけした方々、申し訳ございませんでした。 解決のソースを送信してくださった中村様、ありがとうございました!! 以前のソースはこちら。 ロールオーバーで japan2.gif

    jQuery でイメージマップ:ほんっとにはじめてのHTML5 サンプル
    emj1025
    emj1025 2015/03/25
    map
  • かつてはJavaScriptを利用していたものの、今ではCSSのみで実装できる10の小技

    かつてはJavaScriptを利用していたものの、今ではCSSのみで実装できる10の小技2011年に「少しのコードで実装可能な20のjQuery小技集」という記事で数々の便利な制作技を紹介したのですが、時は流れ、今ではCSSのみで表現できるものが多くなってきました。という事で今回はその記事内で紹介した技を中心に、かつてはJavaScriptを利用していたものの、今ではCSSのみで実装できる小技を紹介します。 少しのコードで実装可能な 20 の jQuery 小技集 目次Div 全体をクリックできるようにするテーブルの偶数・奇数の行の色を変えるフォームにテキストを入れておき、フォーカスで消す(文字色も変更)ラジオボタンとチェックボックスを装飾するスライドパネルアコーディオンツールチップ言語によってスタイルを変更横並びの div の高さ揃えるボックスを上下左右中央に配置するそれでは実際にどんな

    かつてはJavaScriptを利用していたものの、今ではCSSのみで実装できる10の小技
  • くらげだらけ

    海辺の散歩道にはがいる。 近寄ると特に懐きもしないが、特段警戒することもない。 ほどほどに撫でさせてやるよってな感じで薄目で見て、嫌になれば少しだけ距離をおくように離れる。 数値化し単純化することは分かりやすくし、伝達力や効率を高めるチカラがある。 あらゆる比較対象は数値として評価され、順位づけされることでその良し悪しを一般化させられる。それは幼き日の私自身でさえ例外ではない。 そうして数値化することには大きな恩恵もあるが、それと同時に失っているものにも目をやってほしい。 は数値化できない。 いや実はも数値化できるのかもしれない。ただ数値化してしまった時に失うものがあまりにも大きすぎるのだ。 それが目に見えているからほとんどの人間はを数値化しない。 きっと数字の裏側にはたくさんの人の時間が流れている。

    くらげだらけ
  • スマホアプリの作り方【超まとめ】Web編:HTML5やjQuery MobileなどスマホWebアプリ開発に役立つ記事52選 - @IT

    Web編:HTML5やjQuery Mobileなど スマホWebアプリ開発に役立つ記事52選 @IT編集部 2012/1/31(2013/2/28 改訂) iOS(iPhoneiPad/iPod touch)、AndroidWindows Phoneなど、さまざまなスマートフォンのプラットフォームのアプリを作るための@IT記事のまとめです。今後、順次更新・追加していきます。 開発者が登録したApp StoreやMarketplaceなどからダウンロードしてインストールするアプリ、もしくは、あらかじめインストールされているアプリは、「ネイティブアプリ」と呼ばれています。iOSやAndroidWindows PhoneといったOS上で動き、マイクやカメラなどデバイスの機能を十分に使えるのが特徴です。作り方は、基編やデザイン/グラフィック編で紹介した記事が参考になると思います。 一方で

  • 1