placering af billeder i div - overlappet

... og hvordan plusser man i javascript?
Efter en bog jeg har, lægger man 2 tal sammen således:

10 += 20;

Jeg har gået i folkeskole i 10 år, og efter min bedste overbevisning skal resultatet være 30.
I Javascriptens verden giver det dog 1020!!!

Plusser man således 5 gange i en lykke giver det 102020202020 for det 5. billede. Det er fame langt ude i browservinduet man således skal finde de sidste overlappede billeder!

parseInt() var delvis løsningen. Den anden fejl var at koden
var Ltop = document.getElementById('Layer30').style.top
ikke returnerer nogen værdi.

Fandt funktionerne posX og posY her: http://www.eksperten.dk/spm/626097

Næste problem er at få det til at virke i Firefox!

Her er hvad jeg indtil videre har:

    function PosImageLayer(id) {

        Ltop = parseInt(posY(document.getElementById('Layer30'))+20);
        Lleft = parseInt(posX(document.getElementById('Layer30'))+20);
       
        for (i=0; i<4; i+=1) {
            Y=110+i;
            document.getElementById('Layer' + Y).style.left=Lleft;
            document.getElementById('Layer' + Y).style.top=Ltop;
            Lleft += 60;
            Ltop += 20;
           
        }
    }
function posX(obj){
  return(obj.offsetParent==null ? obj.offsetLeft : obj.offsetLeft+posX(obj.offsetParent));
}

function posY(obj){
  return( obj.offsetParent==null ? obj.offsetTop : obj.offsetTop+posY(obj.offsetParent));
}

Hej akyhne,


Grunden til at resultatet ikke bliver 30 er at Ltop bliver fortolket som en streng da style.top er en streng (f.eks "10px"). Så hvis din Layer30 er placeret ved top=0 og left=0 vil dine to variable Ltop og Lleft indeholde to tomme strenge (""). Når du så herefter bruger + og += fortolker javascript det som en concatenation der bare sammenkæder de to variable. Altså:


"10" += 20    bliver til  "1020"


Løsningen for dig ville måske være at bruger offsetTop/Left i stedet da den returnerer en numerisk værdi og ikke en streng. Og for at scriptet også skal virke i andre browsere end IE skal du assigne style.left indeholdende en "px"-værdi altså:


style.left = Lleft + "px";


Så dit scriptet med de ændringer jeg foreslår:


function PosImageLayer(id)
{
    var Ltop = document.getElementById('Layer30').offsetTop;
    var Lleft = document.getElementById('Layer30').offsetLeft;
 
    for (i=0; i<4; i+=1)
    {
        Y=110+i;
        document.getElementById('Layer' + Y).style.left = Lleft + "px";
        document.getElementById('Layer' + Y).style.top = Ltop + "px";

        Lleft += 60;
        Ltop += 20;
    }

}


burde virke fint. :)


Mvh.

- Snap

Hov, der nåede du jo så at svare selv. :)
Og som du rigtigt nok har gjort skal du lave en metode posX og posY som rekursivt kalder sig selv med offsetParent (hvis der er nogen). Dette skyldes at Mozilla f.eks altid giver offset'et af et element relativt til hele siden hvorimod Opera giver et offset relativt til det element som omslutter offset-elementet. :)


Så skal du bare huske at at tilføje +"px" til din style.left i løkken! :)


Mvh.

- Snap

Men hvorfor positionerer du ikke bare tingene inde i diven ?-)

<div style="position:relative;width:400px;height:300px;border:1px solid red;">
  <img src="../billede.jpg" style="width:100px;position:absolute;left:60px;top:20px;">
  <img src="../billede.jpg" style="width:100px;position:absolute;left:80px;top:40px;">
  <img src="../billede.jpg" style="width:100px;position:absolute;left:100px;top:60px;">
  <img src="../billede.jpg" style="width:100px;position:absolute;left:120px;top:80px;">
</div>

roenving: Billederne kommer fra en database (Mysql), og bliver hentet med PHP. Jeg kender ikke dimensionerne af et billede der ligger ovenfor, og derfor ikke pos. af div, jeg kender ikke antallet af thumbs der kommer (kunne jeg selvf. med et ekstra kald), og ved klik på en af mine thumbs skal det valgte billede lægge sig forrest (skifte placering af alle thumbs), enten via et udvidet script af ovenstående, eller via reload af siden.

//akyhne

... så vidt jeg ved kan man kun positionere layers ovenpå hinanden ved position: absolute. Billederne skal nok vises som baggrundsbilleder i layers, da der (måske) skal være en lille tekst ovenpå hvert billede.

<ole>

"[...] bliver hentet med PHP. Jeg kender ikke dimensionerne af et billede [...]"

Hvorfor ikke det? Netop, når du henter billederne med PHP, kender du da dimensionerne  =)
    http://dk2.php.net/getimagesize

/mvh
</bole>

Det var måske også forkert (utilstrækkelig) udtrykt:

Jeg kender ikke størrelsen af et stort billede, tekst, divs m.m. der ligger over.

-- den eneste grund til at jeg i ovenstående eksempel har benyttet mig af width, var fordi det billede, jeg brugte ikke passede så godt i dimensionerne, det er principielt ligegyligt !-)

roenving: Når jeg bruger dit eksempel, placeres mine layers (som indeholder billederne) absolut fra top/venstre af dokumentet.

- er det ikke det, du beder om?

Men flytter du diven følger billederne med !-)

Jo, men de går ud over den div de er placeret i.

Ja, den skal være stor nok ...

... og derfor hellere sætte størrelsen efterfølgende. Lavede lige et eksempel: http://www.racingcar.dk/eksperten/html/billeder.html

Næste problem er at jeg ikke kender antallet af billeder ved <body onload="...
Siden med ovenstående er nemlig inkluderet. Hvordan kører man et Javascript, eksempelvis lige før </body>?

Koden (rolig, jeg skal nok få lavet det til en funktion):

<body onload="PosImageLayer(4, 25, 60); sidstethumb=4+109;Bund=parseInt(posY(document.getElementById('Layer'+sidstethumb))+168)-parseInt(posY(document.getElementById('Layer30'))); BundPx=Bund+'px';  document.getElementById('Layer30').style.height=BundPx">

Det er tallet 4 jeg ikke på forhånd kender...

Ingen der kan forklare mig hvordan man kører et JavaScript et tilfældigt sted på en side?

Jeg skal bare have kørt nedenstående java script:
<script type="text/javascript">stopCookie('<?php echo $test; ?>', '<?php echo $BeskrivelseJS; ?>');</script>

... men det er åbenbart ikke nok til at starte funktionen!

Kan du ikke vente med at udskrive til du kender tallet, som jo må komme fra din database ?-)

-- og at placere et script er lovligt stort set hvorsomhelst i et html-dokument (dog ikke udenfor body- eller head-tagget, så der må være noget, der kommer i vejen, med din stopCookie-funktion ...

Ovenstående cookie har ikke noget med det oprindelige spørgsmål at gøre. Det var blot et tillægsspørgsmål. Nedenstående kode virker, men ikke det JavaScript jeg postede 08:07:27:

<p><a href="#" onClick="skrivCookie('<?php echo $ttestt; ?>', '<?php echo $BeskrivelseJS; ?>', 0);">Hello World</a> </p>

De står kodemæssigt lige efter hinanden.

-- er funktionerne indlæst, når koden skal afvikles ?-)

Nedenstående er som det ligger på siden:
<head>
<script language="JavaScript" type="text/javascript" src="js/funktioner.js"></script>
</head>

<body onLoad="skrivCookie('<?php echo $ttestt; ?>', '<?php echo $BeskrivelseJS; ?>', 1);"> // virker (sætter cookie)

<?php
  $sql = "UPDATE `events`bla, bla, bla"
  aabn_forbindelse_og_vaelgdb();
  sql_spoerg($sql);
  luk_forbindelse();
?>
//hvis der ingen fejl er med UPDATE, fortsætter koden, og cookien bliver slettet
<script type="text/javascript">skrivCookie('<?php echo $ttestt; ?>', '<?php echo $BeskrivelseJS; ?>', 0);</script> // virker ikke (skal slette cookie)

<p><a href="#" onClick="skrivCookie('<?php echo $ttestt; ?>', '<?php echo $BeskrivelseJS; ?>', 0);">Hello World</a> </p> // virker (sletter cookie)

</body>

Den eneste forskel på sæt eller slet er om tiden er 0 eller >0

SkrivCookie ser således ud (egentlig irellevant, da den virker):

function skrivCookie(name,value,expTime,path){//Tid i dage
    switch(skrivCookie.arguments.length){
        case 1,2:
            var expTime = 0;
            var path = "/";
        case 3:
            var path = "/";
    }
    var exp = new Date().getTime()+expTime*24*60*60*1000;
    exp = new Date(exp).toGMTString();
    var cook = name + " = " + escape(value) + ";expires=" + exp + ";path=" + path;
    document.cookie = cook;
}

... og ja, jeg ved godt jeg burde vente med body til alt PHP er afviklet...

... og hvorfor bruger jeg JS cookies og ikke PHP cookies: Fordi jeg gerne vil have et output på skærmen før cookien slettes. PHP Sessions er udelukket (gud opfandt dem i vrede)

-- prøv at sætte cookie-skrivningen med -1 !-)

Har jeg længe prøvet... :-(

har også prøvet med denne:

function stopCookie(name,value){

    var today = new Date();
    var cook = name + " = " + escape(value) + ";expires=" +  today.toGMTString();
    document.cookie = cook;
}

Prøv med:

var today = new Date(1);

Intet hjalp. Jeg omskrev det hele og bruger PHP Cookies.

Det lader til at hver gang jeg prøver at sætte mig lidt ind i JavaScript, virker intet hos mig som hos andre :-(

Nogen der føler trang til lidt point?

Nå, så har jeg samme problem med en anden funktion der bare ikke virker. Det vil sige den virker ved body onload, klik på en button(onClick), men ikke hvis jeg blot skriver:

<script type="text/javascript">
    chkindholdsdiv('LangBeskrivelse', 'tester');
</script>

Skulle denne kode ikke blive afviklet?

Som du ser, sker der f.eks. ikke noget, når den står her. På samme måde er det helt afgørende, hvilket miljø den står skrevet i på din side. Prøv noget mere kode  =)

- er indholdsdiv'et overhovedet udskrevet til siden, når du foretager kaldet? Du skal jo nok ikke kalde før onload-event'en fyres af  ;o)

Jeg sætter scriptet efter mine divs:

http://www.eksperten.dk/spm/781734

Den rigtige kode er noget lignende

head
funktionen
/head

body
div LangBeskrivelse
div tester
kald funktionen()
/body

Skriv et link ... ellers giver det ikke rigtig mening  =)

Arggg... på grund af php echo af diverse tables, tr's & td's var mit script havnet inde i en table, mellem en </td> og en </tr>.

Efter at have flyttet scriptet ned under tabellen, fungerer det nu! Så fejlen da jeg skulle lave en testside i ren html.

http://www.vamdrup-info.dk/index.php?id=minisite&add=virk&grp=vamdrup-info.dk

Hvad kan man lære af det. Jeg havde ikke valideret min html kode. *SS*

- tjaaaah, du kan vel lære det samme, som roenving og jeg prøver at lære, hver eneste gang, vi laver samme type fejl  ;oD

Hvad søren, jeg troede da I to var fejlfrie *SSS*

Pointfordeling: Selvom jeg i princippet selv løste mit oprindelige problem, lærte jeg lidt af crazysnap & roenving. Problemet med slet at cookie med Javascript (29/05-2007 16:25:39), blev aldrig løst. Satte jeg en positiv tid, blev levetiden forlænget. Med en negativ tid skete der intet.

Er det retfærdigt nok?

Hej Igen,

Jeg har ikke bidraget med meget på denne her tråd så ingen point til mig tak! :)


Held og lykke med det...


Mvh.

- Snap

Har du prøvet med kombinationen af

akyhne 29/05-2007 17:27:58
og
roenving 29/05-2007 17:38:34

-- til at slette cookien ?-)

-- fidusen skulle være at sætte udløbstiden til 1/1-1970 00:00:01 !-)

Det fik jeg vidst ikke prøvet. Jeg skal vende tilbage med det engang. Siden er total omskrevet nu, men jeg har en lignende side hvor jeg kan prøve.
Nu har jeg ikke en ordentlig håndbog over Javascript (WWW -Illustreret håndbog fra 1996 *SSS*), men skulle en cookie ikke slettes, blot tiden er negativ? Jeg prøvede med en måned bagud, men lige lidt hjalp det :-(

Jeg kan ikke huske det konkrete, men der er også noget med hvornår der eksekveres en rettelse af tidsstemplet og browseren fjerner den fra sin aktive hukommelse (noget med, at det kun er sikkert, hvis browseren har været lukket !-)

Hmmm, derfor burde den jo stadig være ugyldig, hvis datoen er før d.d. Det lyder mere og mere som sessions i PHP. De har heller ingen virkning før næste sidekald!

Sessions i PHP fungerer netop også pr. default ved hjælp af cookies - så det er såmænd ikke så sært  ;o)

Jeg ved ikke om I blev så meget klogere. Det gjorde jeg ikke, hvad angår cookies. Skal vi lukke?

Det er svært at blive klogere på noget, man ikke ved, hvad er. Jeg har aldrig oplevet tilsvarende problemer med cookies - så jeg må formode, du har lavet nogle fejl, der ikke har været diskuteret i denne tråd  =)

Kan det mon skyldes, at de ting, du gør ved en cookie, ikke afspejles i samme dokument - men i efterfølgende dokumenter?

Måske skyldtes det at jeg satte og slettede cookien i samme dokument.

*LoL* ja, hvis du har gjort det, er der nok ikke så meget at sige til, det ikke funkede. Somme tider er det zq nogle sære ting, vi får skrevet i koderne  ;D

Det er bare sjovt der virker med en forlængelse af tiden, blot ikke med sletning, men så meget er jeg heller ikke inde i JavaScriptens og html'ens underfundigheder ;-)

Skal vi lukke, og hvordan med pointfordeling?