外部csvを配列として扱えるjquery.csv.jsで条件に応じてhtmlを構築する | MUGEN WEB note
デモのデータはこちら。 csv URL,性別,リンク文字 https://mugenweb-note.com/web/,1,メンズシューズ https://mugenweb-note.com/web/,2,レディース財布 https://mugenweb-note.com/web/,1,メンズバッグ 性別は1→メンズ、2→レディースで定義してます。 エクセルで作ったcsvを「itemlist.csv」で保存します。 文字コードはhtmlと合わせてくださいね。 外部csvを、Excelで変更するならS-JISだと思うので、htmlがUTF-8なら文字コードの変更が必要です。 readcsv.jsを用意する次に実際の処理をするjs、「readcsv.js」を用意します。 上の表のセル番号がthis[?]の数字です。0から始まることに注意！ 下のコードをコピーし「readcsv.js」で保存しま
functions.phpを使ってbody最下部にJavaScriptコードを入れる方法 | q-Az
せっかく WordPress を使っているので、ギミック的な JavaScript コードの紹介をするときは WordPress ですぐに使える形がしたいなと思い body の最下部、つまり、 ・・・ <script> //ここに挿入 </script> </body> </html>と functions.php から インラインの JavaScript コードを挿入できる方法を考えました。直接メインのテーマを編集することなく、functions.php の編集だけで入れられる事で利便性が増すのではないかと思います。 なぜ head ではなく body 最下部なのかhead ではなく body の最下部に JavaScript コードを挿入することの利点は、Web ページの描画を高速化することです。昔は head 要素に script タグを使って書いてあげることが主流でしたが、最近の流
するするさせたい：サイボウズ採用情報のアニメーション（その1） - fragmentary
サイボウズの採用情報ページを見ていた。 サイボウズ | 採用情報（新卒・キャリア） といっても受けるとかではなく、ただ性格悪いことを思っていただけなんだけど。 Kintoneのセクションでアプリっぽいアイコンたちが右から左へと流れているんだけど、それがガタガタとしている。するするしていない。するするさせたい。 というわけで、何が起こっているのかを調べてみようかと。何回かにわけて書くよ。 その1 ― 何が起こっているのか調べる その2 ― 調べながら直しながらするするさせる その3 ― ちょっとしたことや他のブラウザでもするするさせる アニメーションの実装を調べる あとのことを考えて、Chrome DevToolsを使う。 まず、該当の流れるアイコンのところで右クリックしてinspectする。Elementsパネルで、<div class="icon"> という要素がハイライトされる。div
レスポンシブWebデザイン対応のシンプルなイベントカレンダーを実装出来るスクリプト・「monthly.js」
monthly.jsはシンプルなイベントカレンダー実装の為のスクリプトです。jQueryに依存しています。レスポンシブWebデザインにも対応しており、デイトピッカーとして利用する事も可能となっています。少し触ってみましたが、作りがわかりやすく、日本語化も問題なく出来ました。イベントは別途用意したxmlを読み込む形なのでその辺は若干手間では有りますが、それ故に軽量サイズなJavascriptのみで実装する事ができています。あくまでシンプル性を重視しているようで、高性能なものが欲しいならFullCalendarあたりチェックしてみて、との事。ライセンスの明示はありませんでしたが商用個人共に自由、ただし転売はやめてね、との事でした。 monthly.js
なんだかんだで SPA から jQuery に戻った話 - ボクココ
最近は SPA とか React といった話題が尽きないが、自分は結局 フロントエンド JavaScript は jQuery が最もいいと感じている。それはそれら SPA の JavaScript をいじった経験を踏まえての感想。 理由としては、「 やりたいことができにくい 」これに尽きる。 最新を追うということ 自分が最初にSPAを触ったのは AngularJS だった。なるほど、この ng-repeat や $route, $scope などを使えば、今までサーバサイドでやってたようなレンダリングが表側で制御できるようになる！と感動したものだった。この気持ち良さはきっとサーバーサイドでごにょごにょやっていた経験のある人ならなおさら感動するものだ。 さて、じゃあといって「次作るのは SPA のサービスにしよう！」と意気込んで初めて見たとする。それで作っただけで話題になるし、エンジニアと
jQueryでスマホのスクロールイベントを無効化する - Qiita
// スクロール禁止 $(window).on('touchmove.noScroll', e => { e.preventDefault(); }); // スクロール禁止 解除 $(window).off('.noScroll'); const $window = $(window); const $menu = $('.menu'); const $menuBtn = $('.menu-btn'); let openFlag = false; $menuBtn.on('click', () => { if (!openFlag) { // スクロール禁止 $window.on('touchmove.noScroll', e => { e.preventDefault(); }); // メニューを表示 $menu.fadeIn(() => { openFlag = true; });
[jQuery] レスポンシブ対応でないギャラリーを jQuery を使って簡単にレスポンシブ対応にする方法
プラグインなどで実装した非レスポンシブなギャラリーでも、シンプルなものの場合は CSS やライブラリのコードに少し手を加えるだけでレスポンシブ対応にできることもあります。しかし、凝ったエフェクトのギャラリーをレスポンシブ対応にしたい場合、どこをどうしたらいいのかプラグインのコードを読むだけで大変です…。 少し力技になってしまいますが、凝ったエフェクトのギャラリーを jQuery を使って簡単にレスポンシブにする方法を思いついたので、記事にしてみました。 ヒントになったのは少し前に話題になったこちらの記事「これでよくない？ レスポンシブテーブルの話 | ダーシマ・ヱンヂニヤリング」 サンプルデモ だいぶ以前に Rhinoslider（シンプルなスライドショーから変わったエフェクトのスライドショーも簡単に実装できるjQueryプラグイン-Rhinoslider）というプラグインをご紹介しました
![[jQuery] レスポンシブ対応でないギャラリーを jQuery を使って簡単にレスポンシブ対応にする方法](https://cdn-ak-scissors.b.st-hatena.com/image/square/1bc31d5328616d15d300228a5bd78f6f80142471/height=288;version=1;width=512/https%3A%2F%2Fmemocarilog.info%2Fwp-content%2Fuploads%2F2015%2F05%2FResponsive.jpg)
【新人向け】簡単にできた！Webサイトでよくみる技術のまとめ
4月から新たにデザイナーになる人も多いのではないかと思います。 クライアントやディレクターから、「あのサイトのような動きにしたい」と依頼されることも多いかと思います。 そんな時に便利なものを、初心者でも設置・使用が簡単なものを中心にまとめました。 ※ライセンス等は各自でご確認ください。ライセンスは、サイトまたはダウンロードしたファイル内に記述してあることが多いです。（GPLやMITやCCなど主要ライセンスの内容と意味のまとめ） もくじ レスポンシブ対応！PCでも、スマホのフリック操作でも使えるスライダー サムネイル付きでページングもできるフォトギャラリー スクロールに合わせて表示させたい パララックスさせたい 背景画像を画面サイズにあわせて表示させたい フルスクリーンでスクロールさせたい スクロールするとヘッダーを固定させたい 順番にアニメーションさせたい テキストをアニメーションさせたい
[JS]スマホ・タブレットでの操作性を重視したタッチデバイス対応のさまざまなスライダーを実装できるスクリプト -Swiper
iOS/Androidなど、モバイル向けのWebサイト、Webアプリ、ネイティブアプリでの利用に最適化されたタッチデバイス対応のスライダーを実装できるスクリプトを紹介します。 キーボード操作やマウスのホイール・ドラッグ操作にも対応しているので、デスクトップでもOK！ Swiper Swiper -GitHub Swiperの特徴 Swiperのデモ Swiperの使い方 Swiperの特徴 ライブラリに依存しない Swiperは他のスクリプトのライブラリに依存せず、軽量で速く動作するスクリプトです。 jQuery, Zetro, jQuery Mibileなどの他のライブラリと一緒に使う時も安全です。 タッチの動きをそのまま デフォルトの設定でタッチの動きを「1:1」でインタラクションとして提供できます。 豊富なオプション ページネーション・ナビゲーションボタン・パララックスエフェクトなど
![[JS]スマホ・タブレットでの操作性を重視したタッチデバイス対応のさまざまなスライダーを実装できるスクリプト -Swiper](https://cdn-ak-scissors.b.st-hatena.com/image/square/cacff14f89d3ccb1fc0c8101d8047f5b3b8b070e/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201501%2F2015030201.png)
webサイトの動きを魅力的に演出する フリーjQueryプラグイン集「Free jQuery Plugins To Create An Amazing Website」
webサイトの動きを魅力的に演出する フリーjQueryプラグイン集「Free jQuery Plugins To Create An Amazing Website」 デザインだけでなく、独自の動きを取り入れることでwebサイトはより魅力的なものに変化します。今回はそんな時に参考にしたい、webサイトの動きを魅力的に演出するフリーjQueryプラグイン集「Free jQuery Plugins To Create An Amazing Website」を紹介したいと思います。 jquery.adaptive-backgrounds.js • A jQuery plugin for extracting dominant colors from images and applying it to its parent 組み込むだけで、webサイトを魅力的に演出してくれるプラグインが揃ってい
綺麗な動きになった！Web制作前に見ておきたいjQueryプラグインまとめ
作成：2014/12/8 Web制作 > 比較的最近のjQueryプラグインやプロフェッショナルな方々が作成されたスクリプトの中から、サイト制作時に取り入れてみたいエフェクトを厳選してご紹介。今風の見え方を実現できそうなものをチョイスしました。 エンジニア速報は Twitter の@commteで配信しています。 もくじ ファーストビュー １．スライドを立体的に切り替え ２．クリックで滑らかにページ遷移させる ３．背景にスライド、フルスクリーンで固定させる ４．横に移動するフルスクリーンスライド ５．キューブ系のスライドを表示 ６．下方向へドラッグするとページを再読み込みする ７．要素を上下にフワフワ動かす ８．外部要素をクリックで表示 ９．タイピングエフェクト 動作 １０．サーチボックスを画面全体にオーバーレイさせる １１．デイトピッカー １２．ドラッグ＆ドロップ 画像をアップロードする
【jQuery】超万能スライダー FlexSlider の使い方をマスターする。 - ONZE
今日紹介するのは jQuery プラグインの［FlexSlider］です。 これ、かなり便利です。 レスポンシヴ対応、タッチコントロールのフリックスライドにも反応、カルーセルもＯＫ、画像にリンクを貼ることはもちろん、キャプションも表示可能、動画もスライドできる、コントロールボタンやナヴィゲーションも細かく設定できる…。まさに“超万能”のスライダー。 とにかく「なんでもできる」印象で、スマートフォン対応サイトなどでは特に真価を発揮するのではないでしょうか。 まずはサンプルをご覧ください。 【FlexSlider】→サンプルデモ 高機能ですが、その導入方法は比較的簡単です。 ［FlexSlider］の導入方法 まずは以下のサイトから［FlexSlider］のプラグイン本体をダウンロードします。 http://flexslider.woothemes.com 続いて <head>〜</head>
webサイトに魅力的な動きを演出可能なjQueryプラグイン「A Cool Collection Of jQuery Plugins To Make Your Website More User Friendly」
webサイトに魅力的な動きを演出可能なjQueryプラグイン「A Cool Collection Of jQuery Plugins To Make Your Website More User Friendly」 シンプルなwebサイトももちろん魅力的ですが、独特な動きを取り入れることでもっと見栄えの良いサイトに仕上げることができるのではないでしょうか？今回はそんな時に利用したいjQueryプラグイン「A Cool Collection Of jQuery Plugins To Make Your Website More User Friendly」を紹介したいと思います。 Textillate.js ちょっとしたさりげない動きから、メインとなる部分に取り入れられる演出まで、いろいろなタイプのjQueryプラグインが紹介されています。 詳しくは以下 Salvattore — A jQu
日本語ローカライズした jquery.validationEngine.jsでContact Form 7の入力値をチェックする
WordPress をお使いの方にはおなじみの All in One お問い合わせフォームプラグイン「Contact Form 7」には入力値チェックの機能が備わっています。備わっておるのですが、フォームの入力値チェックを行う jQuery プラグインなんかが巷に溢れており、Contact Form 7 でぜひそれを使いたいというニッチな要望もあるような気がします。 必要がないとか、苦労に見合う価値が認められないからニッチなのであり、ネットで探しても情報がありませんとなるのですが、wpxtreme では実用性はともかく面白そうだったりヒマだったらやってみる方針なので Contact Form 7 × 各種 jQuery フォームバリデーションプラグインインテグレーションプロジェクトを始めます。第1段は A jQuery inline form validation, because val
簡単！RSS（XML）を取得&表示させる方法 – jQuery + Google Feed APIを使用してFeedを表示させる方法 | Stronghold Archive
どうもこんばんは！Toshikuraです。今回のtipsは【簡単！RSSを取得&表示させる方法 – jQuery + Google Feed APIを使用してFeedを表示させる方法】です。最近ちょくちょく使ったのでメモしておこうかと思いました。 RSSの取得&表示について 一例ですがこの「RSSの取得&表示」は、書いているブログと異なったサイトに記事一覧を表示させる際に便利な方法です。通常ですとクロスドメインの制限で記事一覧を表示させるのは若干手間ですが【Google Feed API】を使う事で簡単にこの問題を回避できます。 前置きが長くなりましたがコード例は以下になります。 ・JS <script src="js/jquery-1.X.X.min.js"></script> <script type="text/javascript" src="https://www.google.
jQuery でサイズや位置を取得する方法を図にしてみた - Cyokodog :: Diary
更新履歴 2010-01-21 本エントリの内容も含めた最新の情報は下記エントリをご参照ください。 jQuery の位置・サイズ関連メソッドまとめ - Cyokodog::Diary サイズの取得 煩雑になるので height の記述しかありませんが、width に置き換えれば幅もとれます。 普通のボックス要素 height() メソッドで取得できる値には、padding や border の分の高さを含みません。 CSS の height と同じなので、css('height')メソッドで取得してもよさそうですが、こちらの場合ブラウザの種類や CSS の定義の仕方で取得される値が異なる（クロスブラウザとしての機能が完全でない）ので、純粋に px 単位の高さを取得したい場合は height() メソッドを使用した方が無難です。 スクロールバー付きボックス要素 clientHeight には
最後までスクロールしたら処理を実行させる jquery.bottom.js の使い方 | あらかぜ手帖
jQuery.Bottom ページを最後までスクロールさせたら、何らかの処理を行いたいときに使えるプラグインです。ツイッター等のSNSでよく見られる自動ロードや、最後までスクロールしたら現れるトップへもどるボタンなど、色々とお世話になることが多そうです。 こちら自分のフォトギャラリーを作るときに利用させてもらいました。 用意するもの 用意するものは、jQueryとjquery.bottom.jsの２つです。この他に、最後までスクロールしたときに発生させたいイベント用のjsも必要なことが多いかもしれませんね。 <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript" src="jquery.bottom-1.0.js"></script> 基本的な書き方 記述自体はシンプルで
jQueryで指定されたイベントの定義場所を取得する方法
jQueryで指定されたイベントの定義場所を取得する方法 セミナー時にHTML上のイベントが指定されている要素から、実際にイベントを指定したコードが書かれているJavaScriptファイルや場所を知りたいと質問を受けました。 調べたところ良さそうな方法があったのでシェアしておきます。 ちょっと動画に取ってみたので、動画でご確認ください。 なにをやっているかというと、まず、デベロッパーツールを開き、検証したい要素を選択します。 次に右クリックして「Add attribute」から適当なidを指定します。今回は「js_debug」というidを指定しています。 次にデベロッパーツールの右上のアイコンからコンソールを開き以下のコードを入力しEnterを押します。 $._data($("#js_debug").get(0), "events"); Object->click->0の順番に開いていき、
jquery.kerning.js
jQuery.Kerning.js A jquery plugin which adjust text kerning in HTML. Get Source Demo うつくし明朝 - plain ポラーノの広場 あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモーリオ市、郊外のぎらぎらひかる草の波。 うつくし明朝 - kerned ポラーノの広場 あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモーリオ市、郊外のぎらぎらひかる草の波。 M+ 2m Regular - plain ポラーノの広場 あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモーリオ市、郊外のぎらぎらひかる草の波。 M+ 2m Regular - kerned ポラーノの広場 あのイーハトーヴォ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
SVGによるシンプルなパターン背景を作るためのライブラリ・「Textures.js」
