2016年11月29日

他ページからのアンカーリンクで指定のIDからずれる

同じディレクトリ内のページから、他ページのアンカーリンク先に飛ばすことは基本中の基本ですが、
作成していたサイトにて、指定のページに飛ぶことは飛ぶが、これまただいぶずれた位置に飛んでいく・・・
ネガティブマージンを使用してるのがいけないのかどうなのか・・・

他ページからのアンカーリンクで指定のIDからずれる
もっとあっちに飛ばしたい・・・

通常idにアンカーリンク先を作るのですが、a nameなど基礎的な対応をしてもだめ。。
それらを入れてもIEやChromeは飛んでくれてもFirefoxは言うことを効いてくれず。

原因を消去法で探っていくと、どうやらjquery.matchHeight.jsのようでした。
これは要素の高さを揃えてくれるのにとても便利なプラグインで重宝していますw

ところがこちらを使用して揃えた分がずれを生じさせているようでした。
特にJSが得意なわけはないので回避策を調べていると、アンカーリンク先のページで
offset().top を取得し scrollTop で移動させればよいとのこと。

ページ遷移後に特定箇所へスムーズスクロールさせればOKかなと。

実装例は下記となります。参考程度にしてください。
【2017.08.01 下記4.のCSS項目追記】

1.リンク元の01.html
------------------------------------------------------------------------
<a href="02.html?id=aaa">AAA</a>
<a href="02.html?id=bbb">BBB</a>
<a href="02.html?id=ccc">CCC</a>
------------------------------------------------------------------------
※「<」は「<」に変更しています

2.飛び先の02.html
------------------------------------------------------------------------
<div id="aaa">
AAAコンテンツ項目
</div>

<div id="bbb">
BBBコンテンツ項目
</div>

<div id="ccc">
CCCコンテンツ項目
</div>
------------------------------------------------------------------------
※「<」は「<」に変更しています
※大きな画像などがある場合、高さを正しく取得できない場合があります

3.jQuery
------------------------------------------------------------------------
$(window).on('load', function() {
var url = $(location).attr('href');
if(url.indexOf("?id=") != -1){
var id = url.split("?id=");
var $target = $('#' + id[id.length - 1]);
if($target.length){
var pos = $target.offset().top;
$("html, body").animate({scrollTop:pos}, 1500);
}
}
});
------------------------------------------------------------------------
※jQueryの読み込みは必須です

4.CSS
------------------------------------------------------------------------
#aaa { width: 980px(仮数値); margin-top: -50px(仮数値); padding-top: 50px(仮数値);}
#bbb { width: 980px(仮数値); margin-top: -50px(仮数値); padding-top: 50px(仮数値);}
#ccc { width: 980px(仮数値); margin-top: -50px(仮数値); padding-top: 50px(仮数値);}
------------------------------------------------------------------------
上記3まででうまくいかないようであれば、この設定も足してみてください。
追従ヘッダーやナビゲーションなどを使用している場合は効果的です。
※marginとpaddingは、追従項目の高さを基準に変更してみてください。

この限りではありませんが、同じお悩みの方がいらっしゃったら、お試しください。




posted by ガーネッツ at 22:13 | Comment(0) | お仕事 | このブログの読者になる | 更新情報をチェックする

2016年10月25日

NextFTP 削除できないサーバ上のデータを削除する

今さらですが、メモ的に書きとめておきます。

データのアップ・ダウンにはNextFTPを利用しています。
有料ですが、FFFTPより使い勝手がとてもいいですね。

稀にサーバ上で消えないフォルダがあります。
パーミッションで数値を変えても、変更を加えてもつまめない奴がいる。。

検索するとやっと出てきました!操作は下記の通りです。
2年越しぐらいにすっきり。忙しさを言い訳に対応することすら忘れていましたがw

NextFTP 削除できないサーバ上のデータを削除する
【変更前】

NextFTP 削除できないサーバ上のデータを削除する
【変更後】

取得コマンドを「LIST」に変更すれば大概削除できますが、
それでも消えない場合は文字化けした画像がアップされている可能性が高いです。

なので、ホストファイル名も既存の設定(UTF-8?)から「シフトJIS」や「EUC」に
変更すると、ファイルの中から文字化けしたjpgやpngなどが出てくるんじゃないでしょうか。
もちろん一概には言えませんが、こちらの対応で解決しました。

もちろん対応後は設定を元に戻してくださいね。(NLST-laL)



posted by ガーネッツ at 20:20 | Comment(0) | お仕事 | このブログの読者になる | 更新情報をチェックする

2014年09月27日

印刷範囲を指定できるjQuery(アラートを出さない)

印刷範囲を指定できるjQueryのプラグインはいくつかあるものの
大概は検索結果で「jquery.jPrintArea.js」に辿りつのではないでしょうか。

こちらはとても簡単に設定ができ、ありがたい機能を提供してくれています。
実際の設定方法は下記サイトなどを参考にしてください。とても分かりやすいです。
http://kojikoji75.hatenablog.com/entry/2014/02/06/212405

IDを振り分ければ、下図のように複数個の個別印刷も問題ありませんでした。
印刷範囲を指定できるjQuery(アラートを出さない)

クライアントによっては、アラートを出したくないという方もいるかと思います。
そのまま設定すると、
---------------------------------------
iframe.contentWindow.print();
alert('Printing...');
---------------------------------------
「Printing...」が出ますし、utf-8でしたら日本語でも表示が可能ですが
これは出したくないなというご意見もあることでしょう。
と言いますのもIEは問題ないのですが、FF(Firefox)ですと、
「このページによる追加のダイアログ表示を抑止する」というチェックボックスが
表示され、そこにチェックをつけてしまうと印刷が不可になってしまいます。
これがちょっと問題ですね。

そこで上記2行を参考までですが、下記に変更すれば、即「印刷」ウインドウに進みます。
---------------------------------------
setTimeout(function(){
iframe.contentWindow.print();
document.body.removeChild(iframe);
}, 500);
---------------------------------------

多分これで大丈夫でしょうw



posted by ガーネッツ at 12:40 | Comment(0) | お仕事 | このブログの読者になる | 更新情報をチェックする