script

続き / スクロールに合わせて、移動するメニュー(要素)

この投稿には最新版(続き)があります。
懲りず ) jQueryを使った画面スクロールに合わせてついてくるフローティングメニューが一応形になりまんた。

jQuery練習中

二転三転中、最初の見極めが甘いんだろうなぁ
作って試してみると、じゃあこうゆう時はどうなる?こうなったら?が出てくること出てくること。
あーしたい、こーしたいって欲も。

前回の練習以降に変更した事。

_1.footerと被った部分の処理とあえて移動させない処理。
ウインドウサイズをちょこちょこ縮めていくと(普通はそんな使い方しないけど)メニューとフッターが被る。
処理を1.ヘッダーが画面内にある場合 / 2.フッターが画面内にある場合 / 3.両方画面内にない場合の3段階に分けて、メニューが移動する位置などを決めるようにした。

_2.コンテンツの中身が全然ないhtmlの場合
4.ヘッダーもフッターも同じ画面にある場合はどうなるの?と思って試してみた。
コンテンツ部分を短くしたら(このページは現在製作中です的な長さ、公開するなよって話)不具合が。

_3.コンテンツの中身が全然ないhtmlの場合:修正
短い場合の修正として、コンテンツの高さを無理やり広げた。
そうしたところ、今度はbodyの高さを取得する順番なんかが狂ってしまった。
スクロールに合わせて移動するメニューなのに移動させない処理を追加

_4.javascript外部化、要素名を変数化
いままでのままだと、移動する要素ややヘッダーやフッターの名前を変更したい時に書き換える部分が沢山あるので変数にした、速度とかも。あとhead内の記述から.jsにした。

続きを読む

jQueryの練習 / スクロールに合わせて、移動するメニュー(要素)

この投稿には最新版(続き)があります。
懲りず ) jQueryを使った画面スクロールに合わせてついてくるフローティングメニューが一応形になりまんた。

jQueryの練習
よくある”スクロールしてもついてくるメニュー”を、作ってみようと試行錯誤中。

jQueryの練習

やってる事は、position:absoluteしてある要素のtopを、スクロールした分に近づける処理の繰り返し、だと想像。
スクロール量の取得方法、要素をブラウザ上部からみた位置の取得方法、animateの使い方とイージングの追加方法等を調べて試してみた。

使ったライブラリ

続きを読む

if文、書き方にバリエーションがあるようだ

うちはWordPressもphpも全然初心者であります。
なので思いっきり格好つけて(ソースを書いて)も、周りからみたらきっと恥ずかしい事になってるに違いない。あぁ恥ずかしい。
でもどうせ後で恥をかくなら今恥ずかしい方が良いに決まってる、はしかも若いうちにかかった方がいいって言うし(同じ恥をかく回数がはしかの様に1回ならばの話だけども)。

よし今日も恥をかくことを恐れずに書いていくぞ。と
RADWIMPSの「誤解を恐れず言わせてもらいます」ってそれはもうすでに恐れてます的な前置きでスタートでありんす。

続きを読む

ステージ枠と中央にガイドを引く.jsx

[追記 / 20100501] for文の中身を変更した。

カンバス枠にガイドを引く.jsxを使ったところ

使い方イメージ

上のソースを[適当な名前].jsxで保存。
program files以下のphotoshopフォルダにある\プリセット\スクリプト ( C:\Program Files\Adobe\Adobe Photoshop CS3\プリセット\スクリプト ) にぶち込むと[ファイル] – [スクリプト]から選べるようになるので便利。

[ファイル] – [スクリプト] – [参照(B)…]から[適当な名前].jsxを選んで使える。

ステージ枠にだけガイドを引くには

上の.jsxのままだとカンバスの中央にもガイドが引かれて邪魔かもしれない、真ん中のは必要ないよって場合は1行目の50を削除する。

  • ここを  var posArr=[0,50,100];
  • こうする var posArr=[0,100];

結構作ってる人がいる。

うちが作ってみた理由もこれと全く同じでした。
外枠にガイドを引くスクリプト | Dearps ~Adobe Photoshopに関するTipsや便利な裏技を紹介するサイトです~

カンバスのサイズに合わせたシェイプを描きたい場合等フォトショップはピクセルにスナップしてくれないので外枠にガイドをひく必要があります。

高機能、他のjsxもすばらしい。
Add Guides EX(1.0.0) – Adobe Photoshop

ダイアログボックスからガイドの位置・幅・間隔・数等を指定することによって、自動的に位置を計算してガイドを作成します。

さくさくと引ける。
flabaka – 複数のガイドを一度に引けちゃうJSX

x=50,x=100,x=150,x=200の計4本ガイドを引きたい場合、50,100,150,200と入力し、OKボタンを押します。

自tumblrの画像を表示させるやつ / 編集途中メモ

TumbprAPIのxmlを使って、とりあえずtestデザインのページ下部に設置してみた。
type=photoを50件。

WordPressのshadowbox JSを使っている、が
グループ化されてないので連続して表示させられてない。
ちょっとエッチな画像のreblogが多いので恥ずかしい。

次の作業

shadowboxでグループ化
プラグインの管理画面の作り方を調べて作る / 入力するのはidと読み込み件数くらい。

そのうちやる

記事の詳細画面に入った時のnextボタンをアンカーから次の記事へのリンクになるようにしたいなぁ。