<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<title>Test01</title>
<script src="./lib/prototype.js" type="text/javascript"></script>
<script src="./lib/scriptaculous.js" type="text/javascript"></script>
</head>
<body>
<div id="bsp" style="color:#ff0000;">Test</div>
<a href="#" onclick="Element.setStyle('bsp', {color:'#0000ff', fontSize:'130px'} );">setStyle</a><br />
</body>
</html>
Hier bekomme ich die Fehlermeldung: is not a function
Also so versucht:
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<title>Test01</title>
<script src="./lib/prototype.js" type="text/javascript"></script>
<script src="./lib/scriptaculous.js" type="text/javascript"></script>
<script type="text/javascript" language="javascript">
// <![CDATA[
function test() {
Element.setStyle('bsp', {color='#0000ff'});
}
// ]]>
</script>
</head>
<body>
<div id="bsp" style="color:#ff0000;">Test</div>
<a href="#" onclick="test()">setStyle</a><br />
</body>
</html>
Dann lautet die Fehlermeldung: missing: after property id
Was mache ich falsch?
Vielen Dank im Voraus
Hans-Jürgen
Würde mich über einen schnellst mögliche Antwort freuen.
Gonsales
]]>Ich benutze die Insertion.After Funktion von Prototype um ein neues Formularfeld zum Bearbeiten über ein altes zu legen. Der Code sieht wie folgt aus:
function edit(id){
var obj = $(id);
Element.hide(obj);
var textarea ='<div id="' + id + '_editor" '
+ 'style="font-size:9pt;height:10px"><nobr>'
+ '<input id="' + id + '_edit" name="' + id + '" type="text" '
+ 'value="' + obj.innerHTML + '"'
+ 'style="font-size:9pt;height:11px" /> ';
var buttons = '<input id="' + id + '_save" type="button" value="SAVE" />'
+ ' OR <input id="' + id + '_cancel" type="button" value="CANCEL" />'
+ '</nobr></div>';
new Insertion.After(obj, textarea+buttons);
Event.observe(id+'_save', 'click', function(){saveChanges(obj)}, false);
Event.observe(id+'_cancel', 'click', function(){cleanUp(obj)}, false);
}Leider bekomme ich mit dem IE immer die Fehlermeldung "Das Zielelement dieser Operation ist nicht gültig". Mit Firefox klappt alles.
Ich habe auch schon den Thread hier durchgelesen: http://www.devshare.de/viewtopic.php?id=41318, hat mir aber leider nicht weitergeholfen.
Vielen Dank für eure Antworten!
]]>Im Buch ist die Anweisung 'put' für XMLHTTP-Request nur spärlich erwähnt, eigentlich nur, dass es sie gibt. Natürlich sind in diesem Zusammenhang Sicherheitsbedenken angebracht.
Gibt es dennoch brauchbare Infos dazu? Ich würde gerne damit mal das eine oder andere probieren.
Grüße...
-Michael-
habe gerade das Drag&Drop Beispiel mit der Library script.aculo.us ausprobiert. Leider hab ich es nicht geschaft das sich irgendetwas bewegt. Woran kann das liegen? Die Library hab ich natürlich runtergeladen.
Hier mein derzeitiger Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>script.aculo.us</title>
<script src="lib/prototype.js" type="text/javascript"></script>
<script src="src/scriptaculous.js" type="text/javascript"></script>
<script type="text/javascript">
//<![CDATA[
onload=function()
{
d = new Draggable(
'bsp',
{
change:check,
handle:innen
}
);
}
var check = function()
{
if (parseInt($('bsp').style.left) >= 300)
{
this.constraint = 'vertical';
}
if (parseInt($('bsp').style.top) >= 400)
{
d.destroy();
}
}
//]]>
</script>
</head>
<body>
<div id="bsp" style="position:absolute;color:#ff0000;">
<pre>
+ ------ +
| |
| |
+ ------ <span id="innen" style="color:#0000ff;">+</span>
</pre>
</div>
</body>
</html>
Was mache ich falsch?
vG
Doris
Ich habe einige Beispiele gesehen, wie man Progress Bars anzeigen kann..
mehr oder weniger kompliziert.. Mit einem einfachen element.style.display="" oder "none" geht da nichts, oder doch?
Ich benutze das SARISSA Framework.. Hat jemand eine Idee, wie ich eine Progress bar, oder einfach ein Bild/Layer anzeigen kann, während das XML am laden ist?
]]>ich versuche gerade herauszulesen welchen vorteil folgende syntax bringt:
function MyClass() {...}
MyClass.prototype = {
foo: function() {...}
foo2: function() {...}
}
wäre es in diesem fall nicht speicher-sparender auf eine prototype-vererbung zurückzugreifen?
MyClass.protoype.foo = function() { ... }
MyClass.protoype.foo2 = function() { ... }
welche vorteile bringt die vererbung über das prototype objekt in literal-schreibweise?
irgendwie blicke ich gerade nicht ganz durch...
danke schon mal für eure hilfe.
lg
]]>leider musste ich feststellen, der IE nicht nur beim "hasAttribute", sondern auch beim "setAttribute" seine Problemchen hat. Mittels remove-, create- und set- bekommt man/frau das aber auch im IE hin.
Was im Buch auf Seite 55 unter "createAttribute" steht: "-wenn möglich- darauf verzichten", muss nun leider doch wieder öfters in den Editor geklopft werden.
Hier mein Workaround (Hack) zum Testen:
----------------------------------------------------------------------->
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>Umweg für den IE</title>
<script type="text/javascript">
//<![CDATA[
window.onload = function ()
{
var e00 = document.getElementById("th_0");
var e01 = e00.firstChild.nodeValue;
alert("Zelle th_0: Orginalwert= "+e01);
e00.firstChild.nodeValue = "Head Line dieser Tabelle";
var e01 = e00.firstChild.nodeValue;
alert("Zelle th_0: Neuer Wert= "+e01);
var e02 = (e00.getAttribute("colspan")!=null) ? true : false;
alert("Das Element th_0 hat ein Attribute ColSpan = "+ e02);
alert("Orginal Attribute ColSpan = "+e00.getAttribute("colspan"));
alert("Ändere ColSpan mittels setAttribute auf 3");
e00.setAttribute("ColSpan", "3"); //Funktioniert nur mit einem GEKO Browser
alert("Modifizieres Attribut ColSpan (sollte 3 sein) = "+e00.getAttribute("colspan"));
//Versuch mittels remove, create und set funktioniert mit Geko- und mit dem IE-Browser
alert("Ändere ColSpan mittels remove-, create- und setAttribute auf 5");
e00.removeAttribute("colspan");
var v = document.createAttribute("colspan");
v.nodeValue = "5";
e00.setAttributeNode(v);
alert("Modifizieres Attribut ColSpan (sollte 5 sein) = "+e00.getAttribute("colspan"));
}
//]]>
</script>
</head>
<body>
<table id="table_1" width="80%" border="5" bgcolor="F30FA5">
<tr id="tr_1" lang="en">
<th id="th_0" colspan="1" title="Meine Zeile" align="center">Überschrift</th>
</tr>
<tr id="tr_2" lang="de">
<td id="td_0_0" bgcolor=#00FF00 align="center">Spalte 0</td>
<td id="td_0_1" bgcolor=#0FFF0F align="center">Spalte 1</td>
<td id="td_0_2" bgcolor=#0FFF0F align="center">Spalte 2</td>
<td id="td_0_3" bgcolor=#0FFF0F align="center">Spalte 3</td>
<td id="td_0_4" bgcolor=#0FFF0F align="center">Spalte 4</td>
</tr>
</table>
</body>
</html>
----------------------------------------------------------------------------
Wenn jemand eine andere Lösung kennt, bitte hier posten.
MfG
WolliK
mfg
Günni
ich zerbreche mir seit einiger Zeit den Kopf, wie es zu schaffen wäre, innerhalb einer Klasse mithilfe von Ajax (prototype.js) die Objektvariablen zu verändern...
/* constructor */
function MyClass() {...} // Constructor
/* request */
MyClass.prototype.request = function () {
var options = {
...
onSuccess:this.processRequest;}};
this.ajax = new Ajax("index.php", options);
}
/* response */
MyClass.prototype.processRequest(xhr) {
var xml = xhr.responseXML;
var foo = xml.getElementsByTagName("foo")[0].firstChild.nodeValue;
var newElement = document.createElement("div");
...
this.classVar.appendChild(newElement);
}
Dieses Beispiel funktioniert leider nicht...
processRequest wird zwar aufgerufen bekommt auch das xhr-objekt,
jedoch ist this.classVar nicht bekannt
Der Hintergedanke für die Kapselung ist der, um bspw. eine Funktionalität mehrfach auf einer Seite abbilden zu können - zb: mehrere Fotoslider auf einer Seite, welche content mithilfe von Ajax liefern...
hat jemand eine Idee/Lösung?
]]>Ich war fasziniert vom Kapitel "5.5 Vorschau auf E4X" und wollte es sogleich in die Praxis umsetzten. Doch leider ging das Laden einer XML Datei schief! Im Text steht "[..] Mit E4X können Sie XML-Daten über eine eingelesene Datei - wie in diesem Kapitel bereit gezeigt - [..] bearbeiten". Nun, da nehme ich an, dass mit dem Datei-Einlesen folgendes gemeint ist:
xml = document.implementation.createDocument("","",null);
xml.async = false;
xml.load("datei.xml");Danach wäre das XML-Objekt an der Reihe:
var e4x = new XML(xml);Jedoch bekomme ich die Fehlermeldung:
can't convert new XML(xml) to XML
Kann mir da jemand weiterhelfen?
]]>Also irgendwie scheitere ich schon an den ersten Sachen des Buches. So z.B. auf Seite 29 an der Doctype Definition. Wenn ich diese genauso abtippe, also ...
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"
[
<!ATTLIST a notiz CDATA #IMPLIED>
]>
... , dann habe ich Probleme mit der ATTLIST und deren schließender eckiger Klammer. Und zwar wird diese schließende Klammer anscheinend als Ende der ersten öffnenden eckigen Klammer bei '<!DOCTYPE...' gesehen. Somit wird die ATTLIST gar nicht richtig verarbeitet und im Browser erscheint deshalb nur das ']>' aus der letzten Zeile der Doctype Definition. Dies ist auch beim Beispiel 2.1.4_2 auf der CD zu beobachten. Wie bekommt man nun ne DOCTYPE hin, die 100%ig funktioniert und auch bis zum Ende abgearbeitet wird?
Gruß
Björn
Bitte entschuldigen Sie die Fehler im Buch! Ganz herzlichen Dank auch an alle Leser, die mich auf einzelne Fehler aufmerksam gemacht haben.
Falls Ihnen weitere Fehler im Buch auffallen, würde ich mich über einen entsprechenden Hinweis freuen. Senden Sie mir dazu unter info (at) jg-webdesign (dot) de eine Nachricht. Vielen Dank.
Kapitel 2
Kapitel 3
Kapitel 4
Kapitel 5
Kapitel 6
Kapitel 7
Kapitel 8
Kapitel 9
Viel Erfolg und Spaß mit dem Buch
Hannes