10/10/2018, 10:54
Tạo thẻ Div cố định ở bottom
Bạn nào có Code tạo 1 thẻ Div cố định ở vị trí bottom
Khi mình scroll thì nó chạy theo và nằm cố định ở đó
Giống thanh SanVietNam trong trang web http://sandautu.vn/
Thanks All
Mình đang cần Gấp
Khi mình scroll thì nó chạy theo và nằm cố định ở đó
Giống thanh SanVietNam trong trang web http://sandautu.vn/
Thanks All
Mình đang cần Gấp
Bài liên quan
bạn viết 1 file Style.css với 1 class là .divOnTop như sau:
.divOnTop { color:#FFFFFF; left:0px; height:26px; width:100%; background-color:Blue; /* Text Always Center */ line-height:26px; /* position on bottom */ bottom: 0px; /* Thay: bottom: 0px; = top: 0px; neu muon o tren dau trang */ position: fixed; z-index: 100; /* transparent background */ opacity:.75; filter: alpha(opacity=75); -moz-opacity: 0.75; }bởi vì IE6 không hiểu thuộc tính position: fixed; của CSS
chúng ta sẽ fix bằng file javascript tải ở đây
http://www.doxdesk.com/file/software/js/fixed.js
sau đó vô trang chủ trong thẻ <head> nhé
Muốn canh giữa cho cái Div này và làm cho nó trong suốt thì sao vậy bác
Muốn canh cái này bottom thì sao bác
-------------------------------------------------------------------------------------
<qoute>
<Head>
<style type="text/css">
#topbar{
position:absolute;
border: 1px solid black;
padding: 2px;
background-color: lightyellow;
width: 1000px;
bottom: 0px
height: 60px;
visibility: hidden;
z-index: 100;
}
</style>
</head>
<body background ="FF0000" width ="1000" height ="768">
<!-- floating ad-->
<div id="topbar" width ="998" height ="60" class="gradualfader">
<table border="1" width="996" style="border-collapse: collapse" height="58" id="table1">
<tr>
<td >
<table width="970">
<tr>
<td>
<p align="right"><font face="Tahoma" size="2">Quảng cáo ở đây</font></td>
</tr>
</table>
</td>
<td>
<a href="" onClick="closebar(); return false"><img src="close.gif" border="0" align="right" alt="Thanks for viewing me ^_^! " /></a>
</td>
</tr>
</table>
</div>
<!-- Left Floating Ad-->
<script type="text/javascript" src="ad.js"></script>
<script type="text/javascript" src="gradualfader.js"></script>
<!-- /Left Floating Ad-->
<script type="text/javascript">
gradualFader.init() // <-- activate gradual fader
gradualFader.baseopacity=0.6 //Độ trong suốt khi không hover chuột qua (số thập phân nhỏ hơn 1)
gradualFader.increment=0.2 //Độ tăng giảm trong suốt mỗi lần hover chuột qua (nên để: 0.1 or 0.2)
</script>
<!-- /floating ad-->
</body>
</qoute>
-------------------------------------------------------------------------------
File <b>ad.js</b>
-----------------
<quote>var persistclose=0 //set to 0 or 1. 1 means once the bar is manually closed, it will remain closed for browser session
var startX = 5 //set x offset of bar in pixels
var startY = 40 //set y offset of bar in pixels
var verticalpos="fromtop" //enter "fromtop" or "frombottom"
function iecompattest(){
return (document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body
}
function get_cookie(Name) {
var search = Name + "="
var returnvalue = "";
if (document.cookie.length > 0) {
offset = document.cookie.indexOf(search)
if (offset != -1) {
offset += search.length
end = document.cookie.indexOf(";", offset);
if (end == -1) end = document.cookie.length;
returnvalue=unescape(document.cookie.substring(off set, end))
}
}
return returnvalue;
}
function closebar(){
if (persistclose)
document.cookie="remainclosed=1"
document.getElementById("topbar").style.visibility ="hidden"
}
function staticbar(){
barheight=document.getElementById("topbar").offset Height
var ns = (navigator.appName.indexOf("Netscape") != -1) || window.opera;
var d = document;
function ml(id){
var el=d.getElementById(id);
if (!persistclose || persistclose && get_cookie("remainclosed")=="")
el.style.visibility="visible"
if(d.layers)el.style=el;
el.sP=function(x,y){this.style.left=x+"px";this.st yle.top=y+"px";};
el.x = startX;
if (verticalpos=="fromtop")
el.y = startY;
else{
el.y = ns ? pageYOffset + innerHeight : iecompattest().scrollTop + iecompattest().clientHeight;
el.y -= startY;
}
return el;
}
window.stayTopLeft=function(){
if (verticalpos=="fromtop"){
var pY = ns ? pageYOffset : iecompattest().scrollTop;
ftlObj.y += (pY + startY - ftlObj.y)/8;
}
else{
var pY = ns ? pageYOffset + innerHeight - barheight: iecompattest().scrollTop + iecompattest().clientHeight - barheight;
ftlObj.y += (pY - startY - ftlObj.y)/8;
}
ftlObj.sP(ftlObj.x, ftlObj.y);
setTimeout("stayTopLeft()", 10);
}
ftlObj = ml("topbar");
stayTopLeft();
}
if (window.addEventListener)
window.addEventListener("load", staticbar, false)
else if (window.attachEvent)
window.attachEvent("onload", staticbar)
else if (document.getElementById)
window.onload=staticbar</quote>
------------------------------------------------------------------------------------
File <b>gradualfader.js</b>
---------------------------
<quote>//Gradual Elements Fader- By Dynamic Drive at http://www.dynamicdrive.com
//Last updated: Nov 8th, 07'
var gradualFader={}
gradualFader.baseopacity=0.6 //Độ trong suốt khi không hover chuột qua (số thập phân nhỏ hơn 1)
gradualFader.increment=0.2 //Độ tăng giảm trong suốt mỗi lần hover chuột qua (nên để: 0.1 or 0.2)
document.write('<style type="text/css">\n') //write out CSS to enable opacity on "gradualfader" class
document.write('.gradualfader{filter:progid
document.write('</style>')
gradualFader.setopacity=function(obj, value){ //Sets the opacity of targetobject based on the passed in value setting (0 to 1 and in between)
var targetobject=obj
if (targetobject && targetobject.filters && targetobject.filters[0]){ //IE syntax
if (typeof targetobject.filters[0].opacity=="number") //IE6
targetobject.filters[0].opacity=value*100
else //IE 5.5
targetobject.style.filter="alpha(opacity="+value*1 00+")"
}
else if (targetobject && typeof targetobject.style.MozOpacity!="undefined") //Old Mozilla syntax
targetobject.style.MozOpacity=value
else if (targetobject && typeof targetobject.style.opacity!="undefined") //Standard opacity syntax
targetobject.style.opacity=value
targetobject.currentopacity=value
}
gradualFader.fadeupdown=function(obj, direction){
var targetobject=obj
var fadeamount=(direction=="fadeup")? this.increment : -this.increment
if (targetobject && (direction=="fadeup" && targetobject.currentopacity<1 || direction=="fadedown" && targetobject.currentopacity>this.baseopacity)){
this.setopacity(obj, targetobject.currentopacity+fadeamount)
window["opacityfader"+obj._fadeorder]=setTimeout(function(){gradualFader.fadeupdown(obj , direction)}, 50)
}
}
gradualFader.clearTimer=function(obj){
if (typeof window["opacityfader"+obj._fadeorder]!="undefined")
clearTimeout(window["opacityfader"+obj._fadeorder])
}
gradualFader.isContained=function(m, e){
var e=window.event || e
var c=e.relatedTarget || ((e.type=="mouseover")? e.fromElement : e.toElement)
while (c && c!=m)try {c=c.parentNode} catch(e){c=m}
if (c==m)
return true
else
return false
}
gradualFader.fadeinterface=function(obj, e, direction){
if (!this.isContained(obj, e)){
gradualFader.clearTimer(obj)
gradualFader.fadeupdown(obj, direction)
}
}
gradualFader.collectElementbyClass=function(classn ame){ //Returns an array containing DIVs with specified classname
var classnameRE=new RegExp("(^|\\s+)"+classname+"($|\\s+)", "i") //regular expression to screen for classname within element
var pieces=[]
var alltags=document.all? document.all : document.getElementsByTagName("*")
for (var i=0; i<alltags.length; i++){
if (typeof alltags[i].className=="string" && alltags[i].className.search(classnameRE)!=-1)
pieces[pieces.length]=alltags[i]
}
return pieces
}
gradualFader.init=function(){
var targetobjects=this.collectElementbyClass("gradualf ader")
for (var i=0; i<targetobjects.length; i++){
targetobjects[i]._fadeorder=i
this.setopacity(targetobjects[i], this.baseopacity)
targetobjects[i].onmouseover=function(e){gradualFader.fadeinterfac e(this, e, "fadeup")}
targetobjects[i].onmouseout=function(e){gradualFader.fadeinterface (this, e, "fadedown")}
}
}</quote>
------------------------------------------------------------------------------------
P/s: Muốn chía HTML thành frame trên và dưới thì thế nào
frame 1: cao 600
frame 2: cao 100
.divOnTop { color:#FFFFFF; left:0px; height:26px; width:100%; background-color:Blue; /* Text Always Center */ line-height:26px; /* position on bottom */ bottom: 0px; /* Thay: bottom: 0px; = top: 0px; neu muon o tren dau trang */ position: fixed; z-index: 100; /* transparent background */ /********* lam trong suot mau nen *********/ opacity:.75; filter: alpha(opacity=75); -moz-opacity: 0.75; }http://w3schools.com/html/html_frames.asp
http://www.w3.org/TR/REC-html40/present/frames.html
http://www.w3schools.com/tags/tag_frame.asp
http://www.htmlcodetutorial.com/frames/_FRAMESET.html
http://www.google.com.vn/search?hl=v...1%BA%BFm&meta=
Thân.
p/s: code của bạn khó nhìn quá @-) @-) nên tách riêng javascript và css ra
<script> </script>
thank bác rất nhiều.
[=========> Bổ sung bài viết <=========]
nhưng đâu có giống pooter của trang www.sandautu.vn
<html> <body> <div> <p>12346</p> <p>12346</p> <p>12346</p> <p>12346</p> <p>12346</p> <p>12346</p> <p>12346</p> <p>12346</p> <p>12346</p> <p>12346</p> <p>12346</p> <p>12346</p> <p>12346</p> <p>12346</p> <p>12346</p> <p>12346</p> <p>12346</p> <p>12346</p> <div id="AlwayOnBot" style="position:absolute;background:gray;width:98%;_width:100%;border:solid 1px black;text-align:center">Bottom Banner</div> </div> <script type="text/javascript"> MoveBottom(); function MoveBottom() { var objDiv=document.getElementById("AlwayOnBot"); if (document.all) objDiv.style.top=(document.body.offsetHeight+document.body.scrollTop-30)+"px"; else objDiv.style.top=(document.body.offsetHeight+document.body.scrollTop-50)+"px"; } window.onscroll=MoveBottom; </script> </body> </html>còn bài dangvietthai thì mình chịu , ko làm được . cái đoạn code cho vào head thì chép về nó là đoạn trích dẫn , phải sửa mới được .
còn cái file fix.js chả biết để làm gì ?