Javascript+PHP+MySQL: Personen auswählen

amiga-news.de Forum > Programmierung > Javascript+PHP+MySQL: Personen auswählen

[ - Suche - Neue Beiträge - Registrieren - Login - ]

-1- 2

[ - Beitrag schreiben - ]

19.01.2011, 21:55 Uhr

AGSzabo
Posts: 1663
Nutzer

Hellau,

Ich möchte dem Benutzer auf meiner Website komfortabel eine Auwahl von ca 10 Personen aus einer Datenbanktabelle mit mehr als 1000 Personen (ID, Name) ermöglichen. Das soll über die Eingabe der Anfangsbuchstaben Ihrer Namen geschehen, wobei dazu dann vom Programm her Vorschläge gemacht werden, welche Person mit vollem Namen das sein könnte. Es sollte im Prinzip genauso funktionieren wie die Eingabe der Beitrags-Tags hier in diesem Forum. Wenn ein paar Buchstaben eingegeben sind, soll eine Auswahl aufklappen, aus der man eine mögliche Person auswählen kann. Wenn man dann alle gewüschten Personen ausgewählt hat und auf OK klickt, sollen die IDs der gewählten Personen in eine neue Tabelle geschrieben werden. Ein Problem gibts noch dabei: wenn man nur einen Buchstaben ein gibt, kann es sein, dass es immernoch unüberschaubar viele mögliche Personen gibt ... und zur Abrundung des ganzen: zum Anfang der Auswahl sollen bereits ein paar Personen vor-ausgewählt sein können, die man dann auch aus der Auswahl entfernen können soll.

Wie kann sowas gemacht werden oder welche Alternativen gibt es und wie?
danke,
ags
--
Sam mini os4.1 upd. 2 / e-uae 39bb2 / A4000D 3.0 & 3.9 2mbchip 8mbfast Ariadne_II ide DVD und HD / A500 3.1 (mkick) adide 50mb / Athlon ii X2 Ubuntu Linux

[ - Antworten - Zitieren - Direktlink - ]

20.01.2011, 08:34 Uhr

Thore
Posts: 2266
Nutzer

Wieder eine Frage wo es tausend Antworten gibt.
Deine Suchart nennt sich übrigens inkrementelle Suche oder incremental Search.
Per SQL kanst Du mit einem entsprechenden where Clause die Daten holen die Du benötigst.
Wenn deine Zeichenfolge momentan "AG" ist dann sieht dein SQL beispielsweise so aus:
Select U.Name from Users U where (U.Name like 'AG%');

Wenn die vielen SQL Abfragen zu langsam sind, dann fetche alle mit dem/den Anfangsbuchstaben in einen Cache und mach hieraus eine incremtentelle Suche. Wenn sich der Anfangsbuchstabe ändert, wird dann ein neuer Cache geladen.

Das sind nur zwei Möglichkeiten von vielen

[ - Antworten - Zitieren - Direktlink - ]

20.01.2011, 10:37 Uhr

AGSzabo
Posts: 1663
Nutzer

Ich habe leider noch gar keine Ahnung wie man überhaupt es so macht dass dynamisch sql ausgeführt werden kann ohne eine seite mit php (neu) zu laden. Währenddessen habe ich mir viele Javascripts und Bibliotheken, die mein Problem zu lösen versprechen angeschaut, aber keiner davon war 'gut'. Ich habe mir ein paar Bücher zum Theme zugelegt, die ich studiere und denke, learning by doing ist die beste methode. Natürlich habe ich mein Projekt schon im vorraus und während dem Studium der Lektüren gut durchdacht. Es ist eine Demo-Datenbank für Amiga, die ich gemeinsam mit derzeit zwei anderen Leuten umsetze. Hier ist ein Bild der geplanten Struktur: http://janeway.quicktunnels.net/janeway.png ... wer will mit einsteigen? Wir brauchen erstmal Leute welche die Daten aus meiner alten unschönen Datenbank http://bitworld.bitfellas.org/demos.php?query=&range=0&numshow=250&where=title konvertieren. Das webdesign folgt später.

ps: hier ist ein erstes beispiel für das admin-backend: http://janeway.quicktunnels.net/commons.php natürlich noch ohne design.

Die Konkrete Frage, die ich hier gestellt habe, bezieht sich auf das Feld "Publishers". Publishers einer zB Packdisk-Serie können keine, eine oder mehrere Autoren sein. Nun soll man eben durch die Eingabe von Autor-Namen ins Textfeld gewisse Autoren als Publisher auswählen oder ändern können. Es kann aber sein, dass Namen doppelt vor kommen. Man sollte dann in der Auswahlliste eben ihr Land mit dazu angezeigt bekommen, wobei das Land aber nicht im Namen enthalten sein soll. Von mir aus kann man auch anstelle einer textarea blos eine einzeilige Text-Box machen, in die man immer nur einen namen eingeben kann, wobei dir gewählten namen dann in einer liste erscheinen. zu der liste gäbe es dann wiederum einen button um einen enitrag z entfernen.

--
Sam mini os4.1 upd. 2 / e-uae 39bb2 / A4000D 3.0 & 3.9 2mbchip 8mbfast Ariadne_II ide DVD und HD / A500 3.1 (mkick) adide 50mb / Athlon ii X2 Ubuntu Linux

[ Dieser Beitrag wurde von AGSzabo am 20.01.2011 um 11:08 Uhr geändert. ]

[ - Antworten - Zitieren - Direktlink - ]

20.01.2011, 10:51 Uhr

ChrisP
Posts: 985
Nutzer

Folgendes sollte tun, was du suchst.
Dazu werden die Daten aus der Datenbank in eine DropDown-Liste gelesen und in dieser kann man dann mit Hilfe eines Textfeldes suchen.

Nachteil: die kompletten Daten stehen in der Dropdown-Liste

code:

selectSearch = function(formName, selectBoxName, searchFieldName, searchResultBox) {

			var bopt = [];
//			var form = document[formName];
			var form = document.getElementsByTagName("form")[0];
			var sstr = form[searchFieldName].value.toLowerCase();
			var sbox = form[selectBoxName];
			var rbox = form[searchResultBox];

			for(var x=0; x<sbox.options.length; ++x) {
				if(sbox.options[x].text.toLowerCase().indexOf(sstr)!=-1) {
					bopt[bopt.length] = {text:sbox.options[x].text,value:sbox.options[x].value};
				}
			}

			for(var x=rbox.options.length-1; x>=0; --x) {
				rbox.options[x] = null;
			}

			for(var x=0; x<bopt.length; ++x) {
				rbox.sObj = sbox.options;
				rbox.options[x] = new Option(bopt[x].text, bopt[x].value);
				rbox.onchange = function() {
					for(var x=0; x<this.sObj.length; ++x) {
						if(this.sObj[x].value == this.value) {
							this.sObj[x].selected=true;
							return false;
						}
					}
				};
			}
		};

--
Suche Amiga 2500UX

[ - Antworten - Zitieren - Direktlink - ]

20.01.2011, 10:56 Uhr

AGSzabo
Posts: 1663
Nutzer

@ChrisP:

Danke, hast du auch infos wie ich dieses script einbinde?

ps: wir haben über 20000 datensätze. geht das noch mit deiner lösung?

--
Sam mini os4.1 upd. 2 / e-uae 39bb2 / A4000D 3.0 & 3.9 2mbchip 8mbfast Ariadne_II ide DVD und HD / A500 3.1 (mkick) adide 50mb / Athlon ii X2 Ubuntu Linux

[ Dieser Beitrag wurde von AGSzabo am 20.01.2011 um 10:58 Uhr geändert. ]

[ - Antworten - Zitieren - Direktlink - ]

20.01.2011, 11:04 Uhr

ChrisP
Posts: 985
Nutzer

Du baust die deine Dropdownliste und befuellst diese mit Hilfe von PHP.
Weiterhin benoetigst du ein Textfeld, in dem du den Suchstring eingibst.

Das Ganze wird dann ueber onchange oder aehnliches eingebunden.

Ich hoffe, du verstehst ein wenig PHP und Javascript?
--
Suche Amiga 2500UX

[ - Antworten - Zitieren - Direktlink - ]

20.01.2011, 11:12 Uhr

AGSzabo
Posts: 1663
Nutzer

@ChrisP:

Ja, ich verstehe ein wenig von beidem, habe schonmal eine (schlechte) Datenbank programmiert. ich komme aber mit deinen variablennamen nicht klar und weis auch nicht wo ich das array mit den namen angeben kann, falls überhaupt. ich würde mir gerne eine kleine testseite schreiben. die liste kann ich erstmal auch per hand mit ein paar einträgen zum testen füllen. aber bei alledem nochmal die frage, wie wirkt es sich auf die performance und den speicherverbrauch aus wenn ich alle 20000 namen in einer dropdown habe?
--
Sam mini os4.1 upd. 2 / e-uae 39bb2 / A4000D 3.0 & 3.9 2mbchip 8mbfast Ariadne_II ide DVD und HD / A500 3.1 (mkick) adide 50mb / Athlon ii X2 Ubuntu Linux

[ Dieser Beitrag wurde von AGSzabo am 20.01.2011 um 11:12 Uhr geändert. ]

[ - Antworten - Zitieren - Direktlink - ]

20.01.2011, 11:43 Uhr

ChrisP
Posts: 985
Nutzer

Hier geht das mit ca. 5000 Eintraegen ganz gut. Wie es mit 20000 aussieht, kann ich nicht sagen, sorry.
--
Suche Amiga 2500UX

[ - Antworten - Zitieren - Direktlink - ]

20.01.2011, 11:57 Uhr

AGSzabo
Posts: 1663
Nutzer

@ChrisP:

kannst du mir deinen code oder die variablenbelegung erklären oder mir den link zu der seite geben wo das script arbeitet? so dass ich sehen kann ob es das ist was ich suche? dein code scheint ja wirklich genial zu sein bei der kürze!

--
Sam mini os4.1 upd. 2 / e-uae 39bb2 / A4000D 3.0 & 3.9 2mbchip 8mbfast Ariadne_II ide DVD und HD / A500 3.1 (mkick) adide 50mb / Athlon ii X2 Ubuntu Linux

[ Dieser Beitrag wurde von AGSzabo am 20.01.2011 um 12:01 Uhr geändert. ]

[ - Antworten - Zitieren - Direktlink - ]

20.01.2011, 13:41 Uhr

ChrisP
Posts: 985
Nutzer

@AGSzabo:
Ich versuche mal baldmoeglichst den ganzen Kontext hier wieder zu geben, muss aber erst einmal den Code de-personalisieren.
--
Suche Amiga 2500UX

[ - Antworten - Zitieren - Direktlink - ]

20.01.2011, 13:45 Uhr

AGSzabo
Posts: 1663
Nutzer

@ChrisP:

jau, das verstehe ich. ich freue mich schon! :-D

--
Sam mini os4.1 upd. 2 / e-uae 39bb2 / A4000D 3.0 & 3.9 2mbchip 8mbfast Ariadne_II ide DVD und HD / A500 3.1 (mkick) adide 50mb / Athlon ii X2 Ubuntu Linux

[ - Antworten - Zitieren - Direktlink - ]

20.01.2011, 14:07 Uhr

AGSzabo
Posts: 1663
Nutzer

ps: ich brauche die numerischen positionen der ausgewählten namen im eingabearray um aus dem array dann die zugehörigen IDs der datensätze auslesen zu können. oder irgendwas vergleichbares. die ausgewählten namen alleine bringen mir nicht viel. es kann auch doppelte geben aber dann stelle ich sie dem benutzer mit angefügter landeskennung dar. die namen ansich bleiben dadurch unverändert.
--
Sam mini os4.1 upd. 2 / e-uae 39bb2 / A4000D 3.0 & 3.9 2mbchip 8mbfast Ariadne_II ide DVD und HD / A500 3.1 (mkick) adide 50mb / Athlon ii X2 Ubuntu Linux

[ Dieser Beitrag wurde von AGSzabo am 20.01.2011 um 14:08 Uhr geändert. ]

[ - Antworten - Zitieren - Direktlink - ]

21.01.2011, 22:11 Uhr

AGSzabo
Posts: 1663
Nutzer

@Thore:

> Wenn die vielen SQL Abfragen zu langsam sind, dann fetche alle mit dem/den Anfangsbuchstaben in einen Cache und mach hieraus eine incremtentelle Suche. Wenn sich der Anfangsbuchstabe ändert, wird dann ein neuer Cache geladen.

ich kann doch nicht dynamisch auf die DB zugreifen, oder? soweit ich weis kann ich das nur beim laden einer php-date. wenn der benutzer einen buchstaben eintippt, wird aber keine datei geladen...
--
Sam mini os4.1 upd. 2 / e-uae 39bb2 / A4000D 3.0 & 3.9 2mbchip 8mbfast Ariadne_II ide DVD und HD / A500 3.1 (mkick) adide 50mb / Athlon ii X2 Ubuntu Linux

[ - Antworten - Zitieren - Direktlink - ]

22.01.2011, 23:41 Uhr

Mad_Dog
Posts: 1944
Nutzer

Ich nenne nur mal kurz das Stichwort Ajax.

Sinnvoll ist das, wenn Du das wie folgt aufteilst:

1. Ein php-Programm zur Erzeugung des eigentlichen HTML-Codes der Seite.

2. Ein JavaScript-Programm, welches die Eingaben aus Deiner HTML-GUI (Forms oder was auch immer) entgegen nimmt, daraus eine Anfrage an ein weiteres php-Programm auf dem Server generiert, diese Anfrage asynchron per HTTP an den Server übermittelt (ohne daß die Seite neu aufgebaut wird) und wenn die Antwort vom Server kommt, diese irgendwie in die Seite integriert.

3. Das php-Programm auf dem Server, welches die Anfragen von Deinem JS-Programm per HTTP POST oder GET entgegennimmt, die Datenbankanfrage dynamisch formuliert und die Antwort in eine geeignete XML-Datei schreibt, die Dein JS-Programm beim Client dann wieder verarbeitet.

Wenn Du einen kurzen Einstieg in diese Thematik suchst, empfehle ich Dir das Buch "Ajax von Kopf bis Fuß". Das geht zwar nicht wirklich tief in die Materie, ist dafür aber ziemlich unterhaltsam.

--
http://www.norman-interactive.com

[ - Antworten - Zitieren - Direktlink - ]

23.01.2011, 00:57 Uhr

AGSzabo
Posts: 1663
Nutzer

@Mad_Dog:

Oh ja,das ist eine gute Antwort. Kann ich in Schritt 2 auch schon die Datenbank einbeziehen?

Ajax ist mir immernoch ein Rätsel aber ich werde es kennenlernen. Das Buch suche ich mir mal wo raus ;-)

ps: ich seh grade daß das schon 5 Jahre alt ist. Sollte man bei computerthemen nicht neue bücher bevorzugen wegen der kompatibilität und aktualität? hmmhm ... mal die renzensionen lesen ...

soweit aber schonmal danke. :-)
--
Sam mini os4.1 upd. 2 / e-uae 39bb2 / A4000D 3.0 & 3.9 2mbchip 8mbfast Ariadne_II ide DVD und HD / A500 3.1 (mkick) adide 50mb / Athlon ii X2 Ubuntu Linux

[ - Antworten - Zitieren - Direktlink - ]

24.01.2011, 16:32 Uhr

bruZard
Posts: 307
Nutzer

Am besten verwendest Du ein Framework wie jQuery, das vereinfacht einiges und nimmt Dir auch noch die Puzzelei mit der Browserkompatiblität ab. Mittels jQuery ist auch Ajax "easy peasy":

code:

function getNames(member){
    $.ajax({
        url : 'meinSchoenesPHPScript.php' ,
        method: 'POST',
        data: 'search=' + member ,
        success: function(result){ /* packe den Inhalt von result in das Textfield */ }
    });
}

Gehen wir davon aus dass Dein HTML so aussieht:

code:

<input type="text" name="member">

Packst Du obige Funktion in das onChange() Event:

code:

<input type="text" name="member" onChange="getNames(this.value);">

Bei jeder Änderung des Inhalts wird der Inhalt mittels der Funktion "getNames()" an das PHP Script geschickt welches im Ajax-Objekt bei "url:" angegeben ist (bedenke dass man nicht Domain-übergreifend "ajaxen" kann).
Willst Du mehr als nur ein Eingabe an das Script schicken musst Du Dir eine URL zusammenbauen. Beispiel: search=Klaus&var1=123&var2=456 [...]

Dein PHP Script holt sich nun die Daten aus dem POST Array (ganz genauso als hättest Du sie per "submit" verschickt, holt passende Einträge aus der Datenbank (bspw: "SELECT * FROM myMembers WHERE name LIKE 'Klaus%' ORDER BY name ASC").

Alles was Du mittels "echo" in PHP ausgibst wird zurück an die Funktion bei "success" geschickt, in diesem Beispiel in der Variable "result".

--
PanzerZ |
methusalem | basic

[ - Antworten - Zitieren - Direktlink - ]

24.01.2011, 16:40 Uhr

AGSzabo
Posts: 1663
Nutzer

@bruZard:

danke. diese zeile verstehe ich noch nicht:

success: function(result){ /* packe den Inhalt von result in das Textfield */ }

wie oder wo wird da auf das textfield zugegriffen?
--
Sam mini os4.1 upd. 2 / e-uae 39bb2 / A4000D 3.0 & 3.9 2mbchip 8mbfast Ariadne_II ide DVD und HD / A500 3.1 (mkick) adide 50mb / Athlon ii X2 Ubuntu Linux

[ - Antworten - Zitieren - Direktlink - ]

24.01.2011, 16:46 Uhr

bruZard
Posts: 307
Nutzer

Den Inhalt eines Textelements kannst Du mit jQuery so manipulieren (das anstatt des Kommentars einfügen):

code:

// input:text > Eingabefelder vom Typ "input type='text'" auswählen
// [name=member] > dann nur das Feld auswählen welches "member" heißt
// .val(result) > den Inhalt des Textfeldes durch denInhalt der Variable "result" ersetzen.

$('input:text[name=member]').val(result);

--
PanzerZ |
methusalem | basic

[ Dieser Beitrag wurde von bruZard am 24.01.2011 um 16:47 Uhr geändert. ]

[ - Antworten - Zitieren - Direktlink - ]

24.01.2011, 16:52 Uhr

AGSzabo
Posts: 1663
Nutzer

@bruZard:

ich bin ja ganz neu auf den gebiet. jquery hab ich mir eben downgeladen. sieht kurz aus, ist das alles? und brauche ich für ajax auch eine bibliothek?
--
Sam mini os4.1 upd. 2 / e-uae 39bb2 / A4000D 3.0 & 3.9 2mbchip 8mbfast Ariadne_II ide DVD und HD / A500 3.1 (mkick) adide 50mb / Athlon ii X2 Ubuntu Linux

[ - Antworten - Zitieren - Direktlink - ]

24.01.2011, 16:56 Uhr

bruZard
Posts: 307
Nutzer

jQuery ist 26kb klein. Du kopierst es auf Deinen Server und bindest es einfach in den Header Deiner Seite ein:

code:

<script type="text/javascript" src="jquery-1.4.4.min.js"></script>

--
PanzerZ |
methusalem | basic

[ - Antworten - Zitieren - Direktlink - ]

24.01.2011, 16:57 Uhr

AGSzabo
Posts: 1663
Nutzer

dass nur ein string zurück gegeben wird, erscheint mir ungünstig. zum einen brauche ich auch die ID des members und zum anderen sollte der ergänzte teil des strings gesondert markiert sein um ihn bei der eingabe irgendwie verwerfen zu können.

ps: brauche ich für ajax auch eine bibliothek?

mir schwebt da etwas vor, dass man beim click auf den add-member button ein fenster auf gemacht bekommt, in dem man suchen und finden kann. ist man mit dem ergebnis zu frieden, kann das fester geschlossen werden und der name und die ID und evtl noch das land des members werden zurück gegeben. geht das/sowas?

--
Sam mini os4.1 upd. 2 / e-uae 39bb2 / A4000D 3.0 & 3.9 2mbchip 8mbfast Ariadne_II ide DVD und HD / A500 3.1 (mkick) adide 50mb / Athlon ii X2 Ubuntu Linux

[ Dieser Beitrag wurde von AGSzabo am 24.01.2011 um 17:09 Uhr geändert. ]

[ - Antworten - Zitieren - Direktlink - ]

24.01.2011, 17:11 Uhr

bruZard
Posts: 307
Nutzer

Du brauchst keine weitere Bibliothek. Wenn Du mehr als einen Wert zurückgeben willst kannst Du das mittels eines JSON Objektes tun, oder den String entsprechend zusammenbasteln.

Beispiel (PHP):

code:

$row = MYSQL_FETCH_OBJECT($result);
$id = $row->id;
$name = $row->name;
echo $id."|".$name;

Das könnte folgenden String an JavaScript zurückgeben: "123|Klaus". In JavaScript kannst Du diesen String wieder splitten und erhältst ein Array mit den Einzelteilen:

JS:

code:

success : function(result){
    var res = result.split("|");

    alert("ID: " + res[0] + " Name: " + res[1]);
}

Es geht ein Requester auf in dem steht: "ID: 123 Name: Klaus"

--
PanzerZ |
methusalem | basic

[ - Antworten - Zitieren - Direktlink - ]

24.01.2011, 17:53 Uhr

bruZard
Posts: 307
Nutzer

Ein "Fenster" kannst Du so öffnen:

code:

<!DOCTYPE html>
<html>
<head>
	<title>Member-Search</title>
	
	<style type="text/css">
		body{
			background-color	: #ffffff;
			font				: 10pt normal Arial, Helvetica, sans-serif;
			text-align			: center;
			color				: #000000;
			margin				: 0;
			padding				: 0;
		}
		
		#searchButton{
			position			: fixed;
			width				: 400px;
			height				: 100px;
			border				: 4px solid #eeeeee;
			z-index				: 1;
		}
		
		#searchButton input{
			padding				: 20px;
			font-size			: 12pt;
			font-weight			: bold;
			margin-top			: 20px;
		}
		
		#window{
			position			: fixed;
			display				: none;
			width				: 800px;
			height				: 500px;
			left				: 50%;
			top					: 50%;
			margin-left			: -400px;
			margin-top			: -250px;
			border				: 1px solid #999999;
			box-shadow			: 0px 0px 10px #000000;
			-moz-box-shadow		: 0px 0px 10px #000000;
			background-color	: #ffffff;
			text-align			: left;
			z-index				: 10;
		}
		
		#window input{
			padding : 5px;
			margin	: 5px;
		}
		
		#modalOverlay
		{
			position			: fixed;
			display				: none;
			width				: 100%;
			height				: 100%;
			background-color	: #000000;
			z-index				: 5;
		}
	</style>
	
	<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
	
	<script type="text/javascript">
		function openWin(){
			$('#modalOverlay').fadeTo('slow', 0.7);
			$('#window').fadeIn();
		}
		
		function closeWin(){
			$('#modalOverlay').fadeOut();
			$('#window').fadeOut();
		}
	</script>
</head>
<body>
<div id="modalOverlay"></div>

<div id="window">
	<input type="button" value="X" onClick="closeWin();">
	<p>
		<h1>Formular</h1>
		Hier kommt Dein Formular zur Member-Suche rein.
	</p>
</div>

<div id="searchButton">
	<input type="button" value="Add Member" onClick="openWin();">
</div>
</body>
</html>

Zum ausprobieren: http://www.sedm.de/pub/samples/ajax-search/

[EDIT]Für das Eyecandy habe ich noch CSS3 Box-Shadow und das sanfte ein- und ausfaden des Fensters eingebastelt[/EDIT]

[ Dieser Beitrag wurde von bruZard am 24.01.2011 um 18:19 Uhr geändert. ]

[ - Antworten - Zitieren - Direktlink - ]

24.01.2011, 18:10 Uhr

AGSzabo
Posts: 1663
Nutzer

@bruZard:

WOW, danke. Eine kleine 'unschönheit' ist mir noch aufgefallen. ich müsste, um evtl probleme zu vermeiden, den add button deaktivieren solange das fester offen ist, oder? wenn ich im hauptfenster aber zig eingabgefelder und buttons habe, die zum teil schon deaktiviert sind, müsste ich mir diesen status irgendwie merken und nacher wieder herstellen?

ps: hast du interesse dich am projekt weiter zum beteiligen? ich weiss im moment noch nicht genau welche jobs es gibt, aber das ist auch davon abhängig was dich interessiert. geholfen hast du mir schon.

--
Sam mini os4.1 upd. 2 / e-uae 39bb2 / A4000D 3.0 & 3.9 2mbchip 8mbfast Ariadne_II ide DVD und HD / A500 3.1 (mkick) adide 50mb / Athlon ii X2 Ubuntu Linux

[ Dieser Beitrag wurde von AGSzabo am 24.01.2011 um 18:23 Uhr geändert. ]

[ - Antworten - Zitieren - Direktlink - ]

24.01.2011, 18:20 Uhr

bruZard
Posts: 307
Nutzer

Da gibt es eine wesentlich einfachere Lösung: Man macht das Fenster modal und überlagert den Rest der Size mit einem Div. Ich habe obigen Code und das Ausprobierbeispiel angepasst damit Du mal schauen kannst wie das aussieht.

Wenn das Fenster aufgeht lässt sich dahinter nichts mehr anklicken.
--
PanzerZ |
methusalem | basic

[ - Antworten - Zitieren - Direktlink - ]

24.01.2011, 18:25 Uhr

AGSzabo
Posts: 1663
Nutzer

@bruZard:

danke :-)
--
Sam mini os4.1 upd. 2 / e-uae 39bb2 / A4000D 3.0 & 3.9 2mbchip 8mbfast Ariadne_II ide DVD und HD / A500 3.1 (mkick) adide 50mb / Athlon ii X2 Ubuntu Linux

[ - Antworten - Zitieren - Direktlink - ]

24.01.2011, 18:29 Uhr

AGSzabo
Posts: 1663
Nutzer

Ist es möglich das popup an die größe seines inhaltes anzupassen und trotzdem zu zentrieren? habe ich nicht geschafft...
--
Sam mini os4.1 upd. 2 / e-uae 39bb2 / A4000D 3.0 & 3.9 2mbchip 8mbfast Ariadne_II ide DVD und HD / A500 3.1 (mkick) adide 50mb / Athlon ii X2 Ubuntu Linux

[ - Antworten - Zitieren - Direktlink - ]

24.01.2011, 18:34 Uhr

bruZard
Posts: 307
Nutzer

Nein, das geht leider nicht so einfach. Zwar hat jedes Element einer HTML Seite in jQuery die Eigenschaften .width, .height, .padding und .margin, aber es wäre ordentlich Aufwand alle Elemente auszulesen, ihre Position zu ermitteln, die Breiten und Abstände zu holen und daraus dann zuverlässige Daten zu generieren. Aus diesem Grund stellt man so ein Overlay i.d.R. auf "overflow : auto;" damit ggf. Scrollbalken erscheinen wenn der Inhalt zu groß wird.

Was man machen kann: Man rechnet sich die Größe pro Inhalt per Hand aus und übergibt Breite und Höhe an die Funktion winOpen(), diese müsste dann die Werte im CSS anpassen.

code:

$(#window).css("width", width);
$(#window).css("height", height);
$(#window).css("margin-left", "-" + width / 2);
$(#window).css("margin-top", "-" + height / 2);

[ Dieser Beitrag wurde von bruZard am 24.01.2011 um 18:37 Uhr geändert. ]

[ - Antworten - Zitieren - Direktlink - ]

24.01.2011, 18:35 Uhr

AGSzabo
Posts: 1663
Nutzer

@bruZard:

aha, danke.
--
Sam mini os4.1 upd. 2 / e-uae 39bb2 / A4000D 3.0 & 3.9 2mbchip 8mbfast Ariadne_II ide DVD und HD / A500 3.1 (mkick) adide 50mb / Athlon ii X2 Ubuntu Linux

[ - Antworten - Zitieren - Direktlink - ]

24.01.2011, 18:49 Uhr

AGSzabo
Posts: 1663
Nutzer

dieser code funktioniert bei mir nicht:

code:

var width = 400;
			var height = 400;

			$(#window).css("width", width);
			$(#window).css("height", height);
			$(#window).css("margin-left", "-" + width / 2);
			$(#window).css("margin-top", "-" + height / 2);

im kontext:

code:

function openWin(){

			var width = 400;
			var height = 400;

			$(#window).css("width", width);
			$(#window).css("height", height);
			$(#window).css("margin-left", "-" + width / 2);
			$(#window).css("margin-top", "-" + height / 2);

			$('#modalOverlay').fadeTo('fast', 0.1);
			$('#window').fadeIn();
		}

--
Sam mini os4.1 upd. 2 / e-uae 39bb2 / A4000D 3.0 & 3.9 2mbchip 8mbfast Ariadne_II ide DVD und HD / A500 3.1 (mkick) adide 50mb / Athlon ii X2 Ubuntu Linux

[ - Antworten - Zitieren - Direktlink - ]

-1- 2

[ - Beitrag schreiben - ]

amiga-news.de Forum > Programmierung > Javascript+PHP+MySQL: Personen auswählen

[ - Suche - Neue Beiträge - Registrieren - Login - ]