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

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

Category Archives: Javascript

スマホサイトのナビゲーションメニューのまとめ

スマホサイトを作る際にけっこう悩むのがナビゲーションをどうするか、という事。 これにレスポンシブサイトで、というのが絡んでくると表示・非表示などの絡みもあり なかなかこいつが難しかったり。 ざっと一覧で見れるもんないかいね、と探してみるとさすがはあるんだこのご時世。 スマホのメニューデザインに悩んだらこれを見る 徹底収集36選! http://liskul.com/cr_spdesign36-5195 2014年10月の記事なのでここ最近どれが一番使われてるのかを知るにも ちょうどよかったのだけど、まさかのドロップダウンメニュー圧勝に 個人的にはちょっと驚いたりしている。 普段、色んな所を見てて一番使いにくいな、と思ったのがこれだったもので(笑) このまとめはメリット・デメリットをきっちりと……(続きを読む)

jQuery:レスポンシブ対応のスライドショー「responsiveslides」

トップページのメインイメージを一定時間で切り替えたい場合、 ちょいと昔ならFLASHの独断場だった気がしますけども、 最近はJQueryさえ使えば、ほぼこれらはクリア出来ます。 「(ブラウザの)Javascript切ってる場合はどうするんだ!」ってそんなもん noscriptで画像一枚貼りますよ、ええ。 スクリプト切ったブラウザで今時どのサイトを見ようってんでいと 言い切ってももはや大丈夫な昨今、JQuery関連はとっても楽です。 いつもはエフェクトが豊富なjqFancyTransitionsを使ってたのですけども 残念な事にこいつはレスポンシブ対応ではないのですね。 画像サイズを指定してやらないとまともに動いてくれないのです。 対応方法があるはずだ、と海外のフォーラムなどを探し回ってみたけ……(続きを読む)

zRSSFeedの日付表示がブラウザによっては英語になる件

jQueryを使いブログのRSSを取得して表示してくれるとても便利なzRSSFeed。 以前、このハナモゲラボでも紹介したのだけども、こいつを使ってて?と思った事が。 それはブラウザによっては日付の表示が英語表記になってしまう事。 スマホ用のサイトにRSS表示させようとした時に初めて気づきました。 どうやらこれはこのプラグインの日付表記に使われてるメソッドが toLocaleDateStringを使用しているせいだとか。 これがブラウザによって解釈のフォーマットが違っているらしく こういう現象が起こってしまうらしいです。 Google Chrome、Safari、そしてスマホブラウザのSleipnirで英語表記になるのを 当方では確認済みです。 ※参考にしたブログ。 Javascriptのt……(続きを読む)

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

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

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

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

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

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

 
1 / 3123

« Jan 2017 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