[memo]jQuery bxslider ヤフーショッピングのトリプルでページャーが動かない場合の対策方法 : MEMOBOOK
ヤフーショッピングで、javascriptやCSSが使えるようになるサーバーサービス「トリプル」でjQueryのbxsliderがうまく動かない場合の対策方法。 makeshop、楽天市場(gold)では正常に動作する。 しかし、ヤフーのトリプルだと、なぜかページャーが正常に動作せず、画面がリロードされてしまう。 スライダー自体は動くし、オートでも動いている。 理由は<a>タグのhrefがhref=""になっているため。 通常だとこれでもなにも動作しないはずだが、トリプルだとリロードされてしまう。 そこでbxslierのjsファイル内で<a>タグを書き出している部分の herf="" を href="javascript:void(0);" に書き換える。 これだけ。 サムネイル付のスライダーにする場合、 サムネイルの<a>タグは <a data-slide-index="0" href=
![[memo]jQuery bxslider ヤフーショッピングのトリプルでページャーが動かない場合の対策方法 : MEMOBOOK](https://cdn-ak-scissors.b.st-hatena.com/image/square/da78a05937633f7a2b4b2219826151c370cd607b/height=288;version=1;width=512/https%3A%2F%2Fparts.blog.livedoor.jp%2Fimg%2Fusr%2Fcmn%2Fogp_image%2Flivedoor.png)
簡単！背景画像をスライドで切り替えるプラグイン jQuery.BgSwitcherサンプル | MARKUP TIPS
全画面表示のサンプル 縦横全画面に要素を引き延ばし、その背景に画像を表示させます。 背景を表示させたい要素にwidth: 100vw;height: 100vh;を指定してやると、表示領域に対して縦横100％で表示できます。 さらに、bootstrapと組み合わせるだけで、今風のサイトに見せることが出来ます。 ライトプラン 詳細はこちら ⇒サンプル確認はこちら JavaScript <script src="//ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script> <script src="jquery.bgswitcher.js"></script> <script> jQuery(function($) { $('.bg-switcher').bgSwitcher({ images: ['sample1.
【FadeThis】スクロールしたタイミングでフェードイン・アウトを繰り返す方法｜Gimmick log
TOPjQuery 【FadeThis】スクロールしたタイミングでフェードイン・アウトを繰り返す方法 【FadeThis】スクロールしたタイミングでフェードイン・アウトを繰り返す方法 公開日：2015.11.20 更新日：2023.03.19 jQuery, アニメーション スクロールしたタイミングで、要素をスライドさせながらフェードイン・フェードアウトが出来るFadeThisというjQueryプラグインを使ってみました。 WOW.jsでも可愛いアニメーション付きで実装出来ますが、こちらは一度実行されると、再度スクロールした場合はアニメーションが実行されないため、スクロールした時の動きをいつも同じにしたい！という場合にお勧めです。 しかも、jQuery 1.x を使えばIE6+から対応しているのがとっても助かります。 ライセンスはMIT。 FadeThis-配布サイト ※2015年11月2
[JS]縦長ページに面白い仕掛けや便利な機能を実装できるスクリプトのまとめ
縦長のランディングページなどで見かける気持ちいいインタラクションやエフェクト、面白い仕掛けのコンテンツや便利な機能を実装できるスクリプトやjQueryのプラグインを紹介します。 プロダクトやサービスを魅せるスクリプト、さりげないけど気持ちいいアニメーション、縦長ページならではのナビゲーション、レイアウト補助など、全コンテンツを1ページにおさめ、スクロールを前提にしたページならではの面白くて役立つスクリプトが満載です。
![[JS]縦長ページに面白い仕掛けや便利な機能を実装できるスクリプトのまとめ](https://cdn-ak-scissors.b.st-hatena.com/image/square/12d806b696946054b69c1dc3670ffa2dc1985773/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201503%2F2015112505.png)
jQueryでレスポンシブ対応のブラウザウィンドウ幅めいっぱいに要素を並べたコンテンツスライダーを設置する実験｜BLACKFLAG
半年ほど前にここで、「jQueryでブラウザウィンドウ幅めいっぱいに要素を並べたコンテンツスライダーを設置する実験」と題して、画面幅めいっぱいでのコンテンツスライダーを紹介しましたが、当時紹介したスクリプト構成だとレスポンシブには対応していませんでした。 同じ、画面幅めいっぱいでのコンテンツスライダー構成でレスポンシブ対応させたパターンを必要に駆られて作成してみたので、ここでも紹介してみたいと思います。 【2014/01/15】 スライダー部分にフリック動作を追加しました。スクリプト内の設定でフリック動作のON／OFFを設定が可能です。 このスライダーはなかなか言葉では説明しずらいのでまず動作サンプルから。 「jQueryでレスポンシブ対応のブラウザウィンドウ幅めいっぱいに要素を並べたコンテンツスライダーを設置する実験」サンプルを別枠で表示 スライダー中心にメイン表示エリアを設置して、その
[JS]Pinterestやウォールなどの最近よく見かけるカードを使ったレイアウトを作成するスクリプト -Freewall
Demo :Piterest Layout Pinterest風に高さの異なるカードをダイナミックにレイアウト。 Freewallの使い方 Step 1: 外部ファイル head内にjquery.jsと当スクリプトを外部ファイルとして記述します。 <head> ... <script type="text/javascript" src="jquery-1.7.min.js"></script> <script type="text/javascript" src="freewall.js"></script> </head> Step 2: HTML カードを包むラッパーを用意します。 <div id="freewall" class="free-wall"> </div> Step 3: JavaScript デモでは、各カードをスクリプトで生成してレイアウトを作成しています。 <sc
[JS]動画をブラウザいっぱいや指定サイズに背景として配置できる超軽量スクリプト -CoverVid
.mp4, .webm などの動画をブラウザいっぱいやセクションの背景として配置できるjQueryの超軽量（800bytes）プラグインを紹介します。 デモページ 単に要素内の背景として表示しているため、デモのようにスクロールエフェクトと組み合わせることも簡単です。 CoverVidの使い方 Step 1: 外部ファイル 当スクリプトとjquery.jsを外部ファイルとして記述します。 <body> ... <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> <script src="covervid.min.js"></script> </body> Step 2: HTML 動画を背景として表示する親要素、もしくはラッパーを配置します。 <div class="
![[JS]動画をブラウザいっぱいや指定サイズに背景として配置できる超軽量スクリプト -CoverVid](https://cdn-ak-scissors.b.st-hatena.com/image/square/9110ae5aaacb7e18964553e948fdad1f627eb39c/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201404%2F2014111003.png)
jQuery UIのタブ内からの別タブへのリンクで手こずったけど解決した話し
とある５丁目で活動する還暦を過ぎたWebプログラマーの覚え書きです。それとかかってくる迷惑電話や、家業のアパート経営について。 jQuery UIのタブ内からの別タブへのリンクしてタブを切り替えることのメモ書き。ツレの案件で少し手間取ったので、その覚え書き。 jQuery UIのタブが次のように書く。適当なJQueryとjQuery UIのCSSとJavaScriptを設定できていることが前提。この辺りは、jQueryUIのサイトに書いてある。 <link href="css/import.css" rel="stylesheet" type="text/css" /> <link href="css/jquery-ui.css" rel="stylesheet" /> <script type="text/javascript" src="http://codeorigin.jquery
jQueryでタブを作る方法あれこれ（短いコードで済むやつ・デザイン変更しやすいやつ） - Qiita
<html> <head> <meta charset="utf-8"> <!-- jQueryとjQueryUIをCDNで読み込む。（ダウンロードしなくていい。） --> <script src="//code.jquery.com/jquery-1.11.0.min.js"></script> <script src="//code.jquery.com/ui/1.11.0/jquery-ui.js"></script> <!-- cssも外部から読み込んでる。 --> <link rel="stylesheet" href="//code.jquery.com/ui/1.11.0/themes/smoothness/jquery-ui.css"> <!-- スクリプトはこれだけで済む。簡単。 --> <script> $(function() { $( "#tabhoge" ).ta
スクロールして要素を個別にアニメーション表示しパララックスにも使える「scrollReveal.js」
2、3年前に流行り初めた、Webページをスクロールすることで背景や各要素がアニメーションしながら表示されたり、視差効果を伴って現れる、「パララックス」デザイン。 パララックス効果やスクロールアニメーションを実現できるモジュールはいくつかあるのですが、その中でも「scrollReveal.js」は軽量かつ単体で利用可能で、HTMLタグにdata-sr属性を追加して、その値に時間、アニメーションの種類、表示位置などを指定することで豊富なエフェクトが簡単に定義できるので、試しに使ってみました。
レスポンシブ対応などコンテンツスライダー/スライドショー用jQueryプラグイン50+ | co-jin
サイトのコンテンツをリッチに見せるだけでなく、省スペースで数多くのコンテンツを効率的・効果的に表示できるスライダー。 今回は無料で利用できるバリエーション豊富なスライダー用jQueryプラグインをご紹介します。 画像のスライダーから、レスポンシブ対応、フルスクリーン対応のほか、目を引くアニメーションによる画像の切り替えやコンテンツそのもののスライダーなど、多くのプラグインを集めてみました。 今後のコンテンツ制作にお役立ていただければ幸いです。 Swiper レスポンシブ対応で、スマホなどのタッチデバイスでのフリッカブル（スワイプ）にも対応したコンテンツスライダー。 オートプレイのほか、縦スライドや3Dエフェクト、ネスト構造（コンテンツにさらにスライダーを設置できる）対応と、幅広い表現が可能な、使い勝手のよいスライダーです。 設置も簡単、スワイプの反応もよい。 本当にオススメのスライダーです
[JS]シンプルで超軽量なのがいい！レスポンシブ対応のカード型レイアウトを簡単に実装できるスクリプト -minigrid
レスポンシブ対応のカード型レイアウトを簡単に実装できる、jQueryなどの他スクリプトに依存しないシンプルで超軽量（2KB）のスクリプトを紹介します。 デモのアニメーション minigridの使い方 Step 1: 外部ファイル 当スクリプトを外部ファイルとして記述します。 <body> ... コンテンツ ... <script src="http://henriquea.github.io/minigrid/minigrid.js"></script> </body> Step2 :HTML 各アイテムには「.grid-item」を、ラッパーには「.grid」を付与します。 <div class="grid"> <div class="grid-item"></div> <div class="grid-item"></div> <div class="grid-item"></div
![[JS]シンプルで超軽量なのがいい！レスポンシブ対応のカード型レイアウトを簡単に実装できるスクリプト -minigrid](https://cdn-ak-scissors.b.st-hatena.com/image/square/51d7e65c86ee67bce7000a1d7008655aaff74295/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201502%2F2015080204-01.png)
パララックスサイトの作り方の初歩
最近パララックス（視差効果）を取り入れたサイトが増えてきました。 仕組みや簡単なものを作れるようにしておきたかったのでいろいろ試してみました。 ちなみにもっと効率良く作れる方法とかもあるかもしれませんので、一例ということで御覧ください。プラグインはまだ試したことがないので そちらを使ったほうが楽かもしれません。 パララックス効果のjQueryプラグインまとめ あと動作はこの記事時点でのFirefoxの最新版でしか確認はしていません。 スクロール量を取得する まずはスクロールすると動くので、スクロール量を取得します。ちなみにjQueryを使ってます。 $(function(){ $(window).scroll(function(){ var y = $(this).scrollTop(); $("#num").text("スクロール量：" + y);//表示用 }); }); サンプルペー
ページ内リンクはスムーズスクロールしなくても一瞬点滅すればいいんじゃないかという実験
スムーズスクロール以外の方法で、ページ内リンクによって画面が切り替わったことを利用者にわかりやすく伝える方法はないかということで、ページ内リンクでの移動時に画面を一瞬点滅させるスクリプトを jQuery で書いてみました。 タイトルが （謎） な感じですが...... ページ内リンクでページ上部に移動させたりするとき、最近は所謂スムーズスクロールってやつを実装するのが当たり前になっていますよね。パッと瞬時に画面が切り替わってしまうと、ページ内で移動したことがわかりにくいので、スクロール処理を入れることでわかりやすくしてあげましょうって言う、親切心から採用されるケースが多いと思います。 実装方法は JavaScript と CSS アニメーションの組み合わせや、JavaScript （というか jQuery） でというのが多いと思いますが、今回はそのスムーズスクロールの実装方法はどれが良いの
BigVideo.js - The jQuery Plugin for Big Background Video
BigVideo.js The jQuery Plugin for Big Background Video (and Images) 12-30-2015 Update This project is no longer under active development. Much has changed since the summer of 2012 when BigVideo.js was launched. For more current information on implementing video backgrounds, check out these links: CSS Tricks - Should I use a video as a background? Dudley Storey - Create Fullscreen HTML5 Page Backgr
スマホで"横から出てくる"メニュー作れるjQueryプラグイン「Sidr」の使い方！かんたんに実装できる上にサクサク動く！
こちらが新テーマの記事ページ。上のバーの右側の水玉アイコンをタップするとメニューが開く仕掛けにしてあります。 タップするとこのように右から「にゅっ」とメニューが出てくるように。それほど動きがカクつかないので満足。上の「MENU」というところか「閉じる」をタップすればメニューを閉じる仕様に。 また、最初からCSSも付いてくるので文字を入力するだけでそれなりにカッコイイメニューを作ることが可能です。 「Sidr」実装方法・使い方 <script src="javascripts/jquery.js"></script> <script src="javascripts/sidr/jquery.sidr.min.js"></script> <link rel="stylesheet" href="javascripts/sidr/stylesheets/jquery.sidr.dark.css"
jQueryでニュースティッカーをシンプルに実装する方法｜BLACKFLAG
Webサイト上での限られたスペースにお知らせなどの 複数にわたる情報を表示させたい際に便利なニュースティッカー。 jQueryプラグインでもいろいろな形状のニュースティッカー用プラグインがありますが シンプル（ベーシック）な動きのニュースティッカーを 極力シンプルなスクリプト構成で実装することが出来ないか試してみたので紹介してみます。 ニュースティッカーの切り替え動作については ——————————————————– ・フェード切り替え ・画面下からスライドイン ・画面右からスライドイン ——————————————————– の3パターン構成にしてみます。 まずフェード切り替えパターンのサンプルから。 HTML構成は以下の様になります。 ◆HTML <div class="ticker" rel="fade"> <ul> <li><a href="#1">【News1】このテキストはNe
2014年総まとめ、jQueryのプラグインとスクリプト100選
毎年末にjQueryのプラグインをまとめていましたが、今年はプラグインの他に単体で動作するスクリプトも加えて、jQueryのプラグインとスクリプトの総まとめとして記事にしました。 今年目立ったのは、去年から引き続きアニメーション系、縦長ページ用のスクリプトでしょうか。 1カラムのレイアウトが流行っているためか背景関連も充実していました。それとSVGをより簡単に利用できるようになったのも大きな目玉ですね。 また、jQueryに依存しない、単体で動作するスクリプトも多く開発されるようになったと思います。 背景関連 SVG関連 縦長ページ関連 スクロール連動・パララックス関連 その他スクロール操作・補助関連 レスポンシブ関連 ナビゲーション関連 レイアウト関連 コンテンツ生成関連 コンテンツ紹介・ツアー関連 スライダー・カルーセル関連 画像拡大・配置・キャプション関連 アニメーション関連 エフェ
jQueryのtoggleを使ってアコーディオン風にコンテンツを開閉表示してみる
クリックによって隠れてたコンテンツエリアをアコーディオン風に 表示してみます。 1．CSSの記述例 以下は調整してみて下さい。 <style type="text/css"> <!-- #iWrap{ margin:0 auto; padding: 7px; width: 400px; border: 2px solid #333; } #iWrap h2{ margin:10px; padding: 5px; border: 2px solid #333; background-color:#CCC; cursor: pointer; } #iWrap h2:hover{ background-color:#FFF; } #iWrap div{ padding:5px; } #iWrap div ul{ margin:0 3px; padding:0; } #iWrap div li{
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
ウェブ初心者も安心して作成できる、無料HTMLテンプレート素材24個まとめ - PhotoshopVIP
