✔ Mehrere Alertboxen auf einer seite ! Nur wie ?

J

junior1709

Grünschnabel
Hallo Leute,

ich bin neu hier und wurde hierher empfohlen da es sichb bei meinem anliegen um javascript handeln soll

Ist es möglich mehrere Alertboxen auf einer Seite einzubauen, sodass der Nutzer jeweils per klick versch. Infos erhält ?

Möchte auf folgender Seite:
http://www.niedersachsen-biker.de/test2.htm
diese funktion jeweils bei den einzelnen events einbauen, sodass jeder per klick eben die details sieht.

Was mache ich falsch bzw. wie mache ich es richtig Huh
Wenn ihr dem link folgt seht ihr meinen versuch. siehe datum 16 und 17.12

Habe den box-link mit "Hier" gekennzeichnet bloed.gif

geeeeeeht nicht...

habt ihr rat ?

ps. Muss auch sagen bin fast vollkommen talentfrei in sachen pc. wenn du dir die html meiner hp ansiehst wirst du als profi sicherlich 1000 fehler entdecken. aber sie läuft und mir reichts so icon_smile.gif
Sofern bin ich für eure hilfen dankbar...

Gru77
 
Hallo

Du hast zur Zeit eine konstante Variable, die den Text enthält der angezeigt werden soll.
Du müsstest es aber mit einer Funktionsvariable machen, der du dann bei Funktionsaufruf, den Text bzw. die Info weiter gibst, der angezeigt werden soll.

Gruß SimonErich
 
Danke für deine Antwort. Hatte schon gedacht damit auf taube ohren zu stoßen.

Nun weiß ich leider nicht was eine Funktionsvariable ist und wie der html code dafür aussieht. Google = 0 Erfolg :confused:

Bitte um hilfestellung ! :confused:
 
Oh weh :-(

Sorry, das sind für mich böhmische dörfer...

Also ich arbeite überwiegend mir Front Page, weils für mich am einfachsten ist. Das dürfte einiges sagen :-)

Nun, ich wurde schon öfters über das validieren informiert. Anfangen kann ich mit den fehlern leider nichts...
Somit weiß ich sie auch nicht zu beheben !


Danke für den Link.
Wenn ich nun aber folgendes script:

Code: 
<html>
<head>
<title>Test</title>
</head>
<body>
<script type="text/javascript">
var Hinweis = "Gleich werden Quadratzahlen ausgegeben";
alert(Hinweis);

function SchreibeQuadrate () {
  var SinnDesLebens = 42;
  var i, x;
  var Satzteil = "Das Quadrat von ";
  for (i = 1; i <= SinnDesLebens; ++i) {
    x = i * i;
    document.write(Satzteil + i + " ist " + x + "<br>");
  }
}
</script>
</body>
</html>




2 fach hintereinander kopiere erscheint auch 2x hintereinander ein alertfenster.

Damit ist aber der Sinn verfehlt. Ich möchte ein Link auf einem Zeichen Bsp. "INFO" haben
wo der Besucher meiner hp dann per knopfdruck kurze infos unserer motorradtouren in einem kleinen eigenen alertfenster erhält...

Ist das möglich ? wie ?
Gru77
 
Dann schau dir mal die alert()-Methode an.

Code: 
<body>

    <p><a href="javascript:alert('Inhalt für die erste Alertbox')">Alertbox 1</a></p>

    <p><a href="javascript:alert('Inhalt für die zweite Alertbox')">Alertbox 2</a></p>

</body>
 
Hi,

Du bindest die externe Datei Alert.js öfters ein - es reicht einmal die Funktionen bekannt zu machen und
die AlertBox nur einmal zu erstellen.

Wie @SimonErich schon anmerkte, müsstest Du die Infotexte und die jeweiligen Titel als Variable übergeben.
Hierfür muss die Funktion showAlert angepasst werden.

Ich habe das Erstellen der AlertBox im Beispiel in eine Funktion geschrieben, um einfacher Zugriff darauf zu
haben. Zudem habe ich die Funktion showAlert modifiziert. Es werden nun zwei Parameter übergeben
(Titel und Text), die mit den Methoden getElementById und innerHTML an den entsprechenden Stellen
eingebunden werden. Weiterhin habe ich Anzeigeprobleme im Mozilla durch die Angabe einer Einheit (Pixel)
behoben.

Ich habe Dir ein Beispieldokument erstellt, indem die Funktionsweise deutlicher werden sollte.
Code: 
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
  "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>www.tutorials.de</title>
<meta name="author" content="Quaese">
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">

<script type="text/javascript">
  <!--
// www.jjam.de - Alertbox mit JavaScript - Version 20.12.2002

//Nur für IE 5+, NN6+ und Opera 5+
ie5=(document.getElementById && document.all && document.styleSheets)?1:0;
nn6=(document.getElementById && !document.all)?1:0;
op5=(document.getElementById&&document.all&&!document.styleSheets)?1:0;

function createAlertBox(){
	// Alertbox erstellen
	if(ie5||nn6||op5) {
	  if(ie5) cp=5,cs=2,th=30,bh=50;
	  else if(nn6) cp=2,cs=0,th=22,bh=35;
	  else cp=0,cs=1,th=15,bh=20; //wg. Layout

	  document.write(
	    "<div style='position:absolute;top:-500;left:0;z-index:100; visibility: hidden;' id='alert'>"+
	    "<table style='border-style:outset;border-width:2;border-color:#E6E6CD;background-color:#F5F5DC' cellpadding='"+cp+"' cellspacing='"+cs+"' width='"+alertWidth+"' height='"+alertHeight+"' onmousedown='getxyRelativ()' onmousemove='moveAlert()' onmouseup='moveStatus=0'>"+
	      "<tr><td height='"+th+"' bgcolor='#DEDEC5'><div id=\"titleID\"></div></td></tr>"+
	      "<tr><td><div id=\"textID\"></div></td></tr>"+
	      "<tr align='center'><td height='"+bh+"'>"+
	        "<input style='background-color:#E9E9CF;border-width:1;font-weight:bold' type='button' value='&nbsp; &nbsp; OK &nbsp; &nbsp;' onclick='okAlert()' onfocus='if(this.blur)this.blur()'>"+
	      "</td></tr>"+
	    "</table>"+
	    "</div>"
	  );
	}
}

// Box anzeigen
// Anzuzeigenden Titel und Text übergeben
function showAlert(strTitle, strText) {
	moveStatus=0;
	xAlert=xAlertStart, yAlert=yAlertStart;

  // Anzuzeigenden Text in Titel schreiben
  document.getElementById("titleID").innerHTML = strTitle;
  // Anzuzeigenden Text in Box schreiben
  document.getElementById("textID").innerHTML = strText;

	if(ie5) {
		document.getElementById("alert").style.left = (xAlert+document.body.scrollLeft) + "px";
		document.getElementById("alert").style.top = (yAlert+document.body.scrollTop) + "px";
		document.getElementById("alert").style.visibility = "visible";
	}
	else if(nn6||op5) {
		document.getElementById("alert").style.left = (xAlert+window.pageXOffset) + "px";
		document.getElementById("alert").style.top = (yAlert+window.pageYOffset) + "px";
		document.getElementById("alert").style.visibility = "visible";
	}
	else alertAlternative();
}

// Relative Mausposition ermitteln
var xRelativ, yRelativ;
function getxyRelativ() {
	moveStatus=1;
	if(ie5) {
		xRelativ=event.clientX-xAlert;
		yRelativ=event.clientY-yAlert;
	}
}

// Verschieben nur für IE
function moveAlert() {
	if(ie5&&moveStatus>0) {
		xAlert=document.getElementById("alert").style.left=event.clientX+document.body.scrollLeft-xRelativ;
		yAlert=document.getElementById("alert").style.top=event.clientY+document.body.scrollTop-yRelativ;
	}
}

function okAlert() {
  document.getElementById("alert").style.visibility="hidden";
}
function alertAlternative() {
  alert("Hallo, ich bin auch eine Dialogbox !\n\nAber leider nicht so hübsch wie im IE 5+ oder NN 6+.");
}

alertWidth=300;
alertHeight=200;
xAlertStart=300;
yAlertStart=100;
 //-->
</script>

</head>
<body>
<script type="text/javascript">
  // Erstellen der absolut positionierten Box im Dokument
  // Muss nur EINMAL im Dokument erfolgen (aber im BODY)
  createAlertBox();
</script>
<div>
  <a href="#" onclick="showAlert('Der Titel 1', 'Ich bin der erste Text');">Hier</a><br>
  <a href="#" onclick="showAlert('Überschrift der Box', 'Ich bin der zweite Text<p>mit Absatz</p>');">Hier</a>
</div>
</body>
</html>
Den Code innerhalb des ersten Script-Bereiches kannst Du wieder in eine externe Datei auslagern und im
HEAD-Bereich des Dokumentes einbinden.

Vielleicht hilft Dir das weiter.

Ciao
Quaese
 
Ich denke, dass es einfach blöd ist, da du die ganzen Grundlagen nicht beherrscht.
Somit wird dir, das was wir hier raten und empfehlen nichts helfen wird.
Leider ist es so, dass du einen guten "Grundlagenkatalog" brauchst um darauf einzugehen.
Ich weiß wie das ist und ich habe es auch immer gehasst, wenn es hieß, dass ich die Grundlagen lernen sollte, aber es ist wirklich wahr.
Natürlich könnte es jemand für dich erledigen, aber wer hat die Zeit ?
Ich persönlich leider nicht und deshalb empfehle ich dir, wenn du eine eigene Seite machen willst, dass du dich ein paar Stunden hinsetzt und ein oder zwei, von den vielen wirklich guten Seiten zu diesen Themen, durchließt.

Falls du keine Zeit findest um wirklich das genau durchzugehen, nimm michaelsinterface's Methode, die ist leicht einzubauen sieht aber nicht so "toll" aus wie deine, sondern ist nur ein einfaches Alert Fenster.
Aber probier es mal aus :)

Code: 
<p><a href="javascript:alert('Inhalt für die erste Alertbox')">Alertbox 1</a></p>

    <p><a href="javascript:alert('Inhalt für die zweite Alertbox')">Alertbox 2</a></p>

Einfach bei jedem Link hinschreiben:
Code: 
href="javascript:alert('Der Infotext für diesen Link')"


Gruß SimonErich
 
Ja alles schon erfolgreich gemacht. Ich sage euch allen super vielen dank. Die Fehler auf der HP werden wohl noch warten müssen. Der Rest aber läuft.

Wie schon gesagt, euch allen super vielen lieben Dank und einen guten Rutsch ins Neue !"!!

Gru77 junior
 
Jetzt ist alles eingebaut, aber wie integriere ich da einen platzhalter ? Aktuell zeigt er im code nur Bsp. Info1 an. Geht es auch dass ich an Stelle des Textes fürs Alertfdensterein Drückmich button oder bild benutze ? Wie ?

Grüße aus Bremen
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück