Sebenarnya lagi sakit Beben si bloglang ganteng kalem tea ini sob, tapi ya memaksakan juga masuk gawe :-s Masih ingat tidak dengan artikel dari master kita Abu Farhan mengenai jQuery Dock animation! Mirip dengan itu postingan kali ini Beben akan sampaikan versi web script terkenal Dynamic Drive DHTML Scripts. Web yang selalu menyajikan trik-trik gaya punya :-bd :x Karena menggunakan jQuery script, sobat harus sudah memiliki minimal versi 1.4.2, kalau sudah ada jangan dipakai lagi!!! Bumbu-bumbu yang mesti diletakan pada bagian tag <head> pada template sobat
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type='text/javascript'>
jQuery.noConflict()
function expstickybar(usersetting){
var setting=jQuery.extend({position:'bottom', peekamount:30, revealtype:'mouseover', speed:200}, usersetting)
var thisbar=this
var cssfixedsupport=!document.all || document.all && document.compatMode=="CSS1Compat" && window.XMLHttpRequest //check for CSS fixed support
if (!cssfixedsupport || window.opera)
return
jQuery(function($){ //on document.ready
if (setting.externalcontent){
thisbar.$ajaxstickydiv=$('<div id="ajaxstickydiv_'+setting.id+'"></div>').appendTo(document.body) //create blank div to house sticky bar DIV
thisbar.loadcontent($, setting)
}
else
thisbar.init($, setting)
})
}
expstickybar.prototype={
loadcontent:function($, setting){
var thisbar=this
var ajaxfriendlyurl=setting.externalcontent.replace(/^http:\/\/[^\/]+\//i, "http://"+window.location.hostname+"/")
$.ajax({
url: ajaxfriendlyurl, //path to external content
async: true,
error:function(ajaxrequest){
alert('Error fetching Ajax content.<br />Server Response: '+ajaxrequest.responseText)
},
success:function(content){
thisbar.$ajaxstickydiv.html(content)
thisbar.init($, setting)
}
})
},
showhide:function(keyword, anim){
var thisbar=this, $=jQuery
var finalpx=(keyword=="show")? 0 : -(this.height-this.setting.peekamount)
var positioncss=(this.setting.position=="bottom")? {bottom:finalpx} : {top:finalpx}
this.$stickybar.stop().animate(positioncss, (anim)? this.setting.speed : 0, function(){
thisbar.$indicators.each(function(){
var $indicator=$(this)
$indicator.attr('src', (thisbar.currentstate=="show")? $indicator.attr('data-closeimage') : $indicator.attr('data-openimage'))
})
})
thisbar.currentstate=keyword
},
toggle:function(){
var state=(this.currentstate=="show")? "hide" : "show"
this.showhide(state, true)
},
init:function($, setting){
var thisbar=this
this.$stickybar=$('#'+setting.id).css('visibility', 'visible')
this.height=this.$stickybar.outerHeight()
this.currentstate="hide"
setting.peekamount=Math.min(this.height, setting.peekamount)
this.setting=setting
if (setting.revealtype=="mouseover")
this.$stickybar.bind("mouseenter mouseleave", function(e){
thisbar.showhide((e.type=="mouseenter")? "show" : "hide", true)
})
this.$indicators=this.$stickybar.find('img[data-openimage]') //find images within bar with data-openimage attribute
this.$stickybar.find('a[href=#togglebar]').click(function(){ //find links within bar with href=#togglebar and assign toggle behavior to them
thisbar.toggle()
return false
})
setTimeout(function(){
thisbar.height=thisbar.$stickybar.outerHeight() //refetch height of bar after 1 second (last change to properly get height of sticky bar)
}, 1000)
this.showhide("hide")
}
}
/////////////Initialization code://///////////////////////////
//Usage: var unqiuevar=new expstickybar(setting)
var mystickybar=new expstickybar({
id: "stickybar", //id of sticky bar DIV
position:'bottom', //'top' or 'bottom'
revealtype:'mouseover', //'mouseover' or 'manual'
peekamount:35, //number of pixels to reveal when sticky bar is closed
externalcontent:'', //path to sticky bar content file on your server, or "" if content is defined inline on the page
speed:200 //duration of animation (in millisecs)
})
</script>
Letakan kode CSS sebelum kode ]]></b:skin><script type='text/javascript'>
jQuery.noConflict()
function expstickybar(usersetting){
var setting=jQuery.extend({position:'bottom', peekamount:30, revealtype:'mouseover', speed:200}, usersetting)
var thisbar=this
var cssfixedsupport=!document.all || document.all && document.compatMode=="CSS1Compat" && window.XMLHttpRequest //check for CSS fixed support
if (!cssfixedsupport || window.opera)
return
jQuery(function($){ //on document.ready
if (setting.externalcontent){
thisbar.$ajaxstickydiv=$('<div id="ajaxstickydiv_'+setting.id+'"></div>').appendTo(document.body) //create blank div to house sticky bar DIV
thisbar.loadcontent($, setting)
}
else
thisbar.init($, setting)
})
}
expstickybar.prototype={
loadcontent:function($, setting){
var thisbar=this
var ajaxfriendlyurl=setting.externalcontent.replace(/^http:\/\/[^\/]+\//i, "http://"+window.location.hostname+"/")
$.ajax({
url: ajaxfriendlyurl, //path to external content
async: true,
error:function(ajaxrequest){
alert('Error fetching Ajax content.<br />Server Response: '+ajaxrequest.responseText)
},
success:function(content){
thisbar.$ajaxstickydiv.html(content)
thisbar.init($, setting)
}
})
},
showhide:function(keyword, anim){
var thisbar=this, $=jQuery
var finalpx=(keyword=="show")? 0 : -(this.height-this.setting.peekamount)
var positioncss=(this.setting.position=="bottom")? {bottom:finalpx} : {top:finalpx}
this.$stickybar.stop().animate(positioncss, (anim)? this.setting.speed : 0, function(){
thisbar.$indicators.each(function(){
var $indicator=$(this)
$indicator.attr('src', (thisbar.currentstate=="show")? $indicator.attr('data-closeimage') : $indicator.attr('data-openimage'))
})
})
thisbar.currentstate=keyword
},
toggle:function(){
var state=(this.currentstate=="show")? "hide" : "show"
this.showhide(state, true)
},
init:function($, setting){
var thisbar=this
this.$stickybar=$('#'+setting.id).css('visibility', 'visible')
this.height=this.$stickybar.outerHeight()
this.currentstate="hide"
setting.peekamount=Math.min(this.height, setting.peekamount)
this.setting=setting
if (setting.revealtype=="mouseover")
this.$stickybar.bind("mouseenter mouseleave", function(e){
thisbar.showhide((e.type=="mouseenter")? "show" : "hide", true)
})
this.$indicators=this.$stickybar.find('img[data-openimage]') //find images within bar with data-openimage attribute
this.$stickybar.find('a[href=#togglebar]').click(function(){ //find links within bar with href=#togglebar and assign toggle behavior to them
thisbar.toggle()
return false
})
setTimeout(function(){
thisbar.height=thisbar.$stickybar.outerHeight() //refetch height of bar after 1 second (last change to properly get height of sticky bar)
}, 1000)
this.showhide("hide")
}
}
/////////////Initialization code://///////////////////////////
//Usage: var unqiuevar=new expstickybar(setting)
var mystickybar=new expstickybar({
id: "stickybar", //id of sticky bar DIV
position:'bottom', //'top' or 'bottom'
revealtype:'mouseover', //'mouseover' or 'manual'
peekamount:35, //number of pixels to reveal when sticky bar is closed
externalcontent:'', //path to sticky bar content file on your server, or "" if content is defined inline on the page
speed:200 //duration of animation (in millisecs)
})
</script>
.expstickybar{
position:fixed;
color: white;
padding: 5px;
right:0; /*horizontally center bar in window*/
left:0; /*horizontally center bar in window*/
visibility:hidden;
background: #e43a3d;
z-index: 10000;
width:auto; /*set width of bar to width of entire window*/
font-weight:bold;
}
.expstickybar a{
color: white;
}
Untuk urusan HTML, sobat bisa masukan didalam sesi <body> kalau tidak mau pusing bisa masukin juga dg melakukan Add a Gadget dan pilih yg HTML/Javascript :Dposition:fixed;
color: white;
padding: 5px;
right:0; /*horizontally center bar in window*/
left:0; /*horizontally center bar in window*/
visibility:hidden;
background: #e43a3d;
z-index: 10000;
width:auto; /*set width of bar to width of entire window*/
font-weight:bold;
}
.expstickybar a{
color: white;
}
<div id="stickybar" class="expstickybar">
<a href="#togglebar"><img src="open.gif" data-closeimage="close.gif" data-openimage="open.gif" style="border-width:0; float:right;" /></a>
<div style="text-align:center;padding-top:3px"><b>Copyright (c) 2010 Dynamic Drive</a></div>
More content here
</div>Resource by: http://www.dynamicdrive.com/dynamicindex17/stickybar.htm
Loading... |
5 comments
DO NOT EVEN TRY ADD LINK [-X
You can use some HTML tags, such as
<b> - <i> - <a> - http://...jpg/gif/png/bmp - http://youtu.be/...