fixed Background auch auf Touchdevices

Biotonne · 14 März 2013

Hi,
Ich sitze an dem Problem das die meisten Mobilebrowser das Hintergrundbild nicht fixed darstellen können sondern mitscrollen.
Als "Hack" würde es funktionieren ein backgroundwrapper- Div mit 100% * 100% zu benutzen, jedoch ist die methode unschön.
Nun wollte ich den Wrapper nur einsetzten wenn es möglich ist mittels Modernizer.touch:

HTML:

<head>
...
<script>if ( Modernizr.touch ) {
    function changeImg(imgNumber) {
    var myImages = ["http://www.html.de/images/bg/1.png", "http://www.html.de/images/bg/2.png", "http://www.html.de/images/bg/3.png", "http://www.html.de/images/bg/4.png", "http://www.html.de/images/bg/5.png",];
    var imgShown = document.body.style.backgroundImage;
    var newImgNumber =Math.floor(Math.random()*myImages.length);
    document.getElementById("background_wrapper").style.backgroundImage = 'url('+myImages[newImgNumber]+')';
    }    window.onload=changeImg;
} else {
    function changeImg(imgNumber) {
    var myImages = ["http://www.html.de/images/bg/1.png", "http://www.html.de/images/bg/2.png", "http://www.html.de/images/bg/3.png", "http://www.html.de/images/bg/4.png", "http://www.html.de/images/bg/5.png",];
    var imgShown = document.body.style.backgroundImage;
    var newImgNumber =Math.floor(Math.random()*myImages.length);    document.body.style.backgroundImage = 'url('+myImages[newImgNumber]+')';
    document.getElementById("background_wrapper").style.display = 'none';
    }
    window.onload=changeImg;
}                                                                                            
</script>
</head>

Wie es schein funktioniert das aber nicht wie gewollt...
(die function changeImg soll einen Zufallshintergrund generieren.)

Vielen Dank

scbawik · 14 März 2013

Hm also meiner Meinung nach ist es viel 'unschöner' JS zu verwenden wenn man auch HTML verwenden könnte.

So wie du macht man das aber sowieso nicht. Du darfst nicht zweimal die selbe Function definieren. Überleg dir wie du das besser lösen kannst. Auf jeden Fall eher noch so wie deine Lösung:

Code:

     function changeImg () {

          if(Modernizr.touch) {
                // Verfügbar
          }

     }

fixed Background auch auf Touchdevices

Biotonne

Neues Mitglied

scbawik

Senior HTML'ler

Neueste Beiträge