スクロールした位置についてくるサイドバーをjQueryで実装するサンプル例:phpspot開発日誌
スクロールした位置についてくるサイドバーをjQueryで実装するサンプル例が公開されており、チュートリアルと共にダウンロード可能になっています。 サンプルを見ると、殆どの面倒なことがjQuery側にてやってくれるため、非常に簡単なプログラムになっています。 付いてくるのがリアルタイムにしすぎるとガクガクして酔いますが、ちょっとした遅延があったあと、アニメーションして付いてくるので、動きとしてもよいですね。 jQueryの学習用に、また実際にサイトにサクッと組み込んでみる際にもよさそうですね。 以下のエントリを参照してください。 Scroll/Follow Sidebar, Multiple Techniques | CSS-Tricks
[JS]画像切り替えやパネル表示にフェードを使ったスライドショーのスクリプト -Fade-in slideshow
画像の切り替えやパネルの表示にフェード効果を使用したスライドショーのスクリプトをDynamic Driveから紹介します。
Flash コンテンツが z-index を無視して覆い被さってしまう件
えー恥ずかしながら・・・Flash について全くの素人で全然詳しくありません。 最近 Amazon から来ていたメールでお買い得ウィジェットってのを知って、面白そうなので使っていたんですけど、どうも z-index を無視して一番上に表示されてしまいます。Lightbox での画像拡大と非常に相性が悪いです。 こうなっちゃいます。 拡大表示したい画像の上に Flash が永遠とぐるぐる表示されています。こりゃ堪らんわい。Flash と z-index の関係については過去にさんざん既出なので同じような解決方法は山ほど見つかると思いますけど、自分的メモとしてエントリしました。 Flash コンテンツで z-index を有効にする方法 Flash に wmode ってパラメータがあります。このパラメータで Flash の背景を透明化または不透明化の設定が可能です。この透明化の機能を利用するこ
画像ポップアップ_Slimbox（読込早い）
Introduction Slimbox is a 4 KB visual clone of the popular Lightbox 2 script by Lokesh Dhakar, written using the MooTools javascript framework. It was designed to be very small, efficient, standards-friendly, fully customizable, more convenient and 100% compatible with the original Lightbox 2. Note: Slimbox 2 is now also available. It is using the jQuery library instead of MooTools. Demo Visit the
Slimboxを使ってみる
LightboxコンパチブルのSlimboxを使ってみました。 Lightboxがたぶん元祖だと思います。 Lightboxが何か簡単に説明するとホームページやブログなどで画像をかっこよく表示する為のJavaScriptでできたプログラムです。とりあえずテストのページを作ってみたので見ればわかると思います。 https://blog.kumacchi.com/gagagagaga/index.html Lightboxには派生したLightboxもどきの色々な種類の似たようなプログラムが存在します。それぞれ特徴があり、扱えるコンテンツが画像以外もつかえたり、表示のエフェクトがかっこよかったりと色々です。 今回はSlimboxを使う機会があったので紹介したいと思います。 ▼Slimboxここからダウンロードする事ができます。詳しい説明もここで見ることができます。(英語) http://www
IE6ブラウザでアクセスするとWarningを出してくれる「ie6-upgrade-warning」:phpspot開発日誌
IE6ブラウザでアクセスするとWarningを出してくれる「ie6-upgrade-warning」 2009年04月14日- ie6-upgrade-warning - Google Code IE6ブラウザでアクセスするとWarningを出してくれる「ie6-upgrade-warning」 IE6でアクセスすると次のように警告が出るみたいです。 各アイコンからはブラウザ配布サイトへのリンクが貼られています。 インストールは以下のように、1行。IE6限定で呼び出すようにするだけみたいです。 <!--[if lte IE 6]><script src="js/ie6/warning.js"></script><script>window.onload=function(){e("js/ie6/")}</script><![endif]--> スクリプト自体は7.9kbで、IE6のみ読込み
[JS]画像に見出しとキャプションをスライド表示させるチュートリアル
jQueryを使用して、画像に半透明の見出しとキャプションをスライド表示させるチュートリアルをQuenessから紹介します。 Create a Thumbnail Gallery with Slick Heading and Caption Effect with jQuery demo デモでは画像にマウスをホバーすると、上から見出し、下からキャプションをスライド表示させます。 見出しとキャプションは画像の前後にdiv要素で実装されています。 HTML <textarea name="code" class="html" cols="60" rows="5"> <div class="photo"> <div class="heading"><span>Telephoto Lens</span></div> <img src="images/fall.jpg" width="350" h
JavaScriptのみで画像ツールで作った風のフォントを描画できるjQueryプラグイン「FontEffect」:phpspot開発日誌
JavaScriptのみで画像ツールで作った風のフォントを描画できるjQueryプラグイン「FontEffect」 2009年07月07日- FontEffect jQuery plugin JavaScriptのみで画像ツールで作った風のフォントを描画できるjQueryプラグイン「FontEffect」 ontEffect プラグインを使って、次のようなフォントを描画することが出来ます。画像ではないところが驚き。 実装の容易さについても注目で、次のように、FontEffect メソッドにオプションを渡すだけです。 $('#example24').FontEffect({ outline:true, // 枠線 outlineColor1:"#00c", // 枠線色１ outlineColor2:"#00c", // 枠線色２ outlineWeight:1, // 枠線幅 sha
Flashを応用して便利にファイルアップできる「SWFUpload」のjQueryプラグイン:phpspot開発日誌
SWFUpload jQuery Plugin : Adam Royle Flashを応用して便利にファイルアップできる「SWFUpload」のjQueryプラグインが公開されています。 SWFUpload を使えば、複数ファイルのアップロードが行え、アップロードの進捗もプログレスバーで確認できて、通常のブラウザベースのアップロードとは格段に使い勝手がよくなるのはご存知の通り。 SWFUploadの動作を実際に確認してみる場合はこちら SWFUpload を jQuery方式で関数を呼べてしまうので、jQuery な方はこれを使ったほうが使いやすいかも。 次のように初期化ができ、簡単です。 $('.swfupload-control').swfupload({ // BEの設定 upload_url: "../upload.php", // 送信先URL // ファイルアップロードに関する
[JS]CSSスプライトにスライドやフェードのアニメーションを加えるスクリプト -SpriteMenu
一枚の画像で作成するCSSスプライトに、スライドやフェードのアニメーションを加えるスクリプト「SpriteMenu」を紹介します。 SpriteMenu demo SpriteMenu デモでは、イージングを使用したスライドとフェードのアニメーションが紹介されています。 使用している画像はどちらも同じで、下記のようになっています。 CSSスプライト用の画像（クリックで拡大） ナビゲーションはリスト要素で実装されており、スクリプトのオプションではナビゲーションのサイズ、アニメーションのエフェクト、スピード、イージングなどを変更できます。 SpriteMenuはjQueryのプラグインのため、実装にはjquery.jsが必要です。
document.write()の実行タイミングをずらす方法
関連エントリー： Google Adsenseの表示タイミングを制御する このサイトのppBlog's webRingのリストは、BlogPeople からdocument.writeで書き出しています。というかBlogPeopleのスクリプトがそうなっているのですが。で、document.writeが、HTMLソースの最初の方にあると、document.writeによる書き出しが終わるまで、それ以降のページのレンダリング(HTMLの書き出し)はストップした状態となります。document.writeによって呼び出している外部サーバー(ここではBlogPeople)のレスポンスが速ければ、ページ描画で待たされることはありませんが、たまにはレスポンスが遅くて、ページの残りがなかなか表示されないという事態は起こりえます。このdocument.writeは、広告バナーなどでも当たり前のように使わ
超クールな画像スライドショーを実現するためのJavaScriptライブラリ「FrogJS」:phpspot開発日誌
Programming and Designing for the Web FrogJS Javascript Gallery FrogJS is a simple, unobtrusive javascript gallery. It is not a replacement for other thumbnail galleries such as Lightbox JS, but rather a different way of showing galleries. 超クールな画像スライドショーを実現するためのJavaScriptライブラリ「FrogJS」。 以下のデモサイトを見ると分かりますが、今までにない超クールなスライドショーを実装できます。 実装方法は、まずスクリプトを読み込みます。 <script type="text/javascript" src="scripts/p
[JS]jQueryのプラグイン33+1選 -2009年6月
紹介済みから未紹介のものまで、jQueryのプラグイン34選です。 Image Rotator スタイリッシュな画像ギャラリー。 GalleryView インターフェイスが豊富な画像ギャラリー。 Sl
Sexy Drop Down Menu w/ jQuery & CSS - noupe
Studies show that top navigations tend to get the most visual attention when a user first visits a site. Having organized and intuitive navigation is key -- and while most drop down menus may look aesthetically pleasing, developing them to degrade gracefully is also essential. In this tutorial I would like to go over how to create a sexy drop down menu that can also degrade gracefully. According t
カレンダーで日付の入力補助をする - JavaScript ｜ WEB上手
JavaScript・PHP・Vue.jsのサンプルやWordPressのテーマ・無料フォント、ブログの運営方法等の紹介 フォーム等で日付を選択する場合に、カレンダーから選択することが出来るようにするJavaScriptです。カレンダーから選択出来る事で、ユーザーは曜日等が分かりやすくなる利点や、その他にも日付の間違い（2月31日は存在しない）等を減らすことが出来るようになります。 次世代のHTML（HTML5）からは、標準でHTMLのタグでカレンダーの機能を実現出来るようですが、HTML5が普及するまでにはまだ時間が掛かると思いますので、JavaScriptによるカレンダーで日付の入力補助をする機能は必要になると思います。 ご利用について 個人利用の場合はフリーでご自由にお使いいただけます。 法人・商用利用の場合はWEB上手(www.web-jozu.com)へのリンクを貼ってください。
Calendar: a Javascript class for Mootools that adds accessible and unobtrusive date pickers to your form elements
Overview Calendar is a Javascript class that adds accessible and unobtrusive date-pickers to your form elements. This class is a compilation of many date-pickers I have implemented over the years and has been completely re-written for Mootools. I have tried to include all the features that have been most useful while streamlining the class itself to keep it as small as possible. Use the links belo
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Slimboxをrel属性なしで動作させる: しまじぃにっき
https://www.rss25.com/
solidstate.jp
カレンダー