Svar: Hjælp til Css i chrome

Anonymous — Wed, 12 Mar 2014 02:36:25 GMT

Hej Oliver.

Jeg tror ikke dette forum er det rigtige sted at poste dette. Prøv Stackoverflow.

Udover det, kan det være fordi din container omkring liste elementet ikke har en position og derfor tager chrome udgangspunkt i din <body>. Jeg har nok brug for at se siden live, hvis jeg skal kunne hjælpe yderligere. Det er ikke lige til at gennemskue din kode ovenfor.

Hjælp til Css i chrome

pvc manden — Mon, 10 Mar 2014 08:09:43 GMT

Hej Aminoer

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
titles = itemm.title
xs = (typeof itemm.xs == 'undefined' ? 0 : itemm.xs)
ys = (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);
}

Teknik, hosting & e-handelsløsninger

Svar: Hjælp til Css i chrome

Hjælp til Css i chrome