タグ

JavaScriptに関するtacksonのブックマーク (31)

  • マーケティングコミュニケーション | 株式会社オロ

    オロは、商品・サービスと消費者を繋ぐ、 さまざまなマーケティングコミュニケーションを 手がける会社です。

    マーケティングコミュニケーション | 株式会社オロ
  • Twitter OAuth認証なしで取得できるデータのめも。

    Twitterからデータ引っ張ってくる時に、OAuth認証通せばだいたい何でもできるんですが、 OAuth認証ナシで、screen_name(@rettuceの@以降の部分ね) だけで どこまで引張って来れるのか自分でもこんがらがってきたので、 以下、ちょっと自分用めも。 Demo – Twitter NO OAuth Sample. (2012.1.7 追記:下にも書いたけどこれだとAPI回数制限引っかかるからjs版参照のこと!) 前提条件 今回は screen_name だけ入力してもらうことにする。 idが使えればそっちの方がアカウントに対して変更がなくてほんとはいんだけど ユーザは自分のidなんてそもそも知らないしね。。orz 取得可能API .formatは例のごとくxmlやらjsonやら都合のいい方でどぞ。 ■自分のアイコン http://api.twitter.com/1/u

    Twitter OAuth認証なしで取得できるデータのめも。
  • ページ内リンクをスマートにするsmoothScroll.js[to-R]

    ページ内リンクをスマートにするsmoothScroll.js ページ内リンクをスムーズに行うjsライブラリ、smoothScroll.jsを作成したので公開します。 どういったものかはサンプルで確認してください。 <a href="#header">ページの先頭に戻る</a> などのページ内リンクをスムーズな移動に変更します。 これにより、エンドユーザーがページが遷移したという錯覚におちいることはありません。 設置方法は簡単です。 smoothScroll.jsをダウンロードして、設置したいページで取りこみます。 <script type="text/javascript" src="./smoothScroll.js"></script> 特定のリンクはスムーズさせない smoothScroll.jsは#(ハッシュ)付きのリンクを全てスムーズスクリプトに変換します。他のライブラリなどで#

    ページ内リンクをスマートにするsmoothScroll.js[to-R]
  • jQueryで背景画像を全画面表示する

    Posted: 2010.11.30 / Category: javascript / Tag: jQuery 最近ではjavascriptでも表現できることが飛躍的に増え、Flashサイトのようなリッチなサイトも多くなってきましたね。 ということでFlashサイトと聞いて一番最初に思い浮かべそうな背景画像の全画面表示というのをjQueryで作成してみたいと思います。 html+cssの準備 背景画像を全面表示するっていうタイトルですが、cssのbackgroundにはサイズを指定するプロパティがないので、気持ち悪いけど画像は普通に配置します。 html <img src="101121_2.jpg" width="100%" height="100%" id="bg" /> <div id="contents"> <h1><a href="#">jQueryで背景画像を全画面表示する。<

    jQueryで背景画像を全画面表示する
  • 写真スライド jCarousel - Riding carousels with jQuery

    jCarousel is a jQuery plugin for controlling a list of items in horizontal or vertical order. It provides a full-featured and flexible toolset for navigating any HTML based content in a carousel-like fashion.

  • Blogger

    Google のウェブログ公開ツールを使って、テキスト、写真、動画を共有できます。

  • ウィンドウサイズによってCSSファイルを切り替えることが出来るJavaScript「Adapt.js」|BLACKFLAG

    最近ではWebサイトを構築する際、PC画面での表示のみならず、スマートフォンやタブレットPCなど 複数媒体でのサイト閲覧を意識した設計およびレイアウトを考慮しなくてはならなくなってきています。 閲覧するブラウザやOSなどで振り分けを行う方法もいろいろありますが、 サイトを閲覧した時のウィンドウサイズによって読み込むCSSを切り替えることが 出来るJavaScriptライブラリ「Adapt.js」が便利そうだったので紹介。 Adapt.js – Adaptive CSS ≫Adapt.js – Adaptive CSS 上記のスクリプト紹介ページ自体がデモ画面にもなっており、 表示後、ウィンドウサイズを変化させることでレイアウトが最適化されるようになっています。 「Adapt.js」と下記スクリプトで実装可能となっています。 ◆SCRIPT // Edit to suit your need

    ウィンドウサイズによってCSSファイルを切り替えることが出来るJavaScript「Adapt.js」|BLACKFLAG
  • ウィンドウサイズに合わせてCSSを変更できるdynamiclayout.js

    ウィンドウサイズに合わせてCSSを変更できるdynamiclayout.js Dynamiclayout.jsはウィンドウサイズに合わせて読み込むCSSファイルを変更できるJavaScriptライブラリになります。 dを使用することにより、リキッドイアウトの幅を広げることが可能です。 設置方法 ダウンロードしたdynamiclayout.jsをhead要素などで読み込みます。 <script src="./dynamiclayout.js" type="text/javascript"></script> ウィンドウ幅に合わせたCSSファイルを用意します。 それぞれのCSSファイルを読み込む際にはtitle属性に ウィンドウ幅が750pxまでの場合の『thin』 ウィンドウ幅が950pxまでの場合の『wide』 ウィンドウ幅が950pxより大きい場合の『wider』 を付けて読み込みます。

    ウィンドウサイズに合わせてCSSを変更できるdynamiclayout.js
  • JavaScript Library Archive

    JavaScript Library Archiveについて JavaScriptライブラリをまとめたサイトです。用途別に探すことができ、配布元、使用方法、ライセンスなどについて解説をしております。 新着JavaScriptライブラリ プログラムのコードに色を付ける「google-code-prettify」 角丸を表現する「jQuery Corners 0.3」 jQueryベースのカラーピッカー 「Farbtastic」 水平方向のアコーディオンメニュー「horizontal accordion」 セレクトボックスをカスタマイズする「Script.aculo.us Select Box」 IE6でhover,active,focus擬似要素を使う為の「csshover」 画像に光沢を与えるjsライブラリ『Glossy.js』 IE6以下をIE7と同じようにするライブラリ『IE7.js』

  • http://onlineconsultant.jp/pukiwiki/?%24(document).ready%E3%81%A8window.onload

    http://onlineconsultant.jp/pukiwiki/?%24(document).ready%E3%81%A8window.onload
  • 糖心vlog二维码 - 曼哈顿夜曲

    完善资源优势和技术优势糖心vlog专业的对夹式止回阀厂家,实力雄厚,设备精良,工艺精湛,检测经验完备 糖心vlog是一家专业制造对夹式止回阀、对夹式蝶形止回阀、超薄型止回阀、对夹式软密封止回阀、不锈钢底阀、对夹蝶阀、球阀、卫生级管件的厂家,地处中国阀门城--温州龙湾区--沙城街道,糖心vlog引进国外整套的设备和工艺,是一家集产品开发,生产销售为一体的专业制造商。糖心vlog实力雄厚,设备精良,工艺精湛,检测经验完备,聚集一批高素质的科技管理人才,糖心vlog拥有完整资源优势和技术优势。糖心vlog生产蝶阀系列:不锈钢对夹蝶阀、卫生级对夹式蝶阀、螺纹蝶阀(ISO,SMS,DIN)标准;糖心vlog生产球阀系列:卫生级球阀、片式球阀:一片式球阀、二片式球阀、三片式球阀··· 查看详情

  • 簡単に実装できるjQueryのスクリプト5選 | Web Mugen

    イロイロとプラグインやらナンやら巷に溢れていますが、「そんな高機能はいらない」「もっとシンプルなのがいい」って思ってるあなたへ。今回はシンプルで簡単に実装でき、よく使いそうなjQueryのスクリプトをまとめて紹介します。まあ独断と偏見によりますが。それではどうぞ。 準備 今回のスクリプトは全てjQueryを必要としますので、まずはそちらの導入から始めます。 必要なファイル jquery.js 設定 HTMLヘッダー内でjquery.jsを読み込む。 準備が出来ましたら、どうぞスクリプト達と戯れて下さい。 1.画像のロールオーバー 野に咲く花のように巷に溢れているスクリプトだと思います。単純かつ効果的。無くても大丈夫だけど無いとなんだか寂しい。そんな時こそ彼の健気なココロを知るのです。そんな素敵な存在です。 Demo HTML ロールオーバーを設定するimg要素にclass="rollove

  • 縦書き文庫の開発日誌 涅槃2の使い方

    組版エンジン涅槃のバージョン2をリリースしました。  バージョン2系列は1系列とは上位互換はないのですが、考え方の基は殆ど一緒なので1系列を使っている人は大体わかると思います。  手っ取り早いのは、添付のサンプルを一つずつ確認することだと思うのですが、一応ここでもざっくりとした使い方をまとめておきます。 組版エンジンの読み込み <head>~</head>の中で最新の涅槃2を読み込ませてください。 グーグルから直接引っ張ってきてしまうのが楽です。 <script charset="utf-8" type="text/javascript" src="http://nehan.googlecode.com/hg/nehan2-min.js"></script> 次に実際の使用方法について色々と。 レイアウトマッピング  一番使われている機能がこれだと思うので、最初に説明します(動作サンプル

  • HTMLへの自動カーニングスクリプト

    「あいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほまみむめもやゆよらりるれろわをん」(補正前) 「あいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほまみむめもやゆよらりるれろわをん」(補正後) ⦅ち⦆「よ」『こ』〈れ〉《い》〔と〕〘は〙【め】〖い〗〝じ〟(せ)[い]{か}・、。(補正前) ⦅ち⦆「よ」『こ』〈れ〉《い》〔と〕〘は〙【め】〖い〗〝じ〟(せ)[い]{か}・、。(補正後) ヤン・チヒョルト(Jan Tschichold, 1902年4月2日 – 1974年8月11日)は、ドイツのタイポグラファー・カリグラファーである。看板屋の長男としてライプツィヒに生まれた。新しいタイポグラフィの創生に努めたが、ナチスの弾圧を避けてスイスへ移住した後は、伝統的なタイポグラフィを擁護する立場をとる。同国のロカルノで没した。なお、もとの姓名は《Johannes Tzschich

  • JavaScript講座 2007年版

    このページは、ある程度プログラムを作成したことがある人向けのJavaScript講座です。このため、1からプログラムを作成する、といった形式にはなっていません。ステップバイステップでやってみたいのであれば、以前メールマガジンで掲載されていたJavaScript講座を参照してください。 JavaScript講座ですが、ここで扱っているJavaScriptは一般的なブラウザ上で動作するものをメインとしています。ただし、アプリケーション上で実装されているものでも動作が通常とは異なるものに関しては触れるようにしています(JavaScriptはAdobeシステムズのアプリケーションやOS (WindowsMacOS X) でも実装されています。また、Widget(ウィジェット)でも使用されています)。 ミスや間違い、リンクエラーなどがありましたらopenspc@po.shiojiri.ne.jpま

  • そろそろきっちりJavaScript | コラム | エンタープライズ | マイコミジャーナル

    Copyright (C) Mainichi Communications Inc. All rights reserved. 掲載記事の無断転載を禁じます

  • canvas要素 + Javascriptで作る、動的コンテンツ

    HTML 5 + Javascriptで作る動的なコンテンツ 前回の授業では、HTML 5について、その成り立ちや特徴を解説した上で、新しい構造化のための要素について解説しました。また、あわせてCSS3によって格段に進歩した表現力について実際にサンプルページを作りながら解説しました。 今までは、Webページで動的に図や画像やアニメーションを描画するにはFlashが代表的な選択肢でした。しかし、ここ数年でその状況が大きく動きつつあります。Flashに代表されるような動的なコンテンツが、専用のプラグイン無しに、HTMLの要素とそれと連携するスクリプトだけで実現できるようになりつつあるのです。こうした技術は、今後のWebの動向を大きく変える可能性を秘めた技術として脚光を浴びています。 HTML 5で動的に画像やアニメーションを生成するためには、canvas要素という新規に導入された要素と、can

    canvas要素 + Javascriptで作る、動的コンテンツ
  • Reaching Greater Heights with jQuery: A Safari Height Bug Fix | Brunello Creative Blog

  • JavaScript で、画像本来のサイズ(幅, 高さ)を取得する方法 - latest log

    Opera で DOM Mutation Event を使用するコードを追記しました。 まとめを追加しました。 Opera パート2に取得できないケースが見つかったため、パート3 を追加しました。 rhino.jpg(幅:300px, 高さ:227px) を、 <img id="rhino" src="rhino.jpg" width="100" height="75" /> と、100 x 75 で表示している場合を例に、画像来のサイズを取得する方法をご紹介します。 Firefox, Safari, Google Chrome なら image.naturalWidth と image.naturalHeight を利用します。 image.naturalWidth と image.naturalHeight の初期値は 0 です。画像の読み込みが完了した時点で適切な値に更新されます。

  • JavaScript基礎文法最速マスター - gifnksmの雑多なメモ

    続々と増え続ける基礎文法最速マスターシリーズ(あまりにも増えてきたので他の言語記事へのリンクは別の記事に移しました)。 JavaScript 版は誰も書いていなかったようなので書いてみます。こういう解説記事的なものを書くのは初めてなので変なところがあったら指摘して頂けるとありがたいです。 JavaScriptの基礎概念についての解説はこちら:JavaScript概念最速マスター - TechTalkManiacs 1/31 23:58追記 コメント欄のos0xさんのご指摘を基に一部追記・修正を行いました。 2/2 2:52追記 switch文・正規表現・例外処理について追加しました。 2/2 6:44追記 コメントでfavrilさんにご指摘頂いた点(typo & コメント・サンプル追加)を修正・加筆しました。 2/2 7:15追記 トラックバックでLiosKさんにご指摘頂いた点(cal

    JavaScript基礎文法最速マスター - gifnksmの雑多なメモ