jQueryで動的に作った文字列の幅を取得してみる | SRIA BLOG – 宮城県仙台市のWEBシステム開発・スマホアプリ開発
こんにちは！先日健康診断で脂肪肝と診断された橋浦です！ 先日Web案件で、文字列の幅を取得してwidthに設定したい場面がありました。 しかし、その文字列はjQueryで動的に生成していたため単純なwidth();などでは取得できず…。 結局2通り方法を試して、2つ目の方法でやっと上手くいったのでした。 今回は、せっかくなのでその方法を紹介してみたいと思います。 ① 文字数を数えて、数から判断しちゃう プログラミングに関してチンパンジー並の経験と知識しかない僕が浅知恵を絞って最初に思いついた方法です。 幅は取れないけど、consoleで調べたら文字列の内容は取得できている模様。 なら、文字数を取得して、その数を幅にしちゃえばいいじゃないッ！！！！！ ということで書いたソースがこちら。 DEMO
jQueryでparseInt()を使ってCSSプロパティの値を取得する｜BLACKFLAG
以前ここで「jQueryでCSSプロパティの値を取得する方法」と題して jQueryでCSSプロパティの値を取得する方法を紹介しましたが、 「parseInt()」を使って同様にCSSプロパティ値を取得する方法も 結構必要になったりすることがあるので、メモ書きとして紹介してみます。 前回のサンプルと同じ内容でのサンプルで動作させてみると。。。 ＜div id=”box”＞とID名が付けられたボックス要素に CSSで幅「width」と高さ「height」を指定。 変数「boxWidth」「boxHeight」にそれぞれ値を入れた後、 アラートで値を表示するサンプルの場合。 ◆HTML <div id="box"></div><!--/#box--> ◆CSS #box { width: 300px; height: 100px; } ◆SCRIPT <script type="text/ja
[JavaScript]textareaを1行づつ処理する
splitByLine = function() { var text = document.getElementById('srcTextArea').value.replace(/\r\n|\r/g, "\n"); var lines = text.split( '\n' ); var outArray = new Array(); for ( var i = 0; i < lines.length; i++ ) { // 空行は無視する if ( lines[i] == '' ) { continue; } outArray.push( lines[i] ); } return outArray; } textarea内の改行文字は,クライアント側のOSによってCR,LF,CR+LFの場合があります。 この為、1行目で正規化(全て\nに統一)させています。その後、正規化後の文字列に対
![[JavaScript]textareaを1行づつ処理する](https://cdn-ak-scissors.b.st-hatena.com/image/square/8d71ff5111e05619a10d29bb40d7aebaa75c8fbc/height=288;version=1;width=512/https%3A%2F%2Fs0.wp.com%2Fi%2Fblank.jpg)
エフェクト操作：基本｜jQuery APIリファレンス｜Ajax｜PHP & JavaScript Room
マッチした要素をアニメーションしながら表示します。 オプションの第2引数callbackを指定した場合は、要素のアニメーション完了時に指定したコールバック関数を実行します。 マッチした各要素の高さ・幅・透明度は、指定した速度にしたがって動的に変更されます。 jQuery v1.3からは、paddingとmarginがより滑らかにアニメーションされるようになりました。 第1引数speedには、要素を表示時のアニメーション速度を指定します。 数値（ミリ秒）あるいは文字列を指定可能です。 数値の場合、例えば3秒なら「3000」を指定します。 文字列の場合、あらかじめ定義されている速度（「slow」（ゆっくり）、「normal」(通常）、「fast」（速く））のいずれかを指定します。 オプションの第2引数callbackには、アニメーションが完了した時に実行する関数を指定します。 関数が実行される
jQuery の animate の縦方向の出現や隠す動作
jQuery の animate の縦方向の出現や隠す動作は、height に、show、hide、toggle などを指定することで可能。 指定方法 animate( properties, [duration], [easing], [complete] ) メソッド、もしくは、animate( properties, options ) メソッドの1つ目の引数である properties 内の height: *** に指定する。 toggle toggle を指定。 赤いブロック部分を、クリックすると、グレーのブロック部分が、上方向へ動きながら消える。もう一度、赤いブロック部分を、クリックすると、グレーのブロック部分が、下方向へ動きながら出現。速度( duration )は、slow を指定してある。
iPhoneやiPadでドラッグやリサイズ可能なコンテンツを容易に実装出来る・jQuery.ui.touch-punch.js - かちびと.net
iPhoneやiPadのタッチイベントに 対応させるjQueryプラグインです。 軽量なんですが、jQueryUI併用な ので一応軽量とは謳わないように しておきます。導入も結構簡単 なので覚えておいて損は無いかも。 iPhoneやiPadでドラッグやリサイズを可能にするライブラリです。もちろんiPhoneだけでなく、PC側でも動かせます。 ただ、要素をドラッグしたりリサイズしたり、だけではなくドラッグ可能なコンテンツをネストしたりドラッグコンテンツ内にスライダー入れたりとかも出来る。 試しにjQueryMobileと併用しました。サンプルどうぞ。QRコードも用意しときました。 sample 使い方 <script src="http://code.jquery.com/jquery-1.7.0.min.js"></script> <script src="http://code.jque
jQueryを使った一定以上スクロールすると上に固定される横メニュー
最近、上部に固定された横メニューをよく見かけます。最初から一番上にあるものだと最初から「position:fixed」で問題ないと思いますが、最初は一番上にはなく、メニューがページの最上部までスクロールされた時点で固定されるものだとちょっと工夫が必要です。 今回はそんな横メニューをできるだけ親切に解説してみます。 今回のメインはjQueryで固定するところなのですが、一応今回のサンプルで使用したHTMLとCSSも解説します。 HTML よくあるタイプの普通のリストメニューです。 <div id="menu-wrap"> <ul id="menu"> <li><a href="#">メニュー</a></li> <li><a href="#">メニュー</a></li> <li><a href="#">メニュー</a></li> <li><a href="#">メニュー</a></li> <l
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Very-Very Simple LetteringJS - JSFiddle - Code Playground