タグ

workとjsに関するforcutieのブックマーク (29)

  • ituore.com - ituore リソースおよび情報

    This webpage was generated by the domain owner using Sedo Domain Parking. Disclaimer: Sedo maintains no relationship with third party advertisers. Reference to any specific service or trade mark is not controlled by Sedo nor does it constitute or imply its association, endorsement or recommendation.

    ituore.com - ituore リソースおよび情報
  • HTML5のplaceholder属性を代替するjQueryプラグイン(ah-placeholder.js) ::ハブろぐ

    HTML5の仕様にあるplaceholder属性を、未対応のブラウザでも擬似的に使えるようにするjQueryプラグインです。title属性に入れた文字列を、プレースホルダー用のテキストとして扱います。placeholder属性については以下などを参照。 HTML5のFormで実現されるplaceholder、autofocusが便利そう - IDEA*IDEA <input> placeholder-HTML5タグリファレンス 今回のプラグインは、HTML5のplaceholder属性をjQueryでやってみる :: ハブろぐ で、以前書いていたjQueryを整理して、プラグインの体裁に整えてみたものです。車輪の再発明もいいとこですね。 2011-09-09追記 バージョン1.2でplaceholderAttrオプションを追加 これまでplaceholder属性代わりに使う属性がtitle

  • MdN Design|総合情報サイト

    テキストを任意の形に沿わせたいときには「CSS Text Wrapper」というジェネレーターを使ってみよう。 まずサイトの中央部にある"Options"の"Content"に任意の文章を入力する。このテキストではタグも使用可能だ。次に同じく"Options"にある"Workarea Options"と"Preview Options"で見た目の設定をしよう。コンテンツの高さや幅、Line-heightなども指定できる【1】。セッティングが決まったら[Update Settings]ボタンで反映させる。 【1】セッティングを決める "Options"上部のテキスト表示が切り替わったら、次に丸い緑の部分をドラッグしてテキストの表示位置を変更しよう。黒いラインをクリックするとポイントが増やせるので複雑なラインでの回り込みも可能だ【2】。 【2】テキストの表示を決める 希望の表示にセッティングが

    MdN Design|総合情報サイト
  • 他のスクリプトに依存しない軽量アコーディオンスライダーを使ってみた

    トップページへ 【Javascript】他のスクリプトに依存しない軽量アコーディオンスライダーを使ってみた 実践記事はたった1.3KBのJavascriptで機能するアコーディオン式スライダー - ウェブサイトの技術っておもしろいよねです。 実践元サイトはウェブサイトの技術っておもしろいよねです。

  • 27 Websites leveraging jQuery Masonry - Inspiredology

    We all know jQuery has become a huge platform, and the different techniques and effects are all over the web. jQuery is a very powerful platform, and usually accompanied with CSS and WordPress, developers can create some amazing projects. David DeSandro created a layout plugin called Masonry. “Think of it as the flip side of CSS floats. Whereas floating arranges elements horizontally then vertical

    27 Websites leveraging jQuery Masonry - Inspiredology
  • ウィンドウ幅に合わせて、隙間無く段組みしてくれるJQuery「Masonry」

    最近のWEBレイアウトで紙面に近いような多段な組み方をした、WEBレイアウトが出てきていますが、今回紹介するのは多数のボックスをウィンドウ幅に合わせて、隙間無く段組みしてくれるJQuery「Masonry」です。 特に違和感無く動作し、動作も速く安定していしています。JQueryを読み込ませて簡単なコードを付加してあげるだけで動作します。 詳しくは以下 並び替えだけではなく、絡む毎に幅を指定したり、コンテンツをボタンで追加したり、幅を揃えて、きれいに並べる事もできるみたいで、様々な使い道がありそう。ワンサイトで様々な切り口のコンテンツをもったサイトには非常相性がいいのではないでしょうか? 詳しい設置方法は「David DeSandro: jQuery Masonry」をご覧ください。またデモは「jQuery Masonry › Basic Examples」からご覧になる事ができます。 プ

    ウィンドウ幅に合わせて、隙間無く段組みしてくれるJQuery「Masonry」
  • http://www.chishimatochi.info/found/

    forcutie
    forcutie 2012/01/05
    ナビゲーションサンプルとして。こういうナビゲーションならカテゴリインデックスを設けない形もあり。
  • [JS]スクリプトを指定したタイミングで読み込ませるスクリプト -Lazy Loading Script

    外部スクリプトファイルを指定したタイミングで読み込ませるjQueryのプラグインを紹介します。 ちょっと前に流行った画像を遅れて読み込ませる「Lazy Load」のスクリプト版という感じです。 jQuery Lazy Loading Script – On Demand Javascript plugin Webrevised [ad#ad-2] Lazy Loading Scriptの特徴 Lazy Loading Scriptの実装 Lazy Loading Scriptの特徴 外部スクリプトファイルを指定したタイミングで即時にロードします。 ファイルが既にロード済みであれば、再びロードはしません。 必要のない時にはスクリプトを読み込まないため、ロード時間を減らします。 AJAXベースのウェブアプリケーションをよりシンプルにできます。 Lazy Loading Scriptの実装 外部

  • TITLE属性を利用した簡単ツールチップの作り方 jQuery編 :: 5509

    散々既出な気がするネタシリーズ。TITLE属性をツールチップで表示させるやつです。簡単なヘルプとか表示してあげるとユーザビリティを向上させることができる場合がありますよね。jQueryを使うととても簡単につくれます。というよりも、使いたいときにさらっとコピってすぐ使えると思うので頭の片隅にでも置いておくと便利かもしれません。 Demo Download demo files ポイントは TITLE属性を持っている要素にイベントを設定する ( *1 mouseover()でツールチップを生成する ( *2 mouseout()でツールチップを消去する ( *3 mousemove()でツールチップの位置を変える ( *4 です。今回はmouseout()で消去するにしてますが、別にいちいち消さなくてもいいです。textを変えればいいだけですから。上の項目をJSソースにすると以下のような感じに

  • Closure Compiler - Google Code

    How do I start? Work through the UI Hello World. Work through the API Hello World. Download the application. Work through the Application Hello World. Read about Advanced compilation. Use the Closure Inspector to debug. Explore the project's source code. What is the Closure Compiler? The Closure Compiler is a tool for making JavaScript download and run faster. It is a true compiler for JavaScript.

  • 静的HTMLで、インクルードを実現するためのJavaScript - on the center line.

    ローカルディスク上に存在する静的HTMLで、外部ファイルをインクルードするためのスクリプト(つまり、XMLHttpRequestオブジェクトの代わり)。 以前にも同じようなエントリを書いたのですが(http://d.hatena.ne.jp/kenpoco/20080228/1204198090)、いくつか不具合があったので修正してます。 IE6,7に対応(前回はFirefox2のみ)。 インクルードするファイルの拡張子が.HTMLと.TXTで動作が異なっていたので、その対応。 インクルードした後で、その内容を変更するための仕組みを追加。 最近HTMLを作る機会が多いので自分で使ってみてるのですが、けっこう重宝してます。全ページに同じようなヘッダー部分がある場合なんかに、ヘッダー部分を1ファイルにまとめておけるので、その後の修正がかなり楽。 【使用例】 ------------------

    静的HTMLで、インクルードを実現するためのJavaScript - on the center line.
  • 少しのコードで実装可能な20のjQuery小技集

    2016年6月22日 jQuery 素敵な動きを手軽に実装できるJavaScriptライブラリ「jQuery」。jQueryには多くのプラグインが揃っていますが、以前書いた「少しのコードで実装可能な20のCSS小技集 」に続き、今回はプラグインなしで実装できるjQueryの小技を紹介します!「jQueryってなんだ?」という人もコピペで実装できますよ!サンプルも用意したのでぜひご覧ください! ↑私が10年以上利用している会計ソフト! 追記:この記事で紹介されているいくつかの方法が、今ではCSSのみで実装可能です!詳しくは「かつてはJavaScriptを利用していたものの、今ではCSSのみで実装できる10の小技」をご覧ください。 jQueryの基的な使い方 まずはjQuery家からjQueryファイルをダウンロードします。<head> 内に下記を記述し、jQueryファイルを読み込みます

    少しのコードで実装可能な20のjQuery小技集
  • もう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-

  • jQuery Roundabout

    Roundabout is a jQuery plugin that converts a structure of static HTML elements into a highly customizable turntable-like interactive area. (And now, not just turntables, but many shapes!) In its simplest configuration, Roundabout works with ordered- and unordered-lists, however after some quick configuration, Roundabout can work with an set of nested elements. Requirements & Add-Ons Requires jQue

    forcutie
    forcutie 2010/08/26
    スライドショー
  • AjaxZip 2.0

    Kawa.netxp AjaxZip 2.0 - Ajax郵便番号→住所自動入力フォーム(CGI不要版) AjaxZip2は、昨年公開した 『ajaxな住所入力フォーム』 の新バージョンです。 郵便番号を入力すると、該当する都道府県名・住所が自動的に入力されます。 Ajaxと JSON フォーマットを利用するJavaScriptライブラリとして公開しました。 JavaScript のみで稼動するため、サーバサイドで稼動するCGIプログラムは不要です。 郵便番号→住所変換処理は全てクライアントサイドのJavaScriptで行います。 既存 HTML の住所入力フォームをたった3行書き換えるだけで利用できます。 簡単に設置できるため、プログラムに詳しくない方でも導入していただけると思います。 以下の住所入力フォームに、7桁の郵便番号を入力してみてください。 【2007/12/09 追記】 jQ

  • Horizontal Sub-nav with CSS & jQuery - Subnavigation Tutorial - CSS Tutorial - jQuery Tutorial

    Not too long ago I wrote a tutorial on how to create a drop down menu with CSS & jQuery, today I would like to go over how to create a simple navigation with a horizontal subnav. In most cases we can achieve this effect purely with CSS, but since we have to attend to our red headed step child aka IE6, we will use a few lines of jQuery to cover all grounds. View Demo Wireframe - HTML Nest a set of

    forcutie
    forcutie 2010/02/04
    jQuery
  • ウィンドウサイズを変えるとコンテンツが再配置される可変グリッドレイアウトに関する情報まとめ

    ウィンドウサイズを変えると コンテンツ(記事等)が再配置される 可変グリッドレイアウトに関する サンプルサイトやWPテーマ、 ライブラリなどの情報のまとめです。 詳しい方には参考にならないっぽいです。 いろいろ意見は分かれそうですが、知っておいて損は無いかなぁと思いますのでメモ。 可変グリッドレイアウトサイト可変グリッドレイアウトを使用したサイトの例。 D&DEPARTMENT PROJECT ECサイト。綺麗にまとまってます。MT使用。 D&DEPARTMENT PROJECT daily vitamins 暇つぶしが出来るサイト?どういう趣旨か分かりませんが、可変グリッド。WPです。 daily vitamins 小林聡美.jp 小林聡美さんのサイト。凄く見やすいです。MT使用。 小林聡美.jp Marunouchi.com 丸の内の情報サイト。ハイクオリティです。写真をダイナミックに

    ウィンドウサイズを変えるとコンテンツが再配置される可変グリッドレイアウトに関する情報まとめ
  • jQueryでLightviewみたいなFacebox.js | チバのブログ

    prototype.jsベースで動作するLightviewですが、jQueryベースで同じように使えるものがあればなーってことで探していました。 ただ、探し方が足りないのかjQueryベースだとThickboxしか選択肢がありません・・・そんなときに現れたFacebox。 できることといってもほとんどThickboxと変わらないと思いますが、一応テストしてみました。 サンプルページ ダウロード~読込み ダウンロード Facebox 1.2の「Download Facebox v1.2」というところからFaceboxをダウンロードします。解凍すると全てのファイルが1つのディレクトリに入っています。 jQueryの読込み Google AJAX Libraries APIとServing YUI Filesを参考にjQueryと先ほどダウンロードしたFaceboxを読み込みます。ここで、ダウ

    forcutie
    forcutie 2009/08/24
    jQueryでLightview
  • lightbox

    prettyPhoto prettyPhoto is a jQuery lightbox clone. Not only does it support images, it also support for videos, flash, YouTube, iframes and ajax. It’s a full blown media lightbox. It is very easy to setup, yet very flexible if you want to customize it a bit. Plus the script is compatible in every major browser, even IE6. It also comes with useful APIs so prettyPhoto can be launched from nearly an

    forcutie
    forcutie 2009/08/10
    jQuery版Lightbox
  • jQuery版のLightBox「ThickBox」

    jQuery版のLightBox「ThickBox」 ThickBoxはLightBoxのjQuery版とも言えるJavaScriptライブラリで、画像をクリックするこのにより拡大画像を表示させることが可能です。 LightBoxがprototype.jsをベースに開発されたjsライブラリであるのに対して、ThickBoxはjQueryをベースに開発されています。 設置方法 配布ページよりjquery.jsとloadingAnimation.gif、thickbox.css、thickbox.jsというファイルをダウンロードし、ThickBoxを利用したいhtmlのhead要素などでそれらのファイルを読み込みます。 <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript"

    jQuery版のLightBox「ThickBox」
    forcutie
    forcutie 2009/08/08
    jQuery