ど素人から毛を生やす。<延>

javascript

レスポンシブサイトに対応したスライドするスライドショー

Web > javascript 2015年2月24日(最終更新:4年前)

どもです。
スライドショーについて、フェードタイプのものカルーセルとしても使えるスライドするものの二種類紹介していましたが、後者についてはこのままではレスポンシブ(スマホ)サイトに対応できません。

ので、レスポンシブサイト対応版作りました。

CSSは毎度のごとく、
祖父母要素{ width:コンテンツ幅; overflow:hidden; }
親要素{ width:すごく大きな数; }... 続きを読む »

スマホサイトによくあるタッチでスライドしてくるメニューってかなり簡単に作れる件。

Web > javascript 2015年1月13日(最終更新:4年前)

どもです。

スマホサイトを作るにあたって、注意しなければならないのがヘッダー、特にグローバルナビゲーションだと思います。

PCサイトだとヘッダーに情報量が多くてもそこまで支障はありませんが(僕はヘッダーに情報を詰めるの嫌いですが)、スマホサイトで同じことやるとファーストビューがヘッダーのみ、しかも何度かスクロールして漸く本文が出てくるような惨状になります。
直帰率100%は免れません。

ということで、グローバルメニューも常時は隠し、クリックしたらオープンする仕組みにしたい。

で、それを実現するためのjQueryって実はかなり簡単という話です。

たったこれだけです。(゚∀゚)(゚∀゚)

slideToggleがかなり便利でして、これを使うことで記述量は半分以下になります。

slideToggleはslideDownとslideUpを交互に行ってくれるものです。
display:noneならslideUpを、そうでなければslideDownを適用してくれるので、スイッチ用の変数も不要です。

CSSはお好みで。
但し、レスポンシブサイトの場合、ナビゲーションを隠さないサイズの場合に、
ナビゲーション{ dispyay:block  ... 続きを読む »

スクロールについてくる要素にはやっぱりposition:fixedを使いたい

Web > javascript 2014年12月25日(最終更新:8月前)

どもです。
今年もあと少し。今日はキーボードを洗おうと思います。

キーボード引っこ抜きには、ダイヤテックのKeyPullerが良さげ。
といっても、これしか持ってないんですけどね(゚∀゚)

 

さて、サイトコンテンツの横にバナーがついてるサイトとか、
一番上へ戻るボタンが常時でているサイトとか、
スクロールによらず、一定の要素を同じ場所に表示し続けるjsというのは結構需要がある感じがします。

単純に設置するだけなら、

あとは要素にtransitionでも設置してアニメーションをつけつつ、要素を画面の外中行き来させれば良い。

でも、これって結構美しくないんですよね。
ウィンドウ幅に関係なく一定の場所に登場するので、狭ければコンテンツに被って見づらいし、広ければ画面の端っこの方に要素が表示されることになります。

h261225

それに、ヘッダーやフッターに要素を被せたくない場合もあります。
そうなると、理想はこういう形になるかと。

h261225_2

これを実現するときに問題になるのは、fixedの基準位置はウィンドウであるということ。... 続きを読む »

ブラウザバックしたらjs(jQuery)のイベントが起こってくれないとき、こうすると解決するかもしれない。

Web > javascript 2014年12月3日(最終更新:1年前)

どもです。

今回はjQuery弄ってて躓いたのでめもめも。

 

フォームメールcgiに連動したjsを作ったは良いのですが、cgiのフォームは大体が「確認画面」「完了画面」への遷移をします。

入力内容に不備があってエラーになったり、入力した内容を修正したいときはブラウザの「戻る」を使うか、onclick="javascript:history.back()"などブラウザバック機能を搭載したボタンを設置するのが定石です(でないと入力した内容がチャラになりますし)。

で、今回、ブラウザバックしたらフォームに連動したjsが上手く動いてくれませんでした。
具体的には、デフォルトで内容Aを表示・ラジオボタンBをチェックすることで内容Bを表示、とするjsで、Bを選択して確認画面→ブラウザバックしたら、ラジオボタンはBのまま内容Aが表示されていたという感じ。
…文章にするとわかりにくいなぁ(´・ω・`)

ともかく、どういうやり方ならブラウザバックしても動くのか、調査してみました。

NGなパターン

  • トリガーを設置せずに直接書き始める
  • $(window).bind("unload",function(){});
  • $(window).unload(function(){});

何故でしょうか。
一番上はともかく、他はGoogle先生的には太鼓判のやり方のハズなのに動きませんでした。... 続きを読む »

指定の数だけ文章を量産し、文中の特定の文字列を連番にするjs

Web > javascript 2014年10月24日(最終更新:4年前)

どもです。

今回はWeb作成で稀によく陥る「とても面倒くさい作業」への対策をしたいと思います。

成り行き(こういうときにお使いください)

今回、WordPressのカスタムフィールドで従業員情報を登録するということになったのですが、

・画像
・名前
・役職
・パーソナルデータ

を、1投稿につき40個分登録してくれということになりまして…

もう、それ用のカスタム投稿作ってしまいたい…
と思いましたが、そういう要望なので仕方なしです。

カスタムフィールドテンプレートでフィールドを登録して、フィールド名を連番にすればテンプレートの方ではループで情報を出せます。

が、問題はカスタムフィールドを登録する方です。
ひとつひとつ、4*40項目を手打ちで登録するなんて、途中でミスが起こらないわけがない。

ので、連番で出力するプログラムを組んでしまうことにしました。... 続きを読む »

ページ内で絞込検索やページ送りをするjQuery

Web > javascript 2014年10月1日(最終更新:4年前)

どもです。
喉がほの痛い餅。です。

前回のjQueryを改良してみました。

概要

カテゴリのボタンを押すと、対応したカテゴリのもののみが表示されます。
新着○件に対応のほか、ページ送りにも対応しています。

WordPressやMovableTypeなどのCMSでも手軽に扱えるよう、値はClassで管理されています。
使用するのはjQueryのみで、ページ遷移や外部CSVを読み込む必要性がないので、CMSテンプレートを余分に作る必要がない、サイトの他プログラムに影響を与える可能性が低いなどの利点を持つスクリプトとなっています。

displayをnoneにしたり表示したりしているので、ページ上に存在するコンテンツは非表示でも消えていないこと(読み込まれていること)に留意してください。
コンテンツの量が多大だったり、高解像度の画像を使用していたりするとページは重くなります。
そのような場合は、素直にCMSを使用したり、外部CSVを使用した都度読み込み型のプラグインに変更することを推奨します。

デモ

デモを見る

download

... 続きを読む »

カテゴリや新着を選択してデータ表示を切り替えるjQuery

Web > javascript 2014年9月5日(最終更新:4年前)

どもです。
お腹が空いた餅。です。

意外と使いどころのありそうなjsを開発したのでソース晒しときます。

今回の案件は、
「データ一覧を表示するページで、カテゴリのボタンを押すことでデータの表示・非表示を切り替えたい。また、新着記事も同様に処理したい。」

……わかりにくい!!

図解するとこんな感じ。
h260905

 

 

ソースはこんな感じ。

CSSのところは、カテゴリボタンの選択時・非選択時のスタイル切り替えです。

新着記事のカテゴリボタンには必ずクラス名「list_new」をつけてください。

カテゴリボタンとカテゴリに属するデータは同じクラス名をつけることでセット化します。... 続きを読む »

ページ送りを簡単に実現するjQuery

Web > javascript 2014年8月8日(最終更新:5年前)

どもです。
キングダムハーツ3DS版を購入した餅。です。

まだプレイ時間1時間弱ですが、早速登場したすばせか民たちにホクホク(゚∀゚)
ファンタジー出身の方々とリアル若者との会話ズレが見てて面白いですw

「守ってね、騎士(ナイト)さん?」
「!? ……俺はそんなんじゃない」
「えっ。素で返さないでよ……」

の流れが妙にツボりましたw
そしてヨシュアの隠す気すらない黒幕臭wwある意味ネタバレww

久しぶりにJavaScript。

本日の課題は、「ECCUBEの商品レビューでページ送りしたい」でした。

jsを使ってやって欲しいとのことでしたが、探して見つけたjsでのページ送りは
コンテンツを一定数ごとにdivで区切る必要があるものでした。

餅。ECCUBEの出力を制御する方法なんてわかりません。... 続きを読む »

矢印やサムネで操作するスライドショー

Web > javascript 2014年6月18日(最終更新:5年前)

どもです。
美容院で見つけた漫画が思いの外面白くて翌日に中古本屋に行った餅。です。

大判とはいえ一冊360円はやけに高いな…と思ったら、普通に現在も連載中の漫画でした。
美容院の漫画って古いものが置いてあるという思い込みがあったようです。

なんか悔しかったので既刊全部買って帰りました。財布が寒い…

 

さて、前々回はカルーセルでしたが、
今回は割と万能なスライドショーのソースを晒します。

スライドっていうかフェードで切り替わるのですが、これって何と呼ぶのでしょう?
スライドのが良いっていう場合は前回のカルーセルを使えばいけます。
スライドとカルーセル両対応。... 続きを読む »

かなり万能なカルーセルだと信じてるjs

Web > javascript 2014年6月13日(最終更新:5年前)

どもです。
休日が待ち遠しい餅。です。

今回はjs、というかjQuery。

カルーセルというものについて、今までその都度作ったり改造したりしていましたが
そろそろこれ一つで大体の状況に対応できるんでね?って感じになってきたので
ひとつの完成品として公開。

HTMLは、祖父母要素>親要素>カルーセル中身と設置。

CSSは、祖父母要素にwidth:カルーセルの幅とoverflow:hidden;。
親要素にwidth:カルーセル合計*4以上。
カルーセルはfloat:leftか、display:inline-block;letter-spacing:-.40em;かそこらで
ぺったり横並べ。

この記事は役に立ちましたか?
  • _(:3」∠)_ 面白かった 
... 続きを読む »