QUANGHIEN968.: CODE CHO BLOG.

Hiển thị các bài đăng có nhãn CODE CHO BLOG.. Hiển thị tất cả bài đăng

Thứ Tư, 5 tháng 6, 2013

Script tạo menu chuột phải tùy chỉnh.

Đoạn mã javascript giúp thay đổi giao diện của Trình Menu khi click chuột phải vào website.

Nút ẩn hiện nội dung tiện ích.

Đoạn mã tạo nút giấu nội dung tiện ích và chỉ hiển thị khi người dùng click vào.

<div class="smallfont" style="margin-bottom: 0px;">
<input value="XEM" style="margin: 0px; padding: 0px; width: 100px; font-size: 12px;" onclick="if (this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display != '') { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = ''; this.innerText = ''; this.value = 'ẨN'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'XEM'; }" type="button">
</div>
<div>
<div style="display: none;">

<a href="http://anhcuatoianh968.blogspot.com/" target="_blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEizCJs47p96UEyc9LSqKUiGvP43HbAtr77HrndIWmCWefFtmK12RDB-ROAhCCAEiuFM-JSBbtEMSwrivje2bcFprttvSfAsD4mAijtO9h0jZ7lTkZ83joN91CWDshlvXOj65spikkGa8fc/s640/QUANGHIEN968.jpg" style="border:0px;" alt="" /></a>

</div>
</div>

Menu Megaanchor dạng nén nhỏ gọn .

Đoạn mã tạo một cửa sổ Menu với nhiều nhóm link liên kết, và menu chỉ trượt ra khi người dùng rê chuột vào nút.

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>

<style type="text/css">
.megamenu{
position: absolute;
display: none;
left: 0;
top: 0;
background: white;
border: 1px solid #f06b24;
border-width: 5px 5px;
padding: 10px;
font: normal 12px verdanal;
z-index: 100;

}

.megamenu .column{
float: left;
width: 180px;
margin-right: 5px;
}

.megamenu .column ul{
margin: 0;
padding: 0;
list-style-type: none;
}

.megamenu .column ul li{
padding-bottom: 5px;
}

.megamenu .column h3{
background: #e0e0e0;
font: bold 13px verdana;
margin: 0 0 5px 0;
}

.megamenu .column ul li a{
text-decoration: none;
}

.megamenu .column ul li a:hover{
color: red;
}
</style>

<script type="text/javascript">
//<![CDATA[
jQuery.noConflict();

var jkmegamenu={

effectduration: 300,
delaytimer: 200,

//No need to edit beyond here
megamenulabels: [],
megamenus: [],
zIndexVal: 1000,
$shimobj: null,

addshim:function($){
$(document.body).append('<IFRAME id="outlineiframeshim" src="'+(location.protocol=="https:"? 'blank.htm' : 'about:blank')+'" style="display:none; left:0; top:0; z-index:999; position:absolute; filter:progid:DXImageTransform.Microsoft.Alpha(style=0,opacity=0)" frameBorder="0" scrolling="no"></IFRAME>')
this.$shimobj=$("#outlineiframeshim")
},

alignmenu:function($, e, megamenu_pos){
var megamenu=this.megamenus[megamenu_pos]
var $anchor=megamenu.$anchorobj
var $menu=megamenu.$menuobj
var menuleft=($(window).width()-(megamenu.offsetx-$(document).scrollLeft())>megamenu.actualwidth)? megamenu.offsetx : megamenu.offsetx-megamenu.actualwidth+megamenu.anchorwidth //get x coord of menu
//var menutop=($(window).height()-(megamenu.offsety-$(document).scrollTop()+megamenu.anchorheight)>megamenu.actualheight)? megamenu.offsety+megamenu.anchorheight : megamenu.offsety-megamenu.actualheight
var menutop=megamenu.offsety+megamenu.anchorheight //get y coord of menu
$menu.css({left:menuleft+"px", top:menutop+"px"})
this.$shimobj.css({width:megamenu.actualwidth+"px", height:megamenu.actualheight+"px", left:menuleft+"px", top:menutop+"px", display:"block"})
},

showmenu:function(e, megamenu_pos){
var megamenu=this.megamenus[megamenu_pos]
var $menu=megamenu.$menuobj
var $menuinner=megamenu.$menuinner
if ($menu.css("display")=="none"){
this.alignmenu(jQuery, e, megamenu_pos)
$menu.css("z-index", ++this.zIndexVal)
$menu.show(this.effectduration, function(){
$menuinner.css('visibility', 'visible')
})
}
else if ($menu.css("display")=="block" && e.type=="click"){
this.hidemenu(e, megamenu_pos)
}
return false
},

hidemenu:function(e, megamenu_pos){
var megamenu=this.megamenus[megamenu_pos]
var $menu=megamenu.$menuobj
var $menuinner=megamenu.$menuinner
$menuinner.css('visibility', 'hidden')
this.$shimobj.css({display:"none", left:0, top:0})
$menu.hide(this.effectduration)
},

definemenu:function(anchorid, menuid, revealtype){
this.megamenulabels.push([anchorid, menuid, revealtype])
},

render:function($){
for (var i=0, labels=this.megamenulabels[i]; i<this.megamenulabels.length; i++, labels=this.megamenulabels[i]){
if ($('#'+labels[0]).length!=1 || $('#'+labels[1]).length!=1) //if one of the two elements are NOT defined, exist
return
this.megamenus.push({$anchorobj:$("#"+labels[0]), $menuobj:$("#"+labels[1]), $menuinner:$("#"+labels[1]).children('ul:first-child'), revealtype:labels[2], hidetimer:null})
var megamenu=this.megamenus[i]
megamenu.$anchorobj.add(megamenu.$menuobj).attr("_megamenupos", i+"pos") //remember index of this drop down menu
megamenu.actualwidth=megamenu.$menuobj.outerWidth()
megamenu.actualheight=megamenu.$menuobj.outerHeight()
megamenu.offsetx=megamenu.$anchorobj.offset().left
megamenu.offsety=megamenu.$anchorobj.offset().top
megamenu.anchorwidth=megamenu.$anchorobj.outerWidth()
megamenu.anchorheight=megamenu.$anchorobj.outerHeight()
$(document.body).append(megamenu.$menuobj) //move drop down menu to end of document
megamenu.$menuobj.css("z-index", ++this.zIndexVal).hide()
megamenu.$menuinner.css("visibility", "hidden")
megamenu.$anchorobj.bind(megamenu.revealtype=="click"? "click" : "mouseenter", function(e){
var menuinfo=jkmegamenu.megamenus[parseInt(this.getAttribute("_megamenupos"))]
clearTimeout(menuinfo.hidetimer) //cancel hide menu timer
return jkmegamenu.showmenu(e, parseInt(this.getAttribute("_megamenupos")))
})
megamenu.$anchorobj.bind("mouseleave", function(e){
var menuinfo=jkmegamenu.megamenus[parseInt(this.getAttribute("_megamenupos"))]
if (e.relatedTarget!=menuinfo.$menuobj.get(0) && $(e.relatedTarget).parents("#"+menuinfo.$menuobj.get(0).id).length==0){ //check that mouse hasn't moved into menu object
menuinfo.hidetimer=setTimeout(function(){ //add delay before hiding menu
jkmegamenu.hidemenu(e, parseInt(menuinfo.$menuobj.get(0).getAttribute("_megamenupos")))
}, jkmegamenu.delaytimer)
}
})
megamenu.$menuobj.bind("mouseenter", function(e){
var menuinfo=jkmegamenu.megamenus[parseInt(this.getAttribute("_megamenupos"))]
clearTimeout(menuinfo.hidetimer) //cancel hide menu timer
})
megamenu.$menuobj.bind("click mouseleave", function(e){
var menuinfo=jkmegamenu.megamenus[parseInt(this.getAttribute("_megamenupos"))]
menuinfo.hidetimer=setTimeout(function(){ //add delay before hiding menu
jkmegamenu.hidemenu(e, parseInt(menuinfo.$menuobj.get(0).getAttribute("_megamenupos")))
}, jkmegamenu.delaytimer)
})
} //end for loop
if(/Safari/i.test(navigator.userAgent)){ //if Safari
$(window).bind("resize load", function(){
for (var i=0; i<jkmegamenu.megamenus.length; i++){
var megamenu=jkmegamenu.megamenus[i]
var $anchorisimg=(megamenu.$anchorobj.children().length==1 && megamenu.$anchorobj.children().eq(0).is('img'))? megamenu.$anchorobj.children().eq(0) : null
if ($anchorisimg){ //if anchor is an image link, get offsets and dimensions of image itself, instead of parent A
megamenu.offsetx=$anchorisimg.offset().left
megamenu.offsety=$anchorisimg.offset().top
megamenu.anchorwidth=$anchorisimg.width()
megamenu.anchorheight=$anchorisimg.height()
}
}
})
}
else{
$(window).bind("resize", function(){
for (var i=0; i<jkmegamenu.megamenus.length; i++){
var megamenu=jkmegamenu.megamenus[i]
megamenu.offsetx=megamenu.$anchorobj.offset().left
megamenu.offsety=megamenu.$anchorobj.offset().top
}
})
}
jkmegamenu.addshim($)
}

}

jQuery(document).ready(function($){
jkmegamenu.render($)
})
//]]>
</script>

<script type="text/javascript">
//<![CDATA[
jkmegamenu.definemenu("megaanchor", "megamenu1", "mouseover")
//]]>
</script>

<a href="http://code1k.com" id="megaanchor"><img alt="" src="http://1.bp.blogspot.com/-9O6vABofi7M/UADbsT_YkNI/AAAAAAAAI0E/vv0Q_Fn3a44/s1600/create-code1k.com.png" style="border:0px"/ > MENU </a>

<div id="megamenu1" class="megamenu">

<div class="column">
<h3><img src="http://1.bp.blogspot.com/-4ilSq69ZxpA/UADbsNNWFvI/AAAAAAAAIz8/KtI7OqQ1FaI/s1600/contact-email-code1k.com.png" alt="" style="border:0px;"/ > Sản phẩm</h3>
<ul>
<li><a href="http://anhcuatoianh968.blogspot.com/"> Con trỏ chuột </a></li>
<li><a href="http://anhcuatoianh968.blogspot.com/"> Hình nền wallpaper </a></li>
<li><a href="http://anhcuatoianh968.blogspot.com/"> Hiệu ứng flash nền </a></li>
<li><a href="http://anhcuatoianh968.blogspot.com/"> Biểu tượng mặt cười </a></li>
</ul>
</div>

<div class="column">
<h3><img src="http://1.bp.blogspot.com/-w-2uSGy1Bb8/UADbt7BnQpI/AAAAAAAAI0U/XHVwCJ_KtOE/s1600/home-(4)-code1k.com.png" alt="" style="border:0px;"/ > Trang chủ</h3>
<ul>
<li><a href="http://anhcuatoianh968.blogspot.com/">Trang chủ</a></li>
<li><a href="http://anhcuatoianh968.blogspot.com/">Đăng nhập</a></li>
<li><a href="http://anhcuatoianh968.blogspot.com/">Control Panel</a></li>
<li><a href="http://anhcuatoianh968.blogspot.com/">Thoát</a></li>
</ul>
</div>

<div class="column">
<h3><img src="http://2.bp.blogspot.com/-x8e152mzDOQ/UADbrVGixHI/AAAAAAAAIz4/UnqFt_VZSzc/s1600/compass-code1k.com.png" alt="" style="border:0px;"/ > Nổi bậc</h3>
<ul>
<li><a href="http://anhcuatoianh968.blogspot.com/"> Flash nền </a></li>
<li><a href="http://anhcuatoianh968.blogspot.com/"> Hình phong cảnh </a></li>
<li><a href="http://anhcuatoianh968.blogspot.com/"> Biểu tượng </a></li>
<li><a href="http://anhcuatoianh968.blogspot.com/"> Javascript </a></li>
</ul>
</div>

<br style="clear: left" />

<div class="column">
<h3><img src="http://3.bp.blogspot.com/-dqY4knOi5OM/UADb73X9SCI/AAAAAAAAI0g/7zfEQC7N8FY/s1600/color-swatch-2-code1k.com.png" alt="" style="border:0px;"/ > Tiện ích</h3>
<ul>
<li><a href="http://anhcuatoianh968.blogspot.com/"> Mã hóa code </a></li>
<li><a href="http://anhcuatoianh968.blogspot.com/"> Dịch thuật javascript </a></li>
<li><a href="http://anhcuatoianh968.blogspot.com/"> Tối ưu CSS</a></li>
<li><a href="http://anhcuatoianh968.blogspot.com/"> Photoshop</a></li>
</ul>
</div>

<div class="column">
<h3><img src="http://2.bp.blogspot.com/-8z3Puqeyfk8/UADb8gIscnI/AAAAAAAAI0k/iK-fbKPAU1g/s1600/database-(4)-code1k.com.png" alt="" style="border:0px;"/ > Tài khoản</h3>
<ul>
<li><a href="http://anhcuatoianh968.blogspot.com/">Gmail</a></li>
<li><a href="http://anhcuatoianh968.blogspot.com/">Yahoo</a></li>
<li><a href="http://anhcuatoianh968.blogspot.com/">Google</a></li>
<li><a href="http://anhcuatoianh968.blogspot.com/">Blogger</a></li>
</ul>
</div>

<div class="column">
<h3><img src="http://3.bp.blogspot.com/-lOfGTZMh8RA/UADbtEkAAkI/AAAAAAAAI0M/sMBby1TR-Zk/s1600/delicious-code1k.com.png" alt="" style="border:0px;"/ > Tác vụ</h3>
<ul>
<li><a href="http://anhcuatoianh968.blogspot.com/">Xem thống kê</a></li>
<li><a href="http://anhcuatoianh968.blogspot.com/">Chặn IP</a></li>
<li><a href="http://anhcuatoianh968.blogspot.com/">Duyệt code</a></li>
<li><a href="http://anhcuatoianh968.blogspot.com/">Đóng góp code</a></li>
</ul>
</div>

</div>


DÁN CODE VÀO HTML/JAVA...CHỈNH LẠI CHO PHÙ HỢP VÓI BLOG CỦA BẠN. LƯU LẠI.

Thứ Ba, 4 tháng 6, 2013

[Siêu cải tiến] Script banner quảng cáo trượt 2 bên .

Đây là đoạn mã cải tiến lần cuối về hiệu ứng banner trượt dọc 2 bên website. Bổ sung tính năng cho phiên bản trước, phiên bản này 2 banner cũng sẽ tự động canh lề 2 bên nếu kích thước bề rộng trình duyệt lớn hơn 1024px để tránh tạo khoảng trống vô nghĩa trong website khi người dùng sử dụng máy tính có màn hình quá lớn.

<script type="text/javascript">
//<![CDATA[
function AdvTruotCode1k(){
if (document.body.clientWidth > 900){
document.write("<table width='110' border=0 cellspacing=0 cellpadding=0><tr><td><a href='http://www.code1k.com' target='_blank' title=''><img border='0' src='http://1.bp.blogspot.com/-Kz6dzWv6CBc/T-cT94ESXYI/AAAAAAAAIkI/2H6UpC3Vv3k/s1600/banner1-code1k.com.gif' width='110' style='margin-bottom:4px'></a></td></tr></table>");
}
}
function ShowLeftAdDiv(){
if (document.body.clientWidth > 900){
document.write("<table width='110' border=0 cellspacing=0 cellpadding=0><tr><td><a href='http://www.code1k.com' target='_blank' title=''><img border='0' src='http://4.bp.blogspot.com/-RMcPizcdDOg/T-cT-fqlfSI/AAAAAAAAIkM/RPvmguLLToA/s1600/banner2-code1k.com.gif' width='110' style='margin-bottom:4px'></a></td></tr></table>");
}
}
//]]>
</script>
<DIV id="divAdLeft" style="DISPLAY: none; POSITION: absolute; TOP: 10px"><script type="text/javascript">AdvTruotCode1k();</script></DIV>
<DIV id="divAdRight" style="DISPLAY: none; POSITION: absolute; TOP: 10px"><script type="text/javascript">ShowLeftAdDiv();</script></DIV>
<script type="text/javascript">
//<![CDATA[
window.onresize=ShowAdDiv;
function FloatTopDiv()
{

var ns = (navigator.appName.indexOf("Netscape") != -1);

if(!ns)
{
startLX = ((document.body.clientWidth -1215)/2) + 105 , startLY = 0;

startRX = ((document.body.clientWidth)/2) + 391 , startRY = 0;
}
else
{
startLX = ((document.body.clientWidth -1215)/2) + 105 , startLY = 0;
startRX = ((document.body.clientWidth -775)/2) + 778 , startRY = 0;
}
var d = document;

function ml(id)
{
var el=d.getElementById?d.getElementById(id):d.all?d.all[id]:d.layers[id];
el.sP=function(x,y){this.style.left=x;this.style.top=y;};
el.x = startRX;
el.y = startRY;
return el;
}
function m2(id)
{
var e2=d.getElementById?d.getElementById(id):d.all?d.all[id]:d.layers[id];
e2.sP=function(x,y){this.style.left=x;this.style.top=y;};
e2.x = startLX;
e2.y = startLY;
return e2;
}
window.stayTopLeft=function()
{
if (document.documentElement && document.documentElement.scrollTop)
var pY = document.documentElement.scrollTop;
else if (document.body)
var pY = document.body.scrollTop;
if (document.body.scrollTop > 10){startLY = 10;startRY = 10;} else {startLY = 10;startRY = 10;};
ftlObj.y += (pY+startRY-ftlObj.y)/16;
ftlObj.sP(ftlObj.x, ftlObj.y);
ftlObj2.y += (pY+startLY-ftlObj2.y)/16;
ftlObj2.sP(ftlObj2.x, ftlObj2.y);
setTimeout("stayTopLeft()", 1);
}
ftlObj = ml("divAdRight");
ftlObj2 = m2("divAdLeft");
stayTopLeft();
}

function ShowAdDiv()
{
var objAdDivRight = document.getElementById("divAdRight");
var objAdDivLeft = document.getElementById("divAdLeft");

if (document.body.clientWidth < 980)
{
objAdDivRight.style.display = "none";
objAdDivLeft.style.display = "none";
}
else
{

objAdDivRight.style.display = "block";
objAdDivLeft.style.display = "block";
FloatTopDiv();
}

}
ShowAdDiv();
//]]>
</script>