サクサク読めて、アプリ限定の機能も多数!
トップへ戻る
ノーベル賞
program-designer.xyz
jQueryでanimateが変な感じになったらこうしとけ! こんばんは!本日はjQueryに関する小技をサクッとご紹介! animateの動きがなんだかおかしいぞ… jQueryでanimateを使った時に、ボタン連打したり、ホバー連打したら動きが変になることありませんか? 何が原因で、どう対処すればいいのかわからない! ボクがjQueryを使い始めた頃は完全にそんな感じでした。 例えば、aをクリックした時にbがanimateするとします。 こんな感じ $(".a").click(function(){ $(".b").animate({"marginLeft" : "-100%"}); }); スライド式のカルーセルとか作る時に使う感じのコードですね! この場合、animate中にaを3回連続でクリックしたとすると3回分動きます。クリックをメッチャ連打した時にはカオス状態になります…
SVGスプライトを使ってみたお話 こんにちは! 本日はSVGスプライトのお話をしてみようかと思います。 SVGスプライトってなんぞ? cssスプライトって昔の手法でありましたよね。一枚画像でbackground-positionを変更するだけにすれば、画像リクエスト数を減らせるってヤツですね。 それのsvgバージョンかなぁと思っていたのですが、全然違いました・・・ いや、全然違うことはないのかな・・・ svgスプライトを一言でまとめるなら svgファイルを一つにまとめて、使いたい時に呼び出そうぜ! といったものかと。 svgをインラインで書くと、とんでもなくhtmlファイルが汚される気しませんか? 無駄に行数取られて、何個も書いた時には、メッチャ見にくくなるのがストレスでした。 SVGスプライトを使う前の手法 例えばよくあるFacebookのfマークをインラインで書くと <svg xmln
Graph API V2.9でFacebookのイイね数を取得した話 こんにちは!気づけば1年以上全く更新することなく月日が流れておりました・・・ 更に気づけば、ボクも個人事業主として活動し始めております。何だか1年あれば色々な事が起こりますね! さて、今回は超絶ハマってしまったFacebookのイイね数の取得のお話をしたいと思います。 Facebookのイイねの数を取得する まず、イイねの数を取得するには Graph APIに情報を取得しにいく イイね数をゲットする 取得した値を表示する という非常にシンプルな流れになっております。 やり方ですが、 http://graph.facebook.com/?id=[URL] と書くことで、投稿に対するイイね数が「Share」としてjsonで返ってくるわけです。 { "og_object": { "id": "xxxxxxxxxxxxxxxxx
setIntervalとsetTimeoutの小話 こんばんは!本日はjQueryでよく利用する「setInterval」と「setTimeout」の小話をしたいと思います! どちらもアニメーションループなどをさせたりする時に利用するものではありますが、やっている処理とかは同じようで微妙に違うんですね。 ボクはsetIntervalを時計、setTimeoutをタイマーという風に思っております。 setIntervalについて ボクは基本的にこのsetIntervalの方をよく使います。というかほとんどこれ。 setIntervalのメリットとしては、 ・確実にセットした時間でループしてくれる ・書き方がsetTimeoutよりシンプル(個人的にそう思っている) といった所でしょうか。 書き方に関してはどちらも慣れれば同じなのですが、ボクは最初に使ったのがsetIntervalということも
Sassはレスポンシブで本領発揮する こんばんは!突然ですが…Sass使ってますか? ボクはまだSass歴は浅い方かと思いますが、既にこれがない生活は考えられないランキングかなり上位にランクインしております! お金、睡眠、友達、Sassって感じですかね。 タグを入れ子に出来たり、mixinで効率よくしたり、変数やif文のようなプログラムライクなものが使えたり。ホント便利ですよねぇ。 そんな色んな事を効率化してくれるSassですが、中でも一番便利さを感じられるのはレスポンシブの時ではないかなぁーと個人的に思っております。 なぜSassはレスポンシブで便利なのか? Sassを使っていなかった時は、レスポンシブ用のCSSを一つのスタイルシートに書くのは見にくいという事で、別々のスタイルシートにして、読み込んでいました。 ただ、それだとファイルを横並びに表示しないと、どこをどう変更するのかが分かり
jQueryプラグインのPJAXを使ってページ遷移をやってみよう! こんばんは!今日はjQueryプラグインのPJAXを利用してみましたので、そのソースやサンプルを公開したいと思いますっ! PJAXとは? まずPJAXって何なのでしょう・・・? history.pushStateというものとAJAXを組み合わせたものがPJAXであります!! ・・・ 意味わからんね・・・ 実はHTML5になってからHISTORY APIというものが追加されました。(正確には以前からあったけれども、今回のPJAXに繋がる機能が追加されました) 難しいことは考えず、Javascriptとかで利用できる項目が増えたって思ってもらえればわかりやすいかなと。 ざっくりとHISTORY APIが何をするかと言うと、画面を遷移せずにURLを変更したりすることができます! そして、ご存知AJAXは非同期通信で狙ったデータを
このページを最初にブックマークしてみませんか?
『program-designer.xyz』の新着エントリーを見る
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く