Avatar billede benzon Praktikant
28. oktober 2012 - 20:36 Der er 22 kommentarer og
1 løsning

Modificering af script floating banner, fra top til bund

Jeg prøver på at modificere et script, som skal bruges til alternativ måde og vise links på, egentlig er det bygget til banner reklamer, men det er ikke formålet med det længere.

Scriptet, lægger banneret i topen og tilføjer en magin jeg har fastsat i mit tilfælde 80.

Jeg vil dog gerne have de følger bunden af skærmen i stedet, da de så vil ligge bedre i mine øjne, og lige nu følger det toppen af skærmen som sagt, jeg har selv prøvet mig frem men kan ikke finde en løsning.

[code]
function FloatTopDiv()

{

    startLX = ((document.body.clientWidth -MainContentW)/2) - (LeftBannerW+LeftAdjust) , startLY = TopAdjust;

    startRX = ((document.body.clientWidth -MainContentW)/2) + (MainContentW+RightAdjust) , startRY = TopAdjust;

    var d = document;

    function ml(id)

    {

        var el=d.getElementById?d.getElementById(id):d.all?d.all[id]:d.layers[id];

        el.sP=function(x,y){this.style.left=x + 'px';this.style.top=y + 'px';};

        el.x = startRX;

        el.y = startRY;

        return el;

    }

    function m2(id)

    {

        var e2=d.getElementById?d.getElementById(id):d.all?d.all[id]:d.layers[id];

        e2.sP=function(x,y){this.style.left=x + 'px';this.style.top=y + 'px';};

        e2.x = startLX;

        e2.y = startLY;

        return e2;

    }

    window.stayTopLeft=function()

    {

        if (document.documentElement && document.documentElement.scrollTop)

            var pY =  document.documentElement.scrollTop;

        else if (document.body)

            var pY =  document.body.scrollTop;

        if (document.body.scrollTop > 30){startLY = 3;startRY = 3;} else {startLY = TopAdjust;startRY = TopAdjust;};

        ftlObj.y += (pY+startRY-ftlObj.y)/16;

        ftlObj.sP(ftlObj.x, ftlObj.y);

        ftlObj2.y += (pY+startLY-ftlObj2.y)/16;

        ftlObj2.sP(ftlObj2.x, ftlObj2.y);

        setTimeout("stayTopLeft()", 1);

    }

    ftlObj = ml("divAdRight");

    //stayTopLeft();

    ftlObj2 = m2("divAdLeft");

    stayTopLeft();

}

function ShowAdDiv()

{

    var objAdDivRight = document.getElementById("divAdRight");

    var objAdDivLeft = document.getElementById("divAdLeft");       

    objAdDivRight.style.display = "block";

    objAdDivLeft.style.display = "block";

    FloatTopDiv();

}
[/code]

Selve php delen er simpel og bruges via wordpress.

[code]
<?php
function append_code_to_body(){

?>

    <div id="divAdRight" style="position: absolute; bottom: 0px;"> <?php echo html_entity_decode(get_option('csnv_right_code')); ?></div><div id="divAdLeft" style="position: absolute; bottom: 0px;"><?php  echo html_entity_decode(get_option('csnv_left_code')); ?></div>

    <?php

        $screen_w    =    get_option("screen_w");

       

        $MainContentW    =    get_option("csnv_content_w")?get_option("csnv_content_w"):1000;

        $LeftBannerW    =    get_option("csnv_left_w")?get_option("csnv_left_w"):100;

        $RightBannerW    =    get_option("csnv_right_w")?get_option("csnv_right_w"):100;

        $LeftAdjust        =    get_option("csnv_margin_left")?get_option("csnv_margin_left"):10;

        $RightBannerW    =    get_option("csnv_margin_right")?get_option("csnv_margin_right"):10;

        $TopAdjust        =    get_option("csnv_margin_top")?get_option("csnv_margin_top"):80;

       

    ?>

    <script type="text/javascript">

        var clientWidth    =    document.body.clientWidth;

        if(clientWidth > <?php echo $screen_w; ?>){

            MainContentW = <?php echo $MainContentW; ?>;

            LeftBannerW = <?php echo $LeftBannerW; ?>;

            RightBannerW = <?php echo $RightBannerW; ?>;

            LeftAdjust = <?php echo $LeftAdjust; ?>;

            RightAdjust = <?php echo $RightBannerW; ?>;

            TopAdjust = <?php echo $TopAdjust; ?>;

            ShowAdDiv();

            window.onresize=ShowAdDiv;

        }

    </script>

<?php   

}
?>
[/code]

Jeg har selv prøvet et par ændringer, skiftede alle document.body.scrollTop til document.body.scrollBottom

Så er banneret nede ved bunden af skærmen, men scroll delen virker ikke, den følger bare ikke når jeg scroller ned af, og det skal den jo helst.
Avatar billede olebole Juniormester
28. oktober 2012 - 21:17 #1
<ole>

En mere tidsvarende og langt enklere tilgang:

<style type="text/css">
#banner {
    position: fixed;
    width: 600px;
    height: 80px;
    bottom: 10px;
    left: 50%;
    margin-left: -300px;
    background: red;
}
</style>

<div id="banner"></div>
<div style="height:2500px;width:100px;background:yellow">Højt indhold</div>

/mvh
</bole>
Avatar billede benzon Praktikant
28. oktober 2012 - 21:41 #2
Hej Olebole

Perfekt, det var da rart og slippe for javascript!!

Ehm nu har jeg så et spørgsmål, jeg har en footer på min side, kan jeg undgå at den går ned i footeren, men stopper ved footer kanten ?
Avatar billede olebole Juniormester
28. oktober 2012 - 22:43 #3
Nej, desværre ikke med position:fixed. Men du kunne jo lave luft under footeren, så banneret ender dernede, når brugeren har scrollet helt ned.

Det er ikke helt det samme, men spørgsmålet er, om det betyder noget. Formodentlig kan man uden større problemer kan designe/layoute sig ud af evt. problemer  =)
Avatar billede benzon Praktikant
28. oktober 2012 - 23:26 #4
tænker lidt, om det ville være nemmere med en jQuery Løsning? i og med jeg bruger jQuery til en del andet på siden.
Avatar billede olebole Juniormester
29. oktober 2012 - 01:11 #5
En af fordelene ved position:fixed er, at elementet ligger fuldstændig dødt ... limet fast til dets position i viewport'en. Ved en scriptløsning vil elementet altid hoppe lidt.

Du kunne lade banneret have position:fixed, indtil der er scrollet måske 100px fra bund. Derefter kunne jQuery give det position:absolute og de offset-værdier det måtte have. Når der scrolles opad igen, kunne jQuery sætte position og de andre værdier tilbage. Bare en tanke  =)
Avatar billede benzon Praktikant
29. oktober 2012 - 01:16 #6
Ja det var en mulighed, det lyder logisk, men er nu ikke hammer stærk i jQuery desværre, normalt skal jeg finde eksempler, jeg kan arbejde ud fra, og modificere, inden for de begrænsninger jeg har.
Avatar billede olebole Juniormester
29. oktober 2012 - 01:47 #7
I ganske alm. JS/CSS ville det kunne se sådan ud:

<style type="text/css">
#banner {
    position: absolute;
    width: 600px;
    height: 80px;
    bottom: 10px;
    left: 50%;
    margin-left: -300px;
    background: red;
}
#footer {
    height: 70px;
    background: #eee;
    text-align: center;
}
</style>

<script type="text/javascript">
var elmBanner = null;
function myScroll() {
    var elmDoc = document.documentElement, elmBdy = document.body;
    if (elmDoc.scrollTop<=0 && elmBdy.scrollTop<=0) return;
    var elmScroll = elmDoc.scrollTop>0 ? elmDoc : elmBdy,
    nMaxScroll = elmScroll.scrollHeight-(elmDoc.clientHeight+80),
    css = elmBanner.style;
    if (nMaxScroll<elmScroll.scrollTop) {
        css.position = "absolute";
        css.top = (elmScroll.scrollHeight-170) + "px";
    } else {
        elmBanner.style.position = "fixed";
        css.top = "";
    }
}
function init() {
    elmBanner = document.getElementById("banner");
    if (window.addEventListener) window.addEventListener("scroll", myScroll, false);
    else window.attachEvent("onscroll", myScroll);
}
if (window.addEventListener) window.addEventListener("load", init, false);
else window.attachEvent("onload", init);
</script>

<div id="banner"></div>
<div style="height:2500px;width:100px;background:yellow">Højt indhold</div>
<div id="footer">Footer</div>
Avatar billede olebole Juniormester
29. oktober 2012 - 01:56 #8
PS: I nogle browsere er det dokumentElementet, der scroller - i andre er det bodyElementet. Derfor returnerer jeg, hvis de begges scrollTop er under 0.

Hvis scriptet fortsætter, må én af dem være over 0. Dét element er det scrollende element, og det kalder jeg så elmScroll. Tallene kan du fedte lidt rundt med, så de passer til dit design  =)
Avatar billede benzon Praktikant
29. oktober 2012 - 20:32 #9
Hej Ole.

jeg har lige prøvet det af, det er som om den bliver sat til absolute med det samme, i chrome når jeg scroller første gang forsvinder den røde box, og ser den først igen over footeren, og i IE bliver den på sin start plads.

ved ikke om det er mig der er helt lost hehe.
Avatar billede benzon Praktikant
29. oktober 2012 - 20:35 #10
og kunne man evt. tilføje at hvis pixel breden i browseren ikke er minimum 1024px så skjules banneret?
Avatar billede olebole Juniormester
29. oktober 2012 - 21:05 #11
Jeg er ret sikker på, du gør noget forkert. Prøv dette dokument, som virker i de browsere, jeg har tilgængelig på dene maskine. Det gemmer banneret, når viewport'en bliver under 1000px - hvilket ca. passer til en skærm med en bredde på 1024:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title></title>
<style type="text/css">
#banner {
    position: absolute;
    width: 600px;
    height: 80px;
    bottom: 10px;
    left: 50%;
    margin-left: -300px;
    background: red;
}
#footer {
    height: 70px;
    background: #eee;
    text-align: center;
}
</style>

<script type="text/javascript">
var elmBanner = null;
function setVisibility() {
    var css = elmBanner.style;
    if (document.documentElement.clientWidth<1000) {
        css.display = "none";
    }
    else css.display = "block";
}
function myScroll() {
    var elmDoc = document.documentElement, elmBdy = document.body;
    if (elmDoc.scrollTop<=0 && elmBdy.scrollTop<=0) return;
    var elmScroll = elmDoc.scrollTop>0 ? elmDoc : elmBdy,
    nMaxScroll = elmScroll.scrollHeight-(elmDoc.clientHeight+80),
    css = elmBanner.style;
    if (nMaxScroll<elmScroll.scrollTop) {
        css.position = "absolute";
        css.top = (elmScroll.scrollHeight-170) + "px";
    } else {
        elmBanner.style.position = "fixed";
        css.top = "";
    }
}
function init() {
    elmBanner = document.getElementById("banner");
    if (window.addEventListener) {
        window.addEventListener("scroll", myScroll, false);
        window.addEventListener("resize", setVisibility, false);
    } else {
        window.attachEvent("onscroll", myScroll);
        window.attachEvent("onresize", setVisibility);
    }
    setVisibility();
}
if (window.addEventListener) window.addEventListener("load", init, false);
else window.attachEvent("onload", init);
</script>
</head>
<body>

<div id="banner"></div>
<div style="height:2500px;width:100px;background:yellow">Højt indhold</div>
<div id="footer">Footer</div>

</body>
</html>
Avatar billede olebole Juniormester
29. oktober 2012 - 21:10 #12
PS: Hvis du tester i et dokument uden DTD eller med en ufuldstændig DTD, disables store og vigtige dele af CSS. Så kan man ikke forvente, noget fungerer. Mon ikke det var fejlen?  =)
Avatar billede benzon Praktikant
30. oktober 2012 - 13:25 #13
Hej Ole,

Du hade ret jeg glemte DTD :)

Nu har jeg så prøvet og integrere det på siden, men det vil vist ikke hvad jeg vil lige nu.

http://osdev.bzn.dk/

Banneret forsætter helt ned, og forsvinder delvist, ved ikke lige hvad der går galt.
Avatar billede olebole Juniormester
30. oktober 2012 - 15:47 #14
Der er tydeligvis noget af din øvrige kode, der hindrer, at scriptet ovenfor kan virke. Hvor fejlen/uhensigtsmæssigheden ligger, orker jeg ikke at finde  =)
Avatar billede olebole Juniormester
30. oktober 2012 - 17:24 #15
Sorry, jeg tog for givet, du havde ændret tallene, som jeg skrev i slutningen af #8. Prøv med 600:

    function myScroll() {
        var elmDoc = document.documentElement, elmBdy = document.body;
        if (elmDoc.scrollTop<=0 && elmBdy.scrollTop<=0) return;
        var elmScroll = elmDoc.scrollTop>0 ? elmDoc : elmBdy,
        nMaxScroll = elmScroll.scrollHeight-(elmDoc.clientHeight+80),
        css = elmBanner.style;
        if (nMaxScroll<elmScroll.scrollTop) {
            css.position = "absolute";
            css.top = (elmScroll.scrollHeight-600) + "px";
        } else {
            elmBanner.style.position = "fixed";
            css.top = "";
        }
    }

Jeg forstår ikke rigtig, hvorfor du vil gemme banneret, når skærmen bliver under 1024px bred. Dit banner begynder ca. 1370px fra venstre kant  =)
Avatar billede olebole Juniormester
30. oktober 2012 - 17:31 #16
Vrøvl ... også hvad bredden angår, så jeg forkert  :D

Prøv dette:

function setVisibility() {
    var css = elmBanner.style;
    if (document.documentElement.clientWidth<1100) {
        css.display = "none";
    }
    else css.display = "block";
}

Så gemmes banneret, når halvdelen af det er gemt. Leg lidt med tallet, til det passer med det, du ønsker
Avatar billede benzon Praktikant
30. oktober 2012 - 18:19 #17
For at få det til at virke, ændrede jeg faktisk i ehm

nMaxScroll = elmScroll.scrollHeight-(elmDoc.clientHeight+80),

Den satte jeg til +400 og nu stopper den hvor den skal ser det ud til
Avatar billede benzon Praktikant
30. oktober 2012 - 18:20 #18
men nu er problemet at hvis man hiver i scrollbaren virker den ikke som den skal hehe
Avatar billede olebole Juniormester
30. oktober 2012 - 20:15 #19
Begynd med at give banneret display:fixed i CSS'en. Dernæst har jeg skrevet scriptet lidt om, så det selv indregner bannerhøjden. Det skal bare have højden af footer'en og bredden, der skal gemmes under:

<script type="text/javascript">
var elmBanner = null,
nFooterHeight = 438,
nHideBelow = 1200;

function setVisibility() {
    var css = elmBanner.style;
    if (document.documentElement.clientWidth<nHideBelow) {
        css.display = "none";
    }
    else css.display = "block";
}
function myScroll() {
    var elmDoc = document.documentElement, elmBdy = document.body;
    if (elmDoc.scrollTop<=0 && elmBdy.scrollTop<=0) return;
    var elmScroll = elmDoc.scrollTop>0 ? elmDoc : elmBdy,
    nMaxScroll = elmScroll.scrollHeight-(elmDoc.clientHeight+nFooterHeight),
    css = elmBanner.style;
    if (nMaxScroll<elmScroll.scrollTop) {
        css.position = "absolute";
        css.top = (elmScroll.scrollHeight-(nFooterHeight+elmBanner.offsetHeight)) + "px";
    } else {
        elmBanner.style.position = "fixed";
        css.top = "";
    }
}
function init() {
    elmBanner = document.getElementById("floatLinks");
    if (window.addEventListener) {
        window.addEventListener("scroll", myScroll, false);
        window.addEventListener("resize", setVisibility, false);
    } else {
        window.attachEvent("onscroll", myScroll);
        window.attachEvent("onresize", setVisibility);
    }
    setVisibility();
}
if (window.addEventListener) window.addEventListener("load", init, false);
else window.attachEvent("onload", init);
</script>
Avatar billede benzon Praktikant
07. december 2012 - 16:21 #20
du må egentlig meget gerne komme med et svar :)

Du løste jo mit problem, og det er jeg yders taknemmelig for.
Avatar billede benzon Praktikant
25. januar 2013 - 23:55 #21
Prøver lige igen, vil meget gerne have et svar fra dig :) så jeg kan lukke tråden.
Avatar billede olebole Juniormester
26. januar 2013 - 00:49 #22
Sorry, jeg havde ikke set, du havde skrevet.

Selvtak, men jeg samler ikke point. Læg selv et svar og accepter det, så tråden lukkes  =)
Avatar billede benzon Praktikant
09. november 2015 - 21:40 #23
lukker
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