Jeg her en image pop up på, som henter et større image ved mouse over. Funktionen er indsat i en list view, og virker fint o Explore, men har en positions fejl i Chrome. Når listen er længere end skærmen så pupper image op i toppen af skærmen når man har scrollet ned. Det skal siges at det er en søge side på et intra net, når man kommer ind på siden, kan man søge efter dele, og denne søgning danner listview, uden at opdatere siden.
Har i et bud hvordan jeg får image pup up til at virke ved scroll i Chrome.
MVH
Oliver
Html delen ser sådan ud:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
<link rel="stylesheet" href="style.css" type="text/css">
<script src="mouseover_popup.js" language="JavaScript" type="text/javascript"></script>
</head>
<body>
<div style="display: none; position: absolute; z-index: 110; left: 400; top: 100; width: 15; height: 15" id="preview_div"></div>
<img src="99-thumbnail.png" border="0" onmouseover="showtrail('99-smart.png','hej',310,440)" onmouseout="hidetrail()"></a>
</body>
</html> CSS : a:hover {
text-decoration:none;
}
a {
text-decoration:none;
}
#interface1 {
z-index:1;
}
#loader_container {
text-align:center;
position:absolute;
top:40%;
width:100%}
#loader {
font-family:Tahoma, Helvetica, sans;
font-size:10px;
color:#000000;
background-color:#FFFFFF;
padding:10px 0 16px 0;
margin:0 auto;
display:block;
width:135px;
border:1px solid #6A6A6A;
text-align:left;
z-index:255;
}
#progress {
height:5px;
font-size:1px;
width:1px;
position:relative;
top:1px;
left:10px;
background-color:#9D9D94
}
#loader_bg {
background-color:#EBEBE4;
position:relative;
top:8px;left:8px;height:7px;
width:113px;font-size:1px
}
.border_preview{
z-index:100;
position:absolute;
background: #fff;
border: 1px solid #444;
}
.preview_temp_load {
vertical-align:middle;
text-align:center;
padding: 10px;
}
.preview_temp_load img{
vertical-align:middle;
text-align:center;
}
/*Image Title Styling*/
.title_h2 {
padding:12px 0 0 18px;
}
h2 {
font-size:14px;
padding:0;
margin:0;
font-family: "century gothic";
} Javascript: var offsetfrommouse=[15,25]; //image x,y offsets from cursor position in pixels. Enter 0,0 for no offset
var displayduration=0; //duration in seconds image should remain visible. 0 for always.
var defaultimageheight = 40; // maximum image size.
var defaultimagewidth = 40; // maximum image size.
var timer;
function gettrailobj(){
if (document.getElementById)
return document.getElementById("preview_div").style
}
function gettrailobjnostyle(){
if (document.getElementById)
return document.getElementById("preview_div")
}
function truebody(){
return (!window.opera && document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body
}
function hidetrail(){
gettrailobj().display= "none";
document.onmousemove=""
gettrailobj().left="-500px"
clearTimeout(timer);
}
function showtrail(imagename,title,width,height){
i = imagename
t = title
w = width
h = height
timer = setTimeout("show('"+i+"',t,w,h);",200);
}
function show(imagename,title,width,height){
var docwidth=document.all? truebody().scrollLeft+truebody().clientWidth : pageXOffset+window.innerWidth - offsetfrommouse[0]
var docheight=document.all? Math.min(truebody().scrollHeight, truebody().clientHeight) : Math.min(window.innerHeight)
if( (navigator.userAgent.indexOf("Konqueror")==-1 || navigator.userAgent.indexOf("Firefox")!=-1 || (navigator.userAgent.indexOf("Opera")==-1 && navigator.appVersion.indexOf("MSIE")!=-1)) && (docwidth>650 && docheight>500)) {
( width == 0 ) ? width = defaultimagewidth: '';
( height == 0 ) ? height = defaultimageheight: '';
width+=30
height+=55
defaultimageheight = height
defaultimagewidth = width
document.onmousemove=followmouse;
newHTML = '<div class="border_preview" style="width:'+ width +'px;height:'+ height +'px"><div id="loader_container"><div id="loader"><div align="center">Loading image preview...</div><div id="loader_bg"><div id="progress"> </div></div></div></div>';
newHTML = newHTML + '<h2 class="title_h2">' + ' '+title + '</h2>'
newHTML = newHTML + '<div class="preview_temp_load"><img onload="javascript:remove_loading();" src="' + imagename + '" border="0"></div>';
newHTML = newHTML + '</div>';
if(navigator.userAgent.indexOf("MSIE")!=-1 && navigator.userAgent.indexOf("Opera")==-1 ){
newHTML = newHTML+'<iframe src="about:blank" scrolling="no" frameborder="0" width="'+width+'" height="'+height+'"></iframe>';
}
gettrailobjnostyle().innerHTML = newHTML;
gettrailobj().display="block";
}
}
function followmouse(e){
var xcoord=offsetfrommouse[0]
var ycoord=offsetfrommouse[1]
var docwidth=document.all? truebody().scrollLeft+truebody().clientWidth : pageXOffset+window.innerWidth-15
var docheight=document.all? Math.min(truebody().scrollHeight, truebody().clientHeight) : Math.min(window.innerHeight)
if (typeof e != "undefined"){
if (docwidth - e.pageX < defaultimagewidth + 2*offsetfrommouse[0]){
xcoord = e.pageX - xcoord - defaultimagewidth; // Move to the left side of the cursor
} else {
xcoord += e.pageX;
}
if (docheight - e.pageY < defaultimageheight + 2*offsetfrommouse[1]){
ycoord += e.pageY - Math.max(0,(2*offsetfrommouse[1] + defaultimageheight + e.pageY - docheight - truebody().scrollTop));
} else {
ycoord += e.pageY;
}
} else if (typeof window.event != "undefined"){
if (docwidth - event.clientX < defaultimagewidth + 2*offsetfrommouse[0]){
xcoord = event.clientX + truebody().scrollLeft - xcoord - defaultimagewidth; // Move to the left side of the cursor
} else {
xcoord += truebody().scrollLeft+event.clientX
}
if (docheight - event.clientY < (defaultimageheight + 2*offsetfrommouse[1])){
ycoord += event.clientY + truebody().scrollTop - Math.max(0,(2*offsetfrommouse[1] + defaultimageheight + event.clientY - docheight));
} else {
ycoord += truebody().scrollTop + event.clientY;
}
}
gettrailobj().left=xcoord+"px"
gettrailobj().top=ycoord+"px"
}
/* alt.js */
var timerId = null
var obj = new Array()
function prepareShowAlt(event){
idd = this.id
if (idd.search("title_") == 0){
idd = idd.substring(6)
if ((typeof titles != "undefined") && (typeof titles[idd] != "undefined") && titles[idd].length > 0){
text = titles[idd]
}else{
return;
}
}else{
return
}
x = 0;
y = 0;
oX = 0;
if (document.all){
x = window.event.clientX
y = window.event.clientY + document.body.scrollTop
}else{
x = event.clientX - oX
y = event.clientY + window.scrollY
}
x += Math.round(xs[idd])
y += Math.round(ys[idd])
obj = new Array()
obj[0] = text
obj[1] = x
obj[2] = y
timerId = setTimeout("showAlt()", 500);
}
function showAlt(){
text = obj[0]
x = obj[1]
y = obj[2]
altd = document.getElementById('altDiv')
altd.innerHTML = "<table cellpadding=3 cellspacing=0 style='background-color: #EEF6FF; border: solid #6A91B4 1px; font-family: tahoma;" + (text.length > 30 ? "width: 200px;" : "") +"'><tr><td style='color: #414041; font-size: 11px;'>" + text + "</td></tr></table>"
altd.style.left = Math.min(x + 10,document.body.clientWidth-201)
altd.style.top = y
altd.style.display = 'inline'
}
function hideAlt(){
obj = new Array()
clearTimeout(timerId)
altd = document.getElementById('altDiv')
altd.innerHTML = ""
altd.style.left = -100
altd.style.top = -100
altd.style.display = 'none'
}
function initAlts(){
arr = document.getElementsByName('title')
titles = new Array()
xs = new Array()
ys = new Array()
for (i=0; i<arr.length; i++){
itemm = arr.item(i)
itemm.onmouseover = prepareShowAlt
itemm.onmouseout = hideAlt
itemm.id = "title_" + i
titlesIdea = itemm.title
xsIdea = (typeof itemm.xs == 'undefined' ? 0 : itemm.xs)
ysIdea = (typeof itemm.ys == 'undefined' ? 0 : itemm.ys)
itemm.title = ""
}
}
/* loader.js */
var t_id = setInterval(animate,20);
var pos=0;
var dir=2;
var len=0;
function animate()
{
var elem = document.getElementById('progress');
if(elem != null) {
if (pos==0) len += dir;
if (len>32 || pos>79) pos += dir;
if (pos>79) len -= dir;
if (pos>79 && len==0) pos=0;
elem.style.left = pos;
elem.style.width = len;
}
}
function remove_loading() {
this.clearInterval(t_id);
var targelem = document.getElementById('loader_container');
targelem.style.display='none';
targelem.style.visibility='hidden';
var t_id = setInterval(animate,60);
}
