Søg
Avatar billede theselfimages Nybegynder
30. juli 2003 - 02:37 Der er 34 kommentarer og
1 løsning

Matematisk X højde udregning

Er det muligt at lave en matematisk udregning for følgende:

Hvis højden X er = 300 px.
ved er skærmopløsning på 768 px. i højden...

Hvad vil den så være for de øvrige skærmløsninger, beregnet på højden?

Resultatet af X værdien for de forskellige skærmopløsninger, skal kunne indsættes et bestemt sted på ASP/HTML siden med en simpel: <%=XværdiHer%>

Er det helt ude i hampen det her spørgsmål?
Avatar billede roenving Novice
30. juli 2003 - 02:44 #1
Ja, det er forholdstalsregning:

andenX = 300*enAndenOpløsning/768

dvs. 234,375 ved 600
og 400 ved 1024 i højden

-- og du kan bare gange med 0,390625 (300/768)
Avatar billede theselfimages Nybegynder
30. juli 2003 - 02:54 #2
OK! cool!

Men hvordan laves det som et script der udregner dette i hele tal,
og derefter sender resultatværdien?
Avatar billede theselfimages Nybegynder
30. juli 2003 - 02:55 #3
Eller nærmeste hele tal... (300 px. eller 476 px. og lign.)
Avatar billede roenving Novice
30. juli 2003 - 02:59 #4
Jeg kan det kun umiddelbart i Jscript/javascript (og jeg ved heller ikke hvordan man lige får fat i skærmhøjden)
Avatar billede theselfimages Nybegynder
30. juli 2003 - 03:08 #5
OK.. mit problem er faktisk, at jeg ikke fatter hvordan jeg får en tabel til at strække sig til at være 100% i højden.

Hvis jeg laver en ydre tabel på 100% x 100% procent og centreret i denne laver en ny tabel på 780x210 og under denne igen en ny tabel på 780x100.
Hvordan laver jeg så endnu en tabel på 780 x resten af skærmens højde uden at denne udvider den ydere tabel, sat til de 100% x 100% ?

Kan det forståes?
Avatar billede theselfimages Nybegynder
30. juli 2003 - 03:39 #6
Min side er faktisk designmæssigt opbygget identisk med denne:
http://www.danpo.dk/om%20danpo.aspx

Men hvad er det der gør, at denne sides bundhøjde altid følger skærmens højde? (Uden brug af frames)
Prøv at udvid/formindsk browservinduet.

Og er dette i virkeligheden et CSS spørgsmål?
Avatar billede roenving Novice
30. juli 2003 - 03:40 #7
Forstår godt du har problemer med det, men du kan se på følgende eksempel hvor jeg aflæser vindues-højden _mens_ dokumentet hentes ind på skærmen ...

Det 18, som står et sted er en tilpasning, som er fanget, ikke i den blå luft, men tæt på:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">
<HTML>
<HEAD>
<TITLE>Tabeller</TITLE>
<style>
table{
padding:0px;
margin:0px;

}
body, mainTable{
height:100%;
width:100%;
padding:0px;
margin:0px;
}
</style>
</head>
<body>
<table cellspacing="0" CELLPADDING="0" border="0" BGCOLOR="#777700" class="mainTable" align="center"><tr><td>
    <table border="0" bgcolor="#ff7700" WIDTH="780px">
        <tr>
            <td HEIGHT="210px">
            Topbanner</td>
        </tr>
    </table>
    <table border="0" bgcolor="#00ff00" WIDTH="780px">
        <tr>
            <td HEIGHT="100px">
            Menurow</td>
        </tr>
    </table>
    <table border="0" bgcolor="#0077ff" WIDTH="780px">
        <tr>
        <script language="javascript" type="text/javascript">
        bh = document.body.clientHeight-18;
        tdh = bh - 310;
        //alert(sh+" "+tdh);
        document.write('<td HEIGHT="'+tdh+'px">');
        </script>
            MainContent</td>
        </tr>
    </table></td>
</tr></table>
</body>
</html>
Avatar billede theselfimages Nybegynder
30. juli 2003 - 03:51 #8
Okay... det ser interessant ud...

Men er dette er generelt problem at få siden til at strække sig ved sådanne type design? Hvordan løser andre problemet?`

Kan dit eksempel laves med en Onload eller OnResize funktion også?
Avatar billede roenving Novice
30. juli 2003 - 03:58 #9
Ja det er ikke det største problem ...

Men jeg har kigget noget på dit Danpo-eksempel -- og den skal jeg kigge lidt mere på !-)

-- men efter dette kig ser det ud til at det holder sammen på det er en <div> som i stylesheetet er tildelt 100% højde ...

Men der er nestet en del tabeller, så det bliver ikke lige nu jeg gennemskuer den ...
Avatar billede theselfimages Nybegynder
30. juli 2003 - 04:09 #10
Det ser altså ud til at kunne komme til at virke fint med dette script.
Men er der noget i det, der styrer bredde? Syntes den skubber/udvider mine tabeller også.

<script language="javascript" type="text/javascript">
bh = document.body.clientHeight-18;
tdh = bh - 310;
//alert(sh+" "+tdh);
document.write('<td HEIGHT="'+tdh+'px">');
</script>
Avatar billede roenving Novice
30. juli 2003 - 04:22 #11
Næh, der bliver ikke rørt ved bredderne andet end med table-widths (780px i det eksempel jeg lavede) -- men måske har du taget noget af min formattering med (padding, margin, cellspacing m.m.m. ?-)
Avatar billede theselfimages Nybegynder
30. juli 2003 - 04:38 #12
Sejt! ... nu virker det helt genialt..
Mangler blot at det kan tilrette sig selv ved OnResize...

hvis det kan lade sig gøre..
Hmm.. hvordan kan noget så simpelt udrette så meget?
Du er da temmelig genial :)
Avatar billede roenving Novice
30. juli 2003 - 05:00 #13
onresize skal der følgende til:

I dit body-tag skal du:

<body onresize="beregnTd()">

-- og scriptet tilføjer vi en anelse:
<script language="javascript" type="text/javascript">
bh = document.body.clientHeight-18;
tdh = bh - 310;
var diff = screen.availHeight-tdh;
document.write('<td id="mainTd" style="height:'+tdh+'px">');
function beregnTd(){
document.getElementById('mainTd').style.height=(screen.availHeight-diff)+"px";
}
</script>
Avatar billede roenving Novice
30. juli 2003 - 06:36 #14
Det ser dog ud til at man må gå nogle store omveje, for ingen af de egenskaber som umiddelbart er til rådighed synes at være tilstede/relevante ved en resize, så måske kan man fange noget med museposition på event-objektet (screenY og/eller clientY) -- men det vil jeg kigge på senere ...
Avatar billede theselfimages Nybegynder
30. juli 2003 - 12:30 #15
Denne side: http://www.skybrud.dk/page.asp?id=6 har og bruger en perfekt onResize funktion. Prøv at formindsk/forstør browser vinduet, og se hvordan de opdaterer indhold efter vinduestørrelse.

Ved ikke om det er nedenstående script fra siden, der gør funktionen:

I hvert fald har dit lille script løst mit mainproblem.
Men håber at onResize funktionen komme til at fungere også.
Husk at post et svar :)


<SCRIPT LANGUAGE="JavaScript" TYPE="text/javascript">
window.onload = _onLoad;
window.onresize = _onResize;

function _onLoad() {

    _unlockLayerMenus();
    preload();
}

function _onResize() {
    _recalculateMenus();


    // Reload on resize, unless client is NS4.07; avoid infinite loop.
    if ((!isNetscape()) && (getBrowserVersion() != 4.07))
        window.location.href = window.location.href;
}

setLayoutDimensions(0,0);

</SCRIPT>
Avatar billede roenving Novice
30. juli 2003 - 15:23 #16
-- det er faktisk den kode som gør det -- den laver nemlig en reload, som jeg ikke vil anse som optimal, da det afhængig af dine browser-indstillinger og forbindelseshastighed kan give meget lange opdateringstider !-)

-- men jeg prøver lige at kigge på om jeg kan fange noget mouseY med onresize ...
Avatar billede roenving Novice
30. juli 2003 - 15:43 #17
Nu har jeg fundet en resize-metode, som dur i IE -- jeg vil prøve at se hvor meget der skal til at få Mozilla med, men det vender jeg tilbage med senere ...

Som udbygning af mit tidligere eksempel:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">
<HTML>
<HEAD>
<TITLE>Tabeller</TITLE>
<META NAME="Generator" CONTENT="Stone's WebWriter 3.5">
<script language="javascript" type="text/javascript">
var cY = "a";
var diff = 0;
function beregnTd(e){
    if(cY=="a"){
        cY=e.clientY;
        diff = cY-tdh+1;
    }
    cY = e.clientY;
    tdh = cY - diff;
    //alert(tdh+" "+diff+" "+cY);
    if(tdh>0)document.getElementById('minTd').style.height=tdh+'px';
}
</script>
<style TYPE="text/css">
table{
padding:0px;
margin:0px;

}
body, mainTable{
height:100%;
width:100%;
padding:0px;
margin:0px;
}
</style>
</head>
<body onresize="beregnTd(event)">
<table cellspacing="0" CELLPADDING="0" border="0" BGCOLOR="#777700" class="mainTable" align="center"><tr><td>
    <table border="0" bgcolor="#ff7700" WIDTH="780px">
        <tr>
            <td HEIGHT="210px">
            Topbanner</td>
        </tr>
    </table>
    <table border="0" bgcolor="#00ff00" WIDTH="780px">
        <tr>
            <td HEIGHT="100px">
            Menurow</td>
        </tr>
    </table>
    <table border="0" bgcolor="#0077ff" WIDTH="780px">
        <tr>
        <script language="javascript" type="text/javascript">
        var bh = document.body.clientHeight-18;
        var tdh = bh - 310;
        //alert(sh+" "+tdh);
        document.write('<td id="minTd" HEIGHT="'+tdh+'px">');
        </script>
            MainContent</td>
        </tr>
    </table></td>
</tr></table>
</body>
</html>
Avatar billede roenving Novice
30. juli 2003 - 17:37 #18
-- og så har jeg fået kigget på det, så det nu er testet i IE6 og Mozilla 1.5 -- jeg regner faktisk også med, at det vil virke i alle Mozillaer over 1, men det er ikke testet ,-)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">
<HTML>
<HEAD>
<TITLE>Tabeller</TITLE>
<META NAME="Generator" CONTENT="Stone's WebWriter 3.5">
<script language="javascript" type="text/javascript">
var cY = "a";
var diff = 0;
function beregnTd(e){
        if(navigator.userAgent.indexOf('Gecko')>0){
            tdh = window.innerHeight-322;
        }else if(navigator.userAgent.indexOf('MSIE')>0){
            if(cY=="a"){
                cY=e.clientY;
                diff = cY-tdh+1;
            }
            cY = e.clientY;
            tdh = cY - diff;
        }
    //alert(tdh+" "+diff+" "+cY);
    if(tdh>0)document.getElementById('minTd').style.height=tdh+'px';
}
</script>
<style TYPE="text/css">
table{
padding:0px;
margin:0px;

}
body, mainTable{
height:100%;
width:100%;
padding:0px;
margin:0px;
}
</style>
</head>
<body onresize="beregnTd(event)">
<table cellspacing="0" CELLPADDING="0" border="0" BGCOLOR="#777700" class="mainTable" align="center"><tr><td>
    <table border="0" bgcolor="#ff7700" WIDTH="780px">
        <tr>
            <td HEIGHT="210px">
            Topbanner</td>
        </tr>
    </table>
    <table border="0" bgcolor="#00ff00" WIDTH="780px">
        <tr>
            <td HEIGHT="100px">
            Menurow</td>
        </tr>
    </table>
    <table border="0" bgcolor="#0077ff" WIDTH="780px">
        <tr>
        <script language="javascript" type="text/javascript">
        var bh = 0;
        if(navigator.userAgent.indexOf('Gecko')>0){
            bh = window.innerHeight-12;
        }else if(navigator.userAgent.indexOf('MSIE')>0){
            bh = document.body.clientHeight-18;
        }
        var tdh = bh - 310;
        //alert(sh+" "+tdh);
        document.write('<td id="minTd" HEIGHT="'+tdh+'px">');
        </script>
            MainContent</td>
        </tr>
    </table></td>
</tr></table>
</body>
</html>

-- og nu tør jeg godt svare '-)
Avatar billede theselfimages Nybegynder
30. juli 2003 - 17:56 #19
Hej igen..

Nu er det ikke for at være alt for besværlig...

Det virker fint IE, NS, Mozilla men ikke Opera - så længe vinduet TRÆKKES større eller mindre. Men hvis vinduet derimod pludselig maxsimeres, følger funktionen ikke med!

Det var det jeg mente var det smarte med Skybrud eksemplet, hvor den reloader, lige meget hvilken vindue forandring der foretages.
Måske det dermed også vil være nemmere at få til at virke crossbrowser?

Har du nogen idé om hvorvidt det virker i IE til MAC som det er nu?

Det er rigtig godt på vej. Og helt sikkert en løsning jeg og andre vil kunne bruge til den her slags sitedesigns fremover.
Avatar billede roenving Novice
30. juli 2003 - 18:07 #20
Jamen vi kan da bare sætte en reload ind hvis det er Opera -- den understøtter sikkert ikke mouse-events på samme måde som IE, men sikkert andre properties på samme måde ...

Et bud kunne være (men jeg kender ikke Operas userAgent-streng:

<script language="javascript" type="text/javascript">
var cY = "a";
var diff = 0;
function beregnTd(e){
        if(navigator.userAgent.indexOf('Opera')>0){
            window.location.reload(true);
        }else if(navigator.userAgent.indexOf('Gecko')>0){
            tdh = window.innerHeight-322;
        }else if(navigator.userAgent.indexOf('MSIE')>0){
            if(cY=="a"){
                cY=e.clientY;
                diff = cY-tdh+1;
            }
            cY = e.clientY;
            tdh = cY - diff;
        }
    //alert(tdh+" "+diff+" "+cY);
    if(tdh>0)document.getElementById('minTd').style.height=tdh+'px';
}
</script>

-- og med hensyn til at bruge maksimerings-funktionen kan vi sikkert sagtens fange den hvis det er en mouse-event, men hvordan den skulle fanges på [alt]+[mellemrum],m kan jeg ikke gennemskue ...
Avatar billede theselfimages Nybegynder
30. juli 2003 - 18:20 #21
Jeg bruger normalt denne:
(navigator.userAgent.indexOf('Opera')!=-1)?true:false;
til indexsering af Opera.

.. men det virker fint nu med reload funktionen for Opera. Perfekt.
Kunne denne reloadfunktion ikke også gælde de øvrige browsere, hvis browservinduet maksimeres/minimeres ved et mouse-event.
Drop det med tasteturgenvej. Det er helt lige meget.

Ideen er blot, at mange brugere ofte surfer med browservinduet i en eller
anden tilfældig størrelse. Men skulle de få lyst til at blæse vinduet helt op, da skulle din scriptfunktion gerne ligeledes her beregne den nye højde.

Kunne det også være muligt her:
var tdh = bh - 293;

at lave et browsercheck for om det er IE, MS, Mozilla, Opera, etc.
Problemet er nemlig at værdien 293 ser ud til at være en anden for NS og Mozilla end det er for IE og Opera. I hvert fald hvis det skal passe helt 100%
Avatar billede theselfimages Nybegynder
30. juli 2003 - 18:21 #22
NS4  = (document.layers)?true:false;                                      // Netscape 4.x
NS    = (navigator.userAgent.indexOf('Netscape')!=-1)?true:false;          // Netscape 5.x
IE    = (window.navigator.userAgent.indexOf('MSIE')!=-1)?true:false;      // Explorer 4.0-6.0
IEMAC = (navigator.platform.indexOf('Mac')!=-1)?true:false;                // Explorer MAC
OP    = (navigator.userAgent.indexOf('Opera')!=-1)?true:false;            // Opera (All Versions)

MOZ  = (window.navigator.userAgent.indexOf("gecko/") + 14)?true:false;  // Mozilla

Detecter Mozilla, uden at påvirke IE:
(window.navigator.userAgent.indexOf("gecko/") + 14 &&! (window.navigator.userAgent.indexOf("MSIE")>=0))
Avatar billede theselfimages Nybegynder
30. juli 2003 - 18:27 #23
Hmm... måske lige meget ... med det sidste TJEK jeg spugte til..
hang on... tester lidt mere...
Avatar billede theselfimages Nybegynder
30. juli 2003 - 18:36 #24
Nope... (tænk ikke på mit spøgsmål vedr.: var tdh = bh - 293;)
helt perfekt som det ser ud nedenstående:

Jeg har ændret lidt på tallene med nu passer det hele 100%

Men ville gerne stadig om det kunne lade sig gøre, med RELOAD funktioner
for maksimering/minimering af vindue ved mouse-event.


<script language="javascript" type="text/javascript">
var cY = "a";
var diff = 0;
function beregnTd(e){
        if(navigator.userAgent.indexOf('Opera')>0){
            window.location.reload(true);
        }else if(navigator.userAgent.indexOf('Gecko')>0){
            tdh = window.innerHeight-300;
        }else if(navigator.userAgent.indexOf('MSIE')>0){
            if(cY=="a"){
                cY=e.clientY;
                diff = cY-tdh+1;
            }
            cY = e.clientY;
            tdh = cY - diff;
        }
    //alert(tdh+" "+diff+" "+cY);
    if(tdh>0)document.getElementById('minTd').style.height=tdh+'px';
}
</script>

<script language="javascript" type="text/javascript">
var bh = 0;
if(navigator.userAgent.indexOf('Gecko')>0){
bh = window.innerHeight-15;
}else if(navigator.userAgent.indexOf('MSIE')>0){
bh = document.body.clientHeight-11;
}
var tdh = bh - 300;
//alert(sh+" "+tdh);
document.write('<td id="minTd" HEIGHT="'+tdh+'px">');
</script>
Avatar billede roenving Novice
30. juli 2003 - 18:49 #25
Problemet med maksimeringen har du vel kun med IE ?-)

function beregnTd(e){
        if(navigator.userAgent.indexOf('Gecko')>0){
            tdh = window.innerHeight-322;
        }else if(navigator.userAgent.indexOf('MSIE')>0){
            if(cY=="a"){
                cY=e.clientY;
                diff = cY-tdh+1;
            }
            cY = e.clientY;
            if(cY<0)window.location.reload(true);
            tdh = cY - diff;
        }
    //alert(tdh+" "+diff+" "+cY);
    if(tdh>0)document.getElementById('minTd').style.height=tdh+'px';
}
Avatar billede theselfimages Nybegynder
30. juli 2003 - 20:03 #26
Ja.. det er kun med IE...
og det hele virker helt perfekt nu i både IE, NS, Mozilla og Opera.

Dog har jeg endnu ikke fået det testet i IE på MAC...
så vil du stå stand-by i tilfælde at småjusteringer?

Men tusind tak for din hjælp med denne helt optimale løsning :)

Mvh.
Lars
Avatar billede theselfimages Nybegynder
30. juli 2003 - 20:23 #27
Har du mulighed for at teste dit script på en MAC?
Avatar billede roenving Novice
30. juli 2003 - 20:36 #28
Kender ikke lige nogen som har sådan en, nej ...

-- men jeg læste lige teksten om dette grundigt i min javascript bible, og der var udsagnet, at der ikke skulle være forskelle ift. mouse-events i dette tilfælde og clientHeight skulle være det samme omend selve chromen skulle være anderledes, så måske skal der et ekstra check ind for Mac til den basale indstilling !-)
Avatar billede theselfimages Nybegynder
30. juli 2003 - 20:42 #29
Yep! det var netop det jeg mente.
Men hvis jeg Acceptere dit svar nu.. må jeg så senere poste
et ekstra lille råb om hjælp her... hvis det altså blir
nødvendigt i forbindelse med MAC testen?

Mange tak for denne gang i hvert fald...

Mvh.
Lars
Avatar billede roenving Novice
30. juli 2003 - 20:46 #30
Ja, jeg vil jo stadig få en mail ...
Avatar billede roenving Novice
30. juli 2003 - 20:52 #31
-- og tak for points ;~}
Avatar billede theselfimages Nybegynder
30. juli 2003 - 20:58 #32
Lige en lille ting.
Hvis jeg på en 1024x768 px. skærmopløning har et browservindue åbent
på ca. 800x600 px. Hvordan kan det så være at jeg i et 'glimt' ser en synlig grå tabelborder for den ydre tabel, idet jeg klikker 'maksimer' ikonet i selve browservinduet? Hvad gør at den i IE (og kun den) tilsyneladene pludselig blir synlig? Det ser ikke godt ud.
Avatar billede roenving Novice
30. juli 2003 - 21:02 #33
Den har jeg kun set i forbindelse med reloaden -- at der kan være et øjebliks forsinkelse på, at visse dele af koden bliver loadet, så browseren når at fortolke længere end godt er ?-)
Avatar billede theselfimages Nybegynder
30. juli 2003 - 21:08 #34
Hmm.. men det er jo også i forbindelse med IE reloaderen, idet jeg jo maksimere vinduet. Ingen problemer i de andre browsere.
Hmmm... gak! Bare mærkeligt at tableborder lige frem blir synlig, da den er sat til "0" ..
Avatar billede roenving Novice
30. juli 2003 - 21:12 #35
Tror at det er baggrunden, men kan ikke siger det sikkert !-)
Avatar billede Ny bruger Nybegynder

Din løsning...

Tilladte BB-code-tags: [b]fed[/b] [i]kursiv[/i] [u]understreget[/u] Web- og emailadresser omdannes automatisk til links. Der sættes "nofollow" på alle links.

Loading billede Opret Preview
Kategori
Programmeringssprog kurser
Kurser inden for grundlæggende programmering
Se alle Programmeringssprog kurser

Flere spørgsmål fra ASP kategorien

Titel Indlæg Oprettet Seneste aktivitet
Jeg bakser med noget Database og If Then med ASP - hvad gør jeg galt? Af Peer i ASP 10 25/06/202622:20 04/09/202602:30
Tjek alle checkbox i form Af bsn i ASP 4 18/05/202601:57 19/05/202613:33
Lost focus Af bsn i ASP 1 07/11/202415:34 01/01/202514:58
ASP classic Af bsn i ASP 8 28/10/202423:11 30/10/202422:51
Classic - filer vist med sidste fil først Af bsn i ASP 5 23/05/202409:56 24/05/202400:02
Se alle spørgsmål i kategorien Opret spørgsmål

Log ind eller opret profil

Hov!

For at kunne deltage på Computerworld Eksperten skal du være logget ind.

Det er heldigvis nemt at oprette en bruger: Det tager to minutter og du kan vælge at bruge enten e-mail, Facebook eller Google som login.

Opret Log ind

Du kan også logge ind via nedenstående tjenester

Alle kategorier på Eksperten
Seneste spørgsmål Seneste aktivitet
I går 15:34 Installer alarmlyd på Samsung Galaxy XCover 7 Pro Af ErikHg i Mobiltelefoner
08/0913:06 Kan ikke starte min pc Af Malm i PC
07/0919:20 DVD program Af dcedata1977 i Andet software
07/0916:09 Bitdefender brokker sig Af FinnRasmussen i Andet sikkerhed
06/0921:00 Libre Office Impress Af Frank i Andre styresystemer
White papers
Flere white papers »