カテゴリー: javascript

httpsでレイアウトが崩れた

昔つくったサイトでレイアウトが崩れると連絡がありました。

話を聞くと、httpsで見るとレイアウトが崩れるとか。
そんな事あるのかな?と確認するとfloat部分がカラム落ちしてました。

httpだとこうなってる
2015-02-16_r1

httpsだとこうなる
2015-02-16_r2

現象としては、横並びさせてる3要素の最後のmarginをjsで0にしてたんだけど、それが効いてない感じ。
jqeury本体は▼のを使ってた

もしかして、httpだから?
で調べてみるとプロトコル表記は省略出来るとの事で、次のように変更。

参考

全般的なスタイルルール プロトコル 埋め込みリソースからプロトコル表記(http:,https:)を省略する。

httpsだとjQuery/Ajaxは使えないのでしょうか?


子要素Bを持つA要素を指定するには

CSS3までのセレクタは、特定の子要素を持つ親要素を選択できないけど
jQueryの:hasフィルターで出来るよ

例えば、aタグを含むliを選択してみる

aタグを含む<li>に.targetが付いてるのが確認できる
[image]:hasフィルター


[jQuery]$(this)の親要素や子要素を指定するには。

thisを使ってなかったからthisの子要素のアクセス方法が全くわからんかった。

当たり前だけどこんな風に出来無いわけですよね
[text]$("this ul").addClass("hogehoge");[/text]

childrenを使うといいみたい。

親にはparent

参考 / まよねこ inside » Blog Archive » 【jQuery】thisの親や子要素の指定方法[リライト版]

宿題
ひろし+すみれのliからから友蔵+こたけのliを指定するにはどうしたらいいんだろうか。


photoshopでfireworksのカンバスを合わせる、的な事をする.jsx

[image]カンバスをフィット

fireworksの「カンバスを合わせる」って便利ですよね
photoshopでも使いたい!と思い調べてみたところ
イメージ – トリミング
イメージ – すべての領域を表示を組み合わせて
同じような事が出来るみたいだったので
.jsxに出来ないかなぁと試してみました。

不具合や必要ない記述があるかと思いますが、自分が使う範囲では困らない感じになったのでとりあえず公開してみます。

続きを読む


スクロールバーを変更するjscrollpane.js

SAVEJAPAN! PROJECTのツイッターのスクロールバーのところが、
デザインにあってていいねぇなんて思いながら見ていたら
だんだん自分でも使ってみたくなったので調べてみるとjscrollpaneというのを使っているようでした。

これ2009年くらいに話題になったらしいんだけど、全く知りませんでした。。。

ここ / jScrollPane – cross browser styleable scrollbars with jQuery and CSS
iframeも、親htmlにjsを追加するだけで(operaでマウスホイールが反応しなかったけど)スクロールバーを追加できたり
子htmlに直接jsを追加する事でマウスホイールも反応するように出来るかんじ。

練習

乱雑モックアップ|jQueryでツイッターを取得してjscrollpaneを適用
[image]jQueryでツイッターを取得してjscrollpaneを適用のスクリーンショット

ツイッターをjQueryで読み込む方法の参考にしたページ

jQueryでTwitterの自分のつぶやきを表示する | webOpixel