z-index iframe

Overzicht Reageren

Sponsored by: Vacatures door Monsterboard

Senior fullstack .NET developer

Wil jij samen met gemotiveerde en slimme collega’s bouwen aan ons geavanceerde landschap in Azure? En vind je het ook nog eens leuk om jouw kennis te delen met junior- en medior devs? Dan heb je wellicht interesse in de positie van: Senior fullstack .NET developer voor ons kantoor in Alkmaar Over de positie: Bij SnelStart werken we in een AGILE-structuur om de productie meer focus en impact te geven. Met je collega’s kom je tot de beste resultaten door onderlinge discussie, goede refinement sessies, reviews en écht teamwork. Je hebt de vrijheid om de dingen te doen zoals jij

Bekijk vacature »

Open Source Developer Ontwikkelaar

Bedrijfsomschrijving Onze klant is gevestigd in regio Breda. Ter uitbreiding zijn zij op zoek naar een ervaren Open Source Developer. Onze klant gelooft in de kracht van samenwerken en vanuit die overtuiging biedt onze klant verschillende Open Source oplossingen aan bij klanten en implementeert deze. De organisatie adviseert klanten over verschillende oplossingen op het gebied van kantoorautomatisering. Als ontwikkelaar ben je verantwoordelijk voor het doorontwikkelen en het integreren van de verschillende componenten. Hierbij ga je sowieso gebruik maken van Open Source oplossingen. Daarnaast ben je verantwoordelijk voor het doorontwikkelen van het hosting platform. Ben jij gek van Open Source en

Bekijk vacature »

Stage Web Developer

Wie zijn wij? pili's visie is om voor iedereen een wereld vol services te creëren gedreven door techniek. We streven ernaar om de plek te worden waar je professionals kan vinden, boeken en betalen op basis van gemak, transparantie en vertrouwen. We bouwen momenteel ons SaaS ecosysteem voor service professionals waarin zij hun klanten en zaken op 1 plek beter kunnen beheren. We digitalizeren de services sector en zijn van plan om nog meer functionaliteit toe te voegen zodat uiteindelijk iedereen de juiste vakman kan vinden en iedere professional zijn services eenvoudig en op een unieke manier kan aanbieden op

Bekijk vacature »

Data Engineer

Data Engineer Functiebeschrijving: Wil jij een bijdrage leveren aan het veiliger maken van onze samenleving? Door optimale toepassing van data ondersteunen wij onze klanten in de veiligheidsketen met nieuwe en betere inzichten om hun taken optimaal uit te voeren. Kom je ons team versterken? Wat ga je doen? Als Data Engineer ontwerp en ontwikkel je data verwerkingsprocessen. Grote hoeveelheden data vanuit verschillende bronnen en in verschillende formaten bewerk jij tot een bruikbare dataset voor geavanceerde data analyse en visualisatie. Enerzijds ben je de architect, die nieuwe inrichtingsconcepten voorstelt, specificeert en realiseert, anderzijds ben je de ‘doener’, die dagelijkse issues snel

Bekijk vacature »

.NET Developer Zorg-ICT

Complexe software ontwikkelen: dat is jouw ding! Voor onze vestiging in Heerenveen zoeken wij fanatieke junior en senior .NET Developers die met de laatste Microsoft-tools en -technieken willen werken. Jij bent gemotiveerd en draagt graag verantwoordelijkheid voor je 'eigen' software, die wordt ingezet in ziekenhuizen door heel Nederland. Jouw baan Je bent verantwoordelijk voor het ontwerpen, ontwikkelen, ondersteunen en onderhouden van jouw eigen module. Dit gaat om complexe ICT-producten die feilloos moeten functioneren binnen de complexe omgeving van een zorgorganisatie. Je werkt zelfstandig of in een klein team. ChipSoft maakt gebruik van een zelf ontwikkeld multi tier framework. Tijdens een

Bekijk vacature »

Front-end developer Javascript

Bedrijfsomschrijving Onze klant is een internationale organisatie met meerdere vestigingen wereldwijd en het hoofdkantoor in Rotterdam. Momenteel zijn wij voor hun op zoek naar een medior/senior Front-end Developer om het team te versterken. Het team bestaat uit 4 ontwikkelaars waarvan een Lead en 1 junior en 2 supportmedewerkers. Onze klant is op zoek naar een ervaren ontwikkelaar die tussen de junioren kan staan en de Lead, zodat de Lead zich meer kan richten op andere projecten. Als Medior/Senior word van je verwacht dat je de junioren kunt helpen in het bouwen van simpele en schaalbare code. En ben je verantwoordelijk

Bekijk vacature »

Backend .NET Developer C# Voetbal

Bedrijfsomschrijving Binnen deze organisatie in de regio Den Haag zal je als .NET Developer terecht komen in een multidisciplinair team met 5 andere Programmeurs. In jouw rol ben je verantwoordelijk voor het ontwikkelen en optimaliseren van mobiele applicaties met meer dan 4 miljoen gebruikers wereldwijd. Als Backend Developer zal je dagelijks werken met C#, .NET Core, Kubernetes en een SQL Database. Voor het onderling communiceren van de microservices wordt gebruik gemaakt van RabbitMQ. Je krijgt energie van technische uitdagingen en je werkt graag samen. Verder zul je in vele projecten deelnemen, zorg je voor nieuwe features, los je diverse bugs

Bekijk vacature »

OutSystems developer

Bedrijfsomschrijving Onze opdrachtgever, gevestigd in regio Amsterdam, is een innovatieve dienstverlener die zich richt op grote corporates in verschillende sectoren. Doordat je bij veel verschillende klanten aan de slag zal gaan is geen enkel project hetzelfde. De organisatie kenmerkt zich door hoge mate van professionaliteit en innovatieve oplossingen. In de rol van OutSystems developer zal jij verschillende grote klanten helpen om efficiënte OutSystems oplossingen te ontwikkelen en implementeren. Jij zal hierbij vanuit jouw expertise de klant adviseren over hoe OutSystems als lowcode platform een toegevoegde waarde kan zijn en op welke manier deze gebruikt kan worden. Hierin neem jij uiteraard

Bekijk vacature »

Web Developer

Help jij graag mee met het optimaliseren van ons platform? Solliciteer dan naar de functie Web Developer. Op ons hoofdkantoor in Amsterdam krijg je alle ruimte om je kwaliteiten te tonen. Wil jij daarbij ook nog eens programmeren aan de back-end? Ook dat is mogelijk als Full Stack Web Developer! Jouw baan ChipSoft maakt breed gebruik van webtechnologie voor de ondersteuning van administratieve processen. Als ontwikkelaar ben je verantwoordelijk voor het onderhouden en verbeteren van de applicaties op ons platform. Samen met je bedenk en bespreek je oplossingen en voer je code-reviews uit om elkaar naar een nóg hoger niveau

Bekijk vacature »

IT-traineeship junior software developer

Zoek jij een stevige uitdaging en de mogelijkheid om veel nieuwe dingen te leren in een dynamisch vakgebied? Doe mee aan ons IT Professional Program en ontwikkel jezelf tot software engineer! Je begint met een opleidingstraject van ongeveer 4 maanden. Hierin ga je aan de slag met verschillende technieken die je op conceptueel niveau leert te overzien en interpreteren. Onderwerpen die aan bod komen zijn o.a. programmeren (Java/C#/Python), Object Oriëntatie, Databases, Webservices & webtechnologieën, Domain Driven Design en Continuous Integration/Continuous Delivery. Sommige van deze onderdelen sluit je af met een examen en bijbehorende certificering. Het opleidingstraject zelf sluit je af

Bekijk vacature »

Front End Developer

Bedrijfsomschrijving Voor een eindklant in de regio van Amsterdam ben ik momenteel op zoek naar een ervaren Front-end Developer die aan de slag gaat met de uitvoering van het bouwen van een new business model. Onze klant is een organisatie die door gebruik te maken van verschillende mediakanalen commercieel actief is op de arbeidsmarkt. Hun high traffic websites trekken dagelijks tienduizenden bezoekers. Je zult ongetwijfeld een keer van hun diensten gebruik hebben gemaakt! De sfeer is te kenmerken als professioneel maar toch informeel, en onze relatie kenmerkt zich door hun openheid en eerlijkheid. De mensen die er werken zijn sneldenkend,

Bekijk vacature »

.NET Developer / nieuwe technieken / Nijmegen / &e

Bedrijfsomschrijving Deze ambitieuze en informele organisatie groeit ontzettend hard en daarom zoeken zij uitbreiding voor het development team. Dit zorgt ervoor dat jij als .NET ontwikkelaar op leuke en uitdagende maatwerk projecten komt te werken voor gave klanten in diverse branches. Allemaal om de user experience te overtreffen! Bij deze organisatie ligt er veel focus op de persoonlijke ontwikkeling en groei van hun medewerkers. Ze hebben ambities en daarom zoeken zij mensen die uit hetzelfde hout gesneden zijn. Mensen die graag in een informele setting werken waarbij aan alle randvoorwaarden wordt gedacht om optimaal te kunnen presteren. Je komt in

Bekijk vacature »

Mobile App Developer

Ons Mobile ontwikkelteam zoekt een fanatieke Mobile App Developer. Ben jij creatief en heb je passie voor het ontwikkelen van apps? Dan zijn wij op zoek naar jou! Jouw baan ChipSoft heeft al diverse apps uitgebracht en het aantal gebruikers hiervan neemt snel toe. De apps doen het erg goed bij de zorginstellingen. Je kunt hierbij denken aan apps verpleegkundigen, thuiszorgmedewerkers, de logistieke dienst en - natuurlijk - de artsen zelf. Door jouw hands-on mentaliteit, eigenwijsheid en technisch inzicht kun je nauwkeurig herbruikbare software schrijven. Die software sluit naadloos aan op onze ‘back end’ (HiX, onze ICT-totaaloplossing voor de zorg).

Bekijk vacature »

BI developer Azure ETL Microsoft BI tooling

Bedrijfsomschrijving Onze klant biedt financiële dienstverlening aan organisaties binnen de non-profit sector. Hierbij kun je denken aan overheden en instellingen met een maatschappelijk belang. In vergelijking met andere financiële dienstverleners staan zij er bijzonder goed voor en heeft de Covid-19 crisis gelukkig geen invloed. De organisatie heeft een open cultuur met vrij korte lijnen. Daarnaast zijn duurzaamheid en betrouwbaarheid termen die de organisatie kenmerken. Ter uitbreiding van het team zijn zij op zoek naar een ervaren BI Developer. Grote hoeveelheden data zijn kenmerkend voor het applicatie landschap. Business Intelligence staat zeer centraal in de organisatie en ze hebben op dit

Bekijk vacature »

Lead Full Stack Developer / Mobile Apps / C# / Rea

Bedrijfsomschrijving Als Full Stack developer kom je te werken bij een organisatie in regio Ede die gespecialiseerd is in het ontwikkelen en implementeren van software. Zo hebben ze een eigen ontwikkelde applicaties in de markt gezet voor de agrarische sector die internationaal zeer succesvol is en waar grote vraag naar is. Door deze software worden klanten op een slimme manier ondersteund bij voorraden, administratie, het maken van planningen en nog veel meer. De laatste tijd neemt de vraag naar mobile applicaties toe die klanten real time van de correcte informatie voorzien en het mogelijk maken om onder andere data registraties

Bekijk vacature »
Robin S

Robin S

13/06/2012 13:45:25
Quote Anchor link
Beste leden,

Ik probeer momenteel een div over een iframe heen te laten schuiven bij een mouseover. De div die er overheen moet schuiven werkt goed op het moment, echter moet deze bovenop de iframe komen. Op dit moment schuift deze steeds achterlangs.

Dit is de HTML:
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
<div class="ipad">
  <iframe src="index.html" class="ipad_iframe" frameborder="0" scrolling="no" /></iframe>
  <div id="menu"></div>
</div>


en de bijbehorende CSS:
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
.ipad_iframe {
  width: 645px;
  height: 500px;
  margin-top: 50px;
  position: relative;
  z-index: 1;
}

#menu {
  background-image: url('images/menu.png');
  width: 660px;
  height: 220px;
  z-index: 3;
  margin: -20px auto;
  z-index: 9000;
  -webkit-transition-property: margin-top;
  -webkit-transition-duration: 1s;
  -webkit-transition-timing-function: ease-in-out;
  display: block;
}
#menu:hover {
  margin-top: -225px;
}


Heeft iemand enig idee wat ik hier fout doe?
Ik heb al zoveel mogelijk met z-index proberen te werken, maar krijg dit helaas niet aan de praat...

Kan iemand hier mij misschien helpen? Alvast bedankt!
 
PHP hulp

PHP hulp

21/01/2021 16:36:49
 
Q S

Q S

13/06/2012 13:52:23
Quote Anchor link
Volgens mij moet je dan #menu position:absolute; geven, daarnaast zie ik dat je #menu twee keer een z-index hebt gegeven, 1 keer lijkt me voldoende.
Gewijzigd op 13/06/2012 13:53:08 door Q S
 
Patrick vd Pols

Patrick vd Pols

13/06/2012 13:52:52
Quote Anchor link
Je hebt nu 2 keer een z-index staan in #menu, 1 is zat.

Probeer je menu eens absolute te positioneren.

Q. S was me voor :P
Gewijzigd op 13/06/2012 13:53:16 door Patrick vd Pols
 
Q S

Q S

13/06/2012 13:54:15
Quote Anchor link
@Patrick nu maar hopen dat we gelijk hebben
 
Kris Peeters

Kris Peeters

13/06/2012 13:54:25
Quote Anchor link
Ik heb hier nooit echt over nagedacht, maar mijn eerste idee is dat het onhandig zou zijn indien het wel kon.

Ik weet niet of een gebruiker aan de knoppen/links/... zou kunnen indien er een div over staat (met hogere z-index)
 
Robin S

Robin S

13/06/2012 13:56:09
Quote Anchor link
Thanks allemaal het werkt!

@Kris: volgens mij werkt dit met pointer-events in CSS
 
Patrick vd Pols

Patrick vd Pols

13/06/2012 13:57:01
Quote Anchor link
Yay!
 
Robin S

Robin S

13/06/2012 14:12:34
Quote Anchor link
Op een of andere manier krijg ik #menu niet achter .ipad :S
Iemand enig idee wat ik hier fout doe?

Code (php)
PHP script in nieuw venster Selecteer het PHP script
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
.ipad {
  width: 800px;
  height: 626px;
  margin: 0px auto;
  background-image: url('images/ipad_trans.png');
  z-index: 3;
}

.ipad_iframe {
  width: 645px;
  height: 500px;
  margin-top: 50px;
  position: relative;
  z-index: 1;
}

#menu {
  background-image: url('images/menu.png');
  width: 660px;
  height: 220px;
  margin: -20px auto;
  z-index: 2;
  -webkit-transition-property: margin-top;
  -webkit-transition-duration: 1s;
  -webkit-transition-timing-function: ease-in-out;
  position: absolute;
}
#menu:hover {
  margin-top: -225px;
}
 
Jonathan de Vries

Jonathan de Vries

13/06/2012 14:34:44
Quote Anchor link
In dit geval heeft .ipad geen position, welke wel vereist is voor z-index.
zie ook de documentatie: (z-index only works on positioned elements (position:absolute, position:relative, or position:fixed).
 
Robin S

Robin S

13/06/2012 14:40:20
Quote Anchor link
Wanneer ik .ipad verander in het volgende werkt het nog steeds niet:
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
6
7
8
.ipad {
  width: 800px;
  height: 626px;
  margin: 0px auto;
  background-image: url('images/ipad_trans.png');
  z-index: 3;
  position: relative;
}


Snap hier helemaal niks van :P
 
Kris Peeters

Kris Peeters

13/06/2012 15:03:31
Quote Anchor link
Wat betreft absolute/relative ...

Je maakt een container met position relative.
Alles wat daarin genest is en position absolute heeft, zal die container als nieuw nulpunt zien.

Code (php)
PHP script in nieuw venster Selecteer het PHP script
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
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
<html>
 <head>
   <style>
    .ipad {
      width: 800px;
      height: 626px;
      margin: 0px auto;
      background-image: url('images/ipad_trans.png');
      position: relative;
      overflow: hidden;
    }

    .ipad_iframe {
      width: 645px;
      height: 500px;
      margin-top: 50px;
      position: absolute;
      z-index: 5;
      background-color: #aaffaa;
    }

    #menu {
      background-image: url('images/menu.png');
      background-color: #aaaaff;
      width: 660px;
      height: 220px;
      margin: -20px auto;
      z-index: 10;
      -webkit-transition-property: margin-top;
      -webkit-transition-duration: 1s;
      -webkit-transition-timing-function: ease-in-out;
      position: absolute;
    }
    #menu:hover {
      margin-top: -225px;
    }
    </style>

 </head>
 <body>
    <h1>Test z-index</h1>
    <div class="ipad">
      <iframe src="index.html" class="ipad_iframe" frameborder="0" scrolling="no" /></iframe>
      <div id="menu">
        <br/>
        <br/>
        Hello<br/>
        World<br/>
      </div>
    </div>
 </body>
</html>
 
Robin S

Robin S

14/06/2012 11:33:09
Quote Anchor link
@Kris: Bedankt voor je antwoord, ik heb wat met je code lopen stoeien maar kom er helaas niet meer verder.

Dit is wat ik heb op dit moment:
http://rcsdesign.nl/fout/ipad.html

Kan je er misschien even naar kijken? De mouseover menubalk moet onder de rand van de iPad doorgaan.
 
Q S

Q S

14/06/2012 11:52:24
Quote Anchor link
Probeer 'm is op deze manier

Code (php)
PHP script in nieuw venster Selecteer het PHP script
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
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
<!DOCTYPE html>
<html>
    <head>
        <script src="mint/?js" type="text/javascript"></script>
        <meta charset="utf-8" />
        <title>3D</title>
        <script language="Javascript">

        </script>
<style>
body { background-color: #000; margin: 0px auto; text-align: center;}

.ipad {
  width: 800px;
  height: 626px;
  margin: 0px auto;
}
.ipad_over{
    position:absolute;
    top:0px;
    width: 800px;
    height: 626px;
    background-image: url('images/ipad_trans.png');
}
.ipad_iframe {
  width: 645px;
  height: 505px;
  margin-top: 50px;
  position: relative;
  background-image: url('images/background.jpg');
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

#menu {
  background-image: url('images/menu.png');
  width: 660px;
  height: 220px;
  margin: -20px auto;
  -webkit-transition-property: margin-top;
  -webkit-transition-duration: 1s;
  -webkit-transition-timing-function: ease-in-out;
  position: absolute;

}
#menu:hover {
  margin-top: -225px;
}


</style>
    </head>
<body>

<div class="ipad">
  <iframe src="test.html" class="ipad_iframe" frameborder="0" scrolling="no" /></iframe>
  <div id="menu"></div>
  <div class="ipad_over"></div>
</div>

</body>
</html>
Gewijzigd op 14/06/2012 11:57:10 door Q S
 
Reshad F

Reshad F

14/06/2012 12:01:35
Quote Anchor link
even offtopic :) die afbeelding van de ipad waar heb je die vandaan? ik zoek er een voor een psd review :)

edit: ik heb er al een! :)
Gewijzigd op 14/06/2012 12:03:19 door Reshad F
 
Robin S

Robin S

14/06/2012 12:56:58
Quote Anchor link
@Q s: helemaal top! dit werkt echt geweldig!
 
Q S

Q S

14/06/2012 12:58:47
Quote Anchor link
Is het je opgevallen dat heel de z-index niet eens nodig is?
 
Robin S

Robin S

14/06/2012 13:03:20
Quote Anchor link
En dan nog één vraagje:
http://rcsdesign.nl/fout/ipad.html

Je ziet dat het menu nu aan de onderkant van de iPad uitsteekt. Is het mogelijk om dit onzichtbaar te maken? Dat het menu dus alleen zichbaar wordt binnen de iPad?
 
Q S

Q S

14/06/2012 13:13:59
Quote Anchor link
background-image: url('images/menu.png'); In #menu:hover plaatsen ipv #menu
 
Robin S

Robin S

14/06/2012 13:19:08
Quote Anchor link
@Q s: Ik denk niet dat dit werkt. Als ik nu een mouseover aan de onderkant van de iPad maak zie ik alsnog het menu aan de onderkant uitsteken:

http://rcsdesign.nl/fout/ipad.html
 
Q S

Q S

14/06/2012 13:24:16
Quote Anchor link
Hmmm dat is vreemd ik zie nergens wat uitsteken
 
Robin S

Robin S

14/06/2012 13:26:15
Quote Anchor link
Ok dan zal dat wel browser afhankelijk zijn :)
Ik heb het maar even vies opgelost: een div met een zwarte achtergrond eroverheen geplakt haha
 



Overzicht Reageren

 
 

Om de gebruiksvriendelijkheid van onze website en diensten te optimaliseren maken wij gebruik van cookies. Deze cookies gebruiken wij voor functionaliteiten, analytische gegevens en marketing doeleinden. U vindt meer informatie in onze privacy statement.