「js」カテゴリーアーカイブ

2018.1.25
js

ウィジェットのRecent Postで出力した記事リンクのtitle属性を削除

画像の通りです。

Permalink toそのものだけを削除する方法はすぐ見つかりませんでした。
多分、function.phpにフィルターフックで何かすれば出来る気もしますがちょっと時間が無かったのでtitle属性そのものを削除してしまおうという算段です。

というわけで以下のjsを使用。

(function($) {
$(document).ready(function() {
$('h3.rpwe-title a').removeAttr( "title" );
});
})(jQuery);

今回は以下のようなhtmlに対して削除したかったので、上記のような記述になっています。
どこのtitle属性を削除するかは適宜。

<h3 class="rpwe-title">
<a href="#" title="Permalink to 投稿タイトル" rel="bookmark">投稿タイトル</a>
</h3>
2018.1.24
html&css, js, useful

ヘッダーのナビを固定してあとからぬるっと出したいとか

スクロールしたら、ヘッダーのナビがあとからニュっと出てくるサイトあるよね。それ。

HTML

<header>

  ...

</header>

<nav>
...
</nav>

<main>
...
</main>

<footer>
...
</footer>

CSS

.clone-nav {
position: fixed;
top: 0;
left: 0;
z-index: 2;
width: 100%;
transition: .3s;
transform: translateY(-100%);
}
.is-show {
transform: translateY(0);
}

JS

$(function() {

  var $win = $(window),

      $cloneNav = $('nav').clone().addClass('clone-nav').appendTo('body'),

      showClass = 'is-show';

$win.on('load scroll', function() {
var value = $(this).scrollTop();
if ( value > 700 ) {
$cloneNav.addClass(showClass);
} else {
$cloneNav.removeClass(showClass);
}
});
});

 

参考サイト

jQuery：スクロールしたらヘッダーやナビゲーションを固定・変化させる動きを実装するサンプルコード 5


		

			





		
			


	

				
2018.1.24

								js, wordpress
							

	

						

					WordPressでJqueryを使う時
				

		
		

						
こうする。




jQuery(function($){　});




で囲む。


具体的にはこう！




<script type="text/javascript">
jQuery(function($){
//ここに普通のjQueryの書き方で。下の行は例
$("#jquery_test_wp").html("jQuery WordPress構文テスト")
});
</script>




私が作ったのはこう！




jQuery(function($){
var $win = $(window),
$cloneNav = $('nav').clone().addClass('clone-nav').appendTo('body'),
showClass = 'is-show';

$win.on('load scroll', function() {
var value = $(this).scrollTop();
if ( value > 100 ) {
$cloneNav.addClass(showClass);
} else {
$cloneNav.removeClass(showClass);
}
});
});




重要。

		

			





		
			


	

				
2017.9.12

								html&css, js
							

	

						

					スマートフォン閲覧時のみリンク先を切り替えるヨ
				

		
		

						
htmlはこんな感じ。




<a href="http://hogehogehoge.hoge" data-sp-href="http://hogehogehoge.hoge/sp">りんくりんく</a>






//
// スマートフォンかどうか判断して、スマートフォンの場合のみ処理。
//
if (IsSmartPhone())
{
//
// ソースが全て書き出された後に処理。
//
$(function()
{
//
// 全ての『data-sp-href』属性を繰り返し処理。
//
$('body').find('[data-sp-href]').each(function()
{
//
// リンクを入れ替え。
//
$(this).attr('href', $(this).attr('data-sp-href'));
});
});
}
//
// スマートフォンかどうか判断するメソッド。
//
function IsSmartPhone()
{
// デバイスの種類。
var media =
[
'iPhone',
'Windows Phone',
'Android'
];
var pattern = new RegExp(media.join('|'), 'i'); //デバイスの種類を正規表現にする。
return pattern.test(navigator.userAgent); //ユーザーエージェントにデバイスが含まれるかを調べる。
}



		

			





		
			


	

				
2017.9.12

								js
							

	

						

					元画像サイズを取得して拡大縮小
				

		
		

						


<div class="hoge">
<img src="./img/gazo.png">
</div>




とかで、




.hoge img{
width: 50%;
}




とかにすると確実に親要素のhogeの横幅の50％になりがち。

元画像サイズの50%がいいんだけどそういうプロパティも無いっぽいから

無理矢理力技でねじ伏せる！


ということで以下。




<img src="hoge.png" onload="this.width = this.width*0.5" />



		

			





		
			


	

				
2017.3.27

								js
							

	

						

					phpを使わずグローバルナビの現在ページに～の改良版？
				

		
		

						
前に書いたやつもいいのですが、正直階層化してるサイトには向かないです。

ということでこれが使えます。




<script>
//グローバルナビの現在ページの取得
$(function(){
var id = $("body").attr("id");
$(".g_navi ul li a."+id).addClass("on");
});
</script>




各ページのbodyにidで付けた名前と、グローバルナビのaタグにclassで付けた名前が一致すればcurrent的なクラスが付与されます！（ここではclass=”on”

これならいくら階層化してようが問題ナシです

		

			





		
			


	

				
2017.3.25

								html&css, js
							

	

						

					phpを使わずに現在のページのナビボタンに色を付ける
				

		
		

						
これはすごく便利。


絶対パスでの指定


CSS




#menu a{color: #777}
#menu a.on{color: #000}




html




<ul id="menu" class="cf">
<li><a href="http://abc.com/index.html">home</a></li>
<li><a href="http://abc.com/page_sub1.html">sub1</a></li>
<li><a href="http://abc.com/page_sub2.html">sub2</a></li>
<li><a href="http://abc.com/page_sub3.html">sub3</a></li>
<li><a href="http://abc.com/page_sub4.html">sub4</a></li>
</ul>




JS




$(function(){
var url = $(location).attr('href');
$('#menu').find('a').each(function(){
var link = $(this).attr('href');
if(link == url){
$(this).addClass('on');
}
});
});




直接○○.htmlとしてしまうような場合には下記のようにJSを書き換えます。Aタグの中身で分岐して一つのコードにしても良いかと思います。


html




<ul id="menu" class="cf">
<li><a href="page_index.html">home</a></li>
<li><a href="page_sub1.html">sub1</a></li>
<li><a href="page_sub2.html">sub2</a></li>
<li><a href="page_sub3.html">sub3</a></li>
<li><a href="page_sub4.html">sub4</a></li>
</ul>




JS




$(function(){
var url = $(location).attr('href');
var url_sp = url.split("/");
var file = url_sp[url_sp.length - 1];
$('#menu').find('a').each(function(){
var link = $(this).attr('href');
if(link == file){
$(this).addClass('on');
}
});
});




現在アクセス中のURLを取得し、次に/最後のテキストを取得します。この取得したテキストの内容に応じてクラスをつけています。

		

			





		
			


	

				
2017.3.25

								html&css, js
							

	

						

					ページ読み込んだときに要素をフワっと出すやつ
				

		
		

						
スクロールしたら要素をふわっと出すコラムはいっぱいあるけど、

ページを読んだ瞬間にイベント発火ってなかなかない…。


というわけで作りました。

flashつくれないんだな～～！って人にいい感じだと思いますます。

外部jsで読んでもいいよ。




<script>
$('#animation').css('visibility','hidden');//ふわっと表示
$(function () {
var windowHeight = $(window).height(),
topWindow = $(window).scrollTop();
$('#animation').each(function(){
var targetPosition = $(this).offset().top;
if(topWindow > targetPosition - windowHeight + 1){
$(this).addClass("fadeInDown");
}
});
});
</script>




CSSはこちら




.fadeInDown {
-webkit-animation-fill-mode:both;
-ms-animation-fill-mode:both;
animation-fill-mode:both;
-webkit-animation-duration:2s;
-ms-animation-duration:2s;
animation-duration:2s;
-webkit-animation-name: fadeInDown;
animation-name: fadeInDown;
visibility: visible !important;
}
@-webkit-keyframes fadeInDown {
0% { opacity: 0; -webkit-transform: translateY(-100px); }
100% { opacity: 1; -webkit-transform: translateY(0); }
}
@keyframes fadeInDown {
0% { opacity: 0; -webkit-transform: translateY(-100px); -ms-transform: translateY(-100px); transform: translateY(-100px); }
100% { opacity: 1; -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); }




「2s」は何秒でふわっとが終わるかの設定だよ。

「-100px」はどんくらい移動するかの設定だよ。


最近のCSSはすごいね！！！！

		

			





		
			


	

				
2017.1.13

								js
							

	

						

					オンマウスでリンク画像のオンオフを切り替える！
				

		
		

						
そのまんまです。

jQuery本体は読んでおいてください。




<script type="text/javascript">
jQuery(document).ready(function() {
$('img[src*="-off."]')
.on('mouseover', function(){this.src=this.src.replace('-off.','-on.');})
.on('mouseout', function(){this.src=this.src.replace('-on.','-off.');});
});
</script>




あとは、マウスが乗ってない状態の時の画像の名前を「abcdef-off.jpg」乗ってる時の画像の名前を「abcdef-on.jpg」にすればオッケーです。

別にjpgである必要はないです。どの画像でもいけます。あとonとoffの画像の「abcdef」のところは合わせるようにしてください。

そこが違うと判別しないので。٩(๑•̀ω•́๑)۶

		

			





		
			


	

				
2017.1.13

								js
							

	

						

					ページ内スルスルスクロール！
				

		
		

						
#がついたページ内リンクでスルスルスクロールしてないサイトはナウくないんじゃ？

ってことで、スルスルスクロール機能簡単実装です。


1.headにもうjQuery本体は読んでる前提です。


2.これをheadに記述！






<script type="text/javascript">
$(function(){
// #で始まるアンカーをクリックした場合に処理
$('a[href^=#]').click(function() {
// スクロールの速度
var speed = 400; // ミリ秒
// アンカーの値取得
var href= $(this).attr("href");
// 移動先を取得
var target = $(href == "#" || href == "" ? 'html' : href);
// 移動先を数値で取得
var position = target.offset().top;
// スムーススクロール
$('body,html').animate({scrollTop:position}, speed, 'swing');
return false;
});
});
</script>





以上！！！

		

			





			




	
← 以前の投稿

	
新しい投稿 →