jQueryでスクロールすると上部に固定されるナビゲーション
Posted: 2012.02.21 / Category: javascript / Tag: jQuery グローバルナビゲーションはロゴの下に配置されていることが多いですが、スクロールするとナビゲーション部分だけが上部に固定されるようなものをjQueryでやってみたいと思います。 html & css htmlです。 html <h1><a href="#">タイトル</a></h1> <div class="nav"> <ul class="clearfix"> <li><a href="#">HOME</a></li> <li><a href="#">ABOUT</a></li> <li><a href="#">NEWS</a></li> <li><a href="#">LINK</a></li> </ul> <!-- /#nav --></div> <div id="artic
スマートフォン版Yahoo!検索 JavaScript機能の紹介
ヤフー株式会社は、2023年10月1日にLINEヤフー株式会社になりました。LINEヤフー株式会社の新しいブログはこちらです。LINEヤフー Tech Blog こんにちは。ヤフーエンジニアのわたなべせいりょです。 ここではスマートフォン版Yahoo!検索の作り方 第4回：JS編 - 検索をより便利にの中でご紹介させていただいた機能の実際の実装について書きたいと思います。 まず、長押し入力について書いてみたいと思います。「j」で「JavaScript」がサジェストされるのは良いのですが、「JavaScript array」を調べたい時など、一度「JavaScript」の検索結果に飛ばないといけないのを億劫に感じていました。 そういったところから長押し入力を思いついたのですが、実装に当たり、長押しにより入力ボックスの文字が変わり、後で説明いたしますが一定時間間隔で入力ボックスをチェックしてい
JavaScriptで作られた、見たことないUIデザインのWebサイト
株式会社サイゾー（Cyzo inc.） / Raffael Stüken / La Moulade - Creative St...他...全11件
New community features for Google Chat and an update on Currents
Join the official community for Google Workspace administrators In the Google Cloud Community, connect with Googlers and other Google Workspace admins like yourself. Participate in product discussions, check out the Community Articles, and learn tips and tricks that will make your work and life easier. Be the first to know what's happening with Google Workspace. ______________ Learn about more Goo
追記文章の折りたたみ Web2.0
Movable Type のオーソドックスなカスタマイズのひとつ、「追記文章の折りたたみ」の Web2.0 版カスタマイズをご紹介します。 １．特徴 JavaScript エフェクトライブラリ script.aculo.us（スクリプタキュラス）を利用し、「続きを読む」リンクをクリックすると追記文章をスライドダウンで表示します。 JavaScript が無効の場合はエントリー・アーカイブにジャンプします。 「続きを隠す」リンクは追記文章の前後に表示されますので、長い追記文章でも折りたたみやすくなっています。 ライブラリファイルを編集せずに折りたたみ速度の変更が可能です。 ２．サンプル 追記文章の折りたたみ 2.0 サンプル ３．script.aculo.us のインストール script.aculo.us のページの「get it already!」の下にある「Downloads page
あの人も使っている、美麗なフォトギャラリー (Galleria.js) -稀によくあるブログ
折りたたむ このソースはdemo01を参考にしてあります。 スクリプト部分や、スタイルシートにコメントがありますが 自分でもかなりいい加減なものだと思うので あてにはしないでくださいorz 注)画像サイズは固定です。スタイルシートの#main_imageで設定した サイズで統一してください。 サムネイルは.gallery_demo liで、先に指定したメイン画像の幅に合せて 段落落ちしないように、上手く合せてください。 <style> *{margin:0;padding:0} .galleria{list-style:none;} .galleria li{display:block;overflow:hidden;float:left;} .galleria li a{display:none} .galleria li div{position:ab
アコーディオン形式で内容を表示できるAccordion v2.0[to-R]
アコーディオン形式で内容を表示できるAccordion v2.0 配布元:Accordion v2.0[リンク切れ] ライセンス:MIT License Accordion v2.0はアコーディオン形式でWebサイトの内容を表示するためのJavaScriptライブラリになります。 最近ではアコーディオン形式を使われているサイトも大分増えてきていますし、Dreamweaver CS3などでも簡単に実装できる為、標準的なUIとして認識されるのはそう遠くはないかもしれません。 設置方法 prototype.jsとscript.aculo.usのeffects.js、そしてaccordion.jsをhead要素内などで読み込みます。 <script type="text/javascript" src="prototype.js"></script> <script type="text/java
![アコーディオン形式で内容を表示できるAccordion v2.0[to-R]](https://cdn-ak-scissors.b.st-hatena.com/image/square/a9717624309e36a795026e1b70982163687ccca2/height=288;version=1;width=512/https%3A%2F%2Fblog.webcreativepark.net%2Ficon_200x200.png)
iframeは嫌なあなたへ…XFBMLでFacebookのLikeボタンをつけるのに必要な事前準備メモ - 適宜覚書-Fragments
何となく活況を呈している日本のFacebook、筆者も誘蛾灯にフラフラと引き寄せられるようにここ数日中で遊んでいます。そして御多分にもれず、「いいね！」ボタンをポチポチ押しまくった揚句、自分のBlogにも設置してしまいました。軽佻浮薄そのものですね＞＜。 普通に「いいね！」ボタンを付ける場合は、Facebook for Websites - Facebook開発者のページにありますように、iframe版とXFBML版の二種類があります。 Facebook for Websites - Facebook開発者より引用: All social plugins can be integrated with your site with iframe tags or XFBML tags, special XML tags that can be included in your HTML pag
はてなグループの終了日を2020年1月31日(金)に決定しました - はてなの告知
はてなグループの終了日を2020年1月31日(金)に決定しました 以下のエントリの通り、今年末を目処にはてなグループを終了予定である旨をお知らせしておりました。 2019年末を目処に、はてなグループの提供を終了する予定です - はてなグループ日記 このたび、正式に終了日を決定いたしましたので、以下の通りご確認ください。 終了日: 2020年1月31日(金) エクスポート希望申請期限:2020年1月31日(金) 終了日以降は、はてなグループの閲覧および投稿は行えません。日記のエクスポートが必要な方は以下の記事にしたがって手続きをしてください。 はてなグループに投稿された日記データのエクスポートについて - はてなグループ日記 ご利用のみなさまにはご迷惑をおかけいたしますが、どうぞよろしくお願いいたします。 2020-06-25 追記 はてなグループ日記のエクスポートデータは2020年2月28
jQueryを使ったタブメニューの実装サンプルまとめ
**追記** この記事とは直接関係ありませんが、自作のタブプラグインを貼っておきます。 rin316/jquery.tab: jQuery tab plugin. **追記終わり** 仕事でjQueryを使ったタブメニューを作ったので忘れないようにメモ。 それぞれの挙動も比較しやすいように並べてみました。 今日が勉強初投稿の日！ 写真:新川通りで撮った桜。 まずはファイルの用意 下記リンクからダウンロード。 ・jQuery本体…Past Releases内→最新バージョンのMinified ・Download Builder | jQuery UI (このサイトで使っているui.tabs.zip) head内にリンクを張る ダウンロードしたファイルに対して、head内にリンクを張ります。 [html] [/html] さっそく使ってみる 本文にhtmlを追加。 [html] タブ1 タブ2
【更新】ソーシャルメディアに共有するボタンの設置方法（Twitter, facebook, mixi, GREE, Evernote, Google+, Tumblr, Pinterest, はてブ） [C!]
MovableType 小技集 【更新】ソーシャルメディアに共有するボタンの設置方法（Twitter, facebook, mixi, GREE, Evernote, Google+, Tumblr, Pinterest, はてブ） ソーシャルメディアの各サービスがこぞって「いいね！」などの共有ボタンをリリースしています。ブログやニュースメディアでも頻繁に目にする昨今ですが、色々なソーシャルボタンの設置方法をまとめて紹介したいと思います。 目次（兼ショートカット） Twitter「Twitterボタン」 Facebook「Share」「Like（いいね！）」 mixi「mixiチェック」 GREE「Social Feedback（いいね！）」 Evernote「Site Memory（Clip）」 Google+「＋１」 Tumblr「Share on Tumblr」 Pinterest「
![【更新】ソーシャルメディアに共有するボタンの設置方法（Twitter, facebook, mixi, GREE, Evernote, Google+, Tumblr, Pinterest, はてブ） [C!]](https://cdn-ak-scissors.b.st-hatena.com/image/square/81e0b24df3879e2c544ed147f55618364bfffef0/height=288;version=1;width=512/https%3A%2F%2Fcreazy.net%2Fwp%2Fwp-content%2Fuploads%2F2017%2F12%2F6943392493_78691ae59d.jpg)
HD Player for Wii U
Making money is a basic and necessary part of application planning, development, and maintenance. Even if you have a newly developed app, you can monetize it. The app monetization model is not a simple concept. There are several ways to generate revenue from an app. We've created this comprehensive app monetization strategy guide to assist you in successfully monetizing your software and increasin
Ring
Ringとは、リクルートグループ会社従業員を対象にした新規事業提案制度です。 『ゼクシィ』『R25』『スタディサプリ』など数多くの事業を生み出してきた新規事業制度は、 1982年に「RING」としてスタートし、1990年「New RING」と改定、そして2018年「Ring」にリニューアルしました。 リクルートグループの従業員は誰でも自由に参加することができ、 テーマはリクルートの既存領域に限らず、ありとあらゆる領域が対象です。 リクルートにとって、Ringとは「新しい価値の創造」というグループ経営理念を体現する場であり、 従業員が自分の意思で新規事業を提案・実現できる機会です。 Ringフロー その後の事業開発手法 Ringを通過した案件は、事業化を検討する権利を得て、事業開発を行います。 さまざまな事業開発の手法がありますが、例えば既存領域での事業開発の場合は、 担当事業会社内で予算や
ブログの記事をTwitterに投稿するボタンと被RT数を表示するためのjavascript
ブログの記事をTwitterに投稿するボタンと被RT数を表示するのに「Tweetmeme」を使っていたのですが、過去7日間の投稿しか見られないというビミョーな仕様だったので、同じようなサービスの「TOPSY」に切り替える事にしました。 さて、「入れ替えるだけだから簡単に切り替えられるかな」と思ってなんとなく始めたら、これが結構な違いがありまして、なんだかんだで結局javascriptを書くことになってしまったので記録しておきます。。 完成図はこんな感じ。 右端にある「tweet」がtwitterに投稿するボタンで、「0 RT」が被RT数です。RTがないので「0 RT」となってますが、RTされているのをTOPSYが発見出来れば「1 RT」等になります。 コード とりあえずコードをどうぞ。 なにか仕様が固まってない感じがすると思いますが、実際、ゆるゆるです。適宜自分の環境に合うように直したりブ
HTML5ホームページテンプレート無料配布 [Cool Web Window]
404 Not Found お探しのファイルは見つからないようです。 お手数ですが、下記リンクからトップページへお戻りください。 CoolWebWindow Copyright (C) Cool Web Window All Rights Reserved
JavaScriptで + - * = なしで記号だけでプログラムを書く - 葉っぱ日記
id:hoshikuzu さんが言ってたので書いてみた。こんな感じ↓。コードはすぐ書けたけど、この記事書くのに30分以上かかってる気がする。 javascript:(~~[])[<_>{/...$/({})[~~[]][~~[]]}{/../({})[~~[]][1]}{/...$/({}[{}])[ ~~[]][~~[]]}{/..$/(!{})[~~[]][~~[]]}{/./(!![])[~~[]][~~[]]}{/...$/(!![])[~~[]][ ~~[]]}{/..$/(!![])[~~[]][~~[]]}{/...$/({})[~~[]][~~[]]}{/./(!![])[~~[]][~~[]]}{ /../({})[~~[]][~~!![]]}{/...$/(!![])[~~[]][~~[]]}</_>][<_>{/...$/({})[~~[]][~~[] ]}{/../
Excelっぽい機能も付いた検索＆ソート＆ページング機能付きテーブル実装JSライブラリ「TinyTable V3」:phpspot開発日誌
Excelっぽい機能も付いた検索＆ソート＆ページング機能付きテーブル実装JSライブラリ「TinyTable V3」 2009年11月18日- Excelっぽい機能も付いた検索＆ソート＆ページング機能付きテーブル実装JSライブラリ「TinyTable V3」。 次のような、ＵＩも美しい高機能なテーブルの実装が出来ます。 普通のテーブルをリッチに スタイルを切ると、次のような単なる<table>タグで定義されたデータなのですが、JavaScript とCSSの力によって大きく形を変えています。 機能紹介 検索機能。大量にデータがあった場合にこの機能はかなり重宝します。 ソート機能。データが一杯でも分かりやすい。全カラムにおいてソート機能が付いてます ページング機能によって縦幅が大きく取られることを防ぎます。view all ボタンで全部を表示することも可能。 縦方向の合計をExcelのsumっ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
http://www.2ch-search.net/blog/7
ASCII.jp：西畑一馬のjQuery Mobileデザイン入門
JavaScriptは盗んで学べ！ 知識0のデザイナーでもできるjsdo.itの遊び方