Avatar billede swon Nybegynder
05. august 2010 - 19:51 Der er 6 kommentarer

floating div flyder ud af skærmen

Hej,

Det problem jeg søger hjælp til er positionen af en floating div.
Denne div bruges lidt på samme måde, som på addthis.com - og skal ligeledes kunne flyde rundt om knappen på samme måde, når browser vinduet størrelse ændres.
Ligeledes er det vigtigt at det fungere i alle slags browsere.

Diven kan ses her: www.langthis.com (knappen hvor der står "try it")

Den relevante kode burde være dette stykke:
function move_box(an, box)
{
    var cleft = 0;
    var ctop = 0;
    var obj = an;

    while (obj.offsetParent)
    {
        cleft += obj.offsetLeft;
        ctop += obj.offsetTop;
        obj = obj.offsetParent;
    }

    var winW = window.innerWidth ? window.innerWidth : document.documentElement.clientWidth ? document.documentElement.clientWidth : document.body.clientWidth;
    var winH = window.innerHeight ? window.innerHeight : document.documentElement.clientHeight ? document.documentElement.clientHeight : document.body.clientHeight;
   
    if (cleft+box.offsetWidth > winW) {
        cleft = cleft - box.offsetWidth - 30;
        if (cleft < 3)   
            cleft = -3;
    }
   

    box.style.left = cleft + 'px';

    ctop += an.offsetHeight + 8;

    // Handle Internet Explorer body margins,
    // which affect normal document, but not
    // absolute-positioned stuff.
    if (document.body.currentStyle &&
        document.body.currentStyle['marginTop'])
    {
        ctop += parseInt(document.body.currentStyle['marginTop']);
    }

    if (ctop+box.offsetHeight > winH) {
        ctop = ctop - box.offsetHeight - 20;
        if (ctop < 3)
            ctop = -3;
    }

    box.style.top = ctop + 'px';
}
Avatar billede Slettet bruger
06. august 2010 - 00:49 #1
Det er for sent på aftenen til at følge din kode - tror det handler om at du blander box og an's beregnede positioner sammen... måske..

Men hvorfor overhovedet lade den floate omkring ?

Hvorfor ikke bare positionere den .. 250px tilhøjre for den store "Why LangThis?"
- og "popop'en" så dens nederst højre hjørne præcis dækker "translate-knappen" sådan at ens mus garanteret er indenfor rammerne efter klik.

Jeg (Firefox på linux) kommer i problemer med at popop'en ligger lidt væk fra knappen, og når jeg forsøger at flytte musen ind for at klikke på danish, forsvinder popop'en - men dukker op igen når jeg muser tilbage til knappen - Catch(not)22, medmindre man virkelig skynder sig.

PS: Lidt af en "strategisk sandhed", at mit website kan forstås i alle lande:
- Både InterTran og Google giver mig grå hår:

"No, just give me the button." => "Ikke, netop indrømme mig den knap."
- KUNNE man måske godt, med meget god vilje, decifrere..

"Have an account? Sign in" => "Nyde en beretning? Påtegne i"
- Giver bare overhovedet ingen mening!

Mens Microsofts Live, faktisk er rimelig god til dansk - nærmest perfekt  ?!?

Er det gratis (for dig) at benytte dem (alle tre) på den måde ?
Avatar billede swon Nybegynder
06. august 2010 - 19:21 #2
Hej T4NK3R,

Jeg tror du har misforstået konceptet lidt, det er ikke en knap blot for min hjemmeside. Formålet er bestemt at knappen skal benyttes af så mange som muligt på deres individuelle hjemmesider.

Derfor kan placeringen af knappen heller ikke være fast, da jeg ikke ved hvor brugeren vil placere knappen på sin hjemmeside.
Se www.addthis.com for inspiration.

At nogle af oversættelses værktøjerne er bedre end andre er der ingen tvivl om, ligesom der ikke er tvivl om at de alle videreudvikles med tiden.

Søger dog stadig hjælp til javascriptet.

(desuden er der 6 oversættelses service, alt efter hvilke sprog der oversættes fra/til)
Avatar billede Slettet bruger
06. august 2010 - 19:34 #3
Hm..
Hvordan kan du positionere en knap som skal ligge på en side du intet kender til ?
Avatar billede swon Nybegynder
17. august 2010 - 00:18 #4
Som sagt, kig på addthis.com - de gør det! så det kan lade sig gøre. :-)
Avatar billede Slettet bruger
17. august 2010 - 07:54 #5
Prøv at beskrive præcis, hvordan den skal virke, ideelt set.
(jeg gider ikke sidde og undersøge koden bag et tredie site)
Avatar billede swon Nybegynder
18. august 2010 - 13:26 #6
Der er et billede eller en link med class/id="langthis" (skal nok være class for at den kan hentes flere steder på en blog f.eks.)

Javascriptet kør ved at den finder dette class, og positionen af denne på skærmen.

Herefter den tjekker størrelsen af browservinduet, og om den kan åbne en div med størrelsen x*x under og til højre for denne class.

Er der ikke plads til denne størrelse div under og til højre, tjekker den om der er plads under og til venstre for.
Er dette igen ikke tilfældet over og til højre - og til sidst over og til venstre for denne class.
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

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