JavaScript

2/2ページ

【超簡単】Masonryの使い方と最低限の実装方法

写真を縦横比を維持したままタイル状に綺麗に並べるためのライブラリー「Mosonry」の必要最低限の実装方法です。 CSSで正方形にトリミングして並べる方法は一般的ですが、トリミングせずに並べる必要があったので、調べてみました。 検索して出てきた解説サイトの通りにやってもうまく行かなかったり、オプションなど複雑な内容で難しかったので、公式サイトを参考にして、できるだけ最小限の実装をしてみました。 M […]

【Javascript】Ajaxを使ってサーバ(PHP)にデータを渡す方法

Ajax「Asynchronous JavaScript + XML」を使ってJavaScriptからサーバ側(PHP)にデータを渡す事ができます。 サーバ側でデータを受け取って処理した後、JavaScript側に処理結果を返す事もできます。Ajaxは基本的に非同期で実行されます。 非同期について JavaScriptはデータを送った後、サーバ側(PHP)から処理結果が帰ってくるのを待たずに、次の […]

【JavaScript】クリックイベントが親要素に伝播しないようにする方法

例えば、メニューボタンを押すとメニューが開き、もう一度押すと閉じるというようなトグルボタンを設置する時、メニューを開いた状態で画面のどこかをクリックすると、メニューが閉じるという仕様になっている事が多い。 そこで自分も、そういう仕様を実装しようと、bodyなどにクリック判定をつけて、画面のどこかをクリックした時メニューを閉じるように実装した。 しかしこれでは、メニューボタンを押したとき、親要素のb […]

IEでonloadイベントがエラー(IDが定義されていません)の解決方法

以下のようなonloadイベントが、IEでだけうまく動かなかったので、メモ。 ちなみに、この状態だと両方とも動きます。 ・・・の所へいろんなスクリプトが入った状態だとIDが定義されていませんというエラーで動きませんでした。 他のスクリプトとの干渉かもしれませんが、突き止められませんでした。 動かなかったスクリプト [crayon-61a4971d891b6562315421/] 解決方法 [cra […]

ページ読み込み後に実行する関数の違い一覧(JavaScriptとjQuery)

ページを読み込んだら、すぐに実行する関数、それぞれ実行するタイミングや動作が違う。 短縮形なども含めると結構たくさんあるので、まとめてみました。 JavaScript window.onload = … [crayon-61a4971d89220504212982/] HTMLや画像など他の全てのデータの読み込みが完了した時に実行される。 複数ある場合は、最後の処理が実行される。 document […]

コピペでできるChart.jsの使い方(最低限の実装)

ホームページにグラフを描きたいなと思って、ちょっと検索してみたら意外と簡単な方法で実現できたのでご紹介。 Chart.jsという便利なライブラリーがあり、これを使えば簡単にブラフを描く事ができます。 HTML5から採用になったcanvasタグを使ったライブラリーのようです。 コピペ用コード 下記がサンプルコード コピペするだけでサンプルグラフが表示されます。 [crayon-61a4971d893 […]