Automatic Infinite Carousel | jQuery for Designers - Tutorials and screencasts
Posted on 13th August 2009 — Following on from the infinite carousel, there have been a number of requests asking how to make the scrolling action automatic, so I’ve gone ahead to explain how to achieve this. Earlier: Play School: Broken Repeating Animations Next: iPhone-like Sliding Headers Watch Watch jQuery Automatic Infinite Carousel screencast (Alternative flash version) QuickTime version is
jQueryでフォームデータを送信する方法のまとめ
jQueryでフォームデータを送信する方法のまとめです。 １．submitイベントで送信する form要素のsubmitイベントで送信する場合のサンプルは次のとおりです。 <script src="http://code.jquery.com/jquery.js"></script> <script> $(function(){ $('form').submit(function(event){ event.preventDefault(); var f = $(this); $.ajax({ url: f.prop('action'), type: f.prop('type'), data: f.serialize(), timeout: 10000, dataType: 'text' }) .done(function( data ) { // 通信が成功したときの処理 }) .fai
hifive - HTML5企業Webシステムのための開発プラットフォーム
ダウンロード Download ダウンロード カスタムダウンロード ツール/ライブラリ ギャラリー Gallery ギャラリー ガイド Guide チュートリアル Webアプリ入門 基本編 データモデル編 データバインド編 リソースFW編 リファレンス APIドキュメント レシピ Recipe レシピ 資料室 Reference HTML5資料室 HTML5用語辞典 開発者向け Developers Developer Channel ユーザーグループ 開発リポジトリ リリースノート コードホスティング 開発者ブログ hifive開発情報 ヘルプ Help 本サイトについて FAQ 本ウェブサイトでは、利便性及び品質の維持・向上を目的に、クッキーを使用しております。本ウェブサイトにおけるクッキーの使用についてはプライバシーポリシーをご参照いただき、クッキーの使用にご同意頂ける場合は「同意す
バニラJavaScriptを選択する
jQueryを用いて書いたコードと同等な働きをするコードをjQuery抜きで書くとどのようになるのかを示したWebサイト「You Might Not Need jQuery」（jQueryは必要ないかも）が先日話題になりました（はてなブックマークも180以上付いています）。 ちょうどこのWebサイトを話題にした記事「Choosing Vanilla JavaScript」が、Webデザイナ向けに情報発信をしている著名なWebサイト、A List Apartに掲載されていました。 Vanilla JavaScriptとは、要するに何もトッピングされていないバニラアイスクリームのように、jQueryなどのライブラリを使わない素のJavaScriptのことを示しています。 この記事は何でもjQueryを使うのではなく、正しい選択をしようというテーマの内容になっており、参考になりそうだったので翻訳
【jQuery】はてブタイル なるものを作ってみた。そしてそのまとめ。 - enator's blog
前回の記事にて、はてなブックマークのリニューアルに言及させていただきましたが、 批判だけするなど恥をしれと母にdisられ(ry 作ってみました。 ただ、旧デザインようなものについてはすでに素晴らしいサイトが いくつかリリースされているので、 嫁のはてブ Hatebu::Classic 現はてブのように、タイル状にしてみようかなと思いまして。 はてブタイル(こちら) を作った次第です。正直見やすいかどうかで言うと微妙な所だなと思いつつ 乗りかかった船ということでとりあえずとりあえず。 機能など (1)はてなブックマークの以下のRSSをとってます。 ・最近の人気エントリー ・新着エントリー ・各カテゴリの新着エントリー ※各カテゴリの人気エントリーのRSSが不明だったため、対応してません。 (2)ブックマーク、その他シェアボタン なんとなく、ツイートとシェアボタンものっけてみました。 はてブの
websanova/jquery-url · GitHub
README.md $.url() A simple, lightweight url parser for jQuery (~1.2 Kb minified, ~0.5Kb gzipped). Examples $.url(); // http://www.domain.com/path/index.html?query1=test&silly=willy#test=hash&chucky=cheese $.url('domain'); // www.domain.com $.url('host'); // domain.com $.url('tld'); // com $.url('sub'); // www $.url('port'); // 80 $.url('protocol'); // http $.url('path'); // /path/index.html $.url(
jQuery++
Hi, I’m jQuery++. I am a MIT licensed collection of extremely useful DOM helpers and special events for jQuery 1.8 and later. I’m not a UI project like jQuery UI or jQuery Tools. Instead, I’m all about providing low-level utilities for things that jQuery doesn’t support. If Underscore is jQuery’s functional-programming tie, I am jQuery’s bald-spot covering toupee. Select the plugins you want and c
Google ChromeでDOMContentLoadedが発生しないケースがある
タイトルのとおりGoogle Chromeは大変速いブラウザですが、その速さ故か、たまにDOMContentLoadedが発生しないケースがあります。 以下のようなコードで再現確認できます。 HTML <!DOCTYPE HTML> <html lang="en"> <head> <meta charset="UTF-8"> <title>domcontentloaded test</title> </head> <script type="text/javascript"> (function(d){ d.addEventListener('DOMContentLoaded', function(){ alert('nya-'); }, false ); var s = d.createElement('script'); s.src = 'hoge.js'; s.charset="UT
はてなグループの終了日を2020年1月31日(金)に決定しました - はてなの告知
はてなグループの終了日を2020年1月31日(金)に決定しました 以下のエントリの通り、今年末を目処にはてなグループを終了予定である旨をお知らせしておりました。 2019年末を目処に、はてなグループの提供を終了する予定です - はてなグループ日記 このたび、正式に終了日を決定いたしましたので、以下の通りご確認ください。 終了日: 2020年1月31日(金) エクスポート希望申請期限:2020年1月31日(金) 終了日以降は、はてなグループの閲覧および投稿は行えません。日記のエクスポートが必要な方は以下の記事にしたがって手続きをしてください。 はてなグループに投稿された日記データのエクスポートについて - はてなグループ日記 ご利用のみなさまにはご迷惑をおかけいたしますが、どうぞよろしくお願いいたします。 2020-06-25 追記 はてなグループ日記のエクスポートデータは2020年2月28
Wookmark
高さの異なる要素をグリッドに沿って、レンガ状に隙間なく並べるjQueryのプラグインを紹介します。 同種の有名スクリプト「Masonry」はアニメーションを使ってダイナミックにレイアウトを変更しますが、このWookmarkはシンプルに並べなおすだけです。 デモ:幅800pxで表示 [ad#ad-2] Wookmarkの使い方 実装はいたってシンプルです。 外部ファイル 「jquery.js」と当スクリプトを外部ファイルとして記述します。 <script src="//ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script> <script type="text/javascript" src="jquery.wookmark.js"></script> HTML デモを例にHTMLはリスト要素など、並列に配置しま
WebSocketを使ってなんちゃってビデオチャットを作ってみた - いろいろな何か
はじめに 以下のページでjQueryでWebカメラを操作できると知ったので、WebSocketを使ってなんちゃってビデオチャットを書いてみました。 WebSocketサーバに接続した2名で1対1のビデオチャットが出来ます。送受信するデータはカメラの映像とテキストのみで、音声データの送受信には対応していません。 jQueryからウェブカムをコントロールするためのプラグイン『jQuery Webcam Plugin』 | IDEA*IDEA 実行環境 Chrome 10.0.612.3 dev Firefox 4 beta 7 node.js 0.3.1 node-websocket-server 1.4.01 jQuery webcam plugin WebScoketサーバ側のプログラム 今回はnode.jsを使ってサーバ側のプログラムを書きました。 videoChatServer.js
TwitterやFacebookのように一番下までスクロールしたら自動的にコンテンツを表示する「jQuery.Bottomプラグイン」
TwitterのタイムラインやFacebookのニュースフィードように、ページの一番下までスクロールしたらコンテンツを自動的に表示する「jQuery.Bottomプラグイン」を紹介します。 １．サンプル jQuery.Bottomプラグインにはデモページが用意されていますが、いまいちなのでサンプルページを作りました。 jQuery.Bottomプラグインサンプル ページの一番下までスクロールすると自動的にコンテンツを表示します。 なお、最初に表示した状態でコンテンツがすべて表示されてしまっているとそもそも動作しないので注意してください。 ２．プラグインの機能 jQuery.Bottomプラグインは「bottom」イベントを登録するためのものです。このイベントを利用してページの一番下までスクロールすれば、bottomイベントが発生します。 ３．プラグインのダウンロード githubのjQue
[JS]これ以上ないと言うくらい簡単に実装できるスライダーのスクリプト -Flow Slider
IEでも滑らかで快適に動作するスライダーを簡単に実装できるjQueryのプラグインを紹介します。 実装にかかる時間は2分くらいでしょうか。 Flow Slider [ad#ad-2] Flow Sliderの特徴 Flow Sliderのデモ Flow Sliderの実装 Flow Sliderの特徴 滑らかなアニメーションで動作します。 実装は簡単で少しのコピペでok。 ベースとなるスタイルシートは用意済み。 クロスブラウザ対応。 対応ブラウザ Firefox Safari Chrome IE Opera9 Flow Sliderのデモ デモではサイトのトップにあるベーシックなスライダーと、本棚に並べたようなスライダーがあります。 スライダーの操作はマウスホバーで、左右の端ほど素早くスライドします。 Flow Slider: Example グリーンのボタン「Buy Book」をクリック
知ってて当然？初級者のためのJavaScriptで使う即時関数(function(){...})()の全て
(function(){...})()は、 (function($){ $.hoge = function() { }; })(jQuery) みたいに使われていたりするコード。GreasemonkeyとかjQueryのプラグインとか、あれこれ見かけることがあると思います。 この話題はいくつかWebでも取り上げられていますが何がどうなってんのかちょっと難しいですね。しかし、誰でも理解できるレベルではあります。というのも、こういう種の難しさは体系的な知識が備わっているか否かということなのです。 でも、この知識を体系化する作業って結構しんどくて、難しくて、まーハゲるほど悩むこともあるかもしれない。それはきっと、とても毛根に悪いかもしれない。スカルプDも真っ青の状況になるかもしれない。それは、悲しいことなのだと思う・・・っ！ 毛根にはこれからもがんばってほしい！いつだって頭を温かいまなざしで見守
jQueryでディープコピー - loiter on the sideroad
javascriptのオブジェクトの複製を Object.clone = function(source) { return $.extend({},source); }で空オブジェクトにコピーしてましたが、 このままだとシャローコピーだったのでﾊﾏｯﾀﾖ。 ｶﾞｼｶｰｼ、jQueryのソース眺めてたら。。。ｵｯ $.extendの一つ目の引数にtrueを追加しとくとディープコピーになるっぽい。 ということで、 Shallow Clone Object.shallowCopy = function(source) { return $.extend({},source); } var a = {a:{a:1},b:{a:1}}; var b = Object.shallowCopy(a); b.a.a = 2; window.alert(a.a.a); //2 window.alert(b
JavaScriptライブラリ「jQuery」でカレンダーを作る「FullCalendar」
twitter facebook hatena google pocket JavaScriptライブラリの「jQuery」を使用してカレンダーを作ります。 via：FullCalendar - Full-sized Calendar jQuery Plugin sponsors 使用方法 FullCalendar - Full-sized Calendar jQuery Pluginからファイル一式をダウンロードします。 <link rel="stylesheet" href="fullcalendar.css" media="all"> <script type="text/javascript" src="jquery-1.3.2.js"></script> <script type="text/javascript" src="ui.core2.js"></script> <scr
rails と jquery treeview でディレクトリツリーをらくらく実装する
ども、Fusic 河野です。 だいぶ久しぶりですね。 今度の rubykaigi2011 に参加させて頂くこととなりました！ 会場で見かけたら、ぜひお気軽にお声をかけてくださいませ。 [rubykaigi2011] rubykaigi.org/2011/ それと、もう一つ告知です。 来る７月２８日（木）、福岡で活動している Androidの会福岡支部、九州GTUG、 HTML5+α福岡、iDevQ、そして、AppleKnight の４つのコミュニティが 福岡県Ruby・コンテンツ産業振興センターに集結し、同時に勉強会、懇親会を行います。 ご興味のある方は、ぜひともご参加ください！！ 参加登録は下記のリンク先より facebook にて参加表明をお願いいたします。 [futuresync] futuresync.jp/ さて、わたくし、前回の記事でも書きましたが、主に ruby on rai
移動する前に404かどうか確認できるjQueryプラグイン「Catch404」:phpspot開発日誌
Catch404 ? A jQuery And CSS3 Modal Plugin For Handling Broken Links Elegantly | AddyOsmani.com | Where Web Businesses Grow 移動する前に404かどうか確認できるjQueryプラグイン「Catch404」。 クリックした後に404ページが表示されるのではなく、クリックしたタイミングで404かどうかチェックしてダイアログを出してくれるプラグインのご紹介です。 外部サイトにリンクしている場合、404かどうかっていうのはアクセスしてみないとわかりませんが、jQueryがajaxで通信して存在チェックをして、飛ぶかどうかを決定することが出来ます。 リンク切れだった場合に次のようなダイアログをだしてくれます。 初期化は次のように簡単。チェックしたいものだけを catch404メソッ
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
