もうメンドイので書くけど，http://www.kyosuke.jp/yugajs/ の v0.7.1 以前は読み込んだだけで XSS 可能になるので今すぐ窓から投げ捨てたほうがいいです．
山田omrk太郎 on Twitter: "もうメンドイので書くけど，http://www.kyosuke.jp/yugajs/ の v0.7.1 以前は読み込んだだけで XSS 可能になるので今すぐ窓から投げ捨てたほうがいいです．"
もうメンドイので書くけど，http://www.kyosuke.jp/yugajs/ の v0.7.1 以前は読み込んだだけで XSS 可能になるので今すぐ窓から投げ捨てたほうがいいです．
Androidの場合のみbodyにclassを追加するJavaScript
Androidの場合のみbodyにclassを追加するJavaScript ちょっとした修正でAndroidだけCSSを変更しなくてはいけないことがあったのでAndroidの場合のみbodyにclassを追加するJavaScriptを書いてみました。 <body> <script> if(/Android/.test(window.navigator.userAgent)){ document.getElementsByTagName("body")[0].setAttribute("class","android"); } </script> 上記のようなJavaScriptをbodyの後に書いておくとAndroidの場合のみbody要素に「android」というclassが設定されます。 ライブラリ化するのも大げさなので、ちょっとした修正の際にコピペして利用してください。 関連エントリ
コンテンツ上に広がるバナーの作り方
HTMLコンテンツ上に広がるバナーを作成しよう！ 今回はマウスのアクションでHTMLコンテンツ上に広がるバナーを作成してみたいと思います。「HTMLコンテンツ上に広がる」というのは、ページ表示の最初はバナー枠に収まるように表示されていますが、何らかのイベントで「HTMLコンテンツ上にレイヤーとして重なる（広がる）」という意味です。 最初に、どのようなデザインにするかを決めましょう。 前回までに作ってきた「FLA-ALE」という架空のビールメーカーのロゴを使用し、これを大きく表示するバナーを作ってみます。動作は「初期状態は大きなロゴの一部がスーパーバナー領域に見えており、そこをクリックするとバナーエリアがHTMLコンテンツ上に広がり、ロゴのすべてが見える」というものです（図1）。 次にHTMLとしてどのような処理を行えばいいかを考えます。 もともと表示させているスーパーバナー領域のdiv要素
スクロールバーのデザインを変更できる軽量でクロスブラウザ対応のjQueryプラグイン・Tiny Scrollbar - かちびと.net
この記事は年以上前に書かれたもので、内容が古かったり、セキュリティ上の問題等の理由でリンクが解除されている可能性があります。 題名の通りスクロールバーを変える jQueryプラグインです。全然使う 機会が無かったんですが、以前から 触ってみたいと思っていたところ、 ちょうど良さそうなプラグインを 見かけたので試してみました。 デザインそのものはcssでカラーリングしたり、画像に置換したり、と自由も利いて、クロスブラウザにも対応、3KB以下と軽量です。 こんな感じでデザインを変えられます。せっかく統一性をうまく出したのに仕様上スクロールバーが出てしまって一体感を損なう悲しみと絶望感はWebデザイナーさんなら経験したことがあるのではないでしょうか？え、無いの・・じゃあいらないかｎ Sample まぁせっかくなので見てください。 当サイトの右上のギアアイコンを使いました。このアイコンをクリックす
CSS3のベンダープレフィックスを自動で付けてくれる手軽で軽量なJavaScriptライブラリ・cssFx.js - かちびと.net
この記事は年以上前に書かれたもので、内容が古かったり、セキュリティ上の問題等の理由でリンクが解除されている可能性があります。 久しぶりにかなり便利そうな気がした ので備忘録。CSS3で各ブラウザに対応 させるために加えるプレフィックスを 自動で付けてくれるライブラリです。 将来的にCSS3のプレフィックスは付け る必要が無くなるのでそうなったら これを外せばいいだけですね。 使い方もすごく簡単で3.7KBと軽量です。cssが管理しにくくて困ってる方は検討してみてはいかがでしょう。また、jQueryやmootoolsのようなライブラリに依存しないのも素敵ですね。 地味にいいかも。CSSPrefixerみたいにプレフィックスを付けてくれるWebサービスはいくつか存在しますが、こういうのがあるのは多くの人が面倒だと思っているからですしね。これを、jsで付けようぜ、というのがcssFx.jsです。
CCS3を対応するためのプロパティを自動付与し、一行にまとめるスクリプト「Prefix Free」
WEB業界ではすっかりおなじみのCSS3。ただまだ全てのブラウザに標準化され実装されているわけではなく、ブラウザ毎に接頭語を付けてあげる必要があります。 機能的にはそれぞれ接頭語をつけて、書き分けてあげれば良いのですが、管理面や手間的もあり面倒です。そこで今回紹介するのは、接頭語を欠かずにシンプルなCSSのみで様々なブラウザに対応させる事ができるというものです。 詳しくは以下 こちらのスクリプトは非常に軽量なものとなっており、配布されているjsを読み込むだけで実装可能です。 対応ブラウザはIE9+、Opera 10+、Firefox 3.5+、Safari 4+、Chromeとなっております。いずれは必要なくなってくれるのが一番好ましいですが、取りいそぎ、煩わしさを回避したいという方はお試しください。 デモ確認用のCSSファイルは「this page’s stylesheet」からどうぞ。
A Simple jQuery Slideshow | Jon Raasch's Blog
In the interest of following jQuery’s motto of “writing less and doing more,” let’s write a simple slideshow using jQuery, JavaScript and a bit of CSS. Download the complete slideshow here Read the FAQs For starters, our main goal should be keeping the markup as clean as possible: <div id="slideshow"> <img src="img/img1.jpg" alt="" class="active" /> <img src="img/img2.jpg" alt="" /> <img src="img/
Twitter公式ボタンの設置でIE6,IE7でエラーがでる時の対処 - [k]id[k]id
Twitter公式のツイートボタンの設置の際にIE6,IE7で 「’}’がありません」が出る場合は 文字コードの不一致が考えられます スクリプト読み込みタグにcharset=”utf-8″を付与することで読み込めるようになると思います。 元のコードの<script>タグを <script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script> 以下にする <script type="text/javascript" charset="utf-8" src="http://platform.twitter.com/widgets.js"></script> いや、しばらく気付かないでハマった。。 初歩的な事で、、、お恥ずかしい。。
![Twitter公式ボタンの設置でIE6,IE7でエラーがでる時の対処 - [k]id[k]id](https://cdn-ak-scissors.b.st-hatena.com/image/square/58010acb677b2e12d767cba4964b80c2de081a8d/height=288;version=1;width=512/https%3A%2F%2Fkidokorock.com%2Fwp-content%2Fthemes%2Fkid_2015%2Fimages%2Fcommon%2Fthumbnail%2F4.jpg)
FacebookのLikeボタンを設置するJavascript - web探検隊
アクティビティを通知するLikeボタン(いいね！ボタン)の設置方法です。オフィシャルドキュメントはこちらです。 設置方法 iframe src="http://www.facebook.com/widgets/like.php?href=http://example.com" scrolling="no" frameborder="0" style="border:none; width:450px; height:80px">iframe> iframeのsrc内のhref=******を設置したいページのURLに変更する必要があります。Javascriptいちいち、ページごとにURLを変更するのは面倒なので、以下のJSを出力することで動的にLikeボタンを設置できます。 設置したデモはコチラです。とても、簡単にクライアント側で実装が可能ですね。
usa567 เกมสล็อตใหม่ปรับปรุงระบบให้ทันสมัย และมั่นคง
usa567 เว็บไซต์การพนันออนไลน์ชั้นนำที่เป็นที่รู้จักมากที่สุดและมีเกมทำเงินชื่อเสียงที่ได้รับความนิยมทั่วโลก ไปจนถึง ทางเราเสนอเกมสล็อตชั้นนำที่มั่นคง สนุกสนาน และมีโปรโมชั่นมากมาย และมีโอกาสที่จะได้รับเงินรางวัลแจ็คพอตให้แตกอย่างหรูหราเข้าเล่นเกมสล็อตที่มั่นสุดจากทั่วโลก รับโปรโมชั่นดี และลุ้นรับรางวัลแจ็คพอตใหญ่ ได้ที่นี่! เพราะ usa567 สล็อต คุณสามารถเดิมพันออนไลน์ที่มั่นคงและปลอดภัย ทำฝาก-ถอนอัต
Create a Slick and Accessible Slideshow Using jQuery
President of WebFX. Bill has over 25 years of experience in the Internet marketing industry specializing in SEO, UX, information architecture, marketing automation and more. William’s background in scientific computing and education from Shippensburg and MIT provided the foundation for RevenueCloudFX and other key research and development projects at WebFX. In this in-depth web development tutoria
スマートフォンサイトにフリック・スワイプ実装できるjQueryスライダプラグイン
※コメントにも頂いておりますが、この公開版はバグがありますので、承知の上でご利用になるか、ご自身でカスタマイズされる方がお使いください。 スマートフォンサイトにおいて、左のムービーのようなフリック動作ができる画像スライドのjQueryプラグインを作りました。（ムービーはiOSシミュレータによるデモです）iPhone・Androidでご覧の方はデモに直接アクセスしてください（ムービーは再生されません）。 【デモを見る（iPhone・Androidで見てください）】 【ダウンロード】 なぜプラグイン化したか 横向き対応がハードルを高くする ご自身でこの手のUIを組んだ経験がある方はわかると思いますが、絶対配置（position:absolute）を使ったリキッドレイアウトを組むのはなかなか手の込んだことが必要で、今後の仕事で都度ゼロからUI作成を行うのは効率が悪くなってしまうと思ったからです。
「Web Intents」でTwitterの機能をサイトに埋め込む
「Web Intents」でTwitterの機能をサイトに埋め込む 先日、AmazonがTwitterやFacebookによるシェア機能に対応したので、どうやって実装しているかを見ているとTwitterは「Web Intents」という機能を利用して実装していました。 ノーチェックだったのですがWeb Intentsは4月1日に公開された機能らしくすごく便利です。今までサイトにTwitterの機能を埋め込む際にはOAuth認証を利用しなくてはいけなかったのですが「Web Intents」を利用すれば簡単に埋め込めるようになっています。 Tweet機能の実装 つぎのようなシェアボタンを簡単に埋め込めます。 このページをシェア ソースコードは次のような感じになります。 <script type="text/javascript" src="http://twitter.com/intent/t
jQueryで画像ロールオーバー時にその場でシンプルに拡大表示するイメージビューアーのスクリプトサンプル｜BLACKFLAG
今では画像のイメージビューアーとしてのjQueryプラグインは多々あります。 最近よく見かけるもので、画像をクリックもしくはロールオーバーすることで 周りのレイアウトは保持したままで画像のみがその場で拡大表示されるエフェクト。 画像の見せ方としてちょっと興味があったので プラグインを使わず実際にスクリプトを組んで実装する方法を、 あれこれ試してみたサンプルを紹介してみます。 まずは動作サンプルは以下から。 画像にマウスオーバーしてみてください。 jQuery IMG HOVER ZOOMUP【SAMPLE01】 画像にマウスオーバーすることで周りのレイアウトを崩さずに画像のみを拡大表示します。 拡大後、画像からマウスアウトすると元に戻ります。 内部構成について、まずはHTMLから。 配置する画像とそれに付随するテキストのみの形で HTMLはあくまでシンプルな形にしておきます。 ◆HTML
jQuery Image Effects - Hover Effect w/ jQuery & CSS - jQuery Tutorial
Recently I was checking out some nice flash galleries and came across an effect that I really liked. I had a sudden urge to duplicate that similar effect but using my bread and butter (CSS and jQuery). I thought I’d share this and maybe some of you can find it useful. View Demo Build the Foundation - XHTML Our markup will be fairly simple, just an unordered three columned list. <ul class="thumb">
Instagram API が面白いかも - すぎゃーんメモ
これって実は結構前から使えてたんですかね…？ A More Open Platform: The Instagram API http://instagr.am/developer/ とりあえずclientを申請してゴニョゴニョと触ってみました。 Instagram popular photos - jsdo.it - share JavaScript, HTML5 and CSSclient_idだけあればJavaScriptだけでも結構いろいろできるみたいで、面白いものができそうな気がします。 access_tokenが必要なAPIもありますが これもOAuth2.0で結構簡単に取得できる…のかな？ instagram api sample - jsdo.it - share JavaScript, HTML5 and CSSあと気になるのはReal-time API http://i
モバイルアプリケーション開発のためのHTML/CSS/JavaScript関連技術まとめ
モバイルアプリケーションをHTML/CSS/JavaScriptなどのWeb標準技術を用いて開発するためのさまざまなツールや環境が登場しています。1つ前の記事で紹介した「jQuery Mobile」もその1つですが、それ以外のものもここでまとめて紹介しましょう。 jQuery Mobile jQuery Mobileは、JavaScriptライブラリとして知られるjQueryのプラグインです。オープンソースで提供されています。 「マークアップドリブン」をコンセプトとし、HTMLを記述していくことで、あらかじめ用意されているボタン、メニュー、ダイアログボックス、などのモバイル対応のタッチユーザーインターフェイスを備えたアプリケーションを開発できます。 クロスプラットフォームに対応し、iOS、Android、WebOS、Windows Phone、Symbianなど多数のデバイスでそのまま動作
[JS]新聞のカラムのようなレイアウトを生成するスクリプト -ezColumns
div要素だけでなく、p要素やli要素で実装されたパラグラフを新聞のカラムのようなレイアウトにするjQueryのプラグインを紹介します。 ezColumns デモ [ad#ad-2] ezColumnsの実装例 HTML p要素で実装したパラグラフをdiv要素で内包します。 <div id="groups"> <p>A - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec mattis libero</p> <p>B - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec mattis libero</p> <p>C - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Done
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
3streamer.net
mobile-bookmark-bubble - Project Hosting on Google Code