O!
Je zei "Er wordt nog een popup.js ingevoegd dat zorgt voor problemen" (met de jQuery-code als boven).
Ik begreep:
- De #boxpopup wordt normaal via dat script aangezet/gesloten met animatie.
- De display="block" uit dat script omzeilt/overrule't de document.getElementById('boxpopup').style.display="none" die in mijn scriptje staat om de #boxpopup niet te tonen als het scherm <= 800px.
- Daarom heb je voor test het jQuery-script even buitenspel gezet, en de #boxpopup via de <head>-css in principe op {display:block} gezet.
- Als daarna mijn javascriptje er overheen gaat, wordt de #boxpopup niet getoond bij opening van de pagina op <= 800px; dus dan werkt dat volgens plan.
Ga je nu de <head>-css op {display:none} zetten (of dat staat al in je standaard stylesheet, wat op hetzelfde neerkomt), dan blijft ie weliswaar bij opening pagina via mijn scriptje uit staan, maar wordt ie later bij het triggeren van de functie
openOffersDialog() weer aangezet los van de schermbreedte. - En dan is het probleem weer terug: dat is niet de bedoeling.
Dus dacht ik: dan hoef je geen algemene maatregel
{display:none} te geven (via mijn scriptje, dat alleen bij de opening van de pagina werkt), maar moet je bij het triggeren van de
openOffersDialog() verhinderen dat ie getoond wordt bij smalle schermen.
Vandaar had ik de voorwaarde daar gedropt: alleen triggeren als > 800px.
Maar zoals ik hem had, bestaat de hele functie openOffersDialog() niet bij <=800; en ook de closeOffersDialog(prospectElementID) niet. Dat geeft dan bij de trigger een fout, want de functies kunnen niet gevonden worden.
Het lijkt me dus bij nader inzien beter, om de voorwaarde binnen de twee functies te zetten: dan blijven de functies overeind, maar doen ze alleen niets als <=800.
D.w.z.:
[JS]function openOffersDialog() {
if (screen.width > 800) { // alleen de #boxpopup tevoorschijn toveren als er ruimte genoeg is
$('#overlay').fadeIn('slow', function() {
$('#boxpopup').css('display','block');
$('#boxpopup').animate({'left':'27%'},500);
});
}
}
function closeOffersDialog(prospectElementID) {
if (screen.width > 800) { // en ook alleen dan hoeft ie weer te verdwijnen
$(function($) {
$(document).ready(function() {
$('#' + prospectElementID).css('position','absolute');
$('#' + prospectElementID).animate({'left':'-100%'}, 500, function() {
$('#' + prospectElementID).css('position','fixed');
$('#' + prospectElementID).css('left','100%');
$('#overlay').fadeOut('fast');
});
});
});
}
}[/JS]
Het scriptje op einde pagina komt dan helemaal te vervallen.
Met vriendelijke groet,
CSShunter
