Avatar billede bamzen Nybegynder
16. november 2001 - 12:04 Der er 8 kommentarer og
2 løsninger

Hente højden på et foruddefineret relativt lag.

Hej derude, her en lille udfordring....

Jeg har to elementer <DIV ID=subjectDiv> og <DIV ID=realContentDiv>

Begge er relativt positioneret i deres påhængende style

Godt, ind i mellem dem vil jeg gerne lave en spacer gif, (u know, en blank grafik med bestem størrelse), men størrelsen skal afhænge af højden på indholdet af subjectDiv

lidt som man kan skrive document.body.offsetHeight og window.innerHeight

Men hvordan når det kun er et bestemt lag man skal have fat i??

/Martin
Avatar billede olebole Juniormester
16. november 2001 - 12:15 #1
<ole>
Såmænd bare:
  document.getElementById(\"subjectDiv\").offsetHeight;  ;o)
/mvh
</bole>
Avatar billede jakoba Nybegynder
16. november 2001 - 12:16 #2
var obj = dit lag

if ( ns4 ) {
    lagHojde = obj.document.height
} else {
    lagHojde = obj.offsetHeight;
}

mvh JakobA
Avatar billede bamzen Nybegynder
16. november 2001 - 12:16 #3
og hvad hvis det skal være cross browser????
Avatar billede bamzen Nybegynder
16. november 2001 - 12:17 #4
tester lige
Avatar billede bamzen Nybegynder
16. november 2001 - 12:35 #5
Ok ny problemstilling,,,,,,

Virker fint i netscape, i hvertfald i ns4

og for det får i point...... men kan det passe at IE ikke eksekverer js i bodyen, før hele bodyen er loaded???

og hvad kan jeg gøre???

hermed koden

<!--HAS_WEBDNA_TAGS-->
<HTML>
<HEAD>
<STYLE TYPE=text/css>
BODY,TD,DIV{
font-family:Arial,Verdana,Helvetica;
font-size:11px;
color:#003366;
}
#backGroundDiv{
position:absolute;
top:100px;
left:100px
}
#subjectDiv{
position:relative;
top:0px;
left:0px;
font-family:Arial,Verdana,Helvetica;color:#003366;font-size:18px;font-weight:bold

}
#realContentDiv{
position:relative;
top:0px;
left:0px;
}

.subj{
font-family:Arial,Verdana,Helvetica;color:#003366;font-size:18px;font-weight:bold
}


</STYLE>
<SCRIPT LANGUAGE=JavaScript SRC=dynlayer.js>
</SCRIPT>
<SCRIPT LANGUAGE=JavaScript SRC=mouseevents.js>
</SCRIPT>
<SCRIPT LANGUAGE=JavaScript SRC=scroll2.js>
</SCRIPT>
<script language=\"Javascript\">
function init() {
    myscroll.activate()
   
    initMouseEvents()
}
myscroll = new Scroll(102,102,600,370)
myscroll.useH = false
myscroll.imgSet(\'images/scroll2/metal/\',16,16,37,-1,2,-1,2,1,1)
myscroll.drawBorder = false
myscroll.build()

writeCSS (
myscroll.css
)
onload = init

</script>

</HEAD>
<BODY>

<DIV ID=backGroundDiv>
<IMG SRC=tormlevel2.gif>
</DIV>
<script language=\"JavaScript\">
document.writeln(myscroll.divStart)
</script>
<DIV ID=scrollContentDiv>



<TABLE BORDER=0 CELLSPACING=0 CELLPADDING=0 WIDTH=593>
<TR><TD ROWSPAN=4><IMG SRC=blank.gif WIDTH=5 HEIGHT=1></TD><TD><IMG SRC=blank.gif WIDTH=408 HEIGHT=30></TD><TD ROWSPAN=4><IMG SRC=blank.gif WIDTH=5 HEIGHT=1></TD><TD VALIGN=TOP><IMG SRC=blank.gif WIDTH=170 HEIGHT=1></TD></TR>
<TR><TD CLASS=subj WIDTH=408>
<DIV ID=subjectDiv>Dette er en test<BR>Som nu gaar i to linier<BR>og ogsaa i tre<BR>og fire<BR>og for det ikke skal vaere lyv, i fem</DIV>
</TD><TD ROWSPAN=3 WIDTH=160 VALIGN=TOP>bla bla bla bla bla bla bla bla blabla bla bla bla bla bla bla bla blabla bla bla bla bla bla bla bla blabla bla bla bla bla bla bla bla blabla bla bla bla bla bla bla bla blabla bla bla bla bla bla bla bla blabla bla bla bla bla bla bla bla blabla bla bla bla bla bla bla bla blabla bla bla bla bla bla bla bla blabla bla bla bla bla bla bla bla blabla bla bla bla bla bla bla bla blabla bla bla bla bla bla bla bla blabla bla bla bla bla bla bla bla blabla bla bla bla bla bla bla bla blabla bla bla bla bla bla bla bla blabla bla bla bla bla bla bla bla bla
</TD></TR>
<TR><TD>
<SCRIPT LANGUAGE=JavaScript>
ns4 = (document.layers)?true:false;

                                var obj = (ns4)?document.layers[\"subjectDiv\"]:document.getElementById(\"subjectDiv\")

                                if ( ns4 ) {
                                    lagHojde = obj.document.height
                                } else {
                                    lagHojde = obj.offsetHeight;
                                }
document.writeln(\'<IMG SRC=blank.gif WIDTH=1 HEIGHT=\'+(130-lagHojde)+\'>\')
</SCRIPT>
</TD></TR>
<TR><TD><DIV ID=realContentDiv>
<p>
START DESPITE THE PREVAILING WISDOM that &quot;users don\'t read,&quot; discussions about online typography do get a lot of attention and space&mdash;A List Apart alone has run half a dozen articles about presenting
text effectively on the web.
</p>

<p>
So if you&rsquo;ve been paying attention, you probably already know the basics of online typography: legible fonts are good, CSS is essential, and relative font sizing is tricky.
</p>

<p>
A few years ago, there were good reasons for web developers to take the easy way out: an HTML spec that lacked recommendations for appropriate symbols, combined with browers that frequently
ignored what standards existed, made that level of precision next to impossible.
</p>

<p>
So it made sense to use double hyphens (--) instead of em dashes and double primes (\") instead of quotation marks. In any case, those workarounds were already familiar to anyone who&rsquo;d grown up with
typewriters, and readers adapted to ascii-only typography during the early days of the Internet when usenet, email, and the web all shared the same primitive markup and text display.
</p>

<p>
These days, standards-compliant browsers can handle entity names, and even Netscape 4.x can manage numeric entity codes&mdash;but why should you care? After all, using the technically correct punctuation
marks would mean a dozen new entities to be memorized and a lineup of well-meaning but under-informed editors and teammates to win over&mdash;and retrofitting any significant amount of copy is always a
hassle.
</p>

<p>
Since most people don&rsquo;t know or care about the difference between an em dash and an Emmy, why bother to make the switch? In some cases, switching to correct typography may honestly not make
sense. For all the rest, two arguments: usability and style.
</p>

<p>
Getting readers to read
</p>

<p>
The web doesn\'t provide an ideal reading situation. Low-contrast monitors with matching slow refresh rates make it work to read on-screen, and even when a user has an optimal display, the structure of
the web encourages a degree of scanning and link-hopping.
</p>

<p>
To compensate, we spend hours figuring out clever ways to make our content easier to read: we break long passages of text into shorter chunks, use subheaders to facilitate scanning,
and&mdash;frequently&mdash;agonize over the byzantine tangle of cross-browser compatibility to make sure that our text displays the way we want it to.
</p>

<p>
Providing helpful cues
</p>

<p>
Given all that, it would be a shame to diminish the relatively simple tool we have in punctuation marks.
</p>

<p>
Typography, at the root, is all about providing as many helpful cues for the reader&rsquo;s eye as possible. Punctuation marks, like fonts, have undergone a process of natural selection to make sure that they do
just that.
</p>

<p>
Curly quotes are curly in part because they make it instantly clear if you\'re at the beginning or the end of a quotation, and partly because they smoothly guide the eye into the passage:
</p>

<p>
  \"Omit needless words.\"
  &ldquo;Omit needless words.&rdquo;
</p>


<p>
Correct em dashes likewise draw the reader&rsquo;s eye smoothly from clause to clause without the visual break of a clunky double-hyphen.
</p>

<p>
  Primitive punctuation looks sloppy--why not be stylish?
  Primitive punctuation looks sloppy&mdash;why not be stylish?
</p>


<p>
Particularly in a medium that invites a thousand distractions, anything that we as web developers can do to maintain the reader&rsquo;s focus and keep her eyes moving smoothly over our text can only benefit
our content.
</p>

<p>
A matter of style
</p>

<p>
Cary Grant, that most stylish of British gentlemen, warned: &ldquo;it takes five hundred small details to make one favorable impression.&rdquo;
</p>

<p>
Ill-formed punctuation detracts from an otherwise well-designed website in subtle but accumulative ways. Single primes acting as apostrophes and double hyphens serving as em dashes belong to the era
of grey backgrounds and monospaced default fonts&mdash;it&rsquo;s time for online typography to grow up.
</p>

<p>
Time to grow up
</p>

<p>
Ever more sophisticated specifications and browsers have enabled web developers to create more appealing web interfaces, and web design standards have risen accordingly.
</p>

<p>
Conscientious graphics designers don&rsquo;t let incorrectly optimized or sloppily cropped versions of their images go live, nor do good copywriters or editors publish websites with typos or grammatical
errors. Nor should web developers who aspire to professionalism leave the typographical details of their sites incomplete and unconsidered.
</p>

<p>
A question of content
</p>

<p>
Some sites are more likely candidates for a typographical upgrade than others.
</p>

<p>
News sites, or any site with a lot of syndicated content, would require more effort to upgrade than others&mdash;though it can be managed, as demonstrated by the lovely typography over at MSNBC.
</p>

<p>
Independent content sites, on the other hand, are particularly appropriate candidates for special attention to typography; the same reasons that apply to big, corporate sites (enhanced readability and clean,
professional design) are even more important for small sites whose reputation rests on their content, not their brand name.
</p>

<p>
Whose job is it?
</p>

<p>
On a production team, it&rsquo;s usually someone&rsquo;s job to catch (for instance) spelling errors, but the grammar of typography belongs to a number of people&mdash;designers who don&rsquo;t want typographical
sloppiness to detract from their designs, content experts who want to make their words more readable, and production people who want to implement the raw material for a website in the most flattering
way.
</p>

<p>
If a complete overhaul doesn&rsquo;t make sense for your situation, you can still learn about the tools and use the parts that make sense for your projects.
</p>

<p>
Getting help
</p>

<p>
For more on the technical kung fu of typographically correct punctuation, check out Peter Sheerin&rsquo;s article here at A List Apart, and then visit the following fine establishments:
</p>

<p>
Dean Allen&rsquo;s Web Writing AppleScripts are helpful for those on Macs, and his Word HTML Cleaner is a time saving wonder for those who&rsquo;d rather not memorize entities. (Thanks to Dean for inspiring
this article.)
</p>

<p>
The Graphion Online Type Museum has brief profiles of early typographers and other bits of historical context, and counterspace is chock-full of interactive, useful information about the history and
practice of typography.
</p>

<p>
Was it good for you, too? Comment on this story. &raquo;
</p>

<p>
::: Erin Kissane writes, edits, does web stuff, and is the associate editor of A List Apart.
</p>

END</DIV>
</TD></TR></TABLE>
</DIV>
</DIV>
<script language=\"JavaScript\">
document.writeln(myscroll.divEnd)
</script>

</BODY>
</HTML>
Avatar billede jakoba Nybegynder
16. november 2001 - 12:43 #6
nej da. Javascript bliver eksekveret når brovseren kommer til den, også i IE.

Noget andet er at det ikke altid ar muligt at udføre den ønskede javascript, fordi det html-elementer javascriptet skal arbejde på måske ikke er færdigudlagt. og det kan variere i browserne hvornår de synes det er.
For eksempel vil IE tillade at vi bruger
    document.body.clientWidth
såsnart der har været en <body kommando. Men i NS6 kan den variabel ikke bruges før der har været en </body>.

Så det er sikrest at vente og fx udføre sit javascript på onload hvis det er muligt.

mvh JakobA
Avatar billede bamzen Nybegynder
16. november 2001 - 12:47 #7
så ville du gøre noget som eksempelvis

obj.style.top= newpos ?

det vil da blive noget være flimmerværk, ikke, og kan man ikke undgå det???

(uden at skulle til at skjule det hele, mens det loader færdigt?)
Avatar billede jakoba Nybegynder
16. november 2001 - 13:23 #8
Kikkede lidt på din kode:

var obj = (ns4)?document.layers[\"subjectDiv\"]:document.getElementById(\"subjectDiv\")
    if ( ns4 ) {
        lagHojde = obj.document.height
    } else {
        lagHojde = obj.offsetHeight;
    }

Og det er jo nogenlinde logisk at netop de værdier ikke kan bruges førend der har været en </div> for det lag du ønsker at måle højden på.
Førend da ved browseren jo ikke hvad der skal være plads til i dem :-).

Er du sikke på du ikke kan beregne dig til højden af den gif? det burde vel være noget nær det samme som højden af dit clippingarea.

mvh JakobA
Avatar billede bamzen Nybegynder
16. november 2001 - 13:35 #9
den er efter afslutningen på det div,, mon det gør nogen forskel at det er nested?


laget altså.....

Avatar billede jakoba Nybegynder
16. november 2001 - 14:32 #10
Det gor faktisk stor forskel i NS4 hvis scrolleContentDiv også er absolut placeret bliver NS4 adressen til:
document.layers[\'scrollContentDiv\'].document.layers[\'subjectDiv\']
fordi det der ligger i ns4\'s absolutte lag er hele vinduer der igen kan indeholde ...

Men for IE skulle det ikke gære nogen forskel.

mvh JakobA
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
Vi tilbyder markedets bedste kurser inden for webudvikling

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.

Du kan også logge ind via nedenstående tjenester