Build, share, and learn JavaScript, CSS, and HTML with our online code editor. Discover web applications and hire talent from the world’s largest community of front end developers and designers.

Video.js is a web video player built from the ground up for an HTML5 world. It supports HTML5 video and modern streaming formats, as well as YouTube and Vimeo. It supports video playback on desktop and mobile devices. The project was started mid 2010, and now has hundreds of contributors and is used on over 450,000 websites. Plays anythingPlays “traditional” file formats such as MP4 and WebM, but
var ua = navigator.userAgent; var result = document.getElementById('result'); result.innerHTML = ua + "<br>"; if( ua.search(/Android 2.1/) != -1 ) { result.innerHTML += "Android 2.1"; } else if( ua.search(/Android 2.2/) != -1 ){ result.innerHTML += "Android 2.2"; } else if( ua.search(/Android 2.3/) != -1 ){ result.innerHTML += "Android 2.3"; } if( ua.search(/Android/) != -1 ){ result.innerHTML +=
制作中のサイトのトップページにCrossSlideを設置したが、起動せずに「Loading...」の文字のみ表示される。 こんばんは、よろしくお願いします。 現在制作中のサイトのトップページにCrossSlideを設置しましたが、「Loading... 」の文字のみが表示され、CrossSlideが起動しません。 javascriptが全くわからず、以前、会社の先輩が他のサイトで使用したソースをそのまま使用しています。お手数ですが、原因のわかる方、教えていただけませんでしょうか。 ○ソース○ 【head】 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://ww
複数の画像にいろいろなクロスフェード効果を付けてスライド表示することができるライブラリ。 普通にクロスフェードするだけではなく、画像のどこからどこまでスクロールしながらクロスフェードするか、上下どちら方向にスクロールしながらクロスフェードするかなど、インパクトのあるスライドショーを作ることができます。 HEAD <!-- JS --> <script type="text/javascript" src="jquery-1.2.6.min.js" charset="utf-8"></script> <script type="text/javascript" src="jquery.cross-slide.js" charset="utf-8"></script> <script type="text/javascript"> $(function() { $('#gallery').cr
アイデア勝ち!JavaScriptでビフォーアフター「jQuery Before/After Plugin」 これはアイデアがいいですね。 JavaScriptライブラリjQueryで使用前・使用後みたいな表現が可能になります。 via:jQuery Before/After Plugin sponsors 使用方法 jQuery Before/After Pluginから関連ファイルをダウンロードします。 また、jQueryからjquery.jsをjQuery UIからjquery.ui.jsをダウンロードします。 ※画像はjsにて絶対パスで指定されているので、適宜修正ください。 <script type="text/javascript" src="jquery-1.3.2.js"></script> <script type="text/javascript" src="jquery
This is a tutorialzine demo. View the original tutorial to read and download..
Get affordable and hassle-free WordPress hosting plans with Cloudways — start your free trial today. Editor’s note: When I first pushed out this latest redesign for CSS-Tricks, it featured a simple color fading animation in the main navigation. Liam quickly noticed a flaw in the code I was using to do it, where if you very quickly moused back and forth over the menu items some of the transitional
この記事は年以上前に書かれたもので、内容が古かったり、セキュリティ上の問題等の理由でリンクが解除されている可能性があります。 jQueryを使用したcssナビゲーション メニューのまとめです。フェードや スライド、滑らかにドロップダウンする、 などなど色々なメニューをまとめました。 それほど多用はしませんが、必要な 時に探すのが面倒なので備忘録的に。 という訳で、個人的なjQuery+cssメニューの総集編です。 全部で73個。複数ブラウザでの確認はしていません。順不同です。少し重いかも・・ Large Drop Down Menu スライド&ドロップダウンメニュー Search Box with Filter and Large Drop Down Menu Fly-out Menu with jQuery and CSS3 カッコいいですねー。反対側からスライドするフライアウトメニュー
CSS-Tricks Example ← Back to Article Garage Door Menu This Browser is using CSS3 Transitions for this effect. Link 1 Link 2 Link 3 Link 4
画像にエフェクトをかけて拡大表示したり、スライドを作ったり、ツールチップで表示したり、というような画像を使用したjQueryプラグインが沢山あるのと、探してる方が直ぐに見つけられるように、という事でリンク集を作りました。 という訳で、集まっているjQueryのプラグインの共通点は画像を使っている、という事だけです。一貫性無いといえば無いですが、個人的にも必要とする事が多いので自分用のメモも兼ねてシェア。 日本語 English 結構カテゴリ分けはいい加減かもしれませんのであしからずご了承下さい。画像じゃなくてもいいんじゃ・・みたいのもありますが、デモで画像を使ってる、画像と相性が良さそう、みたいなものは基本的に掲載しています。 リンクにマウス乗せればキャプチャが出ます。 Lightbox Lightbox風に画像を表現できるjQueryいろいろ Lightbox2 / ベーシックなタイプ。
Example 1 This example shows the layer appears on top or bottom. Lorem ipsum dolor Consectetuer adipiscing elit. Donec eu massa vitae arcu laoreet aliquet. Praesent Maecenas est erat, aliquam a, ornare eu, pretium nec, pede. In hac habitasse Quisque ipsum est, fermentum quis, sodales nec, consectetuer sed, quam. Nulla feugiat lacinia odio. Fusce rhoncus Praesent pellentesque nibh sed nibh. Sed ac
twitter facebook hatena google pocket 背景画像を動かすことでインパクトのあるサイトが構築できます。 Vegas Background jQuery Pluginはフルスクリーンで背景をスライドさせられます。 さらにドットのオーバーレイをかけられるので、カッコイイ感じになります。 sponsors 使用方法 Vegas Background jQuery Pluginからファイル一式をダウンロード。 <link rel="stylesheet" href="jquery.vegas.css" media="all" /> <script type="text/javascript" src="jquery-1.6.1.min.js"></script> <script type="text/javascript" src="jquery.vegas.js
animateToSelector〔CSSとjQueryを使用したリスト要素のドロップダウンメニュー〕 Another Solution to Animation Queue Buildup in jQuery〔待機アニメーションの補強〕 CSS Dock Menu〔Mac OS Xのドック風のメニュー〕 CSS Sprites2〔jQueryとPHPを使用した投票システム〕 CSSとjQueryを使用したリスト要素の垂直型ドロップダウンメニュー CSSとjQueryを使用したリスト要素の水平型ドロップダウンメニュー Designing the Digg Header〔Diggのヘッダ風の垂直型ドロップダウンメニュー〕 Emenu〔ヘッダ画像内に収まる固定幅・固定高さのドロップダウンメニュー〕 Fixed Fade Out Menu〔ロールオーバーでフェードアウトするページ上部固定ナビゲー
formとJavaScriptを組み合わせるformとJavaScriptを組み合わせる事によって、CGIを使わなくても、動的な動きを実現する事ができます。Webページが表示されたり、リンクがクリックされたりといった様々なイベント発生時の処理をイベントハンドラと言います。 Webページ読み込み時の処理(onLoad) <body onLoad="処理"> googleMap APIを導入してみます。APIを読み込ませるため、bodyタグにonLoadを記述します。 サンプル ※注 initialize () 関数 この関数が記述された Scriptノードがロードされた直後に、全てのイベントに先だって自動実行されます。 クリック時の処理(onClick) <input type="button" onClick="処理"> <input type="radio" onClick="処理">
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く