2014-07-01から1ヶ月間の記事一覧
下記のような書き方は機能を切り分けたりする時によくやると思いますが、オブジェクトリテラルが入れ子になった場合、入れ子のなかでthisの扱いが変わってしまいます。 var MyApp = { init: function(){ this.getFugafuga(); //fugafuga! }, util: { init: f…
ドはまりしたのでメモ。 .appendとかで生成した<img />の場合、widthやheightを指定していない事がありますが、これが画像の幅や高さを取得する際にハマる原因になったりします。 高さが取得できない！
WEBアプリ開発でJSONデータを扱うことになったのでメモ。 実際に作り始めると色々な機能追加がありそうなので、対応出来るような書き方を目指してみた。 JavaScript (function(window,namespace,$){ function _Item(dataFilter,i,$_list){ this.member_id = …
iOS用のWEBアプリ制作のためのメモ。 iOS専用でCSS3アニメーションが使用できるので、アニメーション部分をCSS3で作ってJavaScriptでトリガーを制御します。 HTML .onが使いたいのでjQueryを読み込んでおく。 <html lang="ja"> <head> <meta charset="UTF-8" /> <title>Document</title> <meta name="description" content="" /> <meta name="keywords" content="" /> </meta></meta></meta></head></html>
RSSを取得してサイト内に表示する時、普通のリスト表示くらいなら全部PHPでやってしまえば良いのですが、インタラクティブな表現とかをする時はJavaScriptで書き出したほうが利用しやすいです。 PHP RSSを取得して、json_encode を使ってPHPの配列をJSON形…
普通に仕事してると、jQueryなしの環境ってほとんど無いし、そもそも効率がわるい。 しかも、自分のスタートがJavaScript == jQueryみたいな環境だったので、実際にjQueryなしでJavaScriptを書く機会が殆どなかった。 その後一から勉強しなおしたので、一応…
Sassをビルドする時に、コマンドラインのSass --watchで監視してますが、最初にいちいちコマンドを打つのが面倒なので、バッチファイルで実行します。 Windowsの場合は簡単だったのですが、MACではまった事があったので詳細をメモ。 Windowsの場合 build.bat…
Apache2.4以降でバーチャルホストを設定するときにハマりまくったのでメモ。 解決方法は下記を参考に <VirtualHost *:80> DocumentRoot "/Applications/XAMPP/xamppfiles/htdocs/" ServerName localhost ErrorLog "logs/error_log" CustomLog "logs/access_log" common <Directory "/Applications/XAMPP/xamppfiles/htdocs/" > AddDef</directory></virtualhost>…
Javascriptで何場面もあるようアニメーションを実装する場合に、シーンごとにアクションと発火点をタイムラインのように管理できたらよいのかなと思って書いてみた。 (function(window,namespace,$){ window[namespace] = { play: function(){ var len = thi…
画像のロールオーバーでフェードエフェクトがついたものを書いてみた。 ロールオーバー用のクローン画像を生成して元画像の後ろに配置して、元画像をフェードすることで効果を出します。 汎用性が出るように画像と親要素に直接CSSが付加されるようにしていま…
オブジェクト指向の書き方を練習するために前に作ったやつ。 HTML <div id="wrap"></div> JavaScript (function($){ var n = 99; var wrap = $('#wrap'); var Box = function(i,selector, x, time){ this.i = i; this.x = i*10; this.selector = selector; this.time = time; this…
スマートフォンサイトでよくある、右側に矢印があるリストを画像を使わずに作った。 HTML <ul class="list"> <li><a href="">リスト01</a></li> <li><a href="">リスト02</a></li> <li><a href="">リスト03</a></li> <li><a href="">リスト04</a></li> <li><a href="">リスト05</a></li> </ul> SCSS .list{ li{ list-style: none; font-size: 12px; a{ position: relative; display…
即時関数の引数を使った名前空間の作り方を教えてもらったのでメモ。 (function(window, namespace){ window[namespace] = { fuga : function(){ document.write('Hello!'); } }; })(this, 'Hoge'); Hoge.fuga(); グローバルオブジェクトにHogeを追加して名…
画像のロールオーバー var Rollover = (function(){ var _func = { init: function(el,suffix){ this.event(el,suffix); }, event: function(el,suffix){ var that = this; $(el).on({ mouseover: function(){ var self = this; self.setAttribute('src',tha…
