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

javascript

Lightboxでhover時のタイトル除去v2.7

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

どもです。
原付の修理代で懐が痛いくせに中古ゲームを買った餅。です。

TOH-Rをクリアしたらさ、
TOI-Rがやりたくなるのは当然の流れだったよ。

H-Rにちょろっと出てくる異世界話が気になってくるのだもの。

 

さて、今回はjsの話。

リンクを押すと画像が浮かび上がるアレ、ライトボックス。
最も定番的なライトボックスのjsは、やはり、
http://lokeshdhakar.com/projects/lightbox2/
だと思います。

今回、こちらを使って作業をしていたのですが、ひとつ問題が発生してきまして。

lightbox2のキャプションはtitle属性によってつけられますが、このtitile属性はリンクをhoverすることでも表示される(というか本来はそのための)属性です。

今回はキャプションに長文を入れる必要があったのですが、普通にtitleに入れるとhoverしたとき酷いことになります。... 続きを読む »

餅。式無限ループjs

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

どもです。
残業嫌いの餅。です。

同僚が職場で朝を迎えたそうです(´・ω・`)

さて、今回はjsについてです。

最近、いわゆる高級ペライチサイトなんかだと、ページの無限ループってよくありますよね。

あと、スライドショーやカルーセルなんかを作るときにも、端まで行ったら最初に戻るよりループし続ける方が美しい。

jsで無限ループを実現する方法は色々あると思いますが、僕なりのやり方を公開してみたいと思います。

h260320

昔、RPGツクール2003を触ったときには「マップのループ」という項目が存在しましたが、XPになるとそれが廃止されてしまったという事例があったのを思い出しました。

対策も同じようなもので、端まで来たら端に自動ワープさせれば良いです。

で、ワープの方法ですが、僕的には、

$("ワープさせたい要素").animate({scrollLeft(またはscrollTop):開始地点}, 1, "swing");

が好きですね。
…いえ、もっと簡単にできるのですが、このコマンドはかなりよく使うので、運用が楽なんです、それだけですw... 続きを読む »

サムネクリックでメイン画像が切り替わるjs

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

どもです。
そもそもGCが行方不明なことに気づいた餅。です。

…今の子どもにGCって通用すんのかな…(´・ω・`)

さて、今回はjsについてなのですが、

並んだサムネイルをクリックすると、メイン画像エリアの画像がクリックしたものにフェードで切り替わる

という、よくあるシステムを導入することになりまして。
色々弄ってたら、ものすごいシンプルな方法で実現可能だとわかったのでめもめも。

HTMLはこんな感じ。

<div class="image_box">
<img src="xxxx.png" id="slide1">
<img src="yyyy.png" id="slide2">
... 続きを読む »

YouTube Player APIで動画を複数表示

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

どもです。
職場の乾燥具合に驚いた餅。です。

まぁ一日中パソコン起動させてるような職場ですし、湿度高くても問題そうですが…

さて、今回はYouTube Player APIについて。

先日、サイトにyoutube動画を貼り付けるという依頼がありました。
その際の条件は「関連動画は表示しない」というものだけだったので、

<iframe width="xxx" height="yyy" src="//www.youtube.com/embed/動画ID?rel=0&showinfo=0&autohide=1" frameborder="0" allowfullscreen></iframe>

という方法で導入しました。... 続きを読む »

超シンプルスライドショー

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

どもです。
仕事の夢を見ると寝た気がしない餅。です。

今日はまたスライドショーを組むことになったのですが、今回の要望は

「ボタンなし、リンクなし、ただ画像が一定間隔で切り替わるだけ」のとてもシンプルなものでした。

ならば僕は、超シンプルなスライドショープログラムで応えましょう。

というわけで、毎度のごとくHTML、CSS、jQueryでスライドショーを作ります。

まず、HTMLですが、

こんな感じでクラスを指定します。

こんな感じにスタイルを指定。
簡単スライドショーの定番、position:absoluteで画像を全て同じ位置に配置します。

スクリプトはこれでおkです。
もう説明することもないシンプル具合w

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

フォームメールの値をjsで操作

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

どもです。
そろそろレジンクラフトも佳境なのに、週末に予定ぎっしりの餅。です。

今回はフォームメールの話をします。

こんな話が来ました。

h260227

無茶です。

とは言えないのが辛いところ。

正しくは、「インデックスのリンクによってフォームのセレクトの初期値が変動し、更にそのセレクトの値によって送信するメールアドレスを変更する」なのですが、ウチで使っているフォームメールcgiは1つ1メールアドレスしか設定できないので、必然的に複数のcgiを積む必要性が発生します。

では、まずは「セレクトの値によって使用するcgiを変更する」方から。

借り物拾い物をつぎはぎした感じが丸見えですが…

selectとIDを設定したセレクトにonchangeをつけ、何でも良いですが取り敢えず値をonChangeSlectに設定。

onchangeで関数が発動して、選択したoptionのvalueを取得します。

で、このvalueの値によって条件分岐です。
今回はformmailとIDを設定したformのactionを取得し、変更します。

cgiのURLですが、ディレクトリ名(またはファイル名)を「form1」のように、特定の文字列と連番にしておいてください。
この段階では無意味ですが、後の作業で必要になります。... 続きを読む »

IE7だけjQueryが動かないとき

Web > javascript 2014年2月14日(最終更新:11月前)

どもです。
今や旧IEへの対応なんざやって8まで、7以下は無視。
なんて方が多いと思いますが、案件によってはそうはいかないのが悲しいところ。

IE7(あるいはそれ以下)のみでjQueryが動いてくれない事件への対策を記録してみます。
(2016.02.18事例追加につきレイアウト・文面一部変更)

末尾カンマへの不寛容ケツカンマ問題とかあだ名ついてて草)

2014.2.14

「GalleryViewを使っているがIE7だけ動かない」

外国産のjQueryですから、旧ブラウザへの対応を打ち切っていてもおかしくありませんが、調べてもそれらしい話は一切出てきません。
プログラムの競合なども考えましたが、それも違うようです。

こういうときは、プログラムがバグっていないかブラウザのコンソールでチェックです。
google ... 続きを読む »

シンプルで更新が簡単なjsスライドショー

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

どもです。
最近、妙に夢見の悪い餅。です。
大学4年の正月休みに資格必須の集中講義を寝過ごし逃すとか、なにこのリアル過ぎてワロエナイ夢…。

さて、今回はJavaScriptについて。

スライドショーをjsで作ることになりました。
画像が入れ替わって、それにリンクが伴っている単純なものです。

ただし、割と更新が頻繁に行われる上、更新するのはJavascriptにあまり詳しくない人です。

しかも、できるだけJavaScriptの編集だけで更新を行いたいとのこと。

それでいて、なぜかjQuery使用不可。

これは、なかなか難題かもしれぬ…

てなわけで、こんなん作りました。
ソース長ぇw

HTML

css

なwwげwwぇwww... 続きを読む »

jQueryでカルーセル作るお

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

どもです。
最近ソード・ワールド2.0の大型サプリを買い揃えてしまったので、今度はリプレイを集めようかと画策している餅。です。

今回はWordPressから離れてjQueryの話。
ところで、この記事書くにあたって僕は初めて「カルーセル」という言葉を知りました。
今までスライドショーの一種だと思っていたのでちょっと驚き。

そんでもって、今回作るのはこんな感じのもの。

h260121_1

単に作るだけなら簡単ですが、問題はこのカルーセルを載せるのがレスポンシブサイトだということ。

カルーセル本体のサイズが一定でないということは、終端がどこになるか定かでないということです。

さて、まずはHTML&CSS。
こんな感じです。

h260121_3

ulをものすごく大きな数値に設定します。
そして親要素をoverflow:hiddenにし、ulを覆います。

で、肝心のjQueryはこうなります。
以下はliの幅を170px、左右の余白を110pxとしたときです。

仕組みとしては、ボタンを押された瞬間の画面サイズを取得し、「(画面サイズ-余白)/liのサイズ」でページあたりの表示数を取得。... 続きを読む »