2013.01.20

jQuery スクロールに付いてくるtopに戻るボタン

先日に引き続き備忘録なんです。
今回はこのブログのヒヨコがにょろっと横から出てきて、にやにやしながら着いてくる スクロールに追随して動く”トップに戻る”ボタンについて。
これがfooterに達したら固定しようという試みです。

元のjQueryはこちらから頂きました。多謝!!!勉強になります!
jQueryでスクロールすると表示する系いろいろ | webOpixel

上記webOpixelさんの

1.ちょっとスクロールしたら「トップへ戻るボタン」を表示
 ・スライドアニメーションして表示

の下からでて来るところを横からでてくるように変更させて頂いて使っております。

いまさら気付いたんですが、iPhoneのサファリで閲覧すると最下部までスクロールした時にfooterにもろかぶりです。
下になってしまうrssアイコンはあまり利用することもないと思いますが、気になるっちゃー気になる。
下までスクロールしたらfooterのちょうどいい位置にボタンが固定されるようにしたい。

webOpixelさんの同ページに“下部までスクロールすると横からスライドして表示”の例を見つけ、参考にさせて頂きました。

しかし、.scrollまわりのバグ?らしくiosのSafariでは期待通りには動きません。
Safari及び普通のブラウザでは正常に動作するのでそのまま使用。
iPhone,iPad,iPod,いちおうAndroidはデフォルトのscriptで使うことにしました。

//追記 jQuery iOSでもひよこを止めろ!
という記事を書きました。ブラウザ共通のスクリプトでひよこを止めることができました。

ひよこを止めろ

まずは使わせてもらっている部分と追加したscript

ハイライトしたところが付け加えた箇所です。

changeBottom = $('body').height() – windowRoll.height() – 190;

bodyの高さを.height()で取得して、そこからウィンドウの高さとボタンをストップさせる位置の下からの距離を引き、基準の高さchangeBottomを決めときました。

if ($(this).scrollTop() <= changeBottom) {

んで、.scrollTop()で取得した数値がchangeBottomより小さい まだ基準までスクロールしてないとき
changeBottomより大きい 基準までスクロールしたときを条件づけ、それぞれに用意したクラスを加えたり除いたりすることにしました。

ボタンはposition:fixedでスクロールしてもウィンドウに位置固定され、追随しているように見えてます。
基準値に達していない時は、fixedでウィンドウの下から20pxの位置に表示されます。
基準値に達した時は、absoluteで親要素に絶対配置されます。

ios対策にデフォルトで使用

//追記 jQuery iOSでもひよこを止めろ!
という記事を書きました。ブラウザ共通のスクリプトでひよこを止めることができました。

そしてios Safari用に振り分けるため
上記jQueryの21行目からのハイライト部分に分岐とclassを追加。

cssは単純に重ならないようbottomのpxを増やしました。
当初fixedを忘れて悲しいことにw

いや〜
使わせて頂いたscriptに少々何か加えただけなんですが、相当時間掛かっちゃいました。
javascriptの基礎が全くないというのはアレです。やりながら覚えるしかないですねぇ。

2013.01.16

備忘録 jQuery .loadでfooterを管理 & ウィンドウサイズで位置変更

備忘録を長年、”ぼうびろく”だと誤認していた管理人です。みなさまいかがお過ごしですか。

ちまちまとメインサイト”さわやかまみれ”に学習を兼ねてjQuerを装備しております。
今回は”footerを外部から読み込む”のと”ウィンドウサイズによって要素の位置を替える”二つのscriptを装備してみました。

.loadで共通コンテンツを一括管理

ページ数が増えてくると各ページのfooterなどの共通のコンテンツをいちいち手動で修正するのは苦行だったりします。
DWのテンプレートやAptanaなどエディタのページ置換を利用するのも手ですが、DW持ってないしw置換もわりと手間が掛かります。

そこでjQueryでAjaxとか言うのを使って、ひとつのhtmlを修正すれば全てのページに反映されるようにして楽しようと思います。
しかし、Javascriptをオフで閲覧する場合は全く持って表示されないことになりますので、とりあえずリンクや新着などの利便性を考えて設置したfooterだけをjQueryで一括管理することにしました。

footerの内容を記述するHTMLファイル/side-footer.htmlを作っておきます。
DOCTYPEやheadは要らないようですが、愛用のAptanaが気にするので自分は一応いれておきました。
読み込みたい部分にidを振っておきます。#footerとしました。

このdivの所(”#footer_wrap”)に、命令.load(外部に作ったファイルside-footer.htmldiv#footerを読み込んでね)
という判りやすいscriptで出来ますた。

パスに注意!
自分の場合は、間抜けなことにリモートとローカルのドキュメントルートのお名前が違うので、相対パスを使っています。
そうすると別の階層につっこんだページではfooterにあるリンクが切れてしまいます。あまりスマートな方法ではありませんが、読み込むhtmlファイルを別階層用に用意しました。
出来うるなら、MAMPなどでローカルサーバを立ち上げ、公開するサーバと同じ環境を構築してフルパスでリンクを貼るのがベターかと思います。
蛇足ですが、サーバを介さずに直接ブラウザでhtmlをプレビューすると.loadが実行されないことがあります。MAMPおすすめ。

Ajaxとやらは、セキュリティ上の理由で別のドメインのファイルにはリクエストできません。実現するにはもっと難しいことをせなばならないようです。クロスドメインでググってみますか。

.loadした部分にscriptが効かないYO!

クリックなどイベントが発生する要素では.liveを使うと良いようです。

【追記】.liveはjQuery 1.9から使えなくなってしまいました。換わりに.onを使うようになりました。
jQuery 1.7から追加されたイベントですので、早めに書き換えるのが吉かもしれません〜

当サイトでは、読み込んだfooter内のボタンをクリックでスクロールしてトップに戻るという処理をしていますが、

と、することでクリックした時にscriptが実行されます。
.liveで使えるイベントではない場合、.loadのコールバック関数とやらを使います。まだちゃんと理解しておりませんので備忘録ということで勘弁してください。事例は次のウィンドウサイズで要素の位置を変化させる”スズメは右にscript”に続きます。

スズメは右に

上記.loadでfooterを読み込んだ訳ですが、footer内のスズメのrssアイコンの位置をウィンドウの幅によって変えたかったとです。

footer_su
wrapにしているdivにcssでmin-width:950pxを指定しており、尚かつアイコンをposition: absolute;right:-15pxでwrap外に出しております。

ウィンドウの幅が950px以下で読み込んだ時、背景が切れるなどかっこ悪いので、jQueryでアイコンのright:-15pxを10pxに替えて内側に表示することにしました。

なんかこんな感じで、ウィンドウの幅を.width()で取得して、不等号(より大きい)という条件にしました。
ウィンドウの幅が982pxより大きい時、cssでright:-15px
そうじゃない時(小さいとき)cssはright:10px
ウィンドウの幅にはスクロールバーの部分も含まれるようなので、標準の17pxを足しておきました。(スクロールバーの分の幅を足して置いた方が余白が出なく安定します。)

そしてこのif〜を.loadで取得したfooter部分に効かせたい訳ですが…ちょっとお悩み。上記の.liveには該当するイベントはありません。

でどーよ? と思いましたがjQuery1.8では非推奨らしいのと(1.7使ってますがw)画像なども全て読み込んだタイミングで働くので画像ばかりのページだと厳しそうです。
.loadのコールバック関数を使えば外部ファイルを読み込んだタイミングで上記のifが読み込めるらしい。

{ }の中に上記のif〜を突っ込んでやればいいような気がします。
しかし、if〜は読み込み時のみならず、ウィンドウリサイズ時にも使い回すのでユーザー定義関数にしときました。

FirefoxとSafariでは動いておりますw

.onで動くようにしたスクロールしてトップに戻るクリックイベントを
.loadのコールバック関数に仕込んでもよろしいかと。かえってスマートかと思われ…。お、.onは勉強なんだからねっ///。

2013.01.05

EIZO EasyPIX SoftwareがMac 10.8に対応したけれどー

twitterでもさんざん愚痴ったのですが、まとめて置きます )`ε′(

miniにこのディスプレイ SX2262W-PXGYを使用してるですが、キャリブレーションソフトとツール同梱モデルなので重宝しておりました。
2011年7月に購入したのですが、何故か現在値上がりしてますね。ちなみに当時¥57,096でした。
黒モデルは、¥52,358と5千円弱、値下がりしてますが、なんかあんまり安くなりませんね。

それはいいとして。(値下がったらもう一台欲しいw)
対応の遅れていたEasyPIX Softwareが2.3.0で山ライオンに対応しました!ちなみにここからたどれます
早速いそいそと前バージョンをアンインストールののち、ダウンロード&インストールしたのでございます。

なぜかインストールできません…しおしお〜
インストーラは無事に完了しました!とか言いやがりますが、その後すぐ開く筈のAdobi Airも立ち上がらなければ、Applicationフォルダにも何も生成されません。

結論から申し上げるとMacでマルチブートやTime machineを利用している場合、他のHDDボリュームの影響によりEIZO Easy PIXのインストールが正しく完了しない。とのこと。

対応
EasyPIX2.3.0、Adobe AIRを共にアンインストール(ライブラリなどには色々インストールされてる)
外付けやボリュームをアンマウントして、レッツ インストロール!!
それでもダメなら物理的にケーブルを引っこ抜いてお試しください。

一応カスタマーサービスに問い合わせをしたのでご報告。もちろん意訳。こんなふざけた事は仰いません。

返信メールが来るまで、どーにもヒマなので悔しいので、コンソールをつらつらと眺めていたら…

installed app~中略~/TimeMachine/~中略~/Macintos HD/Applications/EIZO EasyPIX.appとか仰ってる。
なんだってーΩΩΩ

外付けのTimeMachineの中のMacintos HDをわざわざ探し当て、その中のApplicationフォルダへインストールしてやがるじゃありませんか!
インストーラでボリュームを選択するプロセスがあり、その時間違えたのかと思ったので確認しましたがMacintos HDは一個しか出てきませんでした。間違えようがない訳で。
インストーラはTimeMachineの中のMacintos HDにインストールを試みますが、どうやらTimeMachinの中のデータは無傷のようです。一安心。
TimeMachineを使っていると他のソフトのインストールでも出くわす問題なんでしょうか?

早まってw山ライオンにしてしまったので、久々のキャリブレートになりました。
操作は前バージョンと同じです。変更点はなし。
設定3つを、気軽に変えられるので便利でございます。

2013.01.04

Aptanaをアップデートするとエラーでちゃうよー

どうせ不具合が出るに違いないと根拠なく思い込み、放置していたAputanaStudio3のアップデートを正月早々掛けて見ました。
案の定、なんかcom.aptana.editor.findbar.impl.FindBarDecorator.access〜ほにゃらら
とか文句言ってファイルを開いてくれません。
Eclipseでは周知の問題のようでググると答えは「-cleanオプションで起動せよ」とすぐさま見つかるのですが、
私の環境 Mac OS X 10.6 Snow Leopard では

AptanaStudio3 -clean
または
start .\AptanaStudio3.exe -clean %*

と書いたテキストファイルで起動させても、クリーンオプション付きにはならんようです。

ターミナルからコマンドを実行すると

無事、ファイルが開けるようになりました。やったぜ!(∩・ω・)∩

全然使いこなせてないけど、Aptana 割と気に入ってます。
導入もわりとGitがらみで苦労したのですが、備忘録をつけてなかたのでもう忘れてまいました。
MAMPも忘れてまいましたし、環境を再構築する羽目になったら泣けます。
Take it easy だが!マメにメモろう…今年の抱負が出来ました。

Aptanaアップデート騒動で参考にさせて頂いたサイト 多謝!
Aptana Studio 3 | 男のアロマ塾
Aptana3のインストール・日本語化・Subversiveインストール | おかひろの雑記
日本語化の確認と「clean」オプション – Aptana Studioを使ったRuby/RoR開発 | rubylife

2013.01.01

あけまして2013

2013ometto

あけましておめでとうございます〜
今年もよろしくお願いしますですよ〜

長樂萬年とは、「楽しきことの久しく限りなきこと」だそうで。
今年はそんな一年にして、そんでずっと生涯楽しく暮らそうと思って。
働くことはもちろんですが、日々、遊びを忘れてはいけません。
どうせなら、楽しく日々の糧を得るのがよろしいですな。
艱難辛苦の中にも楽を見つける。
そんな事が大事なんではないかと思います。

さて、年賀状は本年も元日に間に合わなかった進行な訳で。
いざ取りかかろうとしたら、昨年photoshopとpainterをアップグレードしたもので、photoshopはともかく最近アプグレして余り触るヒマのなかったpainterが異世界でした…。
なんか描いて慣れたいと思います。

皆さんの一年が充実した楽しい年になりますように☆

PageTop