JavaScript Tips
jQueryで親要素や子要素を取得する方法をまとめてみました。
なんだかんだで書いておかないと忘れてしまうので。。。
直近の親要素のみを取得し、1つ上以上の親を探さない。
条件を書かなければ直近の親要素を、条件を書くと条件に一致する場合は要素が、一致しない場合は空の配列が返ってくる
例） #content の親要素である div を取得する
$("#content").parent();
<div>
<div id="content"></div>
</div>こんにちは！
jQueryで.hover()を使っていたのですが、ふと.on()で.hover()を使うためにはどうやるのだろうか・・・と思って少し調べてみたので書いておきます。
まずそもそも.hover()の使い方ですが、以下のような感じになります。
$('#sample1').hover(function(){
$(this).hide(10);
}, function(){
$(this).show(10);
});
それじゃぁ同じものを.on()で書いてみましょう。
$('#sample2').on({
'mouseenter': function(){
$(this).fadeOut(10);
},
'mouseleave': function(){
$(this).fadeIn(10);
}
});
はいこれで出来ました！一丁上がり〜〜
全く関係ないですが今日この本買ってうきうき気分です
jQuery fancybox、とても便利ですよね。
気軽にモーダルウインドウが実装出来るのでよく使ってるjQueryプラグインの1つです。
今回そのfancyboxを使っていて、原因は不明なのですがなぜか発火しなかったときの対処法を書いておきます。
ただ原因不明なので詳しい方、ぜひとも教えていただけると助かります。
普通fancyboxは.fancybox()で起動しますが、今回はなぜか起動しませんでした。
なので以下のような方法で無理やりfancyboxを立ち上げました。
$(document).ready(function () {
$.fancybox({
'width': '40%',
'height': '40%',
});
});
fancyboxは$のあとの関数としても登録されているため上記のようなことが出来ると思います。
参考になると幸いです。
jQuery, fancybox working but only when you click this image twice
How to launch jQuery Fancybox on page load?
みなさんこんにちは。
最近はやっとJavaScriptをがっつりいじることが出来そうになったので、Backbone.jsに入門してみました。
また、CoffeeScriptも便利だと聞いたのでこれも勉強してみました。
勉強のためにドットインストールで公開されているBackbone.js入門の完成品を参考に、JavaScriptのコードをCoffeeScriptで書きなおしました。
これからCoffeeScriptを勉強しようと思っている人に少しでも役に立てればと思います。
CoffeeScriptもやり始めて1日くらいしかたってないので、ここはCoffeeだとこんな感じに書けるよ！とかあれば教えていただけると幸いですー
ドットインストール便利！いつもお世話になってます！
“ドットインストールで公開されているBackbone.js入門をCoffeeScriptで書きなおしたので公開します” の続きを読む
みなさんはとても可愛い「おけいはん」というキャラクターを知っていますか？
僕は数日前に知り合いに教えてもらって、初めて知りました。
「おけいはん」というのは、京阪電気鉄道が2000年12月より登場させているイメージキャラクターで2011年11月から5代目の畦田ひとみさんという方が担当されています。
「おけいはん」は4代目まではタレントさんを起用されていたようなのですが、5代目からはより親しみを持ってもらうべく初めて公募したようです。
その結果、選ばれたのが大学生の畦田ひとみさん。
和風の雰囲気がとてもよく、惹かれるものがあります。
“めちゃくちゃ可愛い「おけいはん」が好きすぎていつでもどこでも可愛い「おけいはん」が見れるChrome拡張機能作ったった” の続きを読む
ずれる。
Web制作をしていて本当に困るのが、OSやブラウザによって表示が崩れていたりずれていたりすること。
こうなったときによく行うのがCSSハックです。僕のブログでも一度取り上げました。
ただこの方法だとブラウザ毎の差異は吸収出来るのですが、OS間の差異が吸収出来ません。
ほとんどずれることはないのですがたまにずれるのです。。。
こういうときに役に立つJavaScriptプラグインをご紹介します。
（JavaScriptなのでJavaScriptをoffにされるともちろん動きません。ただそういう人は既に一般的ではないでしょう。）
それでは目次です。
◯ 今回紹介するJavaScriptプラグイン
◯ 使い方
“超便利！！OSやブラウザごとにCSSで要素のスタイルを指定出来るJavaScriptプラグイン「CSS Browser Selector」” の続きを読む
みなさんはCSSの拡張メタ言語であるLESSを知っていますか？
拡張メタ言語というのは、普通の言語とは違って、ある言語をより簡単に書くために作られた言語です。
例えば最近だと、CoffeeScriptとかTypeScriptとかが話題になっていますね。
これらは全てJavaScriptの拡張メタ言語であり、CoffeeScriptやTypeScriptで書いたファイルをコンパイルするとJavaScriptを生成することが出来ます。
今回入門してみたLESSはCSSの拡張メタ言語です。つまりLESSで書いたファイルをコンパイルすると、CSSが生成されるわけですね。
それでは早速入門してみましょう！！
この記事はonextrapixelに掲載された 10 Useful and Time Saving JavaScript Snippets の内容を日本語訳したものです。
JavaScriptはすごい勢いで進化しています。ただ常に全てのサイトに対して最新のJavaScriptを適用していくのはとても骨が折れる作業です。jQueryはとても人気のあるすぐれたライブラリであるが、いくつかのスクリプトは純粋なJavaScriptで書かれています。
この記事では、共通の問題を解決し、あなたの時間を節約することが出来る便利な10のスクリプトを紹介します。これらのスニペットはほとんどがコピー＆ペーストによって使用することが出来ますし、あなたのスクリプトに自由に埋め込んで使うことが出来ます。ぜひ使ってみてください。
“めちゃくちゃ便利なJavaScript オリジナル関数10選” の続きを読む
前回はnodejsをインストールするまでを書いてみました。
今回は前回の記事を行った前提でお話を進めていきます。
それでは始めて行きましょう。
◯ npmをインストールする
◯ expressをインストールする
◯ nodejsでexpressを動かしてみる
いまだにnodejsを触ったことがなかったので今回触ってみました。
感想としては、難しい印象を持ってたけどあっという間に入れることが出来るんだなぁって感じです。
つまり特に難しいことをせずともすぐに使い始められるって印象です。
もしまだnode.jsを触ったことがない人がいればぜひ触ってみてください。
面白いですよ。
◯ 必要なパッケージをインストールする
◯ naveをインストールする