[jQuery]画面を一定量スクロールした時にサイドバーなどを固定位置に配置する
当ブログでも採用しておりますが、ブログなどでもよく見かけるようになった、ある一定量画面をスクロールするとサイドバーなどが固定されるﾔｰﾂ。 手順メモを晒しておきます:) 続きましてheadタグ内ないし外部読み込みスクリプトに以下を記述します。 [js] $(function($) { var tab = $(‘.hoge’), offset = tab.offset(); $(window).scroll(function () { if($(window).scrollTop() > offset.top) { tab.addClass(‘fixed’); } else { tab.removeClass(‘fixed’); } }); }); [/js] ↑のスクリプトは.hogeがtopの位置に行ったらfixedというclassを追加、それ以外はclass属性を削除する、と言う命令を
![[jQuery]画面を一定量スクロールした時にサイドバーなどを固定位置に配置する](https://cdn-ak-scissors.b.st-hatena.com/image/square/ac7ae56c20fc639b9d7e08f7f0da2fec804f6625/height=288;version=1;width=512/https%3A%2F%2Fozpa-h4.com%2Fwp-content%2Fuploads%2Fskitched-20121120-005330.jpg)
[CSS]くるっとして、ゆらゆらしてぴたっと止まる素敵アニメーションを備えたメニュー -CSS Swinging Panel Menu
ホバー時に、子アイテムが上からくるっとスイングして、ゆらゆら揺れて、ぴたっと止まって表示する素敵なアニメーションを備えたメニューを実装するスタイルシートを紹介します。 CSS Swinging Panel Menu ゆらゆらとした動きはCSS3アニメーションで実装されています。 スクリプトは実装には使用されていません。 HTML リスト要素を入れ子にしたシンプルな実装です。 <div id="container"> <ul id="menu"> <li><a href="#">item 1</a> <ul> <li><a href="#">item 1-1</a></li> <li><a href="#">item 1-2</a></li> <li><a href="#">item 1-3</a></li> </ul> </li> <li><a href="#">item 2</a> <u
jqueryrotate – 画像を回転させられるjQueryプラグイン – creamu
jqueryrotateは、画像を回転させられるjQueryプラグインです。 ループでずっと回すことができたり、hover時に360度回転させることも可能なようです。 jqueryrotate
WordPressの投稿ページに任意の説明文を挿入する - かちびと.net
WordPressの記事投稿ページに、任意の説明文を挿入する、というTipsです。3.5から使用する事が出来るようになったフックを利用しますので3.4では使えません。 3.5からedit_form_after_editorやedit_form_after_titleと言ったフックが追加されました。これを使って投稿ページに任意の説明文を挿入してみます。 コード function after_title() {//タイトル項目下部 echo '<p>上はタイトルを、記事は下部のエリアに書きます</p>'; } add_action( 'edit_form_after_title', 'after_title' ); function after_editor() {//エディタ項目下部 echo '<p>書き終えたら公開して下さい</p>'; } add_action( 'edit_form_
jQueryでブラウザウィンドウ幅めいっぱいに要素を並べたコンテンツスライダーを設置する実験｜BLACKFLAG
これらの設定値を変更することでもろもろ調整が可能になっています。 スクリプト全体はあまりシンプルと言える構成ではありませんが、少しの設定値を調整するだけで簡単に設置することは可能になっているかと思います。 設置の際の簡単な注意点としては、HTML構成上このコンテンツスライダー要素全体を囲うブロック要素があった場合は、 その要素の幅は100%になっている必要があります。 併せて、この形状のコンテンツスライダーを１ページ内に複数設置することはあまりないかと思いますが、複数設置した際には自動スライド機能は一つ目のスライダーのみにしか動作しません。 ※2016/01/09 改定 カスタマイズに関しては、jQueryイージングプラグインを使って簡単にスライドアニメーション動作に抑揚をつけたり、CSSを少し調整することでページネーションをスライダーエリアから外へ出すことなども可能です。 ページネーショ
Mac App Storeで「ほかのアカウントで使用可能なアップデートがあります」と出た場合の対応方法一覧 | Web活メモ帳
本日、Mac App Storeでアプリをアップデートしようとするとエラーが出てアップデート出来ませんでしたので対処方法をメモ。 エラーメッセージ アプリをアップデートしようとすると、以下のようなエラーが表示されるようになりました。 ほかのアカウントで使用可能なアップデートがあります このアプリケーションをアップデートするには、購入時に使用したアカウントでサインインしてください。 いくつか対応方法があるので一覧を作りました。 アプリを削除後に再インストール すでにインストール済みのアプリの場合、削除することでインストールが可能になります。 Spotlightをoffにしている場合、インデックスを再構築する Spotlight を使用しない設定にしている場合、 / が検索対象となるようにインデックスの再構築を行うと上手く行くようです。 Spotlightを有効にする方法 システム環境設定 ＞
面白いテキストアニメーションが簡単に実現できるjQueryプラグイン「Textualizer」:phpspot開発日誌
Textualizer | K. Risk - JavaScript Refined 面白いテキストアニメーションが簡単に実現できるjQueryプラグイン「Textualizer」 テキストが歯抜けの状態から、アニメーションしながらテキストが埋められたり、既存アルファベットから別の文字列に変化させたりと、面白いテキストアニメーションが実現可能。 実際にデモを見ていただくのが一番分かりやすいです。 スピード等もオプションで指定可能。 $(element).textualizer( param ); で簡単に実現 テキストアニメーションならFlash、というような時代もありましたが、JavaScriptの方がお手軽でいいな、という時代になった気がします。 関連エントリ 面白いテキストアニメーションが作れるjQueryプラグイン「textualizer」 テキストを部分的にカッコよくアニメーショ
Webでもサーバでも使えるJavaScriptテンプレートエンジン·doT.js MOONGIFT
doT.jsはWebブラウザ、node.jsの両方で使えるJavaScriptテンプレートエンジンです。 Webアプリケーションを開発していると必ずJavaScriptでHTMLを出力する必要性が出てきます。そのような時に使いたいのがテンプレートエンジンです。今回はWebブラウザ、node.jsの両方で使えるdoT.jsを紹介します。 テンプレートとJSONデータを組み合わせてHTMLを出力します。 繰り返しも対応。 パーシャルも使えます。 条件分け。 配列。 エンコード表示も可能です。 特徴としては外部ライブラリの依存性がないこと、高速であること、パーシャルサポート、イテレータなどがあります。ストリーミングのようにデータが随時追加されていく場合も想定されています。ifではなく、?を使うのがユニークです。 doT.jsはnode.js/JavaScript製のオープンソース・ソフトウェア（
1枚の画像のみでマウスホバーによるアニメーションを実現させるjQueryプラグイン・spriteOnHover - かちびと.net
CSSスプライトのように、1枚の画像 でマウスホバーによる簡易的なアニ メーションを実現させるjQueryのプ ラグイン・spriteOnHoverのご紹介 です。GIFアニメ以外の選択肢として 個人的に少し期待しています。 1枚の画像でGIFアニメーションっぽいのを実現させます。画像を作るのは場合によっては少々手間かもですけど・・ CSSスプライトのように１枚の画像でGIFアニメっぽいのを作れる、というスクリプト。 ↑ こんな感じ。以下、公式のデモです。 Sample $('#foo').spriteOnHover({ fps:30, orientation:"horizontal", rewind: true, loop: false, autostart:false, repeat:true }); ループやオート再生の有無などもオプションでセッティングします。 ライセンスは・・・
[渋谷] JavaScript / jQuery 特別講習を開きます
表題の通り、渋谷駅新南口そばの「LightningSpot 渋谷」にて、JavaScript / jQuery 特別講習を2013年1月に開きます。 前後半それぞれ 5時間 x 2日間 の授業で、 前半: 1/12（土）、13（日） 13:00-18:00 後半: 1/26（土）、27（日） 13:00-18:00 に開講します。12（土）、13（日）と26（土）、27（日）はそれぞれ同じ内容ですので、 どちらかご都合の良い方をお選びください。 受講料は、2日間あわせて 2万円 となります。 こちらは前後半のセットで受け付けており、前半のみ、後半のみの受講はできませんのでご注意ください。 講師 今回講師をされるのは、Webプログラミングスクールで私と一緒に講師をされている高梨ギンペイさんです。 高梨ギンペイさんは、横浜在住、フリーのWebプログラマーの方で、「AKB48 STREAM ぐぐ
![[渋谷] JavaScript / jQuery 特別講習を開きます](https://cdn-ak-scissors.b.st-hatena.com/image/square/7511bd1b90e7a5689210698a054fc14a7ebca817/height=288;version=1;width=512/https%3A%2F%2Fi0.wp.com%2Fstocker.jp%2Fdiary%2Fwp-content%2Fuploads%2F6bd1e39bb566a7c72a1f8699dd07e5b6-1.png%3Ffit%3D240%252C240%26ssl%3D1)
テキストを要素内にうまく収めてはみ出させないjQueryプラグイン「trunk8」:phpspot開発日誌
trunk8 | Rick Viscomi テキストを要素内にうまく収めてはみ出させないjQueryプラグイン「trunk8」 WEB開発に携わる人なら必ず経験する、要素からのテキストのはみ出しやレイアウト崩れ。 指定したサイズの要素ないのテキストは、どんなものが入ってきても綺麗にまるめたい、という場合に使えます。 元のテキストが以下のようにあったとします。 スクリプトを読み込んだ後、$(elem).trunk8(); とJSで記述すると次のように一瞬で1行に収めることができます。 （オプションで行数指定も可能） 綺麗に要素内に収める「もっと読む」も次のように実現できます。 省略バージョンはきっちり枠内にはまっていますね。これをJSとライブラリレスで実現するのはなかなか難しい所がありますね。 これは便利。 関連エントリ テキストをブロックの中にフィットするように自動リサイズできる「jQue
異なるサービス間で手軽に共有フォルダが作成できる『iBeam.it』
異なるサービス間で手軽に共有フォルダが作成できる『iBeam.it』 『iBeam.it』は様々なストレージサービスやソーシャルメディアに対応した共有フォルダが簡単に作成できるサイト。 通常のストレージなどでは同じユーサー同士であれば共有フォルダを作って自分のファイルを共有相手にシームレスに受け渡すことができますが、相手が別のストレージサービスを使っている場合などではそうはいかず、ファイルの共有リンクを作って相手にそれをダウンロードして貰うほかありません。 さらに、その後フォルダ内のファイルを追加／変更したならば、その都度その更新を相手に知らせるという手間もかかります。 こんな場合に便利なのがこのiBeam.itというサービスで、ホストユーザーが作った共有フォルダをゲストユーザーが自分の使っているサービスのフォルダで受け取れるというものです。 使い方は『CREATE』をクリックして共有した
お正月の間だけコンテンツを表示するJavaScript | Web活メモ帳
お正月の間だけコンテンツを切り替えたいという相談があったので、JavaScriptで簡単にやる方法をメモしておきます。 企業サイトで年始に”謹賀新年”という表示をしたいという相談を受けたのですが、一般的にはお休みなので更新作業は出来ないですよね。 そんな時に使えるJavaScriptをご紹介します。 更新したいコンテンツの箇所にJavaScriptを挿入すればOKです。 日付と表示するコンテンツは適時変更してください。 /*****************************************************/ //指定期間にコンテンツを切り替えるJavascript /**設定項目 ******************************************/ //----開始日 YYYY/M/D 形式 半角数字で開始日指定 myStartDate="2013/
Free “Japanese-ish” Fonts 10 + 1
2013年3月25日 インスピレーション, フォント 先日同僚と日本語の文字についておしゃべりしていると、「日本語はまるで絵や記号みたいだ！」と言われました。確かに私達日本人から見るとアラビック文字やハングル文字が記号を並べているように見えるのと同じで、英語圏の人からすると不思議な記号に見えるんでしょうね！ということで探してみるといくつか見つかった素敵フォント。パッと見日本語に見えたり、日本をイメージした英字フォントをいくつか紹介します。なんだかジワジワきますw ↑私が10年以上利用している会計ソフト！ 「日本語風」の英字フォント 1. TokyoSoft ダウンロード（商用利用可） カタカナ風の英字フォント。日本人が見たら間違ったカタカナの羅列ですが、よーく見るとアルファベットになっています。このフォントで「MANA」と書くと、「ポタカタ」になるようです…！ 2. Kaneiwa ダウン
サービス終了のお知らせ - NAVER まとめ
サービス終了のお知らせ NAVERまとめは2020年9月30日をもちましてサービス終了いたしました。 約11年間、NAVERまとめをご利用・ご愛顧いただき誠にありがとうございました。
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
http://w3q.jp/go/9358
Retinaディスプレイ対応！手描きのゆる～いデザインのアイコンフォント素材 -Handy Icons
2012年総まとめ：商用利用も無料、高品質な英語のフリーフォントのまとめ