タグ「script src」 - はてブログ

タグ script src

新着順人気順 5 users 10 users 50 users 100 users 500 users 1000 users

(1 - 25 / 26件)

[JS]レスポンシブ対応、指定したエリア内だけで高さが異なるパネルを同じ高さに揃えるスクリプト -Right Height | コリス

2015/09/10 179 users コリス script Body Step スクリプト

1-3、4-6でエリアを指定、1-3と4-6が同じ高さに Right Heightの使い方 Step 1: スクリプトの準備当スクリプトを外部ファイルとして記述し、初期化しておきます。スクリプトは、これで完了。 <body> ... コンテンツ ... <script src="js/right-height.js"></script> <script> rightHeight.init();... 続きを読む

[JS]シンプルで超軽量なのがいい！レスポンシブ対応のカード型レイアウトを簡単に実装できるスクリプト -minigrid | コリス

2015/08/03 338 users jQuery コリス Body Step スクリプト

レスポンシブ対応のカード型レイアウトを簡単に実装できる、jQueryなどの他スクリプトに依存しないシンプルで超軽量（2KB）のスクリプトを紹介します。デモのアニメーション minigridの使い方 Step 1: 外部ファイル当スクリプトを外部ファイルとして記述します。 <body> ... コンテンツ ... <script src="http://henriquea.github.io/m... 続きを読む

[JS]日本語もOK、行単位でスタイルを適用できるようにするスクリプト -Lining.js | コリス

2014/11/25 108 users コリス rolling スクリプスクリプト script

demo 5 一行ごとにさまざまなアニメーションで表示します。「rolling」のエフェクトかっこいいです。 Lining.jsの使い方 Step 1: 外部ファイル当スクリプトを外部ファイルとして記述します。 <head> ... <script src="build/lining.min.js"></script> </head> デモにあるエフェクトを使用する時は、エフェクト用のスクリプ... 続きを読む

[JS]イベントを時間軸で表すタイムスケジュールシートをシンプルなコードで作成できるスクリプト -Timesheet.js | コリス

2014/09/08 188 users コリス jQuery 横軸 head Step

スケジュールの横軸と各アイテムを定義するだけでタイムスケジュールシートを簡単に作成できるスクリプトを紹介します。 jQueryやAngular.JSなど他のスクリプトは不要です。 Ilya Grigorik Timesheet.jsの使い方 Step 1: 外部ファイル当スクリプトを外部ファイルとして記述します。 <head> ... <script src="/javascripts/time... 続きを読む

スマホ用のブラウザ判別を行うための「 jquery.browser.sp.js 」 - to-R

2014/05/19 239 users GitHub scrip to-R script スマホ用

普段スマホ用のブラウザ判別を行うために利用しているjQueyプラグインを公開したのでご紹介します・ダウンロード / GitHub 利用方法 jQuery本体を読み込んだ後にダウンロードしたjquery.browser.sp.jsを読み込みます。 <script src="jquery.js"></script> <script src="jquery.browser.sp.js"></scrip... 続きを読む

[JS]リアルさが想像以上！ブラウザのウインドウを窓に喩えて、雨を楽しむ癒やし系スクリプト -rainyday.js | コリス

2013/09/25 222 users コリス canvas head text type

ひと昔前に、小さいドットを上からアニメーションで落として雪とか桜とかありましたが、これはそれらとは異なり、かなりリアルに雨を堪能できるスクリプトを紹介します。ぼっーと見てると、音まで聞こえてきそうです。 Demo 2 雨はCanvasを使って再現しており、実装は下記のようになります。 <head> ... <script src="rainyday.js" type="text/javascri... 続きを読む

IE でアクセスしてきた場合ハローワークにリダイレクトする js のホスティングを開始しました - ltcmdr927atenablog

2013/09/12 227 users ホスティングハローワークスペシャルサンクス CDN ヘッダ

2013-09-12 IE でアクセスしてきた場合ハローワークにリダイレクトする js のホスティングを開始しました IE でアクセスしてきたらハローワークに飛ばしたいなあというサイトがありましたら以下をヘッダにコピペする感じでお使いください <script src="http://buttlabo.net/cdn/ie_hellowork.js"></script> スペシャルサンクス: @ca... 続きを読む

デザイナーさんの為のjQuery講座 Lv.1 | 株式会社LIG

2013/07/19 127 users 株式会社LIG LIG jQuery デザイナーさん備忘録

暑いですね。　鳥よしです。あまりにも暑くてネタが切れたので、先日LIGのデザイナーさんとやったjQuery勉強会の備忘録をかかせていただきます。サボってるわけではないのです。勉強会の内容を見直してもらえればいいのです。 1.jQueryを使用するためにまずは何はともあれ、jQueryを使用するために以下の記述をhead内に書きます。 <script src="http://ajax.goo... 続きを読む

いい加減、<script src="http://..　と書くのはやめましょう - DQNEO起業日記

2013/05/18 793 users DQNEO起業日記 http example.com パク

JSファイルを読み込むときに、こういう書き方するのはやめましょう。 <script src="http://example.com/js/jquery.js"></script> 理由あなたのサイトが、いつの日かSSLに対応することになったとき、そのscriptタグがバグの原因になります。ご覧のとおり、HTTPSページの中でHTTP要素を読み込もうとすると、ブラウザによっては安全装置が働いて読... 続きを読む

ページを移動（離脱）するときにjQueryで警告を出す方法: 小粋空間

2013/03/10 335 users Facebook jQuery 小粋空間離脱警告

Facebookなどでフォーム入力中にページを移動（離脱）しようとすると警告が表示されます。この仕組みをjQueryで実装する方法を紹介します。jQueryは投稿時点の最新バージョン1.9.1を利用しています。１．ページを移動するときに警告を出すページを移動するときに警告を出すには、onイベントにbeforeunloadイベントを設定します。 <script src="//ajax.goog... 続きを読む

[JS]実装も超シンプル、高さや幅が異なるエレメントを揃えるシンプルなスクリプト -equalize.js | コリス

2012/09/11 212 users コリス jQuery jquery.js height 実装

エレメントの高さ（height）、幅（width）だけでなく、outerHeight, innerHeight, outerWidth, innerWidthのサイズを揃えるjQueryのプラグインを紹介します。デモ：幅 equalize.jsの使い方 Step 1: 外部ファイル「jquery.js」と当スクリプトを外部ファイルとして記述します。 <script src="//ajax.go... 続きを読む

[JS]数行のコードで、動画をウェブページの背景いっぱいに配置するスクリプト -BigVideo.js | コリス

2012/08/20 220 users コリス jQuery ウェブページスクリプトデモ

デモページデモは左のメニューから、動画を変更して再生できます。 BigVideo.jsの使い方外部ファイル BigVideo.jsはjQuery, jQuery UIと、動画再生に「video.js」を利用しています。これら全てを外部ファイルとして記述します。  <script src="//ajax.googleapis.com/a... 続きを読む

[JS]レスポンシブデザインもOK、水平タイプのナビゲーションをいい感じにするスクリプト -HorizontalNav | コリス

2012/06/20 215 users コリス Libs Ajax スクリプトナビゲーション

デモ：480pxで表示上：未適用はが成り行きで二段になってしまう幅になっても、下：適用の見た目は損なわれません。 HorizontalNavの使い方実装は4ステップです。 Step 1: 外部ファイル「jquery.js」と当スクリプトを外部ファイルとして記述します。 <script src="//ajax.googleapis.com/ajax/libs/jquery/1.7/jquery... 続きを読む

[JS]実装も簡単！ページ内の次にどこを見るかアニメーションでガイドするスクリプト -Pageguide | コリス

2012/06/07 100 users コリス stylesheet Libs スクリプト Ajax

Pageguideの使い方実装は4ステップです。 Step 1: 外部ファイルスクリプトとスタイルシートを外部ファイルとして記述します。 <link rel="stylesheet" href="stylesheets/pageguide.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.m... 続きを読む

[JS]Responsiveデザインでサイズ可変の画像でもクリッカブルマップ対応にするスクリプト -RWD Image Maps | コリス

2012/05/22 129 users コリス Libs Responsiveデザイン Ajax 画像

RWD Image Mapsの使い方外部ファイル「jquery.js」と当スクリプトを外部ファイルとして記述します。 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> <script src="jquery.rwdImageMaps.min.js"></script> ... 続きを読む

[JS]テキストでも画像でもリストでもテーブルでも、長いコンテンツにスクロールバーを加えるスクリプト -Scrolite | コリス

2012/04/18 110 users lib スクロールバー script コリス text

デモページ：p要素 Scroliteの使い方外部ファイルスクリプトとスクロールバー用のスタイルシートを外部ファイルとして記述します。 <script src="lib/jquery.min.js" type="text/javascript"></script> <script src="lib/jquery.scrolite.min.js" type="text/javascript"></... 続きを読む

[JS]使い勝手のよい、パネルをスクロールに追従させるスクリプト -Sticky Sidebar | コリス

2012/04/17 149 users コリス Remove スクロールスクリプト追従

Demo 2 赤枠のナビゲーションは左のカラム内の移動、黒枠のパネルは黒枠内のみ、右のバスケットはページ内全てです。また、中央のテキスト「Remove」をクリックすると、一時的にそのパネルだけ追従をやめます。 Sticky Sidebarの使い方オーソドックスなデモを例に実装方法を紹介します。外部ファイルスクリプトを外部ファイルとして記述します。 <script src="jquery.m... 続きを読む

[JS]シンプルからかっこいいエフェクト付きまで、ページネーションなら何でも任せろのスクリプト -jPages | コリス

2012/04/12 270 users コリス stylesheet Libs スクリプト Ajax

Table テーブルのコンテンツをページネーションにすることもできます。 jPagesの使い方外部ファイルスタイルシートとスクリプトを外部ファイルとして記述します。 <link rel="stylesheet" href="css/jPages.css"> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.... 続きを読む

[JS]高さの異なる要素をレンガ状に隙間なく並べるだけのシンプルなスクリプト -Wookmark | コリス

2012/03/26 476 users コリス Libs Ajax スクリプト src

Wookmarkの使い方実装はいたってシンプルです。外部ファイル「jquery.js」と当スクリプトを外部ファイルとして記述します。 <script src="//ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script> <script type="text/javascript" src="jquery.wook... 続きを読む

[JS]直感的な操作性がたのしい、画像ギャラリーのスクリプト -Fotorama | コリス

2011/12/04 126 users コリス script jquery.js text href

Fotoramaのデモ：デザイン変更背景・矢印のカラー、サムネイルのサイズ・カラーなど Fotoramaの実装外部ファイル「jquery.js」と当スクリプト・スタイルシートを外部ファイルとして指定します。 <script src="jquery-1.7.min.js" type="text/javascript"></script> <link href="fotorama.css" ty... 続きを読む

[JS]多彩なアニメーションが実装できる2.3KBの超軽量スクリプト -jsMorph | コリス

2011/10/27 285 users コリス script text type JavaScript

jsMorphの実装外部ファイル当スクリプトを外部ファイルとして指定します。 <script src="js/jsMorph_min.js" type="text/javascript"></script> JavaScript jsMorphの基本書式です。 var myMorph = jsMorph( Object obj, // HTML element, Array of elemen... 続きを読む

[JS]かなりかっこいいデザインのローディング用アニメーションを生成するスクリプト -Sonic | コリス

2011/08/28 482 users コリス矩形 script SONIC circle

HTML5 Canvasを使って、ローディング用のアニメーションを作成する超軽量（約3K）のスクリプトを紹介します。デモページ Sonicの実装 Square（矩形）とCircle（円形）を例に実装方法を紹介します。外部ファイル当スクリプトを外部ファイルとして指定します。 <script src="sonic.js"></script> JavaScript: Square（矩形）あとは、... 続きを読む

[JS]超軽量、設置も簡単、オプションも豊富なスライドショーのスクリプト -Orbit | コリス

2011/08/10 272 users Orbit jQuery コリス jquery.js text

実装も簡単で、オプションも豊富に揃った、使い勝手のよい画像スライドショー用のjQueryのプラグインを紹介します。約4KBと超軽量なのもいいですね。右上のオートプレイは状況も表示します。 Orbitの実装外部ファイル「jquery.js」と当スクリプトを外部ファイルとして指定します。 <script src="js/jquery.min.js" type="text/javascript"... 続きを読む

もうCSSハックは必要なし!? ブラウザ毎にCSSを切り替える「cssuseragent」 | Web活メモ帳

2011/01/05 712 users class type CSS CSSハックレイアウト

CSSでページをデザインする際に、ブラウザ毎のレイアウトの違いって本当に嫌ですよね。 CSSハックで対応する方も多いかと思いますが、本日紹介する「cssuseragent」を使うとclassの作り方を少し工夫するだけでより柔軟に対応できるようになります。詳しくは以下設定方法はJavaScriptを一つ読み込むだけになります。 <script src="cssua.min.js" type="t... 続きを読む

GoogleでホストされているjQueryを使う方法 - IDEA*IDEA ～百式管理人のライフハックブログ～

2009/03/31 221 users jQuery IDEA scr JSAPI script

激しく既出だと思いますが、いつも調べているような気がするので個人的にメモ。jQueryのライブラリをこちらに持たずにGoogle側でホストしてもらう方法です（ホストしてもらう、という言い方はちょっと変、かな・・・。キャッシュ効果が主なメリットですかね）。 ■ 利用方法以下のコードで。 <script src="http://www.google.com/jsapi"></script> <scr... 続きを読む

(1 - 25 / 26件)

次の25件 »