Frågan#1
Hej,
jag har efter ett antal försök äntligen fått mitt fönster att fungera. Det återstår dock två problem, att få max- och min knapparna att fungera, samt att kunna ändra storlek på dem, via "högra hörnet"
sidan hittar ni här: =http://www.student.bth.se/\~heba02/webbproduktion/index3.html\]Exempel
är det någon som orkar kolla igenom min kod, och kanske ge mig exempel på hur man på ett bättre sätt kan bygga upp detta fönster? samt kanske kan hälpa mig med max- min- och "resize" funktionerna? Jag tycker också att fönstret är ryckigt när man flyttar det vertikalt. Horisontalt går det bättre, kan detta bero på Iframen?
sedan får jag ett fel på rad 91
function openWin(windowName, contentName, topWin, leftWin, winMinWidth, winMinHeight){
if(ie5 || ns6){
dragWind = document.getElementById(windowName);
dragCont = document.getElementById(contentName);
dragWind.style.visibility = "visible";
dragWind.style.top = topWin;
dragWind.style.left = leftWin;
dragWind.style.width = winMinWidth;
dragWind.style.height = winMinHeight;
---> rad 91 dragCont.style.top = 20;
dragCont.style.left = 0;
dragCont.style.width = ns6?winMinWidth:winMinWidth-6;
dragCont.style.height = ns6?winMinHeight-20:winMinHeight-24;
dragWind.style.zIndex = (start.zCount++);
}
}
bifogar koden...
tacksam för all hjälp.
<?xml version="1.0" encoding="iso-8859-1"?>
<!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="content-type" content="text/html;charset=iso-8859-1"/>
<title>Test</title>
<style type="text/css" media="screen"><!--
body {width:100%; height:100%; margin:0px; overflow:auto;}
#container {position:absolute; visibility: hidden}
.titlebar {position:absolute; left:0px; top:0px; width:100%; border:0px; background-color:#abcabc;}
.wins {position:absolute; border:0px outset #000000; overflow:hidden}
.text {position:absolute; background-color:#c0c0c0; width:100%; left:0px; font-family:verdana; font-size:10px; border:0px;
overflow:auto;}
.title {font-weight:bold; color:#ffffff; font-family:verdana; font-size:10px;}
p {margin:0px;}
--></style>
<SCRIPT LANGUAGE="JavaScript">
var ie5 = (document.getElementById && document.all);
var ns6 = (!document.all && document.getElementById);
var timerID = null;
var active = 0;
function start(windowName, contentName){
if(ie5 || ns6){
dragWind = document.getElementById(windowName);
dragCont = document.getElementById(contentName);
y = coordsY-parseInt(dragWind.style.top);
x = coordsX-parseInt(dragWind.style.left);
dragWind.style.zIndex = (start.zCount++);
active=1;
}
}
start.zCount=0;
function drag(e){
if(ie5 || ns6){
coordsY = ns6?e.clientY:event.clientY;
coordsX = ns6?e.clientX:event.clientX;
if(active){
dragWind.style.top = coordsY-y;
dragWind.style.left = coordsX-x;
}
}
}
function closeWin(){
if(ie5 || ns6){
dragWind.style.left= -3000;
}
}
function maxWin(winMaxWidth, winMaxHeight){
if(ie5 || ns6){
dragWind.style.width = winMaxWidth;
dragWind.style.height = winMaxHeight;
dragCont.style.width = ns6?winMaxWidth:winMaxWidth-6;
dragCont.style.height = ns6?winMaxHeight-20:winMaxHeight-24;
}
}
function minWin(winMinWidth, winMinHeight){
if(ie5 || ns6){
dragWind.style.width = winMinWidth;
dragWind.style.height = winMinHeight;
dragCont.style.width = ns6?winMinWidth:winMinWidth-6;
dragCont.style.height = ns6?winMinHeight-20:winMinHeight-24;
}
}
function openWin(windowName, contentName, topWin, leftWin, winMinWidth, winMinHeight){
if(ie5 || ns6){
dragWind = document.getElementById(windowName);
dragCont = document.getElementById(contentName);
dragWind.style.visibility = "visible";
dragWind.style.top = topWin;
dragWind.style.left = leftWin;
dragWind.style.width = winMinWidth;
dragWind.style.height = winMinHeight;
dragCont.style.top = 20;
dragCont.style.left = 0;
dragCont.style.width = ns6?winMinWidth:winMinWidth-6;
dragCont.style.height = ns6?winMinHeight-20:winMinHeight-24;
dragWind.style.zIndex = (start.zCount++);
}
}
function dragInit(){
if(ie5 || ns6){
imgs = document.getElementById("container").getElementsByTagName("IMG");
for(var i=0; i<imgs.length;i++){
imgs[i].style.cursor = (ie5)?"hand":"pointer";
imgs[i].ondragstart = new Function("return false");
}
openWin('wind1','cont1',50,300,300,200);
}
}
document.onmousemove = drag;
document.onmouseup = new Function("active=0");
document.onselectstart = new Function("return false");
onload=dragInit;
function hidden()
{document.body.style.overflow='hidden';}
function unhidden()
{document.body.style.overflow='';}
</script>
</head>
<body onload="hidden()" background="henrikanna.jpg" leftmargin="0" marginheight="0" marginwidth="0" topmargin="0">
<p>
<a href="#" onclick="openWin('wind1','cont1',50,300,500,400)">Öppna fönster</a><br>
</p>
<div id="container">
<!-- window 1 -->
<div id="wind1" class="wins">
<table width=100% height=100% border=0 cellspacing=0 cellpadding=0>
<tr height=24><td><table width=100% height=24 border=0 cellspacing=0 cellpadding=0 class="titlebar" onmousedown="start('wind1','cont1');">
<tr>
<td width=31 background=bordergfx/top_left.png><img src=bordergfx/empty.gif><img src=bordergfx/empty.gif><img src=bordergfx/empty.gif><img src=bordergfx/empty.gif><img src=bordergfx/close_1.png width=16 height=16 onclick="closeWin()" title="close"></td>
<td background=bordergfx/top_mid.png><b>iBrowse - [url]www.aftonbladet.se[/url]</b></td>
<td width=41 background=bordergfx/top_right.png align=right><img src=bordergfx/minimize_1.png width=16 height=16><img src=bordergfx/empty.gif><img src=bordergfx/maximize_1.png width=16 height=16><img src=bordergfx/empty.gif><img src=bordergfx/empty.gif><img src=bordergfx/empty.gif><img src=bordergfx/empty.gif><img src=bordergfx/empty.gif></td>
</tr>
</table></td></tr>
<tr><td><table width=100% height=100% border=0 cellspacing=0 cellpadding=0>
<tr>
<td width=4>
<table width=100% height=100% border=0 cellspacing=0 cellpadding=0>
<tr height=17><td width=4 background=bordergfx/left_top.png></td></tr>
<tr><td width=4 background=bordergfx/left_mid.png></td></tr>
</table>
</td>
<td>
<iframe src="http://www.vecka.nu" scrolling=auto frameborder=0 width=100% height=100%></iframe>
</td>
<td background=bordergfx/right_mid.png width=4></td>
</tr>
</table></td></tr>
<tr height=19><td><table width=100% height=19 border=0 cellspacing=0 cellpadding=0>
<tr>
<td width=7 background=bordergfx/bottom_left.png></td>
<td background=bordergfx/bottom_mid.png>statusrad</td>
<td width=24 background=bordergfx/bottom_right.png></td>
</tr>
</table></td></tr>
</table>
</div>
</body>
</html>