カテゴリー別アーカイブ: java&JQuery

bootstrap4のタブで別ページから直接特定のタブにリンクする方法

本当に苦労しました。

結論から言うと、jqueryのバージョンアップ時に気を付けないといけないよね!ってことなのですが笑

では、参考にさせていただいたサイトはこちら

ハッシュ付きURLリンクでの訪問時にBootstrapの適切なタブを開く&スクロールする|ENTEREAL様

入力するコードはこちら
適当なjsファイルを名前を付けて保存してfooterで呼び出します。

$(document).ready(function() {
    // #(ハッシュ)指定されたタブを表示する
    var hashTabName = document.location.hash;
    if (hashTabName) {
        $('.nav-tabs a[href=' + hashTabName + ']').tab('show');
    }
});

おおむねこちらで動作します。JQueryのバージョンが低ければ・・・・

ただ、bootstrap4を使うとたぶんjquery3.○.○を使うと思うんですよね。そうすると、なぜか、タブが切り替わらい?!

そこからいろいろとトライ&エラーの繰り返しで、
jQueryのバージョンが原因だと突き止めたあと、
(サイトのデザインが完成している)いまさらバージョンを変えるわけにもいかずJQueryのサイトを見ていると、、

あるじゃん、「jQuery Migrate Plugin」なんて便利なものが!

google先生の翻訳で日本語になったサイトを読むと
そのプラグインを使うと失われた機能を取り戻すとかなんとか

とにかく、Download the compressed, production jQuery Migrate 1.4.1をダウンロード!

jQuery本体の下に呼び出してサイトにアップすると

動いた!!

とりあえず、わすれないうちに記録をしておきます。

IE8よさようなら!

webサイトをつくっているとよくIE8以下のブラウザーで見ている方への表示の違いにうんざりさせられてしまいませんか?

どうしようかと思っていたときにこんなサイトを見つけました。

[JS]IE6/7/8でアクセスしたユーザーに新しいブラウザのインストールを促すスクリプト -IE Alert js | コリス

そうなんです。

たまに見かける、ブラウザをインストールする様に促すやつですね!

これを参考に皆さんもIE8にさよならをしてきませんか?

意外と知らなかった、前のページに戻る為のリンク作成

複数ページからのアクセスが考えられるページに、

「前のページに戻る」

というリンクを作りたいときは以下のコードで大丈夫です。

 


<a href="javascript:history.back();">前のページに戻る</a>

 

ここでのキーポイントはリンク先をjavascriptで書くこと!
これを覚えていたら便利ですね!

Masonryをwordpressで動作させる方法

最近多いタイル状に配置をするjQueryのプラグインにMasonryがありますね!
トップページなどでMasonryを配置する際に、
次のように設定をするとOKです!

まず、functions.phpに以下のコードを記述するとMasonryがつかえるようになります。
(最近のwordpressにはMasonryが内包されているそうです。)

function my_scripts() {
wp_enqueue_script('jquery-masonry');
}
add_action( 'wp_enqueue_scripts', 'my_scripts' );

加えて別で設定用に以下のようなjsファイルを作ります。

jQuery(window).load(function(){
  jQuery( '#wakugumi' ).masonry({
    itemSelector: '.parts'
  });
});

ポイントは$をjQueryに変更すること。
あと、ここで設定した#wakugumiと.partsはソースに記述する際に使います。
そして、header.phpで作成したjsファイルを読み込みます。

あとは、CSSでデザインを固めて、以下の様に記述すればOK!

<div id="wakugumi">
<div class="parts">
コンテンツ内容
</div>
・・・・・
<div class="parts">
コンテンツ内容
</div>
</div

ぜひお試しください。

“トップへ戻る”ボタンを途中から表示させる方法

サイトを見ていると、下の方にスクロールした時に
トップへ戻れるボタンが現れることがありますよね!

それを実装するには以下のようにすれば大丈夫です!

まずは、ボタンを作ります。

<div id="page-top">
<a href="#header">トップへ戻る<span style="font-size: 14px;"></a></span>
</div>

そのあとcssでデザインを固定化します。

/*ボタンを固定する*/
#page-top {
	position: fixed;
	bottom: 20px;
	right: 20px;
}
/*ボタンをデザインする*/
#page-top a {
	background: #ccc;
	text-decoration: none;
	color: #fff;
	padding: 10px;
	text-align: center;
	display: block;
	border-radius: 5px;
}
#page-top a:hover {
	text-decoration: none;
	background: #aaa;
}

最後にheader内に下記コードを読み込ませる。

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
	var topBtn = $('#page-top');
	topBtn.hide();
	$(window).scroll(function () {
		if ($(this).scrollTop() > 100) {
			topBtn.fadeIn();
		} else {
			topBtn.fadeOut();
		}
	});
	//スクロールしてトップ
    topBtn.click(function () {
		$('body,html').animate({
			scrollTop: 0
		}, 500);
		return false;
    });
});
</script>

これでばっちりOKです!