/ Forside / Teknologi / Udvikling / Java Scripts / Nyhedsindlæg
Login
Glemt dit kodeord?
Brugernavn

Kodeord


Reklame
Top 10 brugere
Java Scripts
#NavnPoint
molokyle 5410
Klaudi 2799
smorch 2439
kim 1360
Harlekin 1134
bentjuul 984
gibson 800
severino 695
Random 675
10  konsulent.. 626
Hop til anker +30px
Fra : Kim Ludvigsen


Dato : 23-10-11 15:26

Jeg har nogle ankre, hvor jeg gerne vil kunne hoppe til det
pågældende sted på siden +30 px. Jeg har en fixed menu
øverst på siden, og ved klik på et anker, havner
ankerpunktet bag menuen.

Jeg kan ikke lave ekstra afstand i form af
padding-/margin-top på ankeret i dette tilfælde, da det vil
give for store huller på siden.

Er det muligt ved hjælp af JavaScript at lave en funktion,
så siden automatisk rulles 30 px ned, når der er klikket på
et anker?

Jeg er temmelig blank på JavaScript, så meget gerne en
forklaring, en novice kan forstå.

--
Mvh. Kim Ludvigsen
Gør din hjemmeside mere intelligent, begynderguide om PHP:
http://kimludvigsen.dk/programmer-internet-kompozer-trin-php.php

 
 
Bertel Lund Hansen (23-10-2011)
Kommentar
Fra : Bertel Lund Hansen


Dato : 23-10-11 16:04

Kim Ludvigsen skrev:

> Jeg har nogle ankre, hvor jeg gerne vil kunne hoppe til det
> pågældende sted på siden +30 px.

Det lyder underligt, men kan du ikke indsætte en id 30 px længere
nede og så tilføje #idnavn til ankerets href-værdi?

--
Bertel
http://bertel.lundhansen.dk/      http://fiduso.dk/

Kim Ludvigsen (23-10-2011)
Kommentar
Fra : Kim Ludvigsen


Dato : 23-10-11 16:25

Bertel Lund Hansen skrev:
> Kim Ludvigsen skrev:
>
>> Jeg har nogle ankre, hvor jeg gerne vil kunne hoppe til det
>> pågældende sted på siden +30 px.
>
> Det lyder underligt, men kan du ikke indsætte en id 30 px længere
> nede og så tilføje #idnavn til ankerets href-værdi?

Den skal i så fald sættes 30 px længere oppe, men det er
desværre ikke muligt. Det er umuligt at vide, hvor de 30px
skal være i en tekst, og det risikerer desuden at være 30px
inde i et ovenstående billede.

På Ludvigs Hjørne har jeg løst det med at lave en
padding-top på 35px på elementet med ankeret, hvilket
betyder, at jeg havner det rette sted. Men det betyder også,
at jeg har 35px luft over ankeret. På den side betyder det
ikke noget, fordi ankrene er på afsnitsoverskrifter.

På problemsiden vil det ikke være særlig kønt. Her kan
ankrene være på små bokse, der kun har 5px afstand eller på
et billede.

--
Mvh. Kim Ludvigsen
Undgå faldgruberne, sådan vælger du det rette webhotel:
http://kimludvigsen.dk/tips-internet-websnedker-webhotel.php

Birger Sørensen (23-10-2011)
Kommentar
Fra : Birger Sørensen


Dato : 23-10-11 18:16

Kim Ludvigsen forklarede:
> Jeg har nogle ankre, hvor jeg gerne vil kunne hoppe til det pågældende sted
> på siden +30 px. Jeg har en fixed menu øverst på siden, og ved klik på et
> anker, havner ankerpunktet bag menuen.
>
> Jeg kan ikke lave ekstra afstand i form af padding-/margin-top på ankeret i
> dette tilfælde, da det vil give for store huller på siden.
>
> Er det muligt ved hjælp af JavaScript at lave en funktion, så siden
> automatisk rulles 30 px ned, når der er klikket på et anker?
>
> Jeg er temmelig blank på JavaScript, så meget gerne en forklaring, en novice
> kan forstå.

Umiddelbart, er det vel så fordi det element der viser indholdet
starter 30px for højt oppe?

Det vil kun virke i JS - altså ingen HTML fallback.
Men det burde være muligt at fremstille en onclick handler, der flytter
visningne 30px op.
Det er elementets offsetTop der skal bruges til beregning - og vil så i
øvrigt være afhængig af sidens opbygning i øvrigt...

Birger

--
http://varmeretter.dk - billig, sund og hurtig mad
http://bbsorensen.dk



scootergrisen (23-10-2011)
Kommentar
Fra : scootergrisen


Dato : 23-10-11 20:31

Du kan scrolle med javascripts window.scroll(x, y) :

<script>

function scroll30(){

window.scroll(0, 30);

}

</script>

<button onclick="scroll30();">scroll</button>

Jeg kan dog ikke få det vil at virke med links :

<a href="#a" onclick="scroll30();">scroll</a>

Måske der er nogen andre der ved mere.

Birger Sørensen (23-10-2011)
Kommentar
Fra : Birger Sørensen


Dato : 23-10-11 23:45

Den 10/23/2011, skrev scootergrisen:
> Du kan scrolle med javascripts window.scroll(x, y) :
>
> <script>
>
> function scroll30(){
>
> window.scroll(0, 30);
>
> }
>
> </script>
>
> <button onclick="scroll30();">scroll</button>
>
> Jeg kan dog ikke få det vil at virke med links :
>
> <a href="#a" onclick="scroll30();">scroll</a>
>
> Måske der er nogen andre der ved mere.

måske fordi funktionen skal returnere false, for at stoppe udførelsen
af linket...

Birger

--
http://varmeretter.dk - billig, sund og hurtig mad
http://bbsorensen.dk



scootergrisen (24-10-2011)
Kommentar
Fra : scootergrisen


Dato : 24-10-11 18:34

> måske fordi funktionen skal returnere false, for at stoppe udførelsen af
> linket...

Ja men så skal man både hoppe til linket og scrolle fra javascript
hvilket jeg ikke syns et godt.

Men jeg har lavet et eksempel her :
http://scootergrisen.dk/test/test0094.html

Så bruges denne kode :
<a href="javascript:void(0);" onclick="scroll30('#a'); return
false;">scroll</a>

Men det syns jeg så bare ikke er en god løsning.

Birger Sørensen (24-10-2011)
Kommentar
Fra : Birger Sørensen


Dato : 24-10-11 19:08

scootergrisen tastede følgende:
>> måske fordi funktionen skal returnere false, for at stoppe udførelsen af
>> linket...
>
> Ja men så skal man både hoppe til linket og scrolle fra javascript hvilket
> jeg ikke syns et godt.
>
> Men jeg har lavet et eksempel her :
> http://scootergrisen.dk/test/test0094.html
>
> Så bruges denne kode :
> <a href="javascript:void(0);" onclick="scroll30('#a'); return
> false;">scroll</a>
>
> Men det syns jeg så bare ikke er en god løsning.

Man behøver jo ikke bruge et link.

function HopTil(navn) {
var elm = document.getElementById(navn);
if (elm) {
window.scroll(0, elm.offsetTop-30);
}
}

<div onclick="HopTil(navn);">Gå til navn</div>

skulle vist nogenlunde gøre det samme...

Birger

--
http://varmeretter.dk - billig, sund og hurtig mad
http://bbsorensen.dk



Kim Ludvigsen (25-10-2011)
Kommentar
Fra : Kim Ludvigsen


Dato : 25-10-11 08:34

Birger Sørensen skrev:
> scootergrisen tastede følgende:

>> Men jeg har lavet et eksempel her :
>> http://scootergrisen.dk/test/test0094.html

Det ser i hvert fald ud til at virke som ønsket - endnu kun
tjekket i Firefox 7.

>> Men det syns jeg så bare ikke er en god løsning.

Hvad er ulempen? Overhead? Siden er vist langsom nok i
forvejen, så det vil sikkert være en fordel med den mest
optimale løsning.

> Man behøver jo ikke bruge et link.

I mit tilfælde vil der altid være tale om links, er der så
noget der taler for at bruge en anden metode end scootergrisens?

--
Mvh. Kim Ludvigsen
Tips til hjemmesidesnedkeren:
http://kimludvigsen.dk/tips-internet-websnedker.php

scootergrisen (25-10-2011)
Kommentar
Fra : scootergrisen


Dato : 25-10-11 14:29

> Hvad er ulempen? Overhead? Siden er vist langsom nok i forvejen, så det
> vil sikkert være en fordel med den mest optimale løsning.

Ulempen er at linket ikke virker hvis du ikke har javascript.

Birger Sørensen (25-10-2011)
Kommentar
Fra : Birger Sørensen


Dato : 25-10-11 14:32

Kim Ludvigsen sendte dette med sin computer:
> Birger Sørensen skrev:
>> scootergrisen tastede følgende:
>
>>> Men jeg har lavet et eksempel her :
>>> http://scootergrisen.dk/test/test0094.html
>
> Det ser i hvert fald ud til at virke som ønsket - endnu kun tjekket i Firefox
> 7.
>
>>> Men det syns jeg så bare ikke er en god løsning.
>
> Hvad er ulempen? Overhead? Siden er vist langsom nok i forvejen, så det vil
> sikkert være en fordel med den mest optimale løsning.
>
>> Man behøver jo ikke bruge et link.
>
> I mit tilfælde vil der altid være tale om links, er der så noget der taler
> for at bruge en anden metode end scootergrisens?

Ikke andet, end der er noget fis at bruge et link til at aktivere JS,
og derfor være nødt til at disable den indbyggede funktionalitet.

Birger

--
http://varmeretter.dk - billig, sund og hurtig mad
http://bbsorensen.dk



Kim Ludvigsen (25-10-2011)
Kommentar
Fra : Kim Ludvigsen


Dato : 25-10-11 14:38

Birger Sørensen skrev:
> Kim Ludvigsen sendte dette med sin computer:
>
>> I mit tilfælde vil der altid være tale om links, er der så
>> noget der taler for at bruge en anden metode end
>> scootergrisens?
>
> Ikke andet, end der er noget fis at bruge et link til at
> aktivere JS, og derfor være nødt til at disable den
> indbyggede funktionalitet.

Jeg tror, jeg så vil bruge funktionen på folde ud-boksene,
hvor der netop ikke er tale om almindelige links, og hvor
folde ud-funktionen alligevel ikke vil fungere uden JavaScript.

Og så vil jeg lige overveje, om jeg skal gøre noget ved mine
mellemrubrikker, eller om jeg skal lade dem forsvinde bag
menuen, som de gør i øjeblikket.

Jeg siger tak for hjælpen til alle, og ikke mindst til
scootergrisen for koden.

--
Mvh. Kim Ludvigsen
Hold din drømmeferie i Thailand. Find tips og info på:
http://rejse-til-thailand.dk

scootergrisen (25-10-2011)
Kommentar
Fra : scootergrisen


Dato : 25-10-11 23:19

Det var så lidt.
Kom gerne med et link så vi kan se koden, eventuelt både med normale
links og den med javascript links.

Kim Ludvigsen (26-10-2011)
Kommentar
Fra : Kim Ludvigsen


Dato : 26-10-11 07:10

scootergrisen skrev:
> Det var så lidt.
> Kom gerne med et link så vi kan se koden, eventuelt både med
> normale links og den med javascript links.

Du kan se resultatet her:
http://rejse-til-thailand.dk/aktuelt

Siden indeholder en række bokse, der kan foldes ud/sammen.
Eftersom jeg allerede bruger JavaScript til at folde
ud/sammen, skulle jeg omskrive din kode lidt:

<a href=\"javascript:void(0);\"
onclick=\"changeh('forum');scroll40('#forum'); return
false;\" title='Klik for at folde ud/sammen'>LINK</a>

Jeg har ikke benyttet scriptet på de almindelige links. Du
kan se problemet med dem her:
http://rejse-til-thailand.dk/shopping-i-bangkok#storcentre_og_markeder

Som du kan se, har jeg lavet ekstra luft over rubrikken, som
der linkes til i ovenstående link, så den vises korrekt
under menuen. Men det vil ikke være kønt med så meget luft
over de mellemrubrikker, som jeg linker til i oversigten
over storcentre og markeder.

Jeg overvejer stadig, om jeg skal bruge scriptet på den
slags mellemrubrikker, men "alle" har vel JavaScript slået
til i vore dage, så der burde vel ikke være de store
problemer ved også at bruge dit script her?

For øvrigt, jeg sidder på en langsom forbindelse i
øjeblikket, og hos mig virker shopping-siden noget langsom
(det er min længste side, og derfor også den, hvor der skal
hentes flest elementer fra databasen). Hvordan virker den
hos dig?

--
Mvh. Kim Ludvigsen
Gør din hjemmeside mere intelligent, begynderguide om PHP:
http://kimludvigsen.dk/programmer-internet-kompozer-trin-php.php

Christian Hansen (24-10-2011)
Kommentar
Fra : Christian Hansen


Dato : 24-10-11 09:35

On 10/23/2011 04:26 PM, Kim Ludvigsen wrote:
> Jeg har nogle ankre, hvor jeg gerne vil kunne hoppe til det pågældende
> sted på siden +30 px. Jeg har en fixed menu øverst på siden, og ved klik
> på et anker, havner ankerpunktet bag menuen.
>
> Jeg kan ikke lave ekstra afstand i form af padding-/margin-top på
> ankeret i dette tilfælde, da det vil give for store huller på siden.
>
> Er det muligt ved hjælp af JavaScript at lave en funktion, så siden
> automatisk rulles 30 px ned, når der er klikket på et anker?
>
> Jeg er temmelig blank på JavaScript, så meget gerne en forklaring, en
> novice kan forstå.
>

Hej,

Jeg har lavet et eksempel til dig her:

http://www.resource-it.dk/tmp/hash.html

Jeg har for nemheds skyld benyttet jQuery, men er du ikke fan af det,
kan det sagtens laves uden.

Tricket er at "lytte" efter, når window.location.hash skifter værdi og
så efterfølgende scrolle 30px mere, eller hvad man nu vil:

//inkluder dit jQuery-bibliotek - download fra
http://code.jquery.com/jquery-1.6.4.min.js

<script type="text/javascript" src="jquery-1.6.4.min.js"></script>

<script type="text/javascript">

window.currenthash = '';

setInterval(function() {

if ( window.location.hash != window.currenthash ) {

var name = window.location.hash.replace(/^#/,'');
$(window).scrollTop($(window).scrollTop() + 30);
window.currenthash = window.location.hash;


}//if

},100);

</script>

Der findes en hashchange-plugin til jQuery også, som kan benyttes Jeg
har bare ikke haft tid til at teste den og derfor ikke anvendt den.
Ovenstående er lidt et hack, men det virker i alle browsere med setInterval.

--
Christian Hansen
http://www.resource-it.dk/

Kim Ludvigsen (25-10-2011)
Kommentar
Fra : Kim Ludvigsen


Dato : 25-10-11 08:27

Christian Hansen skrev:
> On 10/23/2011 04:26 PM, Kim Ludvigsen wrote:
>> Jeg har nogle ankre, hvor jeg gerne vil kunne hoppe til
>> det pågældende sted på siden +30 px.
>
> Jeg har lavet et eksempel til dig her:
>
> http://www.resource-it.dk/tmp/hash.html

Tak, men dels vil jQuery være lidt overkill i dette
tilfælde, og dels virker det ikke. Hos mig (Firefox 7)
placeres ankeret i hvert fald helt i top i indholdsruden.

--
Mvh. Kim Ludvigsen
Undgå virus og andet snavs på computeren:
http://pc-sikkerhed.dk

Martin Larsen (24-10-2011)
Kommentar
Fra : Martin Larsen


Dato : 24-10-11 22:38

Kim Ludvigsen wrote:

> Jeg har nogle ankre, hvor jeg gerne vil kunne hoppe til det pågældende
> sted på siden +30 px. Jeg har en fixed menu øverst på siden, og ved klik
> på et anker, havner ankerpunktet bag menuen.

Det er ikke kritik af dit valg, men jeg er nysgerrig efter at vide
hvorfor du har brug for dette. Hvis du forklarer det, er der måske helt
andre muligheder.

Martin Larsen (24-10-2011)
Kommentar
Fra : Martin Larsen


Dato : 24-10-11 22:40

Martin Larsen wrote:

> Det er ikke kritik af dit valg, men jeg er nysgerrig efter at vide
> hvorfor du har brug for dette. Hvis du forklarer det, er der måske helt
> andre muligheder.

Skulle måske lige tilføje: Er din menu da meget høj?

Kim Ludvigsen (25-10-2011)
Kommentar
Fra : Kim Ludvigsen


Dato : 25-10-11 08:24

Martin Larsen skrev:
> Kim Ludvigsen wrote:
>
>> Jeg har nogle ankre, hvor jeg gerne vil kunne hoppe til
>> det pågældende
>> sted på siden +30 px. Jeg har en fixed menu øverst på
>> siden, og ved klik
>> på et anker, havner ankerpunktet bag menuen.
>
> Det er ikke kritik af dit valg, men jeg er nysgerrig efter
> at vide hvorfor du har brug for dette. Hvis du forklarer
> det, er der måske helt andre muligheder.

Jeg har ikke haft tid til at afprøve nogle af mulighederne
endnu, men ja, jeg burde nok have givet et link til siden:
http://rejse-til-thailand.dk/aktuelt

Prøv at klikke på overskriften til nyhedsboksen i venstre
side eller en af de andre udfoldelige bokse, så er det
tydeligt at se problemet. Det opstår også i andre
situationer, fx ved mellemrubrikker, hvor jeg ikke bryder
mig om for meget luft over rubrikken.

Årsagen er den faste menu øverst på siden. Ankeret skal
derfor ikke havne i top, men 30-35px længere nede.

--
Mvh. Kim Ludvigsen
Hjælp til computeren og internettet:
http://kimludvigsen.dk

Martin Larsen (25-10-2011)
Kommentar
Fra : Martin Larsen


Dato : 25-10-11 14:17

Kim Ludvigsen wrote:

> Prøv at klikke på overskriften til nyhedsboksen i venstre side eller en
> af de andre udfoldelige bokse, så er det tydeligt at se problemet. Det
> opstår også i andre situationer, fx ved mellemrubrikker, hvor jeg ikke
> bryder mig om for meget luft over rubrikken.

Jeg synes ikke om den faste menu. Det virker meget forvirrende at selve
topbaren forsvinder men den tynde menulinje bliver der. Jeg skulle se
flere gange efter for overhovedet at blive klar over hvad pokker der
skete når jeg scrollerede. Det er ikke en god brugeroplevelse IMO!

Det ser heller ikke spor pænt ud mens man scroller.

Jeg synes du bør fastholde hele topbaren hvis du absolut ønsker noget
sådant. Men det er absolut ikke standard og du finder ikke en svævende
topmenu mange steder.

Nu ved jeg at det ikke er det du spurgte efter, men overvej kraftigt den
faste menu!

Kim Ludvigsen (25-10-2011)
Kommentar
Fra : Kim Ludvigsen


Dato : 25-10-11 14:32

Martin Larsen skrev:
>
> Jeg synes ikke om den faste menu. Det virker meget
> forvirrende at selve topbaren forsvinder men den tynde
> menulinje bliver der.

Du er den første med en negativ kommentar til den faste
menu, alle andre kommentarer har været positive, og der er
endda flere som har kopieret ideen til deres egne hjemmesider.

Jeg har brugt den på min hjemmeside i signaturen siden IE7
blev udsendt.

--
Mvh. Kim Ludvigsen
Hjælp til computeren og internettet:
http://kimludvigsen.dk



Martin Larsen (26-10-2011)
Kommentar
Fra : Martin Larsen


Dato : 26-10-11 22:17

Kim Ludvigsen wrote:

> Du er den første med en negativ kommentar til den faste menu, alle andre
> kommentarer har været positive, og der er endda flere som har kopieret
> ideen til deres egne hjemmesider.

Smag og behag er jo forskellig. Det er ikke den faste topbar i sig selv
jeg opponerer imod, det er det at den "går i stykker", dvs. at selve
menuen river sig løs fra topgrafikken.

Desuden ser det ikke pænt ud *mens* man scroller, fx "ser man dobbelt"
undervejs: http://i42.tinypic.com/293hqfq.png

Måske det kan laves med en anden teknik?

Kim Ludvigsen (26-10-2011)
Kommentar
Fra : Kim Ludvigsen


Dato : 26-10-11 22:28

Martin Larsen skrev:

> Smag og behag er jo forskellig. Det er ikke den faste topbar
> i sig selv jeg opponerer imod, det er det at den "går i
> stykker", dvs. at selve menuen river sig løs fra topgrafikken.
>
> Desuden ser det ikke pænt ud *mens* man scroller, fx "ser
> man dobbelt" undervejs: http://i42.tinypic.com/293hqfq.png

Det er fordi, menuen ikke river sig løs. Den slags kan man
måske lave med JavaScript, men min menu er lavet ganske
simpelt med css og z-index. Der ligger en skjult menu bag
topgrafikken, og den bliver så synlig, når man ruller op.

Der er således tre lag: Øverst topgrafikken, så den faste
menu, og endelig resten af siden, der rulles op under den
faste menu.

> Måske det kan laves med en anden teknik?

Du er velkommen til at foreslå et alternativ, men jeg
foretrækker en løsning uden JavaScript.

--
Mvh. Kim Ludvigsen
Hjælp til computeren og internettet:
http://kimludvigsen.dk

Martin Larsen (26-10-2011)
Kommentar
Fra : Martin Larsen


Dato : 26-10-11 23:35

Kim Ludvigsen wrote:

> Du er velkommen til at foreslå et alternativ, men jeg foretrækker en
> løsning uden JavaScript.

Jeg har i al fald en ide til det med de +30 px:

Det tog mig lidt tid at finde ud af hvordan du har lavet ankre. Jeg
kendte kun metoden med <a name="anker"></a> men det viser sig åbenbart
at man kan bruge et elements id som anker, hvilket du har gjort brug af.

Men hvis du i stedet benytter den traditionelle metode med name
attributen, fx

....
<a name="oversigt_platinum"></a>
<h3 class='luft'>Platinum Fashion Mall</h3>
....

Så kan du i din css lave følgende trick:

#midt :target {
padding:10px;
}

Hvilket giver en ekstra padding på det ene element du er hoppet til, og
kun det. Hvis du hopper til et andet sted, "hopper paddingen med" så at
sige.

Kim Ludvigsen (27-10-2011)
Kommentar
Fra : Kim Ludvigsen


Dato : 27-10-11 01:48

Martin Larsen skrev:

> <a name="oversigt_platinum"></a>
> <h3 class='luft'>Platinum Fashion Mall</h3>
> ...
>
> Så kan du i din css lave følgende trick:
>
> #midt :target {
> padding:10px;
> }

Det er fakisk en fin løsning, hvis man lige laver det om til
"padding-top" i stedet, men "name" er på vej ud, og så vidt
jeg kan forstå ikke ikke tilladt i HTML5, som jeg bruger.

Og bruger jeg padding'en på target uden at indsætte
name-elementer, har det desværre utilsigtede virkninger. I
tilfældet med mellemrubrikkerne vil rubrikbjælken få tillagt
paddingen, og ved billeder vil paddingen blive indsat inden
for billedets ramme.

--
Mvh. Kim Ludvigsen
Undgå faldgruberne, sådan vælger du det rette webhotel:
http://kimludvigsen.dk/tips-internet-websnedker-webhotel.php

Martin Larsen (27-10-2011)
Kommentar
Fra : Martin Larsen


Dato : 27-10-11 09:32

Kim Ludvigsen wrote:

> Det er fakisk en fin løsning, hvis man lige laver det om til
> "padding-top" i stedet

Ja det er naturligvis padding-top jeg mente! Det var også det jeg
indsatte med firebug på din side.

> men "name" er på vej ud, og så vidt jeg kan

Det virker også uden name, prøv at klikke på en fodnote i Wikipedia. Her
bruger de :target til at lave en lyseblå baggrund.

> Og bruger jeg padding'en på target uden at indsætte name-elementer, har
> det desværre utilsigtede virkninger. I tilfældet med mellemrubrikkerne
> vil rubrikbjælken få tillagt paddingen, og ved billeder vil paddingen
> blive indsat inden for billedets ramme.

Hvis det er vigtigt for dig at undgå name, så kunne du jo bare lave en
tom div i stedet for.

Fordelen ved :target er at det virker uden JS og efter min mening er
mere "korrekt". I gåseøjne, for korrekt er sgu det der virker

Kim Ludvigsen (27-10-2011)
Kommentar
Fra : Kim Ludvigsen


Dato : 27-10-11 09:42

Martin Larsen skrev:
> Kim Ludvigsen wrote:
>
> Det virker også uden name, prøv at klikke på en fodnote i
> Wikipedia. Her bruger de :target til at lave en lyseblå
> baggrund.
>
> Hvis det er vigtigt for dig at undgå name, så kunne du jo
> bare lave en tom div i stedet for.

Ja, men det vil være et temmelig stort arbejde, fordi jeg i
udstrakt grad bruger links til ID'er. Det vil betyde, at jeg
skulle ind og fjerne alle eksisterende ID'er på fx
mellemrubrikker og billeder og så indsætte den tomme div. Og
så stort er problemet trods alt ikke. Det er vist kun to
sider, hvor jeg i øjeblikket har problemet med
mellemrubrikkerne.

Problemet med foldeud-boksene blev løst med scootergrisens
løsning.

--
Mvh. Kim Ludvigsen
Gør din hjemmeside mere intelligent, begynderguide om PHP:
http://kimludvigsen.dk/programmer-internet-kompozer-trin-php.php

Lasse Reichstein Nie~ (29-10-2011)
Kommentar
Fra : Lasse Reichstein Nie~


Dato : 29-10-11 13:08

Kim Ludvigsen <usenet@kimludvigsen.dk> writes:

> Jeg har nogle ankre, hvor jeg gerne vil kunne hoppe til det pågældende
> sted på siden +30 px. Jeg har en fixed menu øverst på siden, og ved
> klik på et anker, havner ankerpunktet bag menuen.
>
> Jeg kan ikke lave ekstra afstand i form af padding-/margin-top på
> ankeret i dette tilfælde, da det vil give for store huller på siden.

Der er et hack: Negativ margin.

Prøv at give elementet en negativ margin, og en lige så stor positiv
padding. Så får det samme rendering som hvis det havde nul i begge
(hvis den skal have mere end nul, så forøg paddingen). Og det virker
selvfølgelig ikke hvis elementet har en border. I det tilfælde kan
du putte selve ankeret ind i et omkrandsende element der så har borderen.

Hvis man gør det, så vil browserne scrolle til toppen af elementet, som
usynligt er sat til, fx, 30 px højere oppe end det egentlig ser ud til.

En hurtig test i fire browsere (Chrome, Opera, IE, Firefox) ser ud til
at det virker, selvom jeg ikke er sikker på at de scroller til helt
samme sted.

> Er det muligt ved hjælp af JavaScript at lave en funktion, så siden
> automatisk rulles 30 px ned, når der er klikket på et anker?

Der er ikke nogen god måde at tjekke om man har klikket på et anker,
ud over at putte en onclick-event på hvert link til et anker. Det bliver
kompliceret, og man bliver nødt til at indsætte en forsinkelse for at
være sikker på at der er blevet scrollet til et nyt anker før man scroller
mere (og det er heller ikke helt trivielt at scrolle dokumentet så præcist).

> Jeg er temmelig blank på JavaScript, så meget gerne en forklaring, en
> novice kan forstå.

Undgå Javascript til du har lært lidt mere om det så, hvis det er muligt
- med mindre selvfølgelig du laver siden *for* at lære om Javascript :).

/L
--
Lasse Reichstein Holst Nielsen
DHTML Death Colors: <URL:http://www.infimum.dk/HTML/rasterTriangleDOM.html>
'Faith without judgement merely degrades the spirit divine.'

Kim Ludvigsen (29-10-2011)
Kommentar
Fra : Kim Ludvigsen


Dato : 29-10-11 18:30

Lasse Reichstein Nielsen skrev:
> Kim Ludvigsen<usenet@kimludvigsen.dk> writes:
>
>> Jeg kan ikke lave ekstra afstand i form af padding-/margin-top på
>> ankeret i dette tilfælde, da det vil give for store huller på siden.
>
> Der er et hack: Negativ margin.

Det prøvede jeg i sin tid, da jeg lavede den første side med
en fast menu. Enten virkede det ikke, eller også var der en
bivirkning ved det. Jeg kan ikke længere huske, hvorfor jeg
opgav den løsning. Men jeg vil lige prøve at se på den igen
ved lejlighed. Måske jeg har gjort noget forkert dengang.

> Undgå Javascript til du har lært lidt mere om det så, hvis det er muligt
> - med mindre selvfølgelig du laver siden *for* at lære om Javascript :).

Det gør jeg absolut ikke. Jeg er en nød til at lære den
slags. Jeg har lært noget PHP, og meget, meget lidt
JavaScript, men det har altid været noget hackeri, hvor jeg
prøver mig frem i stedet for at lære/vide tingene. Og jeg
har som regel glemt løsningerne igen næste gang, jeg skal
lave det samme. Øv.

--
Mvh. Kim Ludvigsen
Hold din drømmeferie i Thailand. Find tips og info på:
http://rejse-til-thailand.dk

Lasse Reichstein Nie~ (30-10-2011)
Kommentar
Fra : Lasse Reichstein Nie~


Dato : 30-10-11 11:14

Kim Ludvigsen <usenet@kimludvigsen.dk> writes:

> Lasse Reichstein Nielsen skrev:
>> Kim Ludvigsen<usenet@kimludvigsen.dk> writes:
>>
>>> Jeg kan ikke lave ekstra afstand i form af padding-/margin-top på
>>> ankeret i dette tilfælde, da det vil give for store huller på siden.
>>
>> Der er et hack: Negativ margin.
>
> Det prøvede jeg i sin tid, da jeg lavede den første side med en fast
> menu. Enten virkede det ikke, eller også var der en bivirkning ved
> det. Jeg kan ikke længere huske, hvorfor jeg opgav den løsning. Men
> jeg vil lige prøve at se på den igen ved lejlighed. Måske jeg har
> gjort noget forkert dengang.

Den er måske ikke helt fin i kanten, så det kan være forskellige browsere
opfører sig forskelligt.

En anden mulighed er at lave et anker der ikke er selve elementet, men som
er placeret 30px højere oppe, fx:

<h1><span style="width:0;height:0;display:block;position:relative;top:-30px"
id="anker_id"></span>Min overskrift</h1>

Det kan måske give problemer mht. tilgængelighed (fx for en screen-reader),
men det ved jeg ikke nok om til at kunne sige med sikkerhed.

/L
--
Lasse Reichstein Holst Nielsen
DHTML Death Colors: <URL:http://www.infimum.dk/HTML/rasterTriangleDOM.html>
'Faith without judgement merely degrades the spirit divine.'

Kim Ludvigsen (30-10-2011)
Kommentar
Fra : Kim Ludvigsen


Dato : 30-10-11 13:53

Lasse Reichstein Nielsen skrev:
> Kim Ludvigsen<usenet@kimludvigsen.dk> writes:
>
>>> Der er et hack: Negativ margin.
>>
>> Det prøvede jeg i sin tid, da jeg lavede den første side med en fast
>> menu. Enten virkede det ikke, eller også var der en bivirkning ved
>
> Den er måske ikke helt fin i kanten, så det kan være forskellige browsere
> opfører sig forskelligt.

Det kan også være, der er sket ændringer i browserne, siden
jeg sidst prøvede. Det er trods alt nogle år siden.

> En anden mulighed er at lave et anker der ikke er selve elementet, men som
> er placeret 30px højere oppe, fx:
>
> <h1><span style="width:0;height:0;display:block;position:relative;top:-30px"
> id="anker_id"></span>Min overskrift</h1>

Den ser ud til at virke i alle browsere uden utilsigtede
virkninger (testet i IE8, Firefox7, Chrome og Opera). Og
løsningen har den fordel i forhold til Martins løsning med
target, at jeg kan udskifte id'erne i ro og mag, ét ad
gangen uden at få ødelagt noget, på de ikke-ændrede id'er.

Er der en, der gider at teste med IE9 og evt. andre browsere
på nedenstående side?
http://rejse-til-thailand.dk/fly
Span-ankeret er indsat på billedet fra lufthavnen og
mellemrubrikken Air Asia, som altså helst ikke skulle have
ekstra luft over sig, og som burde placeres korrekt under
menuen med ankrene #suvarnabhumi og #airasia.

Jeg tror egentlig, jeg prøvede noget lignende i gamle dage
(årsskiftet 2006/2007), men at det ikke virkede dengang,
fordi en af browserne ikke tillod en højde på 0 på span. Men
som med den negative margen er det ikke umuligt, at jeg
husker forkert.

--
Mvh. Kim Ludvigsen
Gør din hjemmeside mere intelligent, begynderguide om PHP:
http://kimludvigsen.dk/programmer-internet-kompozer-trin-php.php

Jens Peter Karlsen (30-10-2011)
Kommentar
Fra : Jens Peter Karlsen


Dato : 30-10-11 17:18

Virker fint i IE9.

Regards Jens Peter Karlsen.

On Sun, 30 Oct 2011 19:53:18 +0700, Kim Ludvigsen
<usenet@kimludvigsen.dk> wrote:

>Er der en, der gider at teste med IE9 og evt. andre browsere
>på nedenstående side?

Søg
Reklame
Statistik
Spørgsmål : 177577
Tips : 31968
Nyheder : 719565
Indlæg : 6409070
Brugere : 218888

Månedens bedste
Årets bedste
Sidste års bedste