Banner alleen zichtbaar vanaf bepaalde vensterbreedte

[Tjolk]

Goed, nu ik eindelijk alle elementen op hun plaats heb staan waar ze horen ongeachte de resolutie is het tijd voor de volgende stap. Ik wil namelijk een banner in de zijkolommen plaatsen (die nu leeg zijn), maar pas vanaf een bepaalde vensterbreedte om eea wel prettig te houden voor bezoekers met wat kleinere vensters. Het zou dus iets moeten worden als

code:

if window width >1110px;
show element

Maar dat is dan ook zo'n beetje alles wat ik weet. Ik ben geen JS guru, maar ik heb begrepen dat JS wel het middels is om het voor elkaar te krijgen. Kan iemand me op weg helpen?

[disjfa]

-> google

http://www.google.com/sea...rmbreedte&btnG=Zoeken&lr=

eerste hit

JavaScript:

    sw = screen.width; 
    im = "<img src='bestand.php?sw=" + sw + "' width='0' height='0'>"; 
    document.write(im); 

[Tjolk]

En ik zocht dus op vensterbreedte ipv schermbreedte, juist omdat ik me bedacht dat het gaat om het geopende scherm en niet om de resolutie. Dat leverde niets op, dus ging ik maar naar tweakers.

Ik neem aan dat die code ook werkt met ipv screen.width window.width?

[ Voor 17% gewijzigd door Tjolk op 09-07-2007 14:27 ]

[ibmos2warp]

SFB schreef op maandag 09 juli 2007 @ 14:26:
Ik neem aan dat die code ook werkt met ipv screen.width window.width?

Als je nou met google zoekt vind je vanzelf leuke website's zoals: dit.

[Boelie-Boelie]

Je kunt denk ik ook een design maken waarbij bij een bepaalde resolutie de zijkolommen tevoorschijn komen, zonder daarbij javascript te gebruiken? Als je design er goed uitziet op 1280x1024 mét zijbalken, dan kun je ervoor zorgen dat het middengedeelte bijv. ca. 990px breed is, waardoor de zijbalken buiten beeld vallen op 1024x768, en dan de horizontale scrollbalk uitzetten (overflow).

[Tjolk]

Nee, dat is niet wat ik wil. Ik wil bijvoorbeeld dat het wel tevoorschijn komt bij een resolutie van 1152 breed maar niet bij 1024 breed. Bij jouw voorstel zou het bij 1024 breed wel getoond worden maar deels nét buiten beeld vallen. Niet handig dus.

[André]

Maar moeten wij nu de juiste code voorkauwen? Wat heb je zelf al geprobeerd en wat lukt er niet?

[Alex)]

Had je daarvoor niet window.clientWidth en window.innerWidth (afhankelijk van browser)?

[hing]

ik weet niet of het wel verstandig is om dingen te laten zien/verdwijnen bij verschillende breedtes van je window. Is dat niet heel erg verwarrend voor de gebruiker?

[Alex)]

hing schreef op dinsdag 10 juli 2007 @ 10:45:
ik weet niet of het wel verstandig is om dingen te laten zien/verdwijnen bij verschillende breedtes van je window. Is dat niet heel erg verwarrend voor de gebruiker?

Wanneer het alleen om een banner gaat valt het wel mee denk ik... de gebruiker ziet de banner toch niet omdat hij buiten het beeld valt, je krijgt dan wel een lelijke horizontale scrollbar

Toen hier op GoT nog een skyscraper stond (rechts) was die ook alleen zichtbaar wanneer er genoeg ruimte was, daar had crisp een mooi scriptje voor...

[Tjolk]

André schreef op dinsdag 10 juli 2007 @ 10:37:
Maar moeten wij nu de juiste code voorkauwen? Wat heb je zelf al geprobeerd en wat lukt er niet?

Ik had zelf al wat lopen stoeien hier en daar, maar JavaScript is mijn ding niet. Ik had bijvoorbeeld dit:

JavaScript:

<script type="text/javascript"> 
// <![CDATA[ 

  var sb=0; 

  if (document.documentElement.clientWidth) { 
    sb=document.documentElement.clientWidth; 
  } 

if (sb> 1110) { 
//de code voor de ads
} 

else if sb< 1111{
//hou het leeg (maar hoe???)
}

// ]]> 
</script> 

Maar dat werkt nog niet echt.

De genoemde suggesties heb ik nog niet kunnen proberen en dat gaat waarschijnlijk pas morgenavond gebeuren, eerder heb ik geen tijd.

@Hing: Voor zover ik weet wordt het script alleen gedraaid bij het oproepen van de pagina. Als men zonder naar een andere url te gaan het venster vergroot of verkleint verandert de inhoud niet. Mijn doel is juist om het gebruikersvriendelijk te houden en daarom pas de advertenties te tonen op het moment dat het echt past in het scherm. Ik wil niet dat het gebruikersgemak of de inhoud ten koste gaat van de advertentie.

[Tjolk]

Het lijkt niet te lukken. Sowieso niet in IE7, daar verschijnt gewoon helemaal niets. Volgens de JavaScript Tutorial zou met alle browsers behalve IE window.innerwidth moeten werken, maar in FF2 en Opera 9 doet hij dat iig niet. Dat doet mij haast vermoeden dat ik iets fout doe, aangezien ik er niet vanuit ga dat die site onzin uitkraamt.

Dit is mijn code momenteel:

JavaScript:

<script type="text/javascript">
// <![CDATA[

  var breed=0;
    if(typeof(window.innerWidth) == 'number' ) {
    breed=window.innderwidth;
}
  else if (document.documentElement && document.documentElement.clientWidth) {
    breed=document.documentElement.clientWidth;
  }

  else if (document.body.clientWidth) {
    breed=document.body.clientWidth; 
  }

if (breed > 1100) {
document.write("<img src='veer.gif'>");
}

// ]]>
</script> 

Als ik het eerste if-je comment dan werkt het wel in FF2 en Opera9 maar nog steeds niet in IE7.

Wat doe ik fout?