[JS/CSS] no-scroll bij onClick *

[jbweb]

Ik heb een website met een lange lijst artikelen. Al je op een artikel klikt wordt deze uitvergroot. Dit gebeurt door een zwart gekleurde div van 100%x100% en 30% transparantie over de website te leggen. En daarin een popup met alle artikel gegevens. Werkt best erg mooi.
Door die transparante laag zijn alle knoppen automatisch niet meer aanklikbaar en zie je alleen een soort geïntegreerde popup.

Maar helaas is 100% hoogte in sommige gevallen niet genoeg. Dan is de lijst met artikelen te lang en kan je naar beneden scrollen. Als je dat doet, scrollt de transparante div mee omhoog en is de onderkant van de site dus niet uit-ge-fade.

Meer dan 100% hoogte gaat helaas niet, dus eigenlijk wil ik de scroll functie uitschakelen als het JS de popup laad. Is dit mogelijk, of heeft iemand een ander/beter idee?

[SchizoDuckie]

Gebruik een standaard LightBox / SlimBox javascriptje waarin dit allemaal al voor je afgehandel wordt?

M'n eigen lightbox implementatie verplaatst gewoon de div weer terug de viewport in bij onresize/onscroll: (MooTools)

JavaScript:

LightBox = new Class(
{
    initialize: function(page)
    {
        this.page = page;
        this.Container = new Element('DIV', { 'class': 'lightbox' }).setOpacity(0).injectInside(document.body);
        this.Dialog = new Element('DIV', { 'class': 'lightboxdialog'}).injectInside(this.Container);
        new Ajax(this.page, {update:this.Dialog}).request();

        this.Container.effect('opacity', {duration: 500}).custom(0, 0.7);
        this.Container.effect('width', {duration: 400}).custom(0, window.getWidth());
        this.Container.effect('height', {duration: 400}).custom(0, window.getHeight());
        this.Container.effect('left',  {duration: 400}).custom(window.getWidth() / 2+window.getScrollLeft, window.getScrollLeft());
        this.Container.effect('top',  {duration: 400, onComplete:function(){this.initDialog()}.bind(this)}).custom((window.getHeight() / 2) + window.getScrollTop(), window.getScrollTop());
        window.addEvent('scroll', function(){ this.repaint() }.bind(this));
        window.addEvent('resize', function(){ this.repaint() }.bind(this));
    },

    repaint: function()
    {
        top = window.getScrollTop()+'px'; 
        left = window.getScrollLeft()+'px'; 
        width = window.getWidth();
        height = window.getHeight();
        
        this.Container.setStyles({ 'left': left, 'top': top, 'width': width, 'height': height}); 
        this.Dialog.setStyles({ 'left': left, 'top': top, 'width': width -200, 'height': height - 200}); 
        

    },
    initDialog: function()
    {
        this.Dialog.setStyles({ 'width': (window.getWidth() - 200), 'left': window.getScrollLeft(), 'top': window.getScrollTop()}).injectInside(document.body);
        this.Dialog.effect('opacity', {duration: 800}).custom(0, 1);
        this.Dialog.effect('height',  {duration: 800}).custom(0, window.getHeight() - 200);
        new Element('A', { 'innerHTML': 'Sluiten', 'class': 'closeButton', 'events': { 'click': function(){this.hide();}.bind(this) }}).injectInside(this.Container);       
    },

    hide: function()
    {   
        this.Container.effect('opacity', {duration: 500}).custom(0.7, 0);
        this.Dialog.effect('opacity', {duration: 500}).custom(1, 0);
    }
});

Het is vast niet 100% perfect waterdicht, maar werkt perfect voor mij

[DexterDee]

Als je wilt dat je div altijd in de viewport blijft staan, ongeacht het scrollen van de pagina, dan is daar een CSS property voor (position: fixed). Helaas wordt deze slecht ondersteund in oudere browsers en zul je een truukje moeten toepassen om het werkend te krijgen. Een voorbeeld van hoe je dat voor elkaar krijgt kun je vinden op de volgende website:
http://tagsoup.com/cookbook/css/fixed/

Je kunt zoals mijn bovenbuurman ook de viewport elke keer opnieuw berekenen, maar een (klein) nadeel hiervan is dat als je scrollt, dat de div niet meteen herpositioneert en je ziet een fractie van een seconde de onderliggende website op het gescrollde stuk voordat de div eroverheen gezet wordt. Met position: fixed heb je dit fenomeen niet en blijft de div altijd strak over de viewport staan, ongeacht resizen of scollen. Ook is deze oplossing Javascript vrij en gebruikt alleen CSS.

[Creepy]

Ok. Alles clientside dus. Move Programming -> Webdesign, Markup & Clientside Scripting en een kleine titelfix

[Eijkb]

Kan je niet gewoon de scrollbalken verwijderen van je window element? (Effe snel antwoord hoor , je kan voor iframes toch iets meegeven van scroll=no, dat is er voor je actieve window ook volgens mij).

[SchizoDuckie]

Eijkb schreef op vrijdag 22 juni 2007 @ 11:25:
Kan je niet gewoon de scrollbalken verwijderen van je window element? (Effe snel antwoord hoor , je kan voor iframes toch iets meegeven van scroll=no, dat is er voor je actieve window ook volgens mij).

Dan nog zijn er allerlei trucjes om de focus op je viewport te wijzigen (tekst selecteren en draggen enzo)

[ Voor 3% gewijzigd door SchizoDuckie op 22-06-2007 12:46 ]