Sunday, July 31, 2011

Auto Scroll Page Buttons : Definition

I would like to share the scroll page button.
After you pest the style and cords you will see the buttons in top-right of you web browser.

To hold the button en-scrolls the page. To release the button stops scrolling.
To double click the button en-scrolls top page or end of page.

If you have any difficulties using the cord please see these links,
-from C.O.

Auto Scroll Page Buttons : Style

.goUp {
background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhZdgSpOU-pZznvwmiDA5l-o7qNngcV17LTHl44wJzFCgVbNB9ho15BbvOq1TMxY9HLZyKxVjZziRtzrGzMslOXj91aoLg4hfy-FfRDWZ_waA9QwzRvAFxxfKhXTNtbV6kglwrjv1o8bl4/s1600/scroll-icon-up.png") top left no-repeat;
position:fixed;
height:20px;
width:20px;
top:35px;
right:5px;
cursor: pointer;
}
.goUp:hover {
background: #06c url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhZdgSpOU-pZznvwmiDA5l-o7qNngcV17LTHl44wJzFCgVbNB9ho15BbvOq1TMxY9HLZyKxVjZziRtzrGzMslOXj91aoLg4hfy-FfRDWZ_waA9QwzRvAFxxfKhXTNtbV6kglwrjv1o8bl4/s1600/scroll-icon-up.png") top left no-repeat;
}
.goDown {
background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjfWqUp_miaeoYrD-Rmy5er8N1ymeS_E7cFe5bIVMxLdmZz7_eQ49iG_UEGZAVQmbu4-IIpLZku0IFx9nNrw5akNlzWb0Ut75BjfNhTyEEphORZ2y3BetC2A0fuLR52Ru3mTQ1J6YY421I/s1600/scroll-icon-down.png") top left no-repeat;
position:fixed;
height:20px;
width:20px;
top:60px;
right:5px;
cursor: pointer;
}
.goDown:hover {
background: #06c url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjfWqUp_miaeoYrD-Rmy5er8N1ymeS_E7cFe5bIVMxLdmZz7_eQ49iG_UEGZAVQmbu4-IIpLZku0IFx9nNrw5akNlzWb0Ut75BjfNhTyEEphORZ2y3BetC2A0fuLR52Ru3mTQ1J6YY421I/s1600/scroll-icon-down.png") top left no-repeat;
}


-from C.O.

Auto Scroll Page Buttons : Cord

<div class="goUp"></div>
<div class="goDown"></div>
<script type="text/javascript"> $(document).ready(function (){
/* Auto Scroll Page Created By Chihiro Okamoto : www.c-okamoto.blogspot.com*/
var $goUp = $('.goUp'), $goDown = $('.goDown'),
$html = $('html'),
$body = $('body'),
$footer = $('#footer');
/* Entire Body Scroll*/ $goUp.bind({
mousedown: function() {
$html.animate({scrollTop: '-=10000px'}, 9000);
},
mouseup: function() {
$html.stop();
},
mouseleave: function() {
$html.stop();
},
dblclick: function() {
$html.stop().scrollTo( {top:'0',left:'0'}, 1000);
}
});

$goUp.bind({
mousedown: function() {
$body.animate({scrollTop: '-=10000px'}, 9000);
},
mouseup: function() {
$body.stop();
},
mouseleave: function() {
$body.stop();
},
dblclick: function() {
$body.stop().scrollTo( {top:'0',left:'0'}, 1000);
}
});


$goDown.bind({
mousedown: function() {
$html.animate({scrollTop: '+=10000px'},9000);
},
mouseup: function() {
$html.stop();
},
mouseleave: function() {
$html.stop();
},
dblclick: function() {
$html.stop().scrollTo( { top: $footer.position().top,left:0}, 2000);
}
});

$goDown.bind({
mousedown: function() {
$body.animate({scrollTop: '+=10000px'},9000);
},
mouseup: function() {
$body.stop();
},
mouseleave: function() {
$body.stop();
},
dblclick: function() {
$body.stop().scrollTo( { top: $footer.position().top,left:0}, 2000);
}
});
});

/**
* jQuery.ScrollTo - Easy element scrolling using jQuery.
* Copyright (c) 2007-2009 Ariel Flesler - aflesler(at)gmail(dot)com | http://flesler.blogspot.com
* Dual licensed under MIT and GPL.
* Date: 5/25/2009
* @author Ariel Flesler
* @version 1.4.2
*
* http://flesler.blogspot.com/2007/10/jqueryscrollto.html
*/
;(function(d){var k=d.scrollTo=function(a,i,e){d(window).scrollTo(a,i,e)};k.defaults={axis:'xy',duration:parseFloat(d.fn.jquery)>=1.3?0:1};k.window=function(a){return d(window)._scrollable()};d.fn._scrollable=function(){return this.map(function(){var a=this,i=!a.nodeName||d.inArray(a.nodeName.toLowerCase(),['iframe','#document','html','body'])!=-1;if(!i)return a;var e=(a.contentWindow||a).document||a.ownerDocument||a;return d.browser.safari||e.compatMode=='BackCompat'?e.body:e.documentElement})};d.fn.scrollTo=function(n,j,b){if(typeof j=='object'){b=j;j=0}if(typeof b=='function')b={onAfter:b};if(n=='max')n=9e9;b=d.extend({},k.defaults,b);j=j||b.speed||b.duration;b.queue=b.queue&&b.axis.length>1;if(b.queue)j/=2;b.offset=p(b.offset);b.over=p(b.over);return this._scrollable().each(function(){var q=this,r=d(q),f=n,s,g={},u=r.is('html,body');switch(typeof f){case'number':case'string':if(/^([+-]=)?\d+(\.\d+)?(px|%)?$/.test(f)){f=p(f);break}f=d(f,this);case'object':if(f.is||f.style)s=(f=d(f)).offset()}d.each(b.axis.split(''),function(a,i){var e=i=='x'?'Left':'Top',h=e.toLowerCase(),c='scroll'+e,l=q[c],m=k.max(q,i);if(s){g[c]=s[h]+(u?0:l-r.offset()[h]);if(b.margin){g[c]-=parseInt(f.css('margin'+e))||0;g[c]-=parseInt(f.css('border'+e+'Width'))||0}g[c]+=b.offset[h]||0;if(b.over[h])g[c]+=f[i=='x'?'width':'height']()*b.over[h]}else{var o=f[h];g[c]=o.slice&&o.slice(-1)=='%'?parseFloat(o)/100*m:o}if(/^\d+$/.test(g[c]))g[c]=g[c]<=0?0:Math.min(g[c],m);if(!a&&b.queue){if(l!=g[c])t(b.onAfterFirst);delete g[c]}});t(b.onAfter);function t(a){r.animate(g,j,b.easing,a&&function(){a.call(this,n,b)})}}).end()};k.max=function(a,i){var e=i=='x'?'Width':'Height',h='scroll'+e;if(!d(a).is('html,body'))return a[h]-d(a)[e.toLowerCase()]();var c='client'+e,l=a.ownerDocument.documentElement,m=a.ownerDocument.body;return Math.max(l[h],m[h])-Math.min(l[c],m[c])};function p(a){return typeof a=='object'?a:{top:a,left:a}}})(jQuery);
</script>



-from C.O.

Saturday, July 30, 2011

Google Navigation Bar Button : Definition

Is your google blog navigation bar (you can see it on top of your blog) bothering you?
I have corded the program and style, so please use it.

After you put the cords and style, you can see the Blog icon top right of the web browser.
It's the bottom that user can make Google navigation bar appear or disappear.

If you have any difficulties using the cord please see these links,
-from C.O.

Google Navigation Bar Button : Style

#opNavBar{
background:url("http://img1.blogblog.com/img/navbar/icons_orange.png") -26px center no-repeat;
position:fixed;
top:5px;
right:5px;
height:20px;
width:20px;
cursor:pointer;
}

#navbar-iframe{
display:none;
}



Google Navigation Bar Button : Cord

<div id="opNavBar"></div>
<script type="text/javascript">
$(document).ready(function (){
/*Google Blog Bar Created By Chihiro Okamoto : www.c-okamoto.blogspot.com*/
var $opNavBar=$('#opNavBar'),
$navBarIframe=$('#navbar-iframe');
$opNavBar.toggle(
function () {
$navBarIframe.fadeIn(1000);
return false;
},
function () {
$navBarIframe.fadeOut(1000);
return false;
});
});
</script>


-from C.O.