"max-height:%;" Werkt niet op div.
Ik probeer een eigen lightbox in elkaar te zetten maar ik krijg de positionering niet goed. Ik wil dat de lightbox zelf niet groter dan 75% van het scherm mag zijn. Het probleem is dat hij dat niet pakt. Hij negeert die percentage op de een of andere manier. Ik heb het hele gebeuren even in jsfiddle gezet, daar is ook te zien dat hij het niet doet. Weet iemand hier misschien een oplossing voor?
De lightbox moet op elk scherm passen maar de content moet wel toegankelijk zijn, dus de content moet scrollbaar zijn. Dat is me tot nu toe wel gelukt met "overflow-y:scroll;" alleen nu gooit de hoogte roet in het eten.
Lightbox -> http://jsfiddle.net/6h9XE/ (klik op de dummytext voor de lightbox)
Gewijzigd op 18/02/2013 12:18:09 door Albert de Wit
Als je ook op de schaduw let zie je dat de lightbox wel 70% hoog is maar de 100% in de lightbox-content werkt niet.
Gewijzigd op 18/02/2013 12:49:15 door Albert de Wit
Ik weet niet precies wat je dan anders wilt?
Gewijzigd op 18/02/2013 13:36:03 door Albert de Wit
Albert de Wit op 18/02/2013 12:15:47:
... Ik wil dat de lightbox zelf niet groter dan 75% van het scherm mag zijn.
... de content moet scrollbaar zijn. Dat is me tot nu toe wel gelukt met "overflow-y:scroll;" alleen nu gooit de hoogte roet in het eten.
... de content moet scrollbaar zijn. Dat is me tot nu toe wel gelukt met "overflow-y:scroll;" alleen nu gooit de hoogte roet in het eten.
Ja, dat zal lastig doen.
De lighbox content breekt nu uit zijn container.
Je moet zien dat overflow-y:scroll en max-height worden gegeven aan het zelfde element.
Code (php)
1
2
3
4
5
2
3
4
5
.lightbox {
overflow-y:scroll;
max-width: 70%;
position: relative;
}
overflow-y:scroll;
max-width: 70%;
position: relative;
}
(Enigszins anticiperend op een reactie)
en dan kan je eventueel die header van de lightbox position:fixed geven, als je die bovenaan wil houden.
Dat is een kleiner scherm. Hetgeen wat ik probeer te bereiken is dat de lightbox altijd qua hoogte in het scherm past en dat de content dan scrollable word.
Toevoeging op 18/02/2013 14:40:25:
Kris Peeters op 18/02/2013 14:33:47:
Albert de Wit op 18/02/2013 12:15:47:
... Ik wil dat de lightbox zelf niet groter dan 75% van het scherm mag zijn.
... de content moet scrollbaar zijn. Dat is me tot nu toe wel gelukt met "overflow-y:scroll;" alleen nu gooit de hoogte roet in het eten.
... de content moet scrollbaar zijn. Dat is me tot nu toe wel gelukt met "overflow-y:scroll;" alleen nu gooit de hoogte roet in het eten.
Code (php)
1
2
3
4
5
2
3
4
5
.lightbox {
overflow-y:scroll;
max-width: 70%;
position: relative;
}
overflow-y:scroll;
max-width: 70%;
position: relative;
}
Dan krijg ik nu dit -> hhttp://jsfiddle.net/6h9XE/3/
Zoals je al zei moest ik die header dan een position fixed meegeven maar die houd ik liever wel tegen de lightbox aan. Als ik in de lightbox nu wil scrollen gaat de header naar boven. Dat loop ik nu weer tegenaan.
Gewijzigd op 18/02/2013 14:41:31 door Albert de Wit
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
function GetWidth()
{
var x = 0;
if (self.innerHeight)
{
x = self.innerWidth;
}
else if (document.documentElement && document.documentElement.clientHeight)
{
x = document.documentElement.clientWidth;
}
else if (document.body)
{
x = document.body.clientWidth;
}
return x;
}
function GetHeight()
{
var y = 0;
if (self.innerHeight)
{
y = self.innerHeight;
}
else if (document.documentElement && document.documentElement.clientHeight)
{
y = document.documentElement.clientHeight;
}
else if (document.body)
{
y = document.body.clientHeight;
}
return y;
}
{
var x = 0;
if (self.innerHeight)
{
x = self.innerWidth;
}
else if (document.documentElement && document.documentElement.clientHeight)
{
x = document.documentElement.clientWidth;
}
else if (document.body)
{
x = document.body.clientWidth;
}
return x;
}
function GetHeight()
{
var y = 0;
if (self.innerHeight)
{
y = self.innerHeight;
}
else if (document.documentElement && document.documentElement.clientHeight)
{
y = document.documentElement.clientHeight;
}
else if (document.body)
{
y = document.body.clientHeight;
}
return y;
}
of gewoon jQuery
Code (php)
1
$(window).height()
Code (php)
1
$(window).width()
Reshad F op 18/02/2013 14:41:14:
Javascript heeft zelf gewoon functies waarmee je de hoogte/breedte van een scherm kan pakken..
Maar hoe kan ik daarmee de hoogte van de content bepalen?
Door CSS aan te passen met jQuery aan de hand van de hoogte van het scherm?
Code (php)
1
2
3
4
2
3
4
$(document).ready(function(){
var hoogte_content = $(window).height()-30;
$('.lightbox-content').css('height',hoogte_content+'px');
});
var hoogte_content = $(window).height()-30;
$('.lightbox-content').css('height',hoogte_content+'px');
});
Zo?
Albert de Wit op 18/02/2013 14:35:42:
... Dat is een kleiner scherm. ...
Die image wordt (op de plaats waar ik me bevind) hier geblokkeerd; geen idee wat je probeert te tonen.
Maar als je simpelweg overflow-y:scroll; verplaats van .lightbox-content naar .lightbox krijg je al ongeveer wat je wil.
De lightbox vult het window voor maximum 70% van de hoogte.
Dat was toch de bedoeling?
Toevoeging op 18/02/2013 15:04:30:
Sorry voor het miereneukerige (pardon) preciezie maar zo werkt hij naar behoeven. Ik dank u allen voor uw tijd en inspanning, zonder jullie had ik hier nog uren mee doorgegaan.
Gewijzigd op 18/02/2013 15:06:51 door Albert de Wit