Today: Yesterday: Total: Online:
カテゴリー
その他
  • RSS1.0
  • RSS2.0
  • atom0.3
  • valid XHTML1.0
  • valid CSS2
  • Credit
RSSリーダーで購読する | この日記のはてなブックマーク数 | プロフィール
コメントが一番多い記事(233コメント):人の心理の裏をかくホームページ集客術:リピータになってもらうためには
ツイートが一番多い記事(94ツイート):ちょっと待て!twitterやfacebookに子供の写真を掲載する親達への警告
いいねが一番多い記事(574いいね):facebookスパムに要注意。なりすましの見分け方とアカウント乗っ取りの手口(2013年度版)

[ カテゴリー » Javascript » jQuery ]

カテゴリー » Javascript » jQuery October 30, 2012

iframe呼出し後に、親ページでa nameを飛ばす方法 ID:1351586997


●親ページ
iframeの下にa nameを指定

●子ページ
iframeでdocument.writeでhtml出力。


chromeは何もしなくても動く。
IEとFirefoxがNGになる。

onload完了判定→Mozilla系はいけるがIEはNG。

onreadystatechageイベントは読み込み状態を示すreadyStateが変化した時にすれば、
IEでも判定できるとのこと。
http://blog.goo.ne.jp/xmldtp/e/14eb745426bd8f3fde7b4f41245bfc2e
http://wiki.bit-hive.com/tomizoo/pg/JavaScript%20%A5%A4%A5%F3%A5%E9%A5%A4%A5%F3%A5%D5%A5%EC%A1%BC%A5%E0%28iframe%29%B4%D8%CF%A2

→判定はうまくいくが、
 iframeの高さを指定しない状態(可変)
 では、iframeの高さが後で確定するため、うまくいかず。

iframeの高さを自動調節してくれるJavaScriptライブラリ
http://www.facebook.com/genet.jp/posts/262653740477788
http://css-eblog.com/javascript/fit-height-iframe.html


iframeの非同期処理
http://www.insidenet.co.jp/index.php?option=com_content&view=article&id=119:iframe&catid=92:rev-ref&Itemid=159

Jqueryでiframe
http://d.hatena.ne.jp/cyokodog/20090616/iframe01

[jQuery]ページを読み込み終わってから処理を行う
http://msbizit.blog28.fc2.com/blog-entry-88.html

javascriptでjump
http://phpjavascriptroom.com/?t=js&p=location2

a nameの座標取得
http://www.sencha.com/forum/archive/index.php/t-151559.html?s=19af7d1d5cb70abb4af00ae968ef3e5c

div idの座標取得
http://www.24w.jp/study_contents.php?bid=ajax&iid=prototypejs&sid=element&cid=004


●結論

iframeの高さを自動調節してくれるJavaScriptライブラリ
http://css-eblog.com/javascript/fit-height-iframe.html

[jQuery]ページを読み込み終わってから処理を行う
http://msbizit.blog28.fc2.com/blog-entry-88.html
var frm = document.getElementById('frame01');
$(frm).load(function(){処理});

で、IE、Firefoxは動くので、chromeのみ除外すればいける。

— posted by midilin @ 05:49PM | Comment (1)

カテゴリー » Javascript » jQuery June 08, 2012

jQuery サンプルサイト ID:1339115649


jQuery TOOLS
http://jquerytools.org/
海外サイト。タブなどのデザインも豊富。

jQueryサンプル集
http://www.finefinefine.jp/jquery/
jQueryで文字の入力規制やローディング処理、
プルダウンメニュー、スクロール処理など

jQueryサンプル集
http://www.designwalker.com/2008/04/jquery.html
コードは紹介されていないが、いろいろなサイトのJqueryを紹介

jQuery実践サンプル
http://jsajax.com/jQuery.aspx
Javascript+Ajaxのサンプル集が1530本以上
jQueryはメニュー、アコーディオン、テキストエリア、
ツールチップ・リンク、ウィンドウ、ボーダー、コーナー、スタイルシート、
テーブル、グリッド、 スライダー、スライドショー、イメージギャラリー、サムネイル
日付、時間、フォームなどが網羅されている。

— posted by midilin @ 09:34AM | Comment (0)

カテゴリー » Javascript » jQuery December 07, 2010

jQueryで複数ファイルを一括アップロードできる「uploadify」 ID:1291712276


uploadify
http://www.uploadify.com/demo/


<body>
<input type="file" name="fileInput" id="fileInput" />
<script type="text/javascript">
$(document).ready(function() {
$('#fileInput').fileUpload ({
'uploader' : 'uploader.swf',
'script' : 'upload.php',
'cancelImg' : 'cancel.png',
'auto' : true,
'folder' : '/uploads'
});
});
</script>
</body>

phpで受け取るとき
if (!empty($_FILES)) {
$tempFile = $_FILES['Filedata']['tmp_name'];
$targetPath = $_SERVER['DOCUMENT_ROOT'] . $_GET['folder'] . '/';
$targetFile = str_replace('//','/',$targetPath) . $_FILES['Filedata']['name'];

// Uncomment the following line if you want to make the directory if it doesn't exist
// mkdir(str_replace('//','/',$targetPath), 0755, true);

move_uploaded_file($tempFile,$targetFile);
}

http://ameblo.jp/linking/entry-10305015696.html

— posted by midilin @ 05:57PM

カテゴリー » Javascript » jQuery November 02, 2010

jQueryとは ID:1288660025


JavaScriptとHTMLの相互作用を強化する軽量なJavaScriptライブラリ。
フリー、オープンソース。

機能は、
・DOMエレメントの選択。
(DOMエレメントとはプログラムからxml(html)ドキュメントに、アクセスするためのインターフェイス
 http://www.tohoho-web.com/js/dom.htm
 http://yscjp.com/doc/dom1.html)
 
・イベント
・CSS操作


プログラム例
str = "    foo     ";
jQuery.trim(str); // "foo" を返す
もしくは
str = "    foo     ";
$.trim(str);

'$' を 'jQuery' の代わりに使える。


http://ja.wikipedia.org/wiki/JQuery



・初めてのjQuery'
http://higashizm.sakura.ne.jp/jquery_first/

手順
(1)head内でJqueryのを読み込む
(2)自分で作るJsファイルを読み込む
(3)スタイルシートの記述をそれぞれfunctionで書く。
 そうすると、スタイルシートを分岐することができる
 (Aのときは、赤、Bの時は黒とか)
  必要な、セレクタ、イベント、メソッドは
JQuery日本語リファレンスで探す。
http://semooh.jp/jquery/
(3−1)
・セレクタ:「Selectors」で検索
重要なセレクタ
$('#id')
$('.class')
$('Element')
$('Element element')

・イベント:「Events」で検索
重要なイベント
$('セレクタ').hover(over,out)
$('セレクタ').toggle(fn1,fn2〜)
$('セレクタ').click()
$('セレクタ').blur()
$('セレクタ').change()
$('セレクタ').focus()

・メソッド
「Attributes」(属性)
「Manipulation」(要素)
「CSS」
「Effects」
など


・40分で覚えるjQuery講座
http://ascii.jp/elem/000/000/498/498710/

(1)関数の記述方法

$(function(){

})

もしくは
$(document).ready(function(){

})

(2)セレクターの記述。
CSSと同じようなものが使える

例)
id属性が、main要素内に存在する、img要素を指定
$("#main img")

(3)HTML/CSSを操作する
 操作方法は、セレクターの後にjQueryの命令を書く


$(セレクター).jQueryの命令

例)
id属性に「first」が設定されているp要素の内容が、"<strong>変更後</strong>" に変える
$("p#first").html(""<strong>変更後</strong>"");


CSSを変更する場合は、css()という命令を使う
css()はCSSプロパティ名と設定したい値を括弧内に ,(カンマ)区切りで記述

$("p").css("color","red");

テキストやHTMLの変更や、取得、
HTMLの挿入、移動、
要素の置き換え、削除
フォーム部品の操作などが行える。
http://ascii.jp/elem/000/000/498/498710/index-3.html

(4)イベントの記述
(「クリックしたとき」や「ドラッグ&ドロップしたとき」など)


$(セレクター).イベント(function(){
イベント処理
});

例)
$("button").click(function(){
    $("img").attr("src","sea.jpg");
});

(元のHTML)

<button>画像を変更</button>
<p><img src="flower.jpg" alt="" /></p>

(実行結果)

<button>画像を変更</button>
<p><img src="sea.jpg" alt="" /></p>


スマートフォン向けフレームワーク注目の「jQuery Mobile」でスマホサイトを作ってみよう【基本編】
http://www.html5-memo.com/jquery-mobile/jquerymobile01/

— posted by midilin @ 10:07AM