.swf als div background zonder scrollbalken (horizontaal)

[Executor16]

Ik heb een stukje php code waarachter een swf file moet komen die de background verzorgd. Nu heb ik deze code (even verkort voor het gemak).

PHP

code:

<div id="alleswrapper">

<div id="swfbackground">
// Hier die code van de .swf (1500px breed)
</div>
    
<div id="bodydiv">
// Hier de hele website met alle meuk (900px breed)
</div>
    
</div> <!-- einde alleswrapper -->

CSS

code:

#alleswrapper { 
width:1500px;
height:1000px;
position:relative;
margin: 0 auto; }

#swfbackground { 
margin: 0 auto; 
width: 1500px; 
height: 1000px; 
z-index: -9999999; 
position:absolute; }

#bodydiv { 
width: 900px; 
margin: 0 auto; 
background: url('img/bodywrapperbg.png'); 
padding: 0 20px; z-index: 2; 
position:relative; }

Het idee: De website moet in een venster van 900px breed goed worden weergegeven zonder scrollbalken (horizontaal). De scrollbalken die verschijnen nu omdat de div van de swf 1500 breed is. Uiteraard logisch

Probleem: Hoe krijg ik die swf gecentreerd als background van de website, maar geen horizontale scrollbalken als het venster kleiner is dan die 1500px breed.

[Verwijderd]

Hoewel ik eigenlijk bijna uit principe niet zou helpen omdat ik een gruwelijke hekel heb aan Flash, doe ik toch maar een poging... Volgende CSS zou je een stuk op weg moeten kunnen helpen:

Cascading Stylesheet:

body {
    overflow: auto;
    overflow-x: hidden;
}
#swfbackground {
    position: absolute;
    width: 1500px;
    left: 50%;
    margin-left: -750px;
}

(niet getest, losse-pols-werk.. )

Zo zou het in principe moeten werken, als ik er niet naast zit. Dan zal ik wel de #swfbackground buiten je "alleswrapper" gooien, als die al niet weg kan. Volgens mij is die vrij nutteloos. Als je content 900px is, moet je er wel rekening mee houden dat je op deze manier wel mensen met een resolutie lager dan 1024x800 uitsluit.

[Executor16]

Bedankt voor de poging maar volgens mij doe je met overflow-x: hidden; de horizontale scrollbalk altijd verbergen (waarmee je de mensen onder 1024x768 inderdaad uitsluit). De scrollbalken moeten juist getoond worden als het window kleiner dan de pagina breedte wordt (dus 900px) en niet al als de breedte van de swf div is bereikt (1500px).

PS: Ik heb ook een hekel aan flash. Het is dat dit niet voor mijzelf is

[ Voor 32% gewijzigd door Executor16 op 20-12-2013 00:35 ]

[keejoz]

swf z-index 0 geven, position: fixed instellen. top:0 left:0

Klaar toch?

[Creepy]

Wat doet dit in PRG? Je blokje PHP code is gewoon HTML
Tikje door naar Webdesign, Markup & Clientside Scripting

[Executor16]

keejoz schreef op woensdag 12 januari 2011 @ 20:43:
swf z-index 0 geven, position: fixed instellen. top:0 left:0

Het probleem met de scrollbalken is dan opgelost, maar met top:0; en left:0; blijft de swf div links bovenin uitgelijnd. Als je dan de window op 1920x1200 bekijkt dan is de background dus niet in het midden. De website div bevat namelijk margin: 0 auto; en bij de swf div werkt dat dan niet meer. Bij position fixed blijft de div ook staan als je naar beneden scrolled. De background moet wel mee scrollen.

Creepy schreef op woensdag 12 januari 2011 @ 20:45:
Wat doet dit in PRG? Je blokje PHP code is gewoon HTML
Tikje door naar Webdesign, Markup & Clientside Scripting

Klopt Er zat een hoop php code in dan maar logisch gaat het hier nu even alleen over de opmaak. Vandaar dat ik de rest eruit had gesloopt bij het posten.

[ Voor 16% gewijzigd door Executor16 op 12-01-2011 21:09 ]

[keejoz]

Dan doe je left: 50% margin-left: -450px; ipv left: 0

grrrrrrrrr

[Aganim]

Het is offtopic, ik weet het, maar het blijft een discussieforum: waarom wilt diegene persé een .swf als achtergrond?

- Niet alle browsers ondersteunen flash, met de toename van internetters op smartphones wordt dit er niet beter op.
- Browsers die plugins on-demand laden, tonen een grote 'play' knop, welke niet aan te klikken valt als er content bovenop komt. Daar gaat je achtergrond.
- Is er over nagedacht of en wat er getoond gaat worden, wanneer flash niet geïnstalleerd is?
- Is er aan gedacht dat niet iedereen zit te wachten om tig MB te laden, voor slechts een achtergrond? (Met name name mensen die internetten met een telefoon met datalimiet?)

Daar komt bij dat een bewegende achtergrond nogal afleidt van datgene waar een website om draait: namelijk de inhoud.

Als degene die de .swf als achtergrond wilt hebben, daar over heeft nagedacht en een waterdichte reden heeft om het toch zo te willen: prima.
Maar imho moet zou je er alles aan moeten doen om iemand van zo'n onzalig idee af te helpen.

[johnkeates]

Voor centreren kan je ook margin: 0 auto; gebruiken.
SWF overlappen met een DIV is niet erg platform-onafhankelijk; het gaat alleen in sommige gevallen van Windows systemen goed werken, en op bijna alle andere niet, slecht, of matig.

[keejoz]

johnkeates schreef op woensdag 12 januari 2011 @ 21:07:
Voor centreren kan je ook margin: 0 auto; gebruiken.
SWF overlappen met een DIV is niet erg platform-onafhankelijk; het gaat alleen in sommige gevallen van Windows systemen goed werken, en op bijna alle andere niet, slecht, of matig.

Met position: fixed? neen. het is namelijk fixed.

Trouwens,

werkt dit wel? Ik dacht dat swf objecten altijd op de voorgrond stonden en ik denk dat ook NoScript gaat doorflippen (ClearJack functie of hoe heet het ook?)

[ Voor 17% gewijzigd door keejoz op 12-01-2011 21:09 ]

[mrFoce]

heb je hier wat aan http://www.brunildo.org/test/img_center.html

[Executor16]

De swf. is een soort van banner waarmee een takeover gerealiseerd moet worden. Net zoiets als toen op http://producten.hema.nl/.

Ik ben zelf ook iPhone, iPad en andere Apple meuk gebruiker en ben ook geen fan van Flash

keejoz schreef op woensdag 12 januari 2011 @ 21:09:
[...]

Met position: fixed? neen. het is namelijk fixed.

Trouwens,

werkt dit wel? Ik dacht dat swf objecten altijd op de voorgrond stonden en ik denk dat ook NoScript gaat doorflippen (ClearJack functie of hoe heet het ook?)

Als je hem dus in een div gooit met de z-index lekker laag, dan speelt ie inderdaad gewoon op de achtergrond af. Volgens mij moest de value wel op transparant staan.

Enige probleem nu is met fixed dat ie niet meescrolled omhoog.

[ Voor 56% gewijzigd door Executor16 op 12-01-2011 21:14 ]

[Verwijderd]

Nog een poging, in een testcase-vorm:
http://got.t.gh.vg/flashbg/

Als je je flash ding in het rode vlak gooit, zou het precies moeten doen wat je wilt? Alleen kunnen testen in Safari, Firefox en Chrome... Maar denk niet dat er dingen in zitten die raar doen in Internet Explorer.

edit: Inmiddels ook getest in IE8, daar gaat het goed. In IE7 gaat het echter niet goed, dat kan makkelijk gefixt worden door "body" op line 1 van de css te wijzigen naar "html, body". Dit omdat hij scrollde in het html-element.

[ Voor 28% gewijzigd door Verwijderd op 13-01-2011 08:07 ]

[Aganim]

Werkt ook onder Opera 11 en IE9 IE8. Netjes GuidoH.

[ Voor 9% gewijzigd door Aganim op 13-01-2011 12:48 ]

[Executor16]

Verwijderd schreef op woensdag 12 januari 2011 @ 22:18:
Nog een poging, in een testcase-vorm:
http://got.t.gh.vg/flashbg/

Als je je flash ding in het rode vlak gooit, zou het precies moeten doen wat je wilt? Alleen kunnen testen in Safari, Firefox en Chrome... Maar denk niet dat er dingen in zitten die raar doen in Internet Explorer.

edit: Inmiddels ook getest in IE8, daar gaat het goed. In IE7 gaat het echter niet goed, dat kan makkelijk gefixt worden door "body" op line 1 van de css te wijzigen naar "html, body". Dit omdat hij scrollde in het html-element.

Dat is exact wat ik heb. Mooi voorbeeld wel Het enige is dus dat de site langer is en als je naar beneden gaat scrollen, het rode vlak daar ook echt blijf staan (background-attachment: fixed) dat idee zeg maar. En als je het venster kleiner maakt dan de 1000px breed. Dan blijft de achtergrond div ook niet in het midden en verschuift naar links.

In jou voorbeeld kun je dat niet zien omdat de achtergrond 1 kleur is. Eigenlijk zou je een background img met patroon moeten instellen op de rode div. Dan zie je exact wat ik bedoel

[Verwijderd]

Ik zie het, wat een vreselijk *** probleem. Workin' on it.

edit: Got it! Here you go:
http://got.t.gh.vg/flashbg/index2.php

[ Voor 41% gewijzigd door Verwijderd op 13-01-2011 19:21 ]

[Executor16]

Verwijderd schreef op donderdag 13 januari 2011 @ 17:58:
Ik zie het, wat een vreselijk *** probleem. Workin' on it.

edit: Got it! Here you go:
http://got.t.gh.vg/flashbg/index2.php

Haha, thanks, maar nog steeds is de background fixed (scroll maar is naar beneden op je site). Wel even venster klein maken of de site wat langer.

Ik ga hem wel gewoon zo laten staan. Dan scrolt de achtergrond maar niet meer met de pagina. Thanks voor de hulp iig. Nog even en je kon zo je got testcase als template doorverkopen

PS: Op de iPad en iPhone werkt dit gewoon goed. De site is gewoon zichtbaar zonder dat je merkt dat er 1 of andere flash zooi geblockt wordt.

[ Voor 14% gewijzigd door Executor16 op 13-01-2011 18:40 ]

[Verwijderd]

Haha, shit... Misschien dat ik nog een idee krijg, dan laat ik het wel weten, haha.

[Executor16]

Verwijderd schreef op donderdag 13 januari 2011 @ 18:39:
Haha, shit... Misschien dat ik nog een idee krijg, dan laat ik het wel weten, haha.

Hehe, dat hoef ook weer niet, dit gebruik je toch nooit

[Verwijderd]

Executor16 schreef op donderdag 13 januari 2011 @ 18:41:
[...]


Hehe, dat hoef ook weer niet, dit gebruik je toch nooit

Heb al een idee, denk dat het wel moet lukken.. En is misschien nog 10 minuten werk, dus ga het wel even uitproberen zo.

Toch niet, en geen zin meer.

[ Voor 6% gewijzigd door Verwijderd op 13-01-2011 20:04 ]

[Executor16]

Hmm, toch nog niet opgelost

De div met swf is niet clickable. Dit is een ad dus dat zou wel mogelijk moeten zijn (met adblockers uit ja)
Als ik direct naar de swf navigeer werkt het wel gewoon. De complete swf is aanklikbaar.

Zelfs met

code:

<div id="swfbackground"; onclick="location.href='xxxxxx';" style="cursor: pointer;">

werkt het niet.

Edit: wmode="opaque" en daarna nog een extra div met bovenstaande style heeft het opgelost.

[ Voor 11% gewijzigd door Executor16 op 14-01-2011 12:07 ]

[robin84]

Het lijkt me redelijk onnodig om met dubbel div's te werken.

Daarnaast houd je rekening met een resolutie die minimaal 1500px breed is. Dit leverd niet alleen problemen op met lage maar ook met hoge resloties.

Oplossing:
Zet de flash background div op 100% breedte en de voorgestelde hoogte.
Zorg in actionscript dat de flash background zich altijd centreerd
tenslotte plaats je de div met de flash content achter die met de html content

Hier heb je een werkend voorbeeld

--- edit -----
Aangezien ik youtube heb gebruikt als achtergrond werkt dit niet bij een iPhone etc. Met andere flash content werkt het wel.... maar goed waar heb je die voor nodig

[ Voor 14% gewijzigd door robin84 op 14-01-2011 15:46 ]