ugrás a tartalomhoz

Adatküldés overlay ablakban

pilot · 2012. Júl. 3. (K), 11.25
Sziasztok!

Egy overlay ablakban szeretnék adatokat megjeleníteni. Egészen pontosan a következőt szeretném megvalósítani:
egy adatbázisból adatsorokat olvasok be. Az adatsorokban nevek vannak, továbbá a nevekhez tartozó egyéb adatok. A neveket link formájában jelenítem meg a weblapon. Ha egy ilyen linkre kattintok, akkor egy overlay ablakban meg kellene jelenítenem az adott névhez tartozó további adatokat.
Ehhez kérném a segítségeteket, mert a Javascript-hez egyáltalán nem értek.
Itt az overlay ablak kódja, amely a fent említett problémára vonatkozólag sajna semmilyen kódot nem tartalmaz. 


<script type="text/javascript">
function overlay() {
	el = document.getElementById("overlay");
	el.style.visibility = (el.style.visibility == "visible") ? "hidden" : "visible";
}
</SCRIPT>


$kapcsolat=mysql_connect("localhost","root","kecskesajt")or die (print "HIBA!".mysql_error());  
mysql_select_db("redflight", $kapcsolat);
mysql_query("SET NAMES UTF8");
$parancs="SELECT * FROM album";
$eredmeny=mysql_query($parancs, $kapcsolat);


while ($sor=mysql_fetch_array($eredmeny)){
	echo "<a href='#' onclick='overlay()'>".$sor[name]."</a><BR>";}


echo '<div id="overlay">';
echo '<div>';
echo 'itt kellene megjeleníteni a további adatokat';          
echo "Click here to [<a href='#' onclick='overlay()'>close</a>]";
          
echo '</div>';
echo '</div>';

echo '</body></html>';
‹ JsTestDriver nehézségek Css - image preload ›
 ■
1

nem próbáltam ki

Poetro · 2012. Júl. 3. (K), 11.47
function overlay(id, close) {  
  var el = document.getElementById(id);  
  if (el) {
    el.style.display = close ? "none" : "block";
  }
}
<?php while ($sor=mysql_fetch_array($eredmeny)): ?>  
  <a href="#" onclick="overlay('overlay<?php echo $sor['id']; ?>')">
    <?php echo $sor[name]; ?>
  </a>
  <div id="overlay<?php echo $sor['id']; ?>" class="overlay hidden">
    itt kellene megjeleníteni a további adatokat
    <a href="#" onclick="overlay('overlay<?php echo $sor['id']; ?>', true)">close</a>
  </div>
<?php endwhile; ?>
2

Ezzel az a probléma, hogy

pilot · 2012. Júl. 3. (K), 13.06
Ezzel az a probléma, hogy mikor lefuttatom, kapásból megjeleníti az overlay ablak tartalmát is, de nem overlay ablakban.
Az eredmény:
itt kellene megjeleníteni a további adatokat close
név1
itt kellene megjeleníteni a további adatokat close
név2
itt kellene megjeleníteni a további adatokat close
itt kellene megjeleníteni a további adatokat close
név3
itt kellene megjeleníteni a további adatokat close
itt kellene megjeleníteni a további adatokat close
itt kellene megjeleníteni a további adatokat close
3

CSS

Poetro · 2012. Júl. 3. (K), 13.55
A CSS részét rád bízom. De már csak igazából az hiányzik ahhoz, hogy használható legyen.
4

A css rész megvan, csak az

pilot · 2012. Júl. 3. (K), 14.05
A css rész megvan, csak az egyszerűsítés miatt nem másoltam az előbb ide. Viszont nem tudom, hogy a kódoddal hogyan alkamazzam...

<style type="text/css">
#overlay {
     visibility: hidden;
     position: absolute;
     left: 0px;
     top: 0px;
     width:100%;
     height:100%;
     text-align:center;
     z-index: 1000;
	 background-image:url(elemek/semi_transparent1.png);

}


#overlay div {
     width:300px;
     margin: 100px auto;
     background-color: #fff;
     border:1px solid #000;
     padding:15px;
     text-align:center;
}

body {
     height:100%;
     margin:0;
     padding:0;
}

</style>
5

Kevés

Poetro · 2012. Júl. 3. (K), 14.21
Mint láthatod, a mostani HTML már nem használ overlay id-jű elemet, ennek okán a te CSS-ed nem alkalmazódik. Valamint ha tényleg display-t akarsz állítani a CSS-ben, akkor módosítani kell a JS-t is.
6

Csak azt szeretném, hogy

pilot · 2012. Júl. 3. (K), 14.35
Csak azt szeretném, hogy működjön az overlay ablak, hogy milyen módon, az mindegy. Az eredeti változatot a neten találtam, annak nagyjából átláttam a működését, de mivel a js-hez egyáltalán nem értek, ez a továbbfejleszett válatozat már nekem magas, úgyhogy a további segítséged nélkül nem bírom kitalálni a megoldást...
7

Húha

Poetro · 2012. Júl. 3. (K), 14.48
Ennyi volt a JavaScript kód:
/**
 * Megmutat vagy elrejt egy elemet.
 * 
 * @param {String} id
 *   Az elem ID-je, amivel dolgozni akarunk
 * @param {Boolean} close
 *   El akarjuk-e rejteni.
 */
function overlay(id, close) {    
  // Kikeressük az elemet
  var el = document.getElementById(id);
  // Ha létezik, akkor a close függvényében megmutatjuk, illetve elrejtjük
  if (el) {  
    el.style.display = close ? "none" : "block";  
  }  
}
Ha ezek után sem érted, hogy mit csinál a fenti kód, akkor ajánlom kicsit még tanulgass programozni.
8

pontozás

manus11 · 2012. Júl. 3. (K), 17.38
Sziasztok!
Ez nem ide tartozik de nagyon sok blognál látom hogy a bejegyzést lehet pontozni.És hiába keresgetek nem találok sehol se html kódot és egyáltalán semmit se.Ha valaki tudna segíteni hogy merre vagy megad egy kódot annak megköszönném:)


Előre köszi
9

Mit akarsz?

Poetro · 2012. Júl. 3. (K), 19.19
Ha új téma, nyiss neki új témát. Egyébként pedig mit akarsz, hogyan, hol, és miben pontozni? Van valami konkrét keretrendszer, tartalomkezelő rendszer amihez valami modult keresel?
10

Azt hiszem ez kiderül:

Pepita · 2012. Júl. 4. (Sze), 00.16
Kódot lécci!
11

mihez?

Poetro · 2012. Júl. 5. (Cs), 15.48
Na de mihez kell neki kód? És azt sem derült ki, mit jelent számára a pontozás. És mivel HTML, CSS, JavaScript, Ajax a téma még kevésbé tiszta, hogy mit akar a kérdező.
12

Hát használd ki mentális képességeidet!

Pepita · 2012. Júl. 6. (P), 00.25
Néha elég értetlen vagy, Poetro. :)
Hol a hatodik érzéked?
Itt a kért kód (minden programnyelven működik!):
Hé, vas! Írd má' ki hogy +1 he!;
;)