Toon posts:

Table afdekken met een div?

Pagina: 1
Acties:

Onderwerpen


  • Erwin_Br
  • Registratie: oktober 2005
  • Laatst online: 11-08 17:38
Hoi,

Kan iemand mij helpen met het volgende? Ik heb een tabel die ik wil afdekken met een ietwat doorzichtige div. De div moet de tabel dus overlappen. Na 2 uur verschillende oplossingen geprobeerd te hebben kom ik er niet meer uit. De div zorgt ervoor dat de tabel over andere content wordt geplaatst, wat al verkeerd is, en bovendien wordt de div zelf niet over de tabel gezet.

De code is als volgt:

HTML:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<style type="text/css">
.greyedOutContainer {
    position:relative;
}
#greyedOut {
z-index:1000;
position:absolute;
top:0;
bottom:0;
left:0;
width:100%;
background:#000;
opacity:0.45;
-moz-opacity:0.45;
filter:alpha(opacity=45);
}

<!-- cut! -->

<div class="greyedOutContainer"><div id="greyedOut">
            <table class="inspectionTable" width="100%">
                <tr>

<!-- cut! -->


Ik probeer dus de div die de tabel moet afdekken (#greyedOut) in een div container te zetten (.greyedOutContainer) die een relative position heeft, in de hoop dat dit ervoor zorgt dat alles netjes onder elkaar blijft staan. Dat werkt dus niet, want de #greyedOut div zet de tabel over andere content heen.

Dat #greyedOut niet over de tabel gezet wordt snap ik ook niet. Ik heb 'm een absolute position meegegeven? Wat kan ik nog meer doen?

Any clues?

Alvast bedankt. Ik hoop dat ik het helder genoeg heb uitgelegd...

  • posttoast
  • Registratie: april 2000
  • Laatst online: 23:36
Maak even een mockup (in Paint bijvoorbeeld) van wat je écht wilt. Je bent namelijk al in oplossingen aan het denken (<div>'s, <table>'s) terwijl het misschien heel anders kan.

omniscale.nl


  • Erwin_Br
  • Registratie: oktober 2005
  • Laatst online: 11-08 17:38
Ik heb een formulier dat uit meerdere onderdelen (= tabellen) bestaat. Ik wil deze onderdelen dynamisch (via Javascript) kunnen "disabelen" door er een half doorzichtige div overheen te plaatsen.

  • RobIII
  • Registratie: december 2001
  • Laatst online: 01:45

RobIII

Admin Devschuur®

^ Romeinse Ⅲ ja!

Erwin_Br schreef op donderdag 11 november 2010 @ 12:18:
Ik heb een formulier dat uit meerdere onderdelen (= tabellen) bestaat. Ik wil deze onderdelen dynamisch (via Javascript) kunnen "disabelen" door er een half doorzichtige div overheen te plaatsen.
Waarom gooi je er dan een div overheen? Je kunt binnen een table toch gewoon alle inputfields disablen (.disabled = true) en een class op de table zetten om zo bijv. de tekst greyed te maken?

There are only two hard problems in distributed systems: 2. Exactly-once delivery 1. Guaranteed order of messages 2. Exactly-once delivery.

Roses are red Violets are blue, Unexpected ‘{‘ on line 32.

Over mij


  • Erwin_Br
  • Registratie: oktober 2005
  • Laatst online: 11-08 17:38
Dat gaat niet zo eenvoudig, helaas, want de pagina is een custom form binnen een SharePoint site. Dat betekent dat ik geen inputfields heb, maar server controls die de html code voor de inputfields genereren tijdens het laden van de pagina.

Ik zou in principe achteraf middels JavaScript alle inputfields door kunnen lopen en dan alsnog op disabled zetten, maar daar heb ik in het verleden nog veel meer problemen mee gehad en kost nog veel meer tijd.

Ik hoop dus met bovenstaande oplossing een makkelijke manier te vinden om grote delen van het form te disabelen. Fijnmazige controle over textfields e.d. heb ik daarnaast toch niet nodig...

[Voor 19% gewijzigd door Erwin_Br op 11-11-2010 13:02]


  • posttoast
  • Registratie: april 2000
  • Laatst online: 23:36
Dat zou toch niet uit moeten maken? Als er uiteindelijk <input>'s gegenereerd worden, dan kun je die met JS benaderen en gebruiken.

omniscale.nl


  • BCC
  • Registratie: juli 2000
  • Laatst online: 21:50
Hij wil een form hebben in sharepoint waarbij zaken 'gedisabled' zijn doordat er een div bovenopstaat.

Ten eerste gaat dit niet werken omdat input elementen altijd een maximale Z-index hebben. Ten tweede is het nogal security by obscurity, want met bijvoorbeeld firebug kun je het zowieso aanpassen. Ten derde waarom sharepoint :'(?

De enige nette manier is om de data severside in de sessie van de gebruiker te duwen.

[Voor 11% gewijzigd door BCC op 11-11-2010 13:12]


  • posttoast
  • Registratie: april 2000
  • Laatst online: 23:36
Die derde vraag lijkt me niet zo relevant BCC. Inderdaad, de oplossing van Erwin_Br is niet de meest elegante, daarom proberen we met betere suggesties te komen. Natuurlijk is het debiel dat dit soort dingen in SharePoint niet zo netjes zijn, maar ik denk niet dat Erwin dat nu eventjes aan de kant kan gooien.

omniscale.nl


  • Bosmonster
  • Registratie: juni 2001
  • Laatst online: 10-09 22:52
Zelfs met Sharepoint kun je gewoon velden met JS disablen hoor ;) Uiteindelijk komt zelfs uit Sharepoint gewoon html. (nou ja gewoon, sort of dan).

Maar eerlijk gezegd zou ik het probleem (of de oplossing) in een andere richting zoeken. Waarom is het namelijk van belang dat de velden disabled worden?

[Voor 15% gewijzigd door Bosmonster op 11-11-2010 13:25]


  • OkkE
  • Registratie: oktober 2000
  • Laatst online: 04-06 12:54

OkkE

Front-end ninja :+

Ik ben het met Bosmonster eens. Het hangt van de reden af, welke oplossing het beste (of minst lelijk) is. Maar er zijn vrij weinig situaties waarin een complete <div> er over de mooiste oplossing is, denk ik.




Om toch nog even in te gaan op de TS. Zit de <table> nu in beide <div>s? Zo zou je een heel eind moeten komen:

HTML:
1
2
3
4
5
6
7
8
<style>
.container { position: relative; width: 600px; }
.gray { position: absolute; background: rgba(0,0,0,0.5); width: 600px; height: 600px; }
</style>
<div class="container">
<div class="gray"></div>
<table>
   <tr> ...

[Voor 47% gewijzigd door OkkE op 11-11-2010 13:42]

“The best way to get the right answer on the Internet is not to ask a question, it's to post the wrong answer.”
QA Engineer walks into a bar. Orders a beer. Orders 0 beers. Orders 999999999 beers. Orders a lizard. Orders -1 beers.


  • Erwin_Br
  • Registratie: oktober 2005
  • Laatst online: 11-08 17:38
De div is semi-transparant, het is dus niet zo dat er een groot wit vlak ergens overheen gaat. Ik denk dat het er qua stijl dus best goed uit kan zien.

Het belang om velden te disabelen is reusability. Ik wil geen woud aan formulieren creeeren waar bepaalde velden wel of niet bestaan. Gewoon 1 formulier dat op basis van een status bepaalde onderdelen enabled of disabled heeft. Voor onderhoud ("oeps, we willen er achteraf een extra veld bij") is dat veel makkelijker.

Het begint erop te lijken dat ik inderdaad met JavaScript alle controls langs moet gaan om ze te disabelen. Dat belooft niet veel goeds, ben ik bang...

  • Bosmonster
  • Registratie: juni 2001
  • Laatst online: 10-09 22:52
Dus nu gaat het om onderdelen van het formulier ipv het hele formulier?

Als je onderdelen wilt disablen lijkt het met logisch dat je die onderdelen langs moet :+

Overigens zou ik op basis van je laatste post juist weer zeggen om ze gewoon onzichtbaar te maken ipv er iets overheen te leggen. Dus het wordt er niet veel duidelijker op...

[Voor 35% gewijzigd door Bosmonster op 11-11-2010 13:52]


  • Erwin_Br
  • Registratie: oktober 2005
  • Laatst online: 11-08 17:38
Bosmonster schreef op donderdag 11 november 2010 @ 13:51:
Dus nu gaat het om onderdelen van het formulier ipv het hele formulier?

Als je onderdelen wilt disablen lijkt het met logisch dat je die onderdelen langs moet :+

Overigens zou ik op basis van je laatste post juist weer zeggen om ze gewoon onzichtbaar te maken ipv er iets overheen te leggen. Dus het wordt er niet veel duidelijker op...
Het formulier bestaat uit categorieen (onderdelen) die in een eigen table staan. Dus nee, geen individuele controls, maar verzamelingen.

Vanuit een usability oogpunt is het disablen van onderdelen juist veel vriendelijker dan weglaten. Gebruikers weten dan veel sneller waar ze de velden kunnen vinden omdat elk formulier er hetzelfde uitziet, maar per status bepaalde onderdelen aan/uit staan. Maar goed, dat is een andere discussie.

EDIT: Thanks, Okke! Je laatste voorbeeld werkt prima! Ik denk dat ik er te lang op heb zitten staren, want je voorbeeld zit gewoon logisch in elkaar. Nogmaals dank!

[Voor 8% gewijzigd door Erwin_Br op 11-11-2010 13:58]


  • mcDavid
  • Registratie: april 2008
  • Laatst online: 20:36
Erwin_Br schreef op donderdag 11 november 2010 @ 13:56:
[...]


Het formulier bestaat uit categorieen (onderdelen) die in een eigen table staan. Dus nee, geen individuele controls, maar verzamelingen.

Vanuit een usability oogpunt is het disablen van onderdelen juist veel vriendelijker dan weglaten. Gebruikers weten dan veel sneller waar ze de velden kunnen vinden omdat elk formulier er hetzelfde uitziet, maar per status bepaalde onderdelen aan/uit staan. Maar goed, dat is een andere discussie.

EDIT: Thanks, Okke! Je laatste voorbeeld werkt prima! Ik denk dat ik er te lang op heb zitten staren, want je voorbeeld zit gewoon logisch in elkaar. Nogmaals dank!
Als je gewoon je fieldsets een ID geeft, dan kun je met Javascript toch heel gemakkelijk alle inputs in die fieldset tegelijk disablen?

De oplossing van Okke werkt trouwens alleen als alle fieldsets dezelfde grootte (in dit geval 600x600 px) hebben. En dan nog zou ik het goed testen in verschillende browsers, want vooral IE heeft nogal de neiging om inputs overal overheen te gooien, ongeacht z-index.

[Voor 13% gewijzigd door mcDavid op 11-11-2010 15:41]


  • OkkE
  • Registratie: oktober 2000
  • Laatst online: 04-06 12:54

OkkE

Front-end ninja :+

mcDavid schreef op donderdag 11 november 2010 @ 15:38:
[...]


Als je gewoon je fieldsets een ID geeft, dan kun je met Javascript toch heel gemakkelijk alle inputs in die fieldset tegelijk disablen?

De oplossing van Okke werkt trouwens alleen als alle fieldsets dezelfde grootte (in dit geval 600x600 px) hebben. En dan nog zou ik het goed testen in verschillende browsers, want vooral IE heeft nogal de neiging om inputs overal overheen te gooien, ongeacht z-index.
Mijn oplossing is dan ook niet echt een oplossing denk ik. Zou het zelf iedergeval anders oplossen (bijv. via JS de inputs zelf disablen inderdaad). Mijn "oplossing" is inderdaad niet cross-browser getest (icm waarschijnlijk quirksmode); maar het geeft wel aan waarom de TS zijn code niet werkte. :)

“The best way to get the right answer on the Internet is not to ask a question, it's to post the wrong answer.”
QA Engineer walks into a bar. Orders a beer. Orders 0 beers. Orders 999999999 beers. Orders a lizard. Orders -1 beers.


  • Blues
  • Registratie: februari 2000
  • Laatst online: 17-12-2015

Blues

Blast-off for Kicksville!

Hou je er rekening mee dat velden die op deze manier disabled zijn gewoon met het toetsenbord toegankelijk blijven en wel gewoon worden meegesubmit, i.t.t. inputs die echt disabled zijn?

You see, your fight for survival starts right now. You don't want to be judged? You won't be. You don't think you're strong enough? You are. You're afraid. Don't be. You have all the weapons you need. Now fight!


  • BCC
  • Registratie: juli 2000
  • Laatst online: 21:50
Inderdaad. Het zou logischer zijn om ze dan hidden te maken. Naja, eigenlijk zou het logischer zijn om ze gewoon niet te renderen.

[Voor 36% gewijzigd door BCC op 12-11-2010 10:06]


  • moozzuzz
  • Registratie: januari 2005
  • Laatst online: 10-01 23:26
Staan de gegevens in aparte tabllen
code:
1
2
3
4
5
<table 1 id="enkel tonen in geval 1">

<table 2 id="enkel tonen in geval 2">

<table 3 id="enkel tonen in geval 3">

dan kan je wellicht de opacity van tabel 1,2,3 met javascript regelen (even CSS die ik bedoel)

HTML:
1
2
3
4
5
6
7
8
9
10
11
<!-- pseudo test code -->
<html>
<body style="background: blue;">

<table style="opacity:0.4;filter:alpha(opacity=40); background: red; width: 400; height: 400px;"><tr><td>

<form><input style="background: green;"></form>

</td></tr></table>
</body>
</html>

  • Erwin_Br
  • Registratie: oktober 2005
  • Laatst online: 11-08 17:38
mcDavid schreef op donderdag 11 november 2010 @ 15:38:
[...]


Als je gewoon je fieldsets een ID geeft, dan kun je met Javascript toch heel gemakkelijk alle inputs in die fieldset tegelijk disablen?
Kon ik maar een id meegeven. Sharepoint zit in de weg... ;(
De oplossing van Okke werkt trouwens alleen als alle fieldsets dezelfde grootte (in dit geval 600x600 px) hebben. En dan nog zou ik het goed testen in verschillende browsers, want vooral IE heeft nogal de neiging om inputs overal overheen te gooien, ongeacht z-index.
Gelukkig gaat het om een corporate intranet oplossing binnen een gestandaardiseerde omgeving. Alleen IE 7. Ik heb bovenstaande oplossing overigens wel in meerdere browsers getest (behalve IE 6), en het werkt prima. De hoogte van de div is geen probleem, want de wrapper div heeft als instelling overflow:hidden waardoor de overbodige pixels verdwijnen. Ik neem dus een ruime marge om zeker te zijn dat alles wordt gecoverd.

  • Erwin_Br
  • Registratie: oktober 2005
  • Laatst online: 11-08 17:38
BCC schreef op vrijdag 12 november 2010 @ 10:05:
Inderdaad. Het zou logischer zijn om ze dan hidden te maken. Naja, eigenlijk zou het logischer zijn om ze gewoon niet te renderen.
De informatie uit de disabled fields moet zichtbaar zijn, is van belang voor het invullen van de andere velden, dus verbergen/niet renderen is geen optie.

  • Erwin_Br
  • Registratie: oktober 2005
  • Laatst online: 11-08 17:38
moozzuzz schreef op vrijdag 12 november 2010 @ 11:45:
Staan de gegevens in aparte tabllen
code:
1
2
3
4
5
<table 1 id="enkel tonen in geval 1">

<table 2 id="enkel tonen in geval 2">

<table 3 id="enkel tonen in geval 3">

dan kan je wellicht de opacity van tabel 1,2,3 met javascript regelen (even CSS die ik bedoel)

HTML:
1
2
3
4
5
6
7
8
9
10
11
<!-- pseudo test code -->
<html>
<body style="background: blue;">

<table style="opacity:0.4;filter:alpha(opacity=40); background: red; width: 400; height: 400px;"><tr><td>

<form><input style="background: green;"></form>

</td></tr></table>
</body>
</html>
Klopt, dit werkt ook. Ik heb gekozen voor de div omdat je daarmee de velden ook afschermt. Geen waterdichte afscherming weliswaar, maar dat is geen punt gezien de aard van de informatie en de business requirements.

  • RobIII
  • Registratie: december 2001
  • Laatst online: 01:45

RobIII

Admin Devschuur®

^ Romeinse Ⅲ ja!

Gebruik de edit knop ( http://tweakimg.net/g/forum/images/icons/edit.gif ) als je iets toe te voegen hebt; je topic herhaaldelijk omhoogschoppen is niet nodig.

There are only two hard problems in distributed systems: 2. Exactly-once delivery 1. Guaranteed order of messages 2. Exactly-once delivery.

Roses are red Violets are blue, Unexpected ‘{‘ on line 32.

Over mij

Pagina: 1


Nintendo Switch (OLED model) Apple iPhone 13 LG G1 Google Pixel 6 Call of Duty: Vanguard Samsung Galaxy S21 5G Apple iPad Pro (2021) 11" Wi-Fi, 8GB ram Nintendo Switch Lite

Tweakers vormt samen met Hardware Info, AutoTrack, Gaspedaal.nl, Nationale Vacaturebank, Intermediair en Independer DPG Online Services B.V.
Alle rechten voorbehouden © 1998 - 2021 Hosting door True

Tweakers maakt gebruik van cookies

Bij het bezoeken van het forum plaatst Tweakers alleen functionele en analytische cookies voor optimalisatie en analyse om de website-ervaring te verbeteren. Op het forum worden geen trackingcookies geplaatst. Voor het bekijken van video's en grafieken van derden vragen we je toestemming, we gebruiken daarvoor externe tooling die mogelijk cookies kunnen plaatsen.

Meer informatie vind je in ons cookiebeleid.

Sluiten

Forum cookie-instellingen

Bekijk de onderstaande instellingen en maak je keuze. Meer informatie vind je in ons cookiebeleid.

Functionele en analytische cookies

Deze cookies helpen de website zijn functies uit te voeren en zijn verplicht. Meer details

janee

    Cookies van derden

    Deze cookies kunnen geplaatst worden door derde partijen via ingesloten content en om de gebruikerservaring van de website te verbeteren. Meer details

    janee