Lesson 09 ビジュアルがスライドするナビゲーション - Webデザイン表現&技法の新・スタンダード・インタラクション編 新規会員登録 ログイン管理 Twitter facebook はてなブックマーク RSS 2024.8.9 FRI
おお、これは格好いい! 写真のサムネイル表示というのはやり方によって大きくインパクトが変わります。単純に縮めて表示すると何の写真か分かりづらくなります。さらに横長、縦長の写真では正方形に切り出すのは簡単ではありません。 そこで使ってみたいのがsmartcrop.jsです。写真の中から一部を切り出すライブラリで、よりインパクトの強い部分を抽出します。 smartcrop.jsの使い方 デモです。よりインパクトの大きい場所を抽出しているのが分かるかと思います。 切り出す形を変更することもできます。その場合でも写真全体を対象にする訳ではありません。 さらにサンプル。女性を中心に抽出しています。 これは完全に左側から。 ヨットを中心に。サムネイルでも格好いいですね。 街並。より印象的なビルを中心にしています。 こちらは川と太陽が中心です。 人の場合は顔を中心にするようです。 多数の人がいる場合。よ
CSSファイルをクライアントサイドだけで動的なURLつけて非同期読み込みしたい場合、単純に以下のようなコードを書くと同期読み込みになって読み込み完了まで他のファイルの読み込みがブロックされる。 (function () { var href = 'style sheet url'; var link = document.createElement('link'); link.rel = 'stylesheet'; link.href = href; var head = document.getElementsByTagName('head')[0]; head.appendChild(link); })(); これに関しては以下のように別のiframeを作成して読みこめば非同期で読み込めるので、他のファイルの読み込みをブロックしない。 (iOS, Androidで動作を確認) (fun
最近シリコンウエハーもらって嬉しかったago(@kyo_ago)です。 このエントリはGREE Advent Calendar 2013 11日目の記事です。 今回はクライアントサイドJavaScriptにおけるライセンス管理の問題を取り上げたいと思います。 ライセンス管理の問題点 「使用しているライブラリのライセンス管理をどうするか」はクライアントサイドJavaScriptにかぎらず発生する問題ですが、クライアントサイドJavaScriptには以下の様な特徴があるため問題が複雑になります。 コードが結合、圧縮される場合がある クライアントサイドJavaScriptでは読み込みの速度を上げるため、使用しているライブラリの結合、圧縮を行うことがあります。しかし、この時誤ってライセンス文が捨てられてしまうことがあります。 ソースが外部に公開される クライアントサイドJavaScriptではソー
Google タグマネージャ (Google Tag Manager) をこの Blog 内の各ページで読み込んでいる JavaScript コードの管理に数ヶ月前から使い始めていますが、結構使いやすくて便利なのと、ページの表示速度的にもいい結果が出たので紹介してみます。 Google タグマネージャ公式サイト 機能 : Google タグマネージャ Google タグマネージャとは? Google タグマネージャは無料で簡単に使用できるタグ管理システムです。ウェブ上の使いやすい管理画面から自分でタグを管理してモバイル アプリを設定できるため、面倒なコード書き換えは不要で、IT 部門に依頼する必要もありません。 機能 : Google タグマネージャ から引用 と公式には書いてありますが、簡単にいえば Web ページ内で読み込む各種の JavaScript コード、例えば Google A
を以下の記事、そのまま試してみた。 HubLog: Setting the height of a cross-domain iframe using postMessage parent.html <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <script type="text/javascript"> window.addEventListener("message", receiveSize, false); function receiveSize(e) { if (e.origin === "http://banyan.github.com") // for security: set this to the dom
meca.jsとは meca.jsはマークアップエンジニアのコーディングを補助するためのjavascriptです。画像のロールオーバーやIE6の透過png対応などを実装しており、それぞれの機能を簡単にon/offできるので、使わない機能は無効にしてたりできます。その他にも、ターゲットになる要素のセレクタを設定でたりするのである程度柔軟に対応できます。(→元エントリー) 使い方 jQueryとmeca.jsを読み込みます。meca.jsの一番上の方に設定を書いてあるところがありますので、そこを自分の好きな設定に書き換えて下さい。 <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript" src="meca.js"></script> ページ毎に設定を変更する meca.js本
ブロックレベル要素の高さを揃えるheightLine.js[to-R]を見て不満に思ったのは、高さを揃える要素を取得するために固定のclass名を使っていることでした。これだと既存のHTML文書に適用するためには、script要素を加えるだけでなく、それ用のclass名も書き加えなければなりません。どうせJavaScriptを使うのであれば、既存のHTMLの構造を生かしつつスクリプト側で目的の要素を取得できたほうがいいのではと思いました。 というわけでまたも自分なりに書き換えてみるシリーズなのですが、今回は要素取得の柔軟さに着目してjQueryを使ってみることにしました。 できたものは以下です。 jquery.flatheights.js 動作サンプル jQueryの$関数ではCSSセレクタの書式で要素を取得できるので、例えば「"box1"というclass名を持つ要素」を集めるのであれば
< 前の素材 本スクリプトは2013年02月11日を持ちまして公開を終了しました。このスクリプトの上位版にあたるRandVisual.jsを公開しましたので、そちらをご利用ください。 アップルコンピュータのフロントページはランダムでメインの画像とサブ画像が入れ替わりますよね。それってとっても素敵!見せたい画像が複数あるとき、ローテーション組めるしね! ランダムでバナー画像を切り替えるの概要アップルコンピュータのフロントページはアクセス毎にメイン画像とサブ画像がランダムで切り替わってるって知ってますか?いつ来ても代わり映えしないサイトって再訪率が低いそうです。それはまぁあたりまえとして、見せたい画像がたくさんあったりすると、どれをメインで見せるか困りますよね。 そんな貴方はこのスクリプトを使うといい。アクセス毎にランダムで画像を切り替えて表示させます。しかもサブ画像も表示させることができる!
li要素などを改行すると、要素と要素の間に半角スペース分の余白が現れる件について調べてみた。 | Blog hamashun.com関連の、にツッコミしてみる。 innerHTMLの書き換えはaddEventListenerしたイベントが消えたりするのと、 Manabuさんの実装だとli要素の中の改行なども除去してしまうので意図しない動作(例えばliの中にpreがあったとき)をしてしまう可能性がある。 というわけで改案。 (function(){ var ols = document.getElementsByTagName('ol'); var TEXT_NODE = document.TEXT_NODE || document.createTextNode("").nodeType; for (var i =0,l=ols.length;i<l;i++) { var ol = ols[
<div class="toolbar"> <h1 id="pageTitle"></h1> <a id="backButton" class="button" href="#"></a> </div> <ul id="home" title="ページ一覧" selected="true"> <li><a href="#page1">ページ1</a></li> <li><a href="#page2">ページ2</a></li> <li><a href="#page3">ページ3</a></li> </ul> <ul id="page1" title="ページ1"> <li class="group">あ</li> <li><a href="#page1-1">あいうえお</a></li> <li><a href="#page1-2">あああああ</a></li> <li class="g
Prototip allows you to easily create both simple and complex tooltips using the Prototype javascript framework. Style: Easy to customize. Position: Complete control over tooltip positions. Round: Configurable rounded corners, no PNG images required. Speech bubble effect! Works on all modern browsers. = Note: This plugin is no longer actively developed, please consider moving to my latest jQuery ba
Posted on June 12, 2008 by Brett Bittke This week I’ve been working on a project that required data to be shown visually. I needed a Chart Script that was attractive yet gets the data across. The Charts scripts below are built using JavaScript, Flash, Silverlight, and Java. Flot – Flot is a pure Javascript plotting library for jQuery. The focus is on easy usage , attractive plots and interactive f
bookreader.jsは、長文を縦スクロールではなく、横スクロールで表示し読みやすくするJavaScriptライブラリです。 →プロジェクトのホーム (Google Code) - New!! →ダウンロード(ver 0.4.6) - 2009/04/18公開 ※ダウンロードの詳細については、こちらのページをご覧下さい。 まずは、このページで体験してみて下さい。キーボードの[→]/[←]キーが、「進む」あるいは「戻る」に対応します。画面上に表示される、半透明の▶/◀ボタンをクリックしてもOKです。使い方の詳細は「ヘルプ」を参照ください。 次期バージョンの開発状況 幸いにしてさまざまな方からフィードバックをいただきました。ありがとうございます。それを元に機能の絞り込みとWEBサイトへの「組込み方」について検討を行っています。まだ、実装の方針が定まった、という段階ですが次期0.8.x系のサ
GoogleからGoogle AJAX APIを拡張する新しいサービス「The AJAX Libraries API」が公開された。The AJAX Libraries APIはGoogleのサイトで人気のある有益なJavaScriptライブラリを提供しようというもの。これまでYUIであればYahoo!、DojoであればAOLなどが同類のサービスを提供していたが、特定のJavaScriptライブラリに限定することなく有益であれば配布に追加するというポリシーをもっている点が新しい。 JavaScriptライブラリを活用するタイプのWebアプリケーションは数多くある。結果として、何度も似たようなJavaScriptライブラリをダウンロードしていることになり、このままいけば今後ライブラリ自体のサイズの巨大化や多くのサービスの登場でライブラリダウンロード総量は増加することになる。 The AJAX
2008年05月20日14:15 カテゴリLightweight Languages javascript - 勝手に添削 - textareaの高さを自動調節 これはなかなかいいですね。 textareaのサイズを入力にあわせて調整するJavaScript (イラストdeブログ開発記) イラストdeブログの掲示板の使い勝手を高めるため、textareaサイズをJavaScriptで改行入力毎に大きくするコードを書いてみました Firefox 2, Safari 3, Opera 9で動作確認してあります。 イチ に 三 function resize_textarea(ev){ //if (ev.keyCode != 13) return; var textarea = ev.target || ev.srcElement; var value = textarea.value; var
(function(){ var addEvent= function(element,eventName,handler){ if(element.addEventListener){ element.addEventListener(eventName,handler,true); }else{ element.attachEvent("on"+eventName,handler); } } addEvent( window, "load", function(){ var getLength= function(str){ return str.length+str.replace(/[\x0-\xff]/g,"").length; } var sort= (function(getLength){ var _getLength=getLength; return function(
Switch On The Codeのエントリーから、スクロールされる度に表示されていないコンテンツを表示するスクリプトを紹介します。 Javascript Tutorial - Continuous Pagination デモ Continuous PaginationはAJAXなどを使用して外部コンテンツを読み込むものではなく、スクロール領域の下部に達すると、新規コンテンツをスクリプトで生成して表示するものです。
本気でやるならonclick属性は避けてライブラリを活用すべき - 帰ってきたHolyGrailとHoryGrailの区別がつかない日記 に関して この先、 HTML に onclick と書いても石を投げられないように書いておく>< 僕も onclick 属性がダメだと思っていた時代もありました。でも、今は時々使うなあ。 (あ、でも、 HTML と JS で分業している場合は、使わないほうがいいよね^^;そこだけは言っておく。) JavaScript 入門の記事を書くときに onclick 属性がダメだとしたら、いろいろ本質的でないことを説明しなきゃいけない。 現状では onclick 属性が、もっとも簡単に HTML にイベントをマッピングできる方法だから、そんなに目くじらたてなくてもいいんじゃないかなあ? たとえば 以下は、クリック時に href に GET を送るための oncli
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く