Div popupje lukt niet helemaal - Softwareontwikkeling

zaterdag 28 november 2009 14:26

Acties:

0 Henk 'm!

bekijk eens wat anders

Topicstarter

Een voorbeeld is makkelijker dan uitleggen, dit is wat ik heb:
http://www.mdbsite.com/z/test300.htm

Een soort Tooltip dus. Ik heb heel lang gezocht, maar bijna al dit soort scripts hebben weer een hele javascript library nodig en dat is niet de bedoeling..

Dit is gebaseert op een kort scriptje wat ik op het internet vond. Eigenlijk kan ik geen javascript, dus ik vind dat ik al aardig ver ben gekomen

In de div kan weer een hele opmaak staan, wat ik nodig heb voor mijn ontwerp (het uiterlijk is nu dus niet belangrijk).

Problemen:

- Eigenlijk moet hij aan de bovenkant staan, maar omdat de hoogte dynamisch is kan ik dat niet opgeven, pixelBottom werkt niet.
- Eigenlijk mag hij niet buiten de pagina vallen...
- Het is er nu 1, maar het moeten er "oneindig" veel kunnen worden: getElementById (naam+variabel getal), hoe doe ik dat?

Nog even de code (zelfde als in link):

code:

<html>
<script> 
function PopupAan(e){ 
    ballonpopup1.style.pixelLeft=(e.x+-20); 
    ballonpopup1.style.pixelTop=(e.y+20); 
    ballonpopup1.style.visibility="visible"; 
} 
function PopupUit(){ 
    ballonpopup1.style.visibility="hidden"; 
    ballonpopup1.style.pixelLeft=(0); // om het scrollen te herstellen als hij buiten de pagina valt.
    ballonpopup1.style.pixelTop=(0); 
}
function Klik () { // ipv. # anders springt de pagina omhoog.
}
</script>
<style>
#ballonpopup1, #ballonpopup2, #ballonpopup3 {
    position: absolute;
    background: #ddd;
    border-color: #000;
    border-width: 1px;
    border-style: solid;
    visibility: hidden;
    width: 100px;
}
</style>
</head>
<body>
<div id="ballonpopup1">
    <p>Popup 1</p>
    <p>BLAAAAH</p>
    <p> gfjdks gfjdsk lgjfdsk lgjfdsk lgjfdsk lgjfdsk l</p>
    <p>Brooeeh.</p>
    <p><a href="javascript:PopupUit()">SLUITEN</a></p>
</div>
<div id="ballonpopup2">
    <p>Popup2</p>
    <p><a href="javascript:PopupUit()">SLUITEN</a></p>
</div>
<div id="ballonpopup3">
    <p>Popup3</p>
    <p><a href="javascript:PopupUit()">SLUITEN</a></p>
</div>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>Lorem Ipsum  gfj sgfhds sghkjsl skdfj hgghkjdls ghkjsl ghfkj slghf kjslgh jskglhfdsjkl <a href="javascript:Klik()" onclick='javascript:PopupAan(event)'>KLIK HIER</a> Lorem Ipsum  gfj sgfhds jkgfdsh gkfds ghf jgklfhds gkjfds lghhkjslghfds jkgl fdshgkjfdsl ghkjdslghfd jskglhfds jlkfd sghkjsl skdfj hgghkjdls ghkjsl ghfkj slghf kjslgh jskglhfdsjkl</p>
</body>
</html>

zaterdag 28 november 2009 17:27

Acties:

0 Henk 'm!

Manuel

Wat heb je inmiddels zelf allemaal geprobeerd door middel van Javascript, reeds gezocht op een zoekmachine of gekeken hoe andere sites dit oplossen? Ik kan je een aantal hints geven:

1. Hoe moet aan de bovenkant van de link staan of de pagina? (Indien het de pagina is top: 0; ?). Zo niet kan je het weer via Javascript oplossen.
2. Ook weer simpel via Javascript / CSS op te lossen

3. Waarom kijk je niet hoeveel elementen ervan bestaan door ze bijvoorbeeld 2 classes mee te geven. Dan is het simpelweg kijken in het DOM document en kan je die waarde erachter plakken. Je maakt het een stuk moeilijker dan het eigenlijk is.

zaterdag 28 november 2009 17:36

Acties:

0 Henk 'm!

iBasch

- body { margin: 0; } en #ballonpopup1 { top: 0; }
- screen.height
- Ik zou alleen een id toekennen voor het openen en sluiten van een popup, voor identificatie dus. Aangezien de stijl overal hetzelfde is kun je hiervoor een class gebruiken.

zaterdag 28 november 2009 19:06

Acties:

0 Henk 'm!

Malloot

bekijk eens wat anders

Topicstarter

Hij moet boven de link staan, sorry voor de onduidelijkheid. Als een soort tooltip dus.

Ik had nog gekeken naar onderstaant script (wat ik gebruik voor tabs (en niet zelf heb gemaakt)). Hiermee kan ik wisselen tussen drie divs zonder dat ze elkaar in de weg zitten. Volgensmij zit ik redelijk in de buurt maar de kennis ontbreekt een beetje..

code:

n = 3; // aantal lagen, tabs dus dat je gebruikt
function tab(a){ // tabs script
for(i=1;i<=n;i++){ 
document.getElementById('tekstcontainer'+i).style.display = 'none'; 
} 
document.getElementById('tekstcontainer'+a).style.display = '';  // staat niks, dus standaard
}

Ook weer simpel via Javascript / CSS op te lossen

Goh...

Waarom kijk je niet hoeveel elementen ervan bestaan door ze bijvoorbeeld 2 classes mee te geven. Dan is het simpelweg kijken in het DOM document en kan je die waarde erachter plakken. Je maakt het een stuk moeilijker dan het eigenlijk is.

Argh.. Ik wordt oud

Ik snap het eigenlijk maar half, maargoed ik zal nog eens verder het web afspeuren...

zaterdag 28 november 2009 20:16

Acties:

0 Henk 'm!

Pkunk

Je wil best wel wat, maar je hebt geen verstand van de techniek. Dan gaat het lastig worden

Kijk eens naar het onderstaande:

Wat daar gebeurt is dat als je op het linkje klikt het element waar je op klikt (this) wordt meegegeven aan de javascript functie. Op basis van de positie van dat element kan je vervolgens ook de gewenste popup (het 2e argument, in dit geval ballonpopup1) positioneren.

Zoals als het er nu staat is het natuurlijk niet helemaal failsafe, want als je elementen ergens anders in de DOM hebt zal de offsetTop van de parent natuurlijk niet meer kloppen. Daar zal je dus iets op moeten verzinnen

Verder kan je return false gebruiken om te zorgen dat er niet gescrollt wordt als je op het linkje klikt.

En als laatste zou ik je als tip mee willen geven om firebug te installeren en daarmee door je eigen code te lopen. Dan kan je doen door "debugger" ergens in de code te zetten.

HTML:

<html>
<script>
function PopupAan(anchor, target){ 
var balloonpopup = document.getElementById(target);
    balloonpopup.style.top = anchor.parentNode.offsetTop - balloonpopup.offsetHeight;
    balloonpopup.style.left = anchor.offsetLeft;
    balloonpopup.style.visibility="visible"; 
} 
function PopupUit(){ 
    ballonpopup1.style.visibility="hidden"; 
    ballonpopup1.style.top=(0); // om het scrollen te herstellen als hij buiten de pagina valt.
    ballonpopup1.style.left=(0); 
}
</script>
<style>
body{position:relative}

#ballonpopup1, #ballonpopup2, #ballonpopup3 {
    position: absolute;
    background: #ddd;
    border-color: #000;
    border-width: 1px;
    border-style: solid;
    visibility: hidden;
    width: 100px;
}
</style>
</head>
<body>
<div style="position:relative;">
<div id="ballonpopup1">
    <p>Popup 1</p>
    <p>BLAAAAH</p>
    <p> gfjdks gfjdsk lgjfdsk lgjfdsk lgjfdsk lgjfdsk l</p>
    <p>Brooeeh.</p>
    <p><a href="javascript:PopupUit()">SLUITEN</a></p>
</div>
<div id="ballonpopup2">
    <p>Popup2</p>
    <p><a href="javascript:PopupUit()">SLUITEN</a></p>
</div>
<div id="ballonpopup3">
    <p>Popup3</p>
    <p><a href="javascript:PopupUit()">SLUITEN</a></p>
</div>
<p style="position:relative; top: 300px;">Lorem Ipsum  gfj sgfhds sghkjsl skdfj hgghkjdls ghkjsl ghfkj slghf kjslgh jskglhfdsjkl <a href="#" onclick=PopupAan(this,'ballonpopup1');return false'>KLIK HIER</a> Lorem Ipsum  gfj sgfhds jkgfdsh gkfds ghf jgklfhds gkjfds lghhkjslghfds jkgl fdshgkjfdsl ghkjdslghfd jskglhfds jlkfd sghkjsl skdfj hgghkjdls ghkjsl ghfkj slghf kjslgh jskglhfdsjkl</p>
</div>
</body>
</html>

Hallo met Tim