JavaScript でタブ切り替え UI を実装する | WWW WATCH
先日、タブ切り換えタイプの UI を、JavaScript と CSS で簡単に実装する仕組みを探していて （他力本願）、ちょうど求めていたスクリプトが Arc... 先日、タブ切り換えタイプの UI を、JavaScript と CSS で簡単に実装する仕組みを探していて （他力本願）、ちょうど求めていたスクリプトが Archiva さんで紹介されていたので使わせていただきました。 時間がなかったので、できれば自分では書きたくないなぁ、なんかいいの公開している人いないかな～なんて思っていたのですが、おかげ様で助かりました。ということで、お礼を兼ねて紹介させていただきます。 タブ切替をサクッと実装 ： Archiva タブ切り換えを実装する JavaScript ライブラリやサンプルソースはいくつか存在しますが、私が求めていたのは JavaScript が OFF の時でもページ内リンクと
LAB at GrandBisou
Twitter JS に挑戦するの巻 Google Code にある twitter.js をそのまま利用します。 設置はいたって簡単です。 サンプルページ 1. ツイッターの用意 表示したいツイッターを用意します。 2. ディレクトリの修正 [root] | --- index.html // 表示するページファイル | | --- [css] | | --- base.css // 表示されるスタイルの指定をします。 | | --- [image] // ローディングの画像ファイルが入ります。 3. マークアップ HTML (HEAD要素) <!-- CSS --> <link rel="stylesheet" type="text/css" href="css/base.css"> <!-- JavaScript --> <script type="text/javascrip
入力するのが楽しくなる、アニメーション機能を伴ったフォームを作成するチュートリアル | コリス
jQueryとCSS3を使って、複数のステップをアニメーションで次々に表示するフォームを実装するチュートリアルを紹介します。 How to Create A Multi-Step Signup Form With CSS3 and jQuery デモページ フォームの下部にある「プログレスバー」の存在もユーザビリティ的に見逃せない存在です。 [ad#ad-2] フォームのデモ フォームは全部で4つのステップで構成されており、さまざまなスパイスが含まれています。 2枚目のフォーム フォームの進捗状況は、下部のプログレスバーに表示されます。 ※個人的には%でなく、2/4が分かりやすいと思います。 フォームの実装 HTML：基本構造 フォームの基本構造は、4つのステップをそれぞれdiv要素に格納します。 <div id="container"> <form action="#" method="
[JS]シンプル！軽量！簡単！三拍子揃ったスライドショーのスクリプト -jQuery.TinySlider
jQuery.TinySlider デモ [ad#ad-2] jQuery.TinySliderの実装 HTML スライドで表示されているイメージはdiv要素の背景画像です。 <div id="slider"> <div class="image" style="background-image: url(img/img1.jpg);">Simple</div> <div class="image" style="background-image: url(img/img2.jpg);">Light</div> <div class="image" style="background-image: url(img/img3.jpg);">Easy</div> </div> JavaScript 「jquery.js」と「jquery.slider.js」を外部ファイルとし、下記のスクリプト
ブラウザバージョンチェック
Cross Tips Maintained by 1998 - 2002Toshirou Takahashi Last Update :Monday, 24-Apr-2023 15:45:24 JST ブラウザバージョンチェックについて JavaScriptはVBScriptやActiveXと違って基本的にNNでもIEでもWinでもMacでもUNIXでも使えるクロスプラットフォームでクロスブラウザな言語です。とはいえ、ブラウザの進歩にともなうバージョン間の違いやマシン環境による違いも当然ながら存在しています。 この本では主にブラウザ間の違いをあまり意識せずにDHTMやJavaScriptを書けるようにすることを意図していますが、 将来のバージョンやDHTMLを使えない古いバージョンアップや環境の違いに対応するときなどのために処理を分岐する方法を学んでおくことも不可欠です。 ここでは、Jav
特定サイトから直リンクされた画像を一発で別の画像にする方法:phpspot開発日誌
他人のブログをパクり無断で公開！ 被害者の対抗策が凄い アメブロ広報「数件の通報が来ている」 - ガジェット通信 特定サイトから直リンクされた画像を一発で別の画像にする方法。 私のブログはともかく、不要な負荷が増えて嫌だなと思う場合に即効できる処置方法をご紹介。 mod_rewriteが入っているサーバ＆.htaccessが利くサーバの場合は以下のように書いて直リンクされた画像のディレクトリに設置します。 RewriteEngine on RewriteCond %{HTTP_REFERER} ^http://ameblo.jp/sfida2010/.*$ RewriteRule ^(.*)$ http://example.com/deny/unko.png [R=301] /images/ 以下に直リンクを受けている画像群がある場合は、/images/.htaccess として保存して下
もうCSSハックは必要なし!? ブラウザ毎にCSSを切り替える「cssuseragent」 | Web活メモ帳
CSSでページをデザインする際に、ブラウザ毎のレイアウトの違いって本当に嫌ですよね。 CSSハックで対応する方も多いかと思いますが、本日紹介する「cssuseragent」を使うとclassの作り方を少し工夫するだけでより柔軟に対応できるようになります。 詳しくは以下 設定方法はJavaScriptを一つ読み込むだけになります。 <script src="cssua.min.js" type="text/javascript"></script> このライブラリを使うと、ページのhtml属性に動的にclass属性を追加するようになります。 例えばですが、IE6でアクセスした場合には ua-ie-6というclass名が追加されるようになります。 <html class="ua-ie-6"> <head>…</head> <body>…</body> </html> iPhoneの場合はua-
SyntaxHighlighter2.0.320
Tweet スクリプトを載せていくにあたり、スクリプトコードをきれいに描画してくれるJavascript、"SyntaxHighlighter"を早速入れみることにする。 最新版は2.0.320で下記ページの「Click here」からダウンロードできます。 http://alexgorbatchev.com/wiki/SyntaxHighlighter:Download ダウンロードしてzipファイルを解凍すると ・test.html ・scriptsフォルダ ・stylesフォルダ ・srcフォルダ ・LGPLv3.txt が入っています。 test.htmlを開くと、head内に下記スクリプトが書かれており、主にデザイン成形のためのスタイルシートと、scriptフォルダ内の各プログラムコードごとに小分けにされているjavascriptファイルにリンクが貼られています。 ここでscri
9 Simple CSS & JS Snippets for Creating Beautiful Tabs – Speckyboy
Tabs are a fundamental part of the web, and they’ve been around for years, but with even more developers going open source there’s a whole world of free code snippets out there. If you’re building a tabbed widget, you could always start from scratch, or you could rework someone else’s code and style the element to fit your project. That’s why I’ve created this collection of the best-tabbed widget
[JS]よく使う機能だけに絞り込んだ、シンプルなカルーセルのスクリプト -bxCarousel
画像をはじめさまざまなHTML要素をスライド表示させるカルーセルのスクリプトを紹介します。 下記のデモでは、Example One（表示数4、移動数2、手動操作）、Example Two（表示数3、移動数1、自動操作）となっています。
どんなフォームにも使えるjQueryのフォームバリデーション exValidation :: 5509
jquery.validation.jsというフォームバリデーションプラグインを公開していますが、使える場面が割と限定されてしまうような作りだったので、より幅広く使えるようにexValidationという名前で新しいjQueryプラグインとして作り直しました。伴って仕様や使い方が異なる部分も多いので、ドキュメントとして書いておきます。ただし前半のバリデーションルール周りは同じエンジンを使ってるので、ほぼ同じです。ちなみにすごい長いです。。 ルールを割り当てる際のclass名がhogeからchkhogeに代わりました。アップデートして使う場合は注意してください。 サンプル1: エラーを右上に表示 サンプル2: エラーを下に表示 トピックス ダウンロード 使い方 1. JSファイルを読み込む 2. 基本バリデーションルール 3. select, checkbox、radio、複数項目の場合 4
seesaaブログに「twitterにつぶやくボタン」を簡単に設置する方法
twitter上で 「○○○○○ http://hoge」 (○○○○○は「おもしろい」等、twitter-er自身の感想) という形式のつぶやきをよく目にする。 しかし、この手のつぶやきはあまりにシンプルすぎて 何についての感想なのか、何について書かれたページなのかが 分からないので非常に残念。 TLの流れは速いので、 そういうつぶやきはスルーしてしまいがちだ。 もしかすると、自分に重要な情報なのかもしれないのに。 そこで、少なくとも自分のブログには、 自分が満足する形式でTweetされる仕組みを設置したい しかもseesaa限定でもいいのでシンプルなコードがいい と思い、 簡単Tweetスクリプト(seesaa blog設置専用) を作ったよ！ みんな、自由に使ってね！ というお話。 特にwebプログラミングの経験がない(web以外ならある)自分でも「自作できるな」と思ったのは、@ms
自分のページにTwitterのつぶやきを表示する方法まとめ [javascript] - RinGoon POP!!
気になるニュースや時事の話題を毎朝配信！世界と日本の未来を分析します。デジモノや料理の情報、WQXGAサイズの壁紙も。 このページでは、Twitterでつぶやいた内容を、javascriptのみで、自分のページに表示する方法を解説する。 このページでも右上に表示させていますが、Twitterのつぶやきを自分のページに表示させるのは、とても簡単です。 1. javascriptの埋め込み 以下の javascript をページに記入します。変更しなければいけないのは、 Twitterのユーザ名 （例：BabaTaka）つぶやきを何個表示するか （例：1個ならcount=1）の2点です。 <script type="text/javascript" src="http://twitter.com/javascripts/blogger.js"> </script> <script type="
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
IDEA * IDEA
Create a new fiddle - JSFiddle
remora.cx
Playstation mk2
caraldo.net - it転職 リソースおよび情報
SyntaxHighlighter | ActionScript3に対応する
「twitterでつぶやく」ボタンをつくる | WEBサイト制作 WEBシステム開発 | HAPPY*TRAP