Một số Javascript thường dùng trong Blogger/Blogspot (P2)

Tiếp nối bài viết "Một số Javascript thường dùng trong Blogger/Blogspot (P1)" sau đây mình sẽ giới thiệu một số Javascript thường dùng cho blogspot mới!

Các Javascript giới thiệu trong bài này gồm:

• Auto display:none id anything time
• Scroll siderbar to main-wrapper
• Click class to change text

Đại loại là ẩn 1 id nào đó theo khoảng thười gian nhất đinh, Cuộn siderbar theo main-wrapper và click để đổi text trong class!

Một số Javascript thường dùng trong Blogger/Blogspot (P2)

1. Tự ẨN ID DISPLAY:NONE sau 1 thời gian xác định

[JS]

<script type='text/javascript'>
function closeelement(){
div = document.getElementById("closeelement");div.style.display= "none";
}
setTimeout(closeelement, 6000);
</script>

[HTML]

Trước

<div id='closeelement'>
Nội dung
</div>

Sau thời gian 6000ms (6s)

<div id='closeelement' style="display:none">
Nội dung
</div>

2. Cuộn Siderbar trượt dọc theo Main-wrapper

Theia Sticky Sidebar

<b:if cond='data:blog.isMobileRequest == &quot;false&quot;'>
<script type='text/javascript'>
//<![CDATA[
// Theia Sticky Sidebar | v1.3.0 - https://github.com/WeCodePixels/theia-sticky-sidebar
!function(i){i.fn.theiaStickySidebar=function(t){function o(t,o){var a=e(t,o);a||(console.log("TST: Body width smaller than options.minWidth. Init is delayed."),i(document).scroll(function(t,o){return function(a){var n=e(t,o);n&&i(this).unbind(a)}}(t,o)),i(window).resize(function(t,o){return function(a){var n=e(t,o);n&&i(this).unbind(a)}}(t,o)))}function e(t,o){return t.initialized===!0?!0:i("body").width()<t.minWidth?!1:(a(t,o),!0)}function a(t,o){t.initialized=!0,i("head").append(i('<style>.theiaStickySidebar:after {content: ""; display: table; clear: both;}</style>')),o.each(function(){function o(){a.fixedScrollTop=0,a.sidebar.css({"min-height":"1px"}),a.stickySidebar.css({position:"static",width:""})}function e(t){var o=t.height();return t.children().each(function(){o=Math.max(o,i(this).height())}),o}var a={};a.sidebar=i(this),a.options=t||{},a.container=i(a.options.containerSelector),0==a.container.size()&&(a.container=a.sidebar.parent()),a.sidebar.parents().css("-webkit-transform","none"),a.sidebar.css({position:"relative",overflow:"visible","-webkit-box-sizing":"border-box","-moz-box-sizing":"border-box","box-sizing":"border-box"}),a.stickySidebar=a.sidebar.find(".theiaStickySidebar"),0==a.stickySidebar.length&&(a.sidebar.find("script").remove(),a.stickySidebar=i("<div>").addClass("theiaStickySidebar").append(a.sidebar.children()),a.sidebar.append(a.stickySidebar)),a.marginTop=parseInt(a.sidebar.css("margin-top")),a.marginBottom=parseInt(a.sidebar.css("margin-bottom")),a.paddingTop=parseInt(a.sidebar.css("padding-top")),a.paddingBottom=parseInt(a.sidebar.css("padding-bottom"));var n=a.stickySidebar.offset().top,d=a.stickySidebar.outerHeight();a.stickySidebar.css("padding-top",1),a.stickySidebar.css("padding-bottom",1),n-=a.stickySidebar.offset().top,d=a.stickySidebar.outerHeight()-d-n,0==n?(a.stickySidebar.css("padding-top",0),a.stickySidebarPaddingTop=0):a.stickySidebarPaddingTop=1,0==d?(a.stickySidebar.css("padding-bottom",0),a.stickySidebarPaddingBottom=0):a.stickySidebarPaddingBottom=1,a.previousScrollTop=null,a.fixedScrollTop=0,o(),a.onScroll=function(a){if(a.stickySidebar.is(":visible")){if(i("body").width()<a.options.minWidth)return void o();if(a.sidebar.outerWidth(!0)+50>a.container.width())return void o();var n=i(document).scrollTop(),d="static";if(n>=a.container.offset().top+(a.paddingTop+a.marginTop-a.options.additionalMarginTop)){var r,s=a.paddingTop+a.marginTop+t.additionalMarginTop,c=a.paddingBottom+a.marginBottom+t.additionalMarginBottom,p=a.container.offset().top,b=a.container.offset().top+e(a.container),g=0+t.additionalMarginTop,l=a.stickySidebar.outerHeight()+s+c<i(window).height();r=l?g+a.stickySidebar.outerHeight():i(window).height()-a.marginBottom-a.paddingBottom-t.additionalMarginBottom;var h=p-n+a.paddingTop+a.marginTop,f=b-n-a.paddingBottom-a.marginBottom,S=a.stickySidebar.offset().top-n,u=a.previousScrollTop-n;"fixed"==a.stickySidebar.css("position")&&"modern"==a.options.sidebarBehavior&&(S+=u),"legacy"==a.options.sidebarBehavior&&(S=r-a.stickySidebar.outerHeight(),S=Math.max(S,r-a.stickySidebar.outerHeight())),S=u>0?Math.min(S,g):Math.max(S,r-a.stickySidebar.outerHeight()),S=Math.max(S,h),S=Math.min(S,f-a.stickySidebar.outerHeight());var m=a.container.height()==a.stickySidebar.outerHeight();d=(m||S!=g)&&(m||S!=r-a.stickySidebar.outerHeight())?n+S-a.sidebar.offset().top-a.paddingTop<=t.additionalMarginTop?"static":"absolute":"fixed"}if("fixed"==d)a.stickySidebar.css({position:"fixed",width:a.sidebar.width(),top:S,left:a.sidebar.offset().left+parseInt(a.sidebar.css("padding-left"))});else if("absolute"==d){var y={};"absolute"!=a.stickySidebar.css("position")&&(y.position="absolute",y.top=n+S-a.sidebar.offset().top-a.stickySidebarPaddingTop-a.stickySidebarPaddingBottom),y.width=a.sidebar.width(),y.left="",a.stickySidebar.css(y)}else"static"==d&&o();"static"!=d&&1==a.options.updateSidebarHeight&&a.sidebar.css({"min-height":a.stickySidebar.outerHeight()+a.stickySidebar.offset().top-a.sidebar.offset().top+a.paddingBottom}),a.previousScrollTop=n}},a.onScroll(a),i(document).scroll(function(i){return function(){i.onScroll(i)}}(a)),i(window).resize(function(i){return function(){i.stickySidebar.css({position:"static"}),i.onScroll(i)}}(a))})}var n={containerSelector:"",additionalMarginTop:0,additionalMarginBottom:0,updateSidebarHeight:!0,minWidth:0,sidebarBehavior:"modern"};t=i.extend(n,t),t.additionalMarginTop=parseInt(t.additionalMarginTop)||0,t.additionalMarginBottom=parseInt(t.additionalMarginBottom)||0,o(t,this)}}(jQuery);
//]]>
</script>
<b:if cond='data:content == &quot;&quot;'>
<script type='text/javascript'>
//<![CDATA[
$(document).ready(function() {
if ($(window).width() > 1120) {
$("#main-wrapper, #sidebar-wrapper").theiaStickySidebar({
additionalMarginTop: 5,
additionalMarginBottom: 25
});
}
});
//]]>
</script>
<b:else/>
<b:if cond='data:content == &quot;true&quot;'>
<script type='text/javascript'>
//<![CDATA[
$(document).ready(function() {
if ($(window).width() > 1120) {
$("#main-wrapper, #sidebar-wrapper").theiaStickySidebar({
additionalMarginTop: 5,
additionalMarginBottom: 25
});
}
});
//]]>
</script>
</b:if>
</b:if>
</b:if>

Với tên #main-wrapper, #sidebar-wrapper. Nếu blog bạn sử dụng tên khác thì thay lại

3. Click change text

Tính năng khi click chuột sẽ thay đổi text nằm trong đó!

<script>
// Tính năng click mouse
$('.view_lft').click(function(){
		var $this = $(this);
		$this.toggleClass('view_lft');
		if($this.hasClass('view_lft')){
			$this.text('ĐÃ CLICK');					} else {
			$this.text('CLICK RỒI MÀ RÃNH CLICK NỮA HẢ');
		}
	});
</script>

Trước:

<div class="view_lft"> Nội dung ban đầu </div>

Click lần 1

<div> ĐÃ CLICK </div>

Click lần 2

<div class="view_lft"> CLICK RỒI MÀ RÃNH CLICK NỮA HẢ </div>

DEMO THỬ:

Nội dung ban đầu

Mỗi bài viết về Javascript Blogspot mình chỉ giới thiệu 3 Javascript mới thôi. Hóng bài viết mới từ BSW nhé!

- BSW -
Huỳnh Phụng Blogger