一定期間更新がないため広告を表示しています
![maximage2をIEで使用すると一部の画像が正常に読み込んでくれないバグ | 零のメモ張](https://cdn-ak-scissors.b.st-hatena.com/image/square/2302e44c95c7e474fefb218540004f95dc47a4bb/height=288;version=1;width=512/https%3A%2F%2Fimaging.jugem.jp%2Ftemplate%2Fimg%2Fjugem_og-image.png)
data-property is an attribute of the TAG where you can pass the options of the player as an Object. Any of the below parameters can also be passed as option within the initialize function. The one defined as attribute of the TAG wins. mute: true (boolean) mute the audio; showControls: true (boolean) show or hide the player controls; useOnMobile: true (boolean) Define if the player should render on
var video = document.getElementById('video'); // もしくはjQueryを使いたい場合は var video = $('#video').get(0); // この変数に対して操作を行います。 video.play()
ウインドウの大きさが変更されるたびに発生する resize イベントを利用して。ウインドウサイズが変更されても要素が画面の中央に再配置される方法を紹介します。 書式は次のようになります。 [javascript] $(window).resize(function(){ // }); [/javascript] このイベントを使って、ウィンドウがリサイズされるたびにウインドウの幅と高さを取得するサンプルです。 [javascript] $(window).resize(function(){ var wh = $(window).height(); var ww = $(window).width(); $(“#result”).text( “width : ” + ww + ” / height : ” + wh ); }); [/javascript] ここまでできればもう簡単です。ウ
history.pushStateでのページ遷移をやりやすくするためにjQueryのプラグインとしてjquery.smarthistory.jsというのを書いてみました。 jquery.smarthistory.js history.pushStateをサポートしてるブラウザではhistory.pushStateを使って、サポートしてないブラウザでは何もしません(普通に遷移する)。今だとchrome、safari、iOS、Firefox4で動くと思います。 こんな感じで使います。 $('a').smarthistory({ defaultData: $('html').html(), target: function() { return $(this).attr('href') }, before: function() { // ajax前の処理 }, change: function
外部サイトへのリンクは、新しいウィンドウ(target=”_blank”)で開くほうが離脱率等を考えると良いですね。 それ以外にコメントに入力された外部リンクからユーザーが戻ってこなくなる場合もあるでしょう。 target=”_blan”のタグは非推奨とかそうでもないとか議論が分かれますが、多少のマイナスだったとしても、外部リンクは別ウィンドウで開くメリットは色々あると思います。 ちなみにタイトルで一行の記述で~~とありますが、実際は一行でないのでご了承ください。 やりかたは下記の記述をhead内に入れるだけです。jqueryを使用しますので、jqueryを使用していないサイトは、別途jqueryを呼び出すタグを入れてください。 これで、記事中やコメント内の外部リンクが全て新しいウィンドウで開かれるようになります。 <script type="text/javascript"> $(
ギャリーサイトで見つけた名古屋のデザイン会社さまのWebサイト。 鞍知 on 鞍知[クラッチ オン クラッチ] デザインもクリーンで良い感じなのですが、特に良いと思ったのがページ変遷のときのアニメーション。リンクをクリックするとページがフェードアウトし、ローディング画像が表示、そしてリンク先のページがフェードインしてきます。これがとても気持ち良い。 ということで、このブログにも軽く実装してみたので、その方法をご紹介。 jQueryのanimate関数を使って実装します(てことでjQuery本体も読み込んでくださいね)。下記のコードをhead内にコピペでいけるかと思います。 // まずbodyを非表示に jQuery('head').append( '<style type="text/css">body{display:none;}</style>'); jQuery( function(
PowerTip is a jQuery tooltip plugin with a smooth user experience that features a very flexible design which is easy to customize, gives you a variety of different ways to create tooltips, supports adding complex data to tooltips, and has a robust API for developers seeking greater integration with their web applications. Download v1.3.2 Zip file with examples, CSS, and script. For older versions,
Awkward Showcase is a plugin for the JavaScript Framework jQuery. We call it a Content Slider. But it can do more then just slide the content. For example you can add tooltips, enable thumbnails, activate dynamic height and lots more. Since version 1.0 it’s integrated with our Viewline Plugin enabling new innovative ways for displaying content on your website. Download on BitBucketView Demo
最近のサイトではメインビジュアルにもよく画像の切り替えが利用されています。 これをjQueryプラグインbox-sliderでぐりんぐりん切り替えてしまいましょう。 頭を悩ませるIE6も3Dエフェクト以外は対応しています。 sponsors 使用方法 box-sliderからファイル一式をダウンロード。 切り替えたい画像を下記の通り記述します。 <div class="slider-viewport"> <div id="id名"> <figure> <img src="画像パス1"> </figure> <figure> <img src="画像パス2"> </figure> <figure> <img src="画像パス3"> </figure> </div> </div> あとはJavaScriptを</body>上に記述すれば完成です。 <script type="text/jav
目次 jQuery入門 jQueryのインストール・簡単な使い方 クイズゲームの作り方 秘密の暗号を作ってみよう(たぬき暗号) アクションゲームを作ってみよう(ぬりかべ) 画像を使ったジグソーパズルを作ってみよう もぐらたたきっぽいゲーム ドラッグ可能なポップアップウインドウを作ろう jQuery UI Sortableで1ラインオセロゲーム ブラウザ全体をブロックしてみる Geolocation APIを使って都道府県のセレクトボックスを現在地に近い順にソートする 発生したイベントの状態を保持・保存する6つのパターン Ajaxを利用したシンプルなイメージギャラリーを作ってみる テーブルにページ送り(ページング)を実装してみる jQuery UI Draggableを使って付箋(sticky)を作ってみる カラムでソートできるテーブルを自作してみる テーブルを使ったシンプルなドット絵エディ
Easing/jQuery easingとは、エフェクトの動きを加速/減速させるための関数です。 例えばフェードアウトの動きを考えたとき、通常は透明度の変化量は経過時間に対して線形です。全体で1秒かかって消える処理であれば、0.5秒経過時の透明度は0.5になります。 しかし、ここでeaseInQuadの動きを適用すると、変化量は線形ではなく2次関数の曲線になります。(下記サンプル参照) そのため、最初はゆっくりと薄くなっていき、後半に急激に消えていくような効果が得られます。 特別なことをしなくても使うことの出来るeasingは"linear"と"swing"の2種類だけですが、プラグインなどを入れることで多くのeasingを利用することができます。 このeasingプラグインでは、version 1.3時点で32パターンが提供されています。 これ以外にもeasingは比較的容易に自作するこ
Webサイト上での限られたスペースにお知らせなどの 複数にわたる情報を表示させたい際に便利なニュースティッカー。 jQueryプラグインでもいろいろな形状のニュースティッカー用プラグインがありますが シンプル(ベーシック)な動きのニュースティッカーを 極力シンプルなスクリプト構成で実装することが出来ないか試してみたので紹介してみます。 ニュースティッカーの切り替え動作については ——————————————————– ・フェード切り替え ・画面下からスライドイン ・画面右からスライドイン ——————————————————– の3パターン構成にしてみます。 まずフェード切り替えパターンのサンプルから。 HTML構成は以下の様になります。 ◆HTML <div class="ticker" rel="fade"> <ul> <li><a href="#1">【News1】このテキストはNe
javascriptのアラート画面をかっこよく見せるためのプラグインっていろいろありますよね。 今回はそのうちの一つである、jQuery uLightBox Pluginってやつを使って、良い感じにアラート画面を見せれるようにしたいと思います。 何で第二弾なのかっていうと、以前、まあデザインを一新する前ってことですけど、このあかつきのお宿では別のプラグインを使ってアラート画面を作っていたからですね。そのときのプラグインを紹介した記事はこれです。 乗り換えた理由は特にないです。一新するんだからアラート画面も変えてみようかっていう、まあその程度の話っす。 まずはダウンロード イワズモガナ。 上記のリンク先に行ってまずはファイルをダウンロードしてきましょう。さあ落とそう。やれ落とそう。一流の落語家が話を終わらせるときのようにスマートに落とそう。 落として来たら、その中のjquery.ulight
2011/06/20 jQueryを利用したバリデーションチェック1 15:25:00 Motoi Nishiu@ふぇにば No comments メールで送信 BlogThis! Twitter で共有する Facebook で共有する jQueryを利用したバリデーションチェック1コンセプトフォーカスアウト時にリアルタイムにバリデーションチェック エラーがある時は送信しない サンプルはこちらから javascript Code$(document).ready(function(){ /* ◯各々にフォーカスアウトしたときに実行 */ $(":text,textarea,:password").blur(function(){ /* ◯NULLチェック */ if($(this).attr('validate').match("required")){ if($(this).val(
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く