|
 |
| |
เกี่ยวกับdock menu ตาม scrollbar น่ะครับใน ie 6 และ css คร้าบบบบบบ |
| |
 |
|
|
 |
 |
|
ด้านล่างเป็นโคดหน้า INDEX ครับ
Code (PHP)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
<title>Issue 38 March - April 2011 >>> IMPACT Family paper</title>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/interface.js"></script>
<script type="text/javascript" src="js/fisheye_patched.js"></script>
<script language="JavaScript" type="text/javascript">
var HttPRequest = false;
function doCallAjax(url) {
HttPRequest = false;
if (window.XMLHttpRequest) { // Mozilla, Safari,...
HttPRequest = new XMLHttpRequest();
if (HttPRequest.overrideMimeType) {
HttPRequest.overrideMimeType('text/html');
}
} else if (window.ActiveXObject) { // IE
try {
HttPRequest = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try {
HttPRequest = new ActiveXObject("Microsoft.XMLHTTP");
} catch (e) {}
}
}
if (!HttPRequest) {
alert('Cannot create XMLHTTP instance');
return false;
}
var pmeters = "";
HttPRequest.open('POST',url,true);
HttPRequest.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
HttPRequest.setRequestHeader("Content-length", pmeters.length);
HttPRequest.setRequestHeader("Connection", "close");
HttPRequest.send(pmeters);
HttPRequest.onreadystatechange = function()
{
if(HttPRequest.readyState == 3) // Loading Request
{
document.getElementById("mySpan").innerHTML = "Now is Loading...";
}
if(HttPRequest.readyState == 4) // Return Request
{
document.getElementById('mySpan').innerHTML = HttPRequest.responseText;
}
}
}
</script>
<!--[if lt IE 7]>
<style type="text/css">
.dock img { behavior: url(iepngfix.htc) }
</style>
<![endif]-->
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body Onload="JavaScript:doCallAjax('1.php');">
<div align="center"><span id="mySpan" ></span></div>
<!--bottom dock -->
<div class="dock" id="dock2">
<div class="dock-container2">
<a class="dock-item2" href="JavaScript:doCallAjax('1.php');"><span>Home</span><img src="images/dock/dock_01.jpg" alt="home" /></a>
<a class="dock-item2" href="JavaScript:doCallAjax('2.php');"><span>2</span><img src="images/dock/dock_02.jpg" alt="2" /></a>
<a class="dock-item2" href="JavaScript:doCallAjax('3.php');"><span>3</span><img src="images/dock/dock_03.jpg" alt="3" /></a>
<a class="dock-item2" href="JavaScript:doCallAjax('4.php');"><span>4</span><img src="images/dock/dock_04.jpg" alt="4" /></a>
<a class="dock-item2" href="JavaScript:doCallAjax('5.php');"><span>5</span><img src="images/dock/dock_05.jpg" alt="5" /></a>
<a class="dock-item2" href="JavaScript:doCallAjax('6.php');"><span>6</span><img src="images/dock/dock_06.jpg" alt="6" /></a>
<a class="dock-item2" href="JavaScript:doCallAjax('7.php');"><span>7</span><img src="images/dock/dock_07.jpg" alt="7" /></a>
<a class="dock-item2" href="JavaScript:doCallAjax('8.php');"><span>8</span><img src="images/dock/dock_08.jpg" alt="8" /></a>
<a class="dock-item2" href="JavaScript:doCallAjax('9.php');"><span>9</span><img src="images/dock/dock_09.jpg" alt="9" /></a>
<a class="dock-item2" href="JavaScript:doCallAjax('10.php');"><span>10</span><img src="images/dock/dock_10.jpg" alt="10" /></a>
<a class="dock-item2" href="JavaScript:doCallAjax('11.php');"><span>11</span><img src="images/dock/dock_11.jpg" alt="11" /></a>
<a class="dock-item2" href="JavaScript:doCallAjax('12.php');"><span>15</span><img src="images/dock/dock_12.jpg" alt="12" /></a>
<a class="dock-item2" href="JavaScript:doCallAjax('13.php');"><span>13</span><img src="images/dock/dock_13.jpg" alt="13" /></a>
<a class="dock-item2" href="JavaScript:doCallAjax('14.php');"><span>14</span><img src="images/dock/dock_14.jpg" alt="14" /></a>
<a class="dock-item2" href="JavaScript:doCallAjax('15.php');"><span>15</span><img src="images/dock/dock_15.jpg" alt="15" /></a>
<a class="dock-item2" href="JavaScript:doCallAjax('16.php');"><span>16</span><img src="images/dock/dock_16.jpg" alt="16" /></a>
<a class="dock-item2" href="JavaScript:doCallAjax('17.php');"><span>17</span><img src="images/dock/dock_17.jpg" alt="17" /></a>
<a class="dock-item2" href="JavaScript:doCallAjax('18.php');"><span>18</span><img src="images/dock/dock_18.jpg" alt="18" /></a>
<a class="dock-item2" href="JavaScript:doCallAjax('19.php');"><span>19</span><img src="images/dock/dock_19.jpg" alt="19" /></a>
<a class="dock-item2" href="JavaScript:doCallAjax('20.php');"><span>20</span><img src="images/dock/dock_20.jpg" alt="20" /></a>
<a class="dock-item2" href="JavaScript:doCallAjax('21.php');"><span>21</span><img src="images/dock/dock_21.jpg" alt="21" /></a>
<a class="dock-item2" href="JavaScript:doCallAjax('22.php');"><span>22</span><img src="images/dock/dock_22.jpg" alt="22" /></a>
<a class="dock-item2" href="JavaScript:doCallAjax('23.php');"><span>23</span><img src="images/dock/dock_23.jpg" alt="23" /></a>
<a class="dock-item2" href="JavaScript:doCallAjax('24.php');"><span>24</span><img src="images/dock/dock_24.jpg" alt="24" /></a>
<a class="dock-item2" href="JavaScript:doCallAjax('25.php');"><span>25</span><img src="images/dock/dock_25.jpg" alt="25" /></a>
<a class="dock-item2" href="JavaScript:doCallAjax('26.php');"><span>26</span><img src="images/dock/dock_26.jpg" alt="26" /></a>
</div>
</div>
<!--dock menu JS options -->
<script type="text/javascript">
$(document).ready(
function()
{
$('#dock2').Fisheye(
{
maxWidth: 60,
items: 'a',
itemsText: 'span',
container: '.dock-container2',
itemWidth: 40,
proximity: 80,
alignment : 'left',
valign: 'bottom',
halign : 'center'
}
)
}
);
</script>
</body>
</html>
ด้านล่างเป็น Script Css ที่ใช้สำหรับคุมครับ
Code (JavaScript)
body {
font: 11px Arial, Helvetica, sans-serif;
background: #ffffff url(images/main-bg.gif);
margin:0px;
padding:0px;
}
img {
border: 0px;
}
/* dock - top */
.dock {
position: relative;
height: 50px;
text-align: center;
}
.dock-container {
position: absolute;
height: 50px;
background: url(images/dock-bg2.gif);
padding-left: 20px;
}
a.dock-item {
display: block;
width: 40px;
color: #000;
position: absolute;
top: 0px;
text-align: center;
text-decoration: none;
font: bold 12px Arial, Helvetica, sans-serif;
}
.dock-item img {
border: 0px;
margin: 5px 10px 0px;
width: 100%;
}
.dock-item span {
display: none;
padding-left: 20px;
}
/* dock2 - bottom */
#dock2 {
width: 100%;
bottom: 0px;
position: fixed!important;
position: fixed;
left: 0px;
}
.dock-container2 {
position: fixed!important;
position: absolute;
height: 50px;
background: url(images/dock-bg.gif);
}
a.dock-item2 {
display: block;
font: bold 12px Arial, Helvetica, sans-serif;
width: 40px;
color: #000;
bottom: 0px;
position: absolute;
text-align: center;
text-decoration: none;
}
.dock-item2 span {
display: none;
}
.dock-item2 img {
border: 0px;
width: 100%;
}
ปัญหาคือใน ie 6 น่ะครับมันแสดงผลไม่เหมือนกับ ie 8 ครับ คือ ผมอยากให้ dock menu ตาม scrollbar น่ะครับใน ie 6 ซึ่ง ie 8 แสดงผลได้ตามที่ผมต้องการทุกอย่างครับ มีปัญหาอยู่ที่ ie 6 เท่านั้นครับ รบกวนผู้รู้ด้วยครับ ขอบคุณครับ
Tag : PHP, MySQL, HTML/CSS, JavaScript, jQuery
|
|
|
 |
 |
 |
 |
| Date :
2011-02-21 18:31:47 |
By :
weerayos |
View :
1048 |
Reply :
2 |
|
 |
 |
 |
 |
|
|
|
|
 |
 |
|
 |
 |
| |
|
|
|
| |
|
ง่าาาาา เงียบเลยยย
|
| |
|
|
| |
| Date :
2011-02-21 20:25:58 |
By :
weerayos |
|
|
| |
|
|
|
|
|
| |
|
|
|
| |
|
|
|
| |
|
มีภาพประกอบเปล่าอ่ะ มันดูแบบนี้ไม่ออกหรอ ถ้ามีภาพประกอบ คนอื่นจะได้ช่วยได้ครับ
|
| |
|
|
| |
| Date :
2011-02-21 21:55:43 |
By :
somparn |
|
|
| |
|
|
|
|
|
| |
|
|
|
|
|
| |
|
 Load balance : Server 03
|
