Schedule Template in CSS and JavaScript | CodyHouse
Schedule Template A simple template that lets you display events on a timeline, as well as organize them in groups (week days, conference rooms etc…) We’ve come across this web component many times: when we check the schedule of a conference, or the timetable of the classes of our gym. From a web designer perspective, it is handy to have a simple, responsive template to use if you ever need to cre
Bricks.js
A blazing fast masonry layout generator for fixed width elementsDocumentation on GitHub Current masonry solutions lack performance, and are bloated with unnecessary features. In addition, they: Are built on dependencies, like jQueryMandate HTML markup, or require a CSS stylesheetPosition elements with transforms, making animation difficult Bricks capitalizes on batched reading of layout properties
animatedModal.js
animatedModal.js is a jQuery plugin to create a fullscreen modal with CSS3 transitions. You can use the transitions from animate.css or create your own transitions. DOWNLOAD VERSION 1.0
jQuery Visualizeでグラフを描画ができるらしいのでちょっといじってみた
テーブルからグラフができるなんて。 jQuery Visualizeはcanvasを利用してグラフを描画するjQuerynのプラグインのようです。 googleのexcanvasも同梱されているようなのでIEでも対応可能。 なんと言ってもテーブルからグラフが作れるということが他のグラフ描画ライブラリとは違うところかなと思う。 詳しい使い方は以下で Update to jQuery Visualize: Accessible Charts with HTML5 from Designing with Progressive Enhancement ソースのダウンロードはこちら で、今回は、もうちょっと使い勝手をよくするために、既存の機能を以下のようにちょっと拡張してみた。 twitter bootstrapとの連携 グラフの強調表示 twitter bootstrapとの連携 twitter
pickadate.js
There’s a tonne of options to customize the date and time pickers, such as month/year selectors, time intervals, etc. There’s also a rich API to extend the functionality of the picker. Some examples are displayed on Codepen. When using the “classic” theme, it is important to have a wrapper div with position: relative around the source input to ensure the picker is sized according to the input elem
3D Book Showcase | Codrops
An experiment about a realistic looking book showcase with some interactivity using CSS 3D transforms. Today we want to share an experimental book showcase concept with you. The idea is to make books look more realistic by using 3D transforms and apply some fun effects to them, like rotating, flipping and opening. This might be an interesting concept for online book stores as it adds some interact
How to Load in and Animate Content With jQuery | Envato Tuts+
Clicking on any links on a webpage usually loads the content of that URL in our browser. This is how most links and websites on the internet work. However, you can also change this default behavior with a little bit of code to load the content of the new URL in a specific element within the current webpage without reloading the entire page. This is possible with the help of a little bit of JavaScr
Make an HTML5 & CSS3 Flipbook with Turn.js
Turn.js is a JavaScript library that will make your content look like a real book or magazine using all the advantages of HTML5. The web is getting beautiful with new user interfaces based in HTML5; turn.js is the best fit for a magazine, book or catalog based in HTML5. It works on most browsers and devices, and lightweight with only 10k. The turn.js API was conveniently built as an UI plugin for
[JS]シャドウにもこだわった、滑らかで美しいアニメーションでページをめくるスクリプト -BookBlock
Demo 3 BookBlockの使い方 Step 1: 外部ファイル 「jquery.js」と当スクリプト、そしてスワイプイベント用に「jquery++」を外部ファイルとして記述します。 <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script> <script type="text/javascript" src="js/jquerypp.custom.js"></script> <script type="text/javascript" src="js/jquery.bookblock.js"></script> Step 2: HTML 各ページはdiv要素で実装し、それらをdiv要素で内包します。 <div id="b
Building a single page app with Backbone.js, underscore.js and jQuery | &yet | the blog
OverviewWe've been finding ourselves building more and more JS heavy apps here at &yet. Until recently, we've pretty much invented a custom app architecture for each one.Not surprisingly, we're finding ourselves solving similar problems repeatedly.On the server side, we use django to give us an MVC structure to follow. But there's no obvious structure to your client-side code. There are some large
pjax こそが pushState + Ajax の本命 - punitan (a.k.a. punytan) のメモ
pjaxの前にpushStateとは AjaxとjQueryの説明は不要として、pushStateとはなんぞや。 pushStateを使ってブラウザの履歴に対する操作をし、HTMLの一部のみを書き換える動作でもブラウザの戻る／進む機能を実現できる方法のひとつ。Ajaxなページを再現し、かつURLを見慣れた方法で自然にpermalinkを表現できる。 有名なところではGitHubで使われてるアレ。 hash fragment (/#!/) ブラウザの履歴を機能させるため、URL の fragment (#) を使ってAjaxなページを実現する方法。一時期もてはやされた感があるが、さらなる「#!」URL批判 - karasuyamatenguの日記 など合理的な反論があり、これから導入するのはためらわれるところ。 有名なところではTwitterで使われているあの厄介者。 pjaxとは pjax
スマホ向けJavascript軽量ライブラリQuoJSを使ってみた ≫ 【スマホ×HTML5】Web&ハイブリッドアプリ開発者ブログ
このブログでは、HTML5/CSS3/Javascriptを利用したスマートフォン向けモバイルウェブサイトを作るのに役立つ情報を提供しています。オフラインで動くウェブアプリなど、スマートフォン×HTML5の最新情報が満載！！こんにちは、新井です。 今日の東京はとても暑いです。 半端ないです。 暑いと集中力が低下しますよね。 個人的には少し寒いくらいが集中できる気がします。 みなさんはどうでしょうか さて、今日はQuoJSというスマートフォン向けのJavascriptライブラリを使ってみましたので、簡単なサンプルコードを掲載します。 このライブラリは何がいいかと言うと、 １．軽量 ２．スワイプなどのスマートフォン向けによく使うイベントが実装されているので便利 という２点かなと思います。 １について minify版では、13KBです。 よく使うであろう、jQueryはv1.7.
leanModal
Strengths perfect for hidden page content uber light at just over 1kb (minified) flexible width & height image free multiple instances on one page great for login, sign up & alert panels, etc. How To Use Step 1: together with JQuery, include jquery.leanModal.min.js in your page, thusly: <script type="text/javascript" src="path_to/jquery.leanModal.min.js"></script> Step 2: rather than call another
ストレス無しでGoogleマップを使ったサイトが作れる「gmaps.js」:phpspot開発日誌
gmaps.js ? the easiest way to use Google Maps ストレス無しでGoogleマップを使ったサイトが作れる「gmaps.js」 Googleマップのサイトへの実装が本当に簡単で、かつ多機能なライブラリのご紹介です 簡単なマップを出すのに必要なコードは以下。 表示させるdivと緯度経度を指定するだけです 出来ることリストは以下 マップのクリック、ドラッグ時のイベントハンドラ実装 マーカー付与 ジオロケーション・ジオコーディング マップオーバーレイ マップ上のコンテキストメニュー実装 地図上の区画指定 目的地までのルート描画 静的な画像をマップ表示 などなど超多機能。 Googleマップ使うかもしれない場合は覚えておいて損はありません 関連エントリ Googleマップ関連のjQueryプラグインとチュートリアル集 スマホやタブレットでGoogleマップ風
JavaScriptを分割&非同期で読み込めるRequireJS | バシャログ。
『サニー 永遠の仲間たち』という韓国映画がとても良かったです！minamiです。 サイトで使用するJavaScriptを非同期で読み込むライブラリが昨今増えていますが、その中でRequireJS というライブラリがバージョンアップしたとのことなのでさわってみました。 RequireJSとは RequireJSは、JavaScriptのファイルやモジュールを非同期でロードできるJavaScriptライブラリです。推奨環境は下記になっています。 IE 6以上 Firefox 2以上 Safari 3.2以上 Chrome 3以上 Opera 10以上 ダウンロードする まずライブラリをダウンロードします。 DOWNLOAD REQUIREJS RequireJS の設置 ダウンロードしたら、以下のように設置します。 ├ index.html └ /js ├ main.js（読み込み管理用jsフ
[JS]iOS向けのページ制作に役立つ便利機能がたくさん詰まったスクリプト -iOS.js
iPhone, iPadなどのiOS向けのページを制作するのに役立つCSSやJavaScriptの便利機能をたくさん備えたスクリプトを紹介します。 iOS.js [ad#ad-2] iOS.jsの特徴 iOS.jsのデモ iOS.jsの特徴 iOS.jsではデスクトップのブラウザ向けページとは異なる点を中心に、より簡単に実装できるよう便利な機能がたくさん用意されています。 改善 min-height ページがスクリーンより小さい時は常にアドレスバーが表示されてしまいますが、スクリーン全部を使って表示します。 ※下記にデモがあります。 リンク ページ内の全てのリンクをWebAppで開きます。 100% height 通常「height=100%」はロードした最初の画面の高さを元にしますが、アドレスバーが隠された後のサイズ変更に対応します。 ※下記にデモがあります。 アドレスバー ページがロー
コンテンツをフルスクリーン表示にする際に便利なJSライブラリ「screenfull.js」:phpspot開発日誌
screenfull.js demo コンテンツをフルスクリーン表示にする際に便利なJSライブラリ「screenfull.js」 FullScreen API のクロスブラウザで動作するラッパーライブラリです。 例えば、ページ内に画像や動画があったとしてクリックするとフルスクリーンで楽しめる、的な使い方ができます。 screenfull.request( $('#container')[0] ); のように、screenfull.requrest( element ) でフルスクリーンが開始されます。 フルスクリーン化 フルスクリーンした後のイベントハンドラなんかも設定できるみたい。 関連エントリ フルスクリーン背景がスライドショーになるCSS3サンプル フルスクリーンでぼかしがカッコいいHTML5ギャラリーを作るサンプル １見の価値あり！なフルスクリーンWEBサイトのまとめ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Fluidbox, a jQuery plugin for beautiful lightboxes
Loading...
jQuery Spectragram