カテゴリー別アーカイブ: JavaScript

Google Ajax Feedが廃止になっていた

どうも2015年くらいから、Google Ajax Feed廃止って話になっていたようで、
いつの間にか読み込めなくなっていました。
アメブロなどの外部サイトのブログRSSは、クロスドメインのセキュリティ問題で、うまく読み込めないとかなんとか?
代替方法を検索して、試してみたものの、
結局こちらの方法でしか、うまくいきませんでした
Google Ajax Feed APIを使わないでRSSを取得してみた

サイト主様ありがとうございます。

jsをメディアクエリで切り替える

参考サイト様
https://github.com/paulirish/matchMedia.js/
[JS] window.matchMedia をつかって JavaScript のコードをレスポンシブに分ける方法

http://am-yu.net/2014/10/30/window_matchmedia/
https://dev.mozilla.jp/2012/08/using-window-matchmedia-to-do-media-queries-in-javascript/
http://sozoen.com/yuichiro/javascript-responsive
bxSliderでレスポンシブ対応した際のメモ

指定した表示領域内で、大きな画像をドラッグする

iphoneみたいに、はみだした大きな画像をドラッグできるスクリプト
dragscrollはjqueryで動いていて、sprymapは不要のようです。
dragscroll
https://github.com/asvd/dragscroll
○参考サイト
http://nakazilab.com/dragscroll/
sprymap
https://github.com/slav123/SpryMap

jquery1.x系と2.x系の違い?

以前から、気になっていた違い。
下記のサイト様によると、
1.x ・・・IE8も対応
2.x ・・・IE8は切り捨て御免
http://web-pc.net/jquery012
のようです。知らなかったです。ありがとうございました。

jQueryでスライドメニュー

マウスオーバーするとにょろにょろ?(擬音の選択が難しい・・・。)出てくるナビゲーション。
参考)
http://blog.creamu.com/mt/2009/12/jquery_26.html
http://kachibito.net/web-design/css-menu-with-jquery-collection.html
http://net.tutsplus.com/tutorials/javascript-ajax/how-to-create-a-mootools-homepage-inspired-navigation-effect-using-jquery/
http://design-develop.net/web-design/11-useful-jquery-tab-navigation-solutions.html

Javascriptでページネーション(ページング)

○ページネーション
http://plugins.jquery.com/project/pagination
http://rohitsengar.cueblocks.net/jquery-pagination-plugin/ ※2010年12月24日現在、攻撃サイトとして報告されているとアラート表示された
使い方はこちら参照しました:http://www.skuare.net/2010/01/javascriptjquery_pagination_pl.html
○ページネーションのCSS
http://mis-algoritmos.com/2007/03/16/some-styles-for-your-pagination/
○CSS+Javascriptの参考
http://www.smashingmagazine.com/2010/01/12/45-powerful-css-javascript-techniques/

iframeによるページ切り替えはどうよ

contents以外は全部同じデザインの場合、contentsはiframeにしたほうがいいのだろうか。
要するにアドレスの移動(ページ遷移)はなしに、内容のみ切り替わる。
一応調べてみた
iframeを使用してページ切り替えする
参考)
http://iswebmag-hp.web.infoseek.co.jp/100/sample02.html
http://javascript123.seesaa.net/article/110039975.html
jQueryでhtmlを読み込む(ajaxcodedisplay.js)
参考)http://tani.dank-hearts.com/2008/03/javascripthtml.html
でも結局アドレスが変わらないということは、そのページしかアクセスしていないと捉えられるようで、SEO的には好ましくないみたい。
ちょこっとしたページならいいけど、サイト全部には不適切かな。

ブラウザサイズに合わせて背景画像を拡大縮小する

ブラウザサイズに合わせてcontentsareaを調整するJavascriptは分かったのですが、
今度は背景画像を拡大縮小したい。
jQueryでいいプラグインがありました。
○SuperSized
http://buildinternet.com/project/supersized/
これは『Web Designing』 2010年5月号にも紹介されていたのだが、自分の環境で2.0はなぜかバグが生じてしまったので、あえて1.0使用。
DOCTYPEの内容やxhtmlの記述によりバグが生じていた。
DOCTYPEって結構重要なんだなと思った。
○MaxImage
http://www.aaronvanderzwan.com/maximage/bg.php
これはブラウザでの拡大縮小時に不具合があり。
実は2つのプラグインで画像の見え方が違う。
画像の拡大縮小具合・・?だろうなぁ

ブラウザサイズに合わせてheight調整

ブラウザサイズに合わせて、contentsのheightを調整するJavascript
参考)
http://d.hatena.ne.jp/tilfin/20080127/1201527795
http://d.hatena.ne.jp/modka/20090308/1236495524
ありがとうございますー
すっごく参考になりました。便利!!