「Javascript」一覧

jQueryでよく使われて目立つ存在と言えばスライダー。実際に様々なスライダー用jQueryプラグインがありますが、私の場合は簡単なものなら自作しています。最初は勉強がてら作成していましたが、サイトでスライダーを利用するときは必ず自作するようになりました。理由の１つとして、プラグインは汎用性を求められるのでコードは長くなりがちですが（導入サイトには不必要な機能がある場合も）、自分で作成する場合は最低限に抑えることができるのでコードが少なくて済みます。そしてちょっとしたカスタマイズを行う場合、プラグインだと把握に時間がかかるのに対し、自作スライダーは自分で作っているためどこで何をしているか既に把握できているわけです。もちろん使い回す部分もありますが、基本を自分の中に持っておくことでいろいろな応用も可能になるため、要望に応えるスライダーのプラグインを探す手間もなくすことができます。
ここでは、基本となりそうなスライダーを構築するまでと、そこからの応用を書いていきたいと思います。
(さらに…)

jQueryでHTMLフォームを操作したいときがあると思います。フォームの値を取得したり、属性値を変更したり、jQueryUIやCSSなどでユーザーインターフェースを高めたいときなどなど。それらをまとめていきたいと思います。formの中に入れれる要素としてテキストタイプやラジオタイプのinputや、textarea、selectなど色々なタグがあるので、一つのページにまとめたら楽かなと思い今回の記事を書くことにしました。
(さらに…)

HTMLタグのクラスやIDを取得したり削除したりしたいときがあるかと思います。それらのまとめになります。
(さらに…)

WordPressにて、ランダムの記事をAjaxを用いて表示する方法をご紹介します。サイドバーに常に入れ替わるランダム記事を挿入することができますし、これを応用すれば、スライドショー用のカスタム投稿タイプを作成した後、ランダムに1件ずつ表示することでデータベースと連動したスライドショーを作成することもできるかと思います。
(さらに…)

jQueryでアニメーションをする際、要素を動かすのは比較的分かりやすい効果かと思います。もちろん目的にあった実装でないと目障りになってしまう可能性もありますが、アニメーションっぽさはぐんと上がり作っている最中も楽しくなります。jQueryでの動きの実装は、基本的にレイアウトを徐々に変更するイメージのため、CSSと密な関係にあります。ブラウザ対応の問題もありますし、jQueryではなくCSSの設定が問題で動かないこともあります。jQueryの要素を動かす方法をまとめるために、徐々に更新していこうと思っています。
主流になっているCSS3のアニメーションについてを追記(2018/04/13)しました。
(さらに…)

jQueryにて、ランダムの色を返すプログラムを書いてみました。「jquery ランダム 色 取得」などで検索してみると割かし簡単だったからか、意外に見当たらなかったため自作しました。使いどころがないかもしれませんが。
(さらに…)

アクセスカウンターの設置は最近減ってきたかもしれませんが、作ることがあったのでメモ。アクセスカウンターはフリーのcgiなどが落ちていましたが、デザインを決めれたり著作権表示をしなくてくていいので、自作した方が早いと思いました。
今回はHTMLからjQueryのAjax()からPHPを実行させ、あらかじめ用意しておいた画像で+1したアクセス数を出力させる方法です。PHPファイルで表示している場合はそのままPHPで表示させればいいのですが、HTMLファイルの場合は静的ページとなるので、Ajaxを利用してPHPを実行させます。
PHPは動作するけど既にあるHTMLファイルにアクセスカウンターを表示させたい場合に便利かと思います。
(さらに…)

グリッドデザイン的なものをjQueryでしようかと思っていたのですが、ちょうどいいのが見つからなかったので自作してみました。
今回の場合、グリッドの大枠の横幅は制限があり、縦に伸びる形です。また、グリッドの各マスは正方形で、入れるボックスはマスの倍数の大きさになります。たとえば、２マス×３マスのようにボックスは縦横が任意の大きさにすることができます。大きさはボックスのHTMLクラスによって指定し、jQueryで指定した大きさに変更する形です。
クラスによって大きさを指定させたのは自分でボックスごとに指定したかったためなのですが、内容物に合わせて大きさを変更するにはもうちょっとカスタマイズが必要です。
(さらに…)

プラグインやCGIなどでメールフォームを設置した際、この機能もついていればいいのにといったことがある。Wordpressプラグインのコンタクトフォームとして有名な「contactform7」は確認画面がついていない。優しい人が汎用性の高いjsファイルなどを作っていて、これらは数ステップで簡単にできるし、確認のアクションを挟んでくれるのでとてもありがたい。だけど、こうしたい場合は？ここを変更したい！といったとき、コードを読み取るのが一苦労だ。フォームの形式が決まっているならば自分で作ってした方が思い通りの動作になると思う。
この記事は、HTMLとjQueryが少し分かる人向けの記事になり、フォームもまた、HTMLとjQueryを編集できる場合に限ります。私も同じように少しだけ分かる人なので、もっといい方法がある気もしますが、メモ的なことも含めて実際に確認画面を挟む流れを書いていこうと思います。
(さらに…)

不特定多数のaタグに対し、それぞれ複数の情報を持たせたいことがあるかと思います。単数の場合、relやtitle属性を取得して動作させてきたのですが、動作が複雑になってくると一つのタグに対し色々な情報を持たせたくなります。HTML5では「data-」を使い任意の属性をつけられると見たことがありますが、自分のサイト以外ではまだHTMLに踏み出していない状態です。onclickで処理するのがが一般的なんでしょうか。
複数の情報を持たせることは大分前から探していたのですが、取りあえずできそうなものを見つけたので記します。しかし若干使いづらい気もするので、また何か見つかったら追記していこうと思います。理想は連想配列を渡したいのですが。。。
(さらに…)