2012.07.11
※14/10/8 追記
この記事で紹介している方法ですが、別ドメインのページを表示させようとすると
正しく動作しませんでした。
JavaScript自体が別ドメインのページ操作に対応しておらず、
高さが取得できないようです。
ただ、「JS クロスドメイン 高さ取得」等で検索すると多数ヒットしますので、
それらを上手く組み込めれば実装できるかもしれません。
よくお世話になっているFancybox。
画像と違い、type:iframeでHTMLを表示させるときはフレームサイズの自動調整ができません。
ただし表示完了時に関数を呼び出せるので、
それを利用してフレームサイズを変更する方法が紹介されていました。
jQuery and Fancybox: How to automatically set the height of an iframe lightbox
$("#sample").fancybox({
'width' : 500,
'type' : 'iframe',
});
上記のようにしてHTMLを表示させると思いますが、
それに下記の赤字部分を追加します。
$("#sample").fancybox({
'width' : 500,
'type' : 'iframe',
'scrolling' : 'no',
'onComplete' : function() {
$('#fancybox-frame').load(function() {
$('#fancybox-content').height($(this).contents().find('body').height());
$('#fancybox-overlay').height($(document).height());
});
}
});
これで高さが自動調整されます。
google chromeだとローカルでは動きません。
※12/7/11 追記
読み込み元のページよりもフレームのほうが長くなってしまう場合、
暗転部分が途中で切れてしまうので記述を追加しました。
これで問題ないはず・・です。
不要なスクロールバーが出てしまう場合は'scrolling' : 'no'も加えてください。
また、処理が実行されるのはページが表示された後なので、
高さを調整する前のデフォルト値として'height'を入れておいてもいいかもしれません。
ちなみに幅も変えられないものか探してみましたが、
それは見つけることができませんでした・・
時間があるときにいじってみたいです。
この記事で紹介している方法ですが、別ドメインのページを表示させようとすると
正しく動作しませんでした。
JavaScript自体が別ドメインのページ操作に対応しておらず、
高さが取得できないようです。
ただ、「JS クロスドメイン 高さ取得」等で検索すると多数ヒットしますので、
それらを上手く組み込めれば実装できるかもしれません。
よくお世話になっているFancybox。
画像と違い、type:iframeでHTMLを表示させるときはフレームサイズの自動調整ができません。
ただし表示完了時に関数を呼び出せるので、
それを利用してフレームサイズを変更する方法が紹介されていました。
jQuery and Fancybox: How to automatically set the height of an iframe lightbox
$("#sample").fancybox({
'width' : 500,
'type' : 'iframe',
});
上記のようにしてHTMLを表示させると思いますが、
それに下記の赤字部分を追加します。
$("#sample").fancybox({
'width' : 500,
'type' : 'iframe',
'scrolling' : 'no',
'onComplete' : function() {
$('#fancybox-frame').load(function() {
$('#fancybox-content').height($(this).contents().find('body').height());
$('#fancybox-overlay').height($(document).height());
});
}
});
これで高さが自動調整されます。
google chromeだとローカルでは動きません。
※12/7/11 追記
読み込み元のページよりもフレームのほうが長くなってしまう場合、
暗転部分が途中で切れてしまうので記述を追加しました。
これで問題ないはず・・です。
不要なスクロールバーが出てしまう場合は'scrolling' : 'no'も加えてください。
また、処理が実行されるのはページが表示された後なので、
高さを調整する前のデフォルト値として'height'を入れておいてもいいかもしれません。
ちなみに幅も変えられないものか探してみましたが、
それは見つけることができませんでした・・
時間があるときにいじってみたいです。
Fancybox , JS
2012.06.06
JavaScriptから、引数を渡しつつPHPを実行する方法です。
jQueryが必要ですが、かなり簡単に実現することができます！
■Fの視点
JavascriptからPHPを実行したい
処理にはAJAXを使用します。
$.ajax({
type: "POST",
url: "sample.php",
data: "sampleVal1=test&sampleVal2=hoge",
success: function(html){
alert(html);
}
});
dataにPHPに渡す引数を指定。&繋ぎで複数指定できます。
PHP側で $_POST['sampleVal1'] と書くことで値を取得できます。
successはPHP実行後に行う処理です。
上記の場合はPHPで出力した値がhtmlに格納されます。
以上。
過去これができなかったために、
同じようなPHPを複数用意したこともあったのでとても助かりました。
jQueryが必要ですが、かなり簡単に実現することができます！
■Fの視点
JavascriptからPHPを実行したい
処理にはAJAXを使用します。
$.ajax({
type: "POST",
url: "sample.php",
data: "sampleVal1=test&sampleVal2=hoge",
success: function(html){
alert(html);
}
});
dataにPHPに渡す引数を指定。&繋ぎで複数指定できます。
PHP側で $_POST['sampleVal1'] と書くことで値を取得できます。
successはPHP実行後に行う処理です。
上記の場合はPHPで出力した値がhtmlに格納されます。
以上。
過去これができなかったために、
同じようなPHPを複数用意したこともあったのでとても助かりました。
2012.04.04
アンカーリンクを使って特定のIDまでスクロールさせるのは簡単に出来ますが、
この場合、リンク元で指定しなければなりません。
リンク元で指定できない場合でも、アクセス時に自動で移動する必要があり探しました。
検索では「window.scrollTo」などがよく出てきますが、
数値で指定するため移動させたい位置の上にテキストなどがあると使用できません。
なんとかCLASSやIDで指定できないか探して見つけました。
すごく簡単で使いやすいです。
下記の記事を参考にしています。
>リンク先ページの指定位置にスクロールで移動
---------------
---------------
青字部分を移動させたい位置のIDまたはCLASSを指定すれば完了です。
この場合、リンク元で指定しなければなりません。
リンク元で指定できない場合でも、アクセス時に自動で移動する必要があり探しました。
検索では「window.scrollTo」などがよく出てきますが、
数値で指定するため移動させたい位置の上にテキストなどがあると使用できません。
なんとかCLASSやIDで指定できないか探して見つけました。
すごく簡単で使いやすいです。
下記の記事を参考にしています。
>リンク先ページの指定位置にスクロールで移動
---------------
<script type="text/javascript">
$(function() {
var n = window.location.href.slice(window.location.href.indexOf('?') + 4);
var p = $("移動させたいIDまたはCLASS").offset().top;
$('html,body').animate({ scrollTop: p }, 'slow');
return false;
});
</script>
---------------
青字部分を移動させたい位置のIDまたはCLASSを指定すれば完了です。
2012.03.28
すべての画像が読み込まれた後にスクリプトを実行する場合は
前回のJS：ロード完了時に実行でほぼ足りてしまうのですが、
指定した画像が読み込まれたときに実行する場合や、
後から画像を読み込む場合には不十分です。
画像ありのRSSを読み込もうと思い、
--------------------------------------------------------------------
$("#rssList img").load(function(){
// 処理
});
--------------------------------------------------------------------
と書いたのですがブラウザによっては上手くいかず。。
↓こちらのサイトでぴったりのことが記事にされていましたので
参考にさせていただきました。
jqueryで画像のロード完了後に実行 - downstairs lab
http://www.stairsdesign.jp/blog/2011/07/jquery.html
■方法
imagesLoadedというプラグインを使用します。
https://gist.github.com/268257
こちらのサイトからJSファイルをダウンロードして<head>内で読み込み、
--------------------------------------------------------------------
<script type="text/javascript" src="js/imagesLoaded.js"></script>
--------------------------------------------------------------------
loadをimagesLoadedに書き換えれば完了です。
※2013/10/2 $(function(){}); を追加しました。
--------------------------------------------------------------------
$(function(){
$("#rssList img").imagesLoaded(function(){
// 処理
});
});
--------------------------------------------------------------------
前回のJS：ロード完了時に実行でほぼ足りてしまうのですが、
指定した画像が読み込まれたときに実行する場合や、
後から画像を読み込む場合には不十分です。
画像ありのRSSを読み込もうと思い、
--------------------------------------------------------------------
$("#rssList img").load(function(){
// 処理
});
--------------------------------------------------------------------
と書いたのですがブラウザによっては上手くいかず。。
↓こちらのサイトでぴったりのことが記事にされていましたので
参考にさせていただきました。
jqueryで画像のロード完了後に実行 - downstairs lab
http://www.stairsdesign.jp/blog/2011/07/jquery.html
■方法
imagesLoadedというプラグインを使用します。
https://gist.github.com/268257
こちらのサイトからJSファイルをダウンロードして<head>内で読み込み、
--------------------------------------------------------------------
<script type="text/javascript" src="js/imagesLoaded.js"></script>
--------------------------------------------------------------------
loadをimagesLoadedに書き換えれば完了です。
※2013/10/2 $(function(){}); を追加しました。
--------------------------------------------------------------------
$(function(){
$("#rssList img").imagesLoaded(function(){
// 処理
});
});
--------------------------------------------------------------------
JS
2012.03.28
スマートフォン用のサイトでよくアドレスバーを隠す設定になっているところを多く見かけます。
ということで検索していろいろなページを参考にやってみました。
一画面で表示できる範囲がひろくなっていい感じです。
赤字部分が必須です。
---------------
---------------
1点注意点が。
このアドレスバーを隠す設定をしている場合、
idを使ったアンカーリンクがきかなくなります。
ご注意を。
ということで検索していろいろなページを参考にやってみました。
一画面で表示できる範囲がひろくなっていい感じです。
赤字部分が必須です。
---------------
<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, user-scalable=no,
initial-scale=1, maximum-scale=1">
<title>スマートフォン用サイト</title>
<style type="text/css">
body {
min-height: 416px;
-webkit-text-size-adjust: none;
}
</style>
<script type="text/javascript">
window.onload = function(){
setTimeout("scrollTo(0,1)", 100);
}
</script>
</head>
<body>
サイトの中身
</body>
</html>
---------------
1点注意点が。
このアドレスバーを隠す設定をしている場合、
idを使ったアンカーリンクがきかなくなります。
ご注意を。
