ハナモゲラボ / 試行錯誤の実験人生

日々、PCや各種デバイス、楽器等に翻弄されながら電脳の森をさまよう男の日常と様々な実験をさらりと記しております。

Category Archives: Javascript

レスポンシブ対応のカルーセルスライダー「Owl Carousel」

スマホサイトで写真をスワイプで送るようなギャラリーを実装しようと 色々と探し回ってて見つけたのがこの「Owl Carousel」。 配布元サイト(GitHub) 例の如くJQueryありきのスクリプトなのでそれもお忘れなく。 GitHubは慣れないと「どっからダウンロードするんじゃあ」とか 「ZIPで配らんかい」となりがちですが、配布ページに行って スクリプトの個別ページに飛び、そこの上記タブの「Releases」をクリックすれば zipファイルのリンクがあるので参考までに。 このOwl Carouselは実装も簡単ですし、レスポンシブデザインに対応しており それに伴ったパラメータも多数用意されてるのが嬉しいです。 ちなみに対応するjQueryのバージョンは1.7以上です。 とこんな感じでh……(続きを読む)

jQuery:スマホサイトで最下部に来たらボタンを出現させる方法

PCサイトがありスマホサイトもある、という場合は コンテンツが同じ内容だとスマホサイトってどうしても縦長になりますわね。 対策としてはページ下部にもナビゲーションつける、などがありますけども 「ページ最上部に戻る」というページ内リンクで処理する場合もあります。 その際に「ページ最下部に達した時にボタンを表示させる」というのを思いつき ちょいと色々と試行錯誤してみましたよ、ってお話です。 (普通に最下部に固定表示しとけばいいやん・・って話ですが) ページをスクロールさせて最下部に来たら読み込み開始する、という処理は あの「AutoPagerize」を筆頭に、最近ではTwitterなどに実装されてるので Javascriptでなんとか出来るはず、と検索を開始。 そしてまず見つけたのがこのサイトで……(続きを読む)

JQueryプラグインでRSSフィードを表示する「zRSSFeed」

元々静的サイトを構築しており、その後にWordpressでブログを構築、 というサイトはけっこうあると思うのですけども 全部をWordpressでCMS化というではなくて、 ブログのRSSフィードを新着情報として静的サイトのトップに表示したい、という依頼は とてもよくある話だったりします。 もちろんこれが外部無料ブログという場合もよくある話。 もし静的サイトの方にJQueryをリンクしてあるならば プラグインであるこのzRSSFeedを使えば簡単にそれを実現できます。 [browsershot url=”http://www.zazar.net/developers/jquery/zrssfeed/” width=”530″] http://w……(続きを読む)

JQuery2.0が正式リリース~IE6,7,8は非対応

Windows XPのサポートがあと1年という時期を迎え、 Windows Vista SP2は自動アップグレードでIE9に書き換えられる様になったせいなのか いまやWeb制作にはかかせないライブラリであるJQueryも IE8以下を切り捨てる、という動きになってきました。 [browsershot url=”http://blog.jquery.com/2013/04/18/jquery-2-0-released/” width=”530″] 冒頭からの宣言がもう泣かせます。 As promised, this version leaves behind the older Internet Explorer 6, 7, and 8 brow……(続きを読む)

[JQuery]簡単に設置できるトランジジョン付のスライドショー

写真が数枚あって、それを表示させる際にスライドショーっぽく見せたい。 そんな時にもお世話になるJQuery。 ただ単にフェードイン・アウトするだけのもあるけど、もう少し動きのあるのがいい場合 今回紹介するjqFancyTransitionsなんかは設置も簡単でお手軽。 [browsershot url=”http://workshop.rs/projects/jqfancytransitions/” width=”250″]jqFancyTransitions http://workshop.rs/projects/jqfancytransitions/ このスクリプトはデフォルトでいくつかのトランジジョンパターンがあって、パラメータ設定で選ぶ……(続きを読む)

iframeの高さを内容物に合わせて自動的に制御(JQuery)

さてiframeを使ったサイトで、内容物の高さが変わる場合のお話。 たとえば更新情報やお知らせなんぞをトップに埋め込んで中身をクライアントが更新、 みたいな場合ですね。 その場合はiframeの高さがもちろん変わってしまうわけですが 高さを決めてスクロールバーを出すようにするのが手っ取り早い。 しかし、このスクロールバーを嫌う方もいらっしゃいます。 内容物の高さに応じて、iframeの高さを変える方法はないものかと色々探すと jQueryプラグインを見つけました。 jQuery iframe auto height plugin(github) https://github.com/house9/jquery-iframe-auto-height 導入方法 まずはJQuery本体とダウンロー……(続きを読む)

 

« Jan 2019 February 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28