• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

getElementsByClassName" wird nicht unterstüzt

J

jumbo125

Mitglied
Ich weiß, es gibt schon einige Threads mit diesem Thema, aber ich würde gerne eine bereits funktionierende Function abändern. Nachdem ich dachte meine homepage wäre fertig, und sie einen Freund zur beobachtung gab, meldete er, dass die Seite nicht funktioniert(Ein schlag in die Magengrube)... Dann versuchte er es mit einen anderen Brwoser und es funktionierte. Juhhuu..

Ich selbst hab dann die Seite im IE aufgerufen und debuggen lassen(kann man das so sagen??)... Fazit: [h=1]getElementsByClassName" wird nicht unterstüzt[/h]
nun würde ich gerne meine Function umschreiben, sodass sie in allen Browsern funktioniert.

Code: 
function sichtbar() {
document.getElementById("allesfehlt").style.display = "block";
document.getElementsByClassName("mainpicture")[0].style.display = "none";
}



<img src="...." alt="...." onclick="sichtbar();">

hat jemand einen Lösungsvorschlag?
 
Versuche es doch mal mit jQuery.

Code: 
$('selector').first().hasClass('.mainpicture').hide();

Als selector musst du natürlich das entsprechende HTML-Element einfügen.
 
Zuletzt bearbeitet:
Tronjer schrieb:
Versuche es doch mal mit jQuery.

Code: 
$('selector').first().hasClass('.mainpicture').hide();

Als selector musst du natürlich das entsprechende HTML-Element einfügen.
Zum Vergrößern anklicken....

denn code kann ich direkt in die funktion rein schreiben?? Jquery ist NEULAND für mich. Muss ich dazu im header auch eine Jquery datei bzw. einen Link festlegen??

als Html-Selektor..... es handelt sich um ein Bild, wäre der selektor dann: $('input:image') ????
 
jumbo125 schrieb:
denn code kann ich direkt in die funktion rein schreiben??
Zum Vergrößern anklicken....

Ja, aber du könntest auch so etwas schreiben:

HTML: 
<img src="..." id="meinbild" />

$('#meinbild').click(function() {
    $('img').first().hasClass('.mainpicture').hide();
});

Eine der großen Vorteile von jQuery besteht darin, dass man Selektoren quasi genauso wie im CSS ansprechen kann. Schau dir mal die offizielle Doku auf jquery.com an. Mit Grundkenntnissen in JS und CSS solltest du dich da sehr schnell zurechtfinden.
 
danke für den Tipp. Aber mein Javascript reicht vermutlich nicht einmal für die Grundkenntnisse

die genaue Zuweisung heißt:

<div onclick="sichtbar()"; class="mainpicture bgflug"></div>

Kurz zur erklärung, das Bild ist animiert. Daher habe ich .mainpicture(das eigentliche Bild) und .bgflug(wie der Name schon sagt, ist dies die Animation des Bildes)


Wenn ich das anpsse sieht es doch so aus, oder??
Code: 
$('.mainpicture').click(function() {
    $('img').first().hasClass('.mainpicture').hide();
});

aber wie greife ich auf die funktion zu???

<div onclick=".....(die jquery-funktion)..........."; class="mainpicture bgflug"></div>
 
jumbo125 schrieb:
danke für den Tipp. Aber mein Javascript reicht vermutlich nicht einmal für die Grundkenntnisse

aber wie greife ich auf die funktion zu???
Zum Vergrößern anklicken....

Du brauchst keinen separaten Eventhandler mit Funktionsaufruf innerhalb des Div.

Code: 
$('.mainpicture').click(function() {
     alert('Hello world');
});

Alles was in dieser Funktion steht, wird ausgeführt, wenn du auf ein HTML-Element mit der CSS-Klasse mainpicture klickst. Probiere es doch einfach mal selber. jQuery ist wirklich so einfach wie es aussieht.
 
ich nehm,e an, das ich eine jquery.js datei einbinden muss(im header). Gibts dafür auch einen online pfad, oder muss ich die lokal speichern?
 
ich glaub ich fress nen Besen. Wie kann ich dir nur danken. Funktioniert super. Mein endgültiger Code war:
Code: 
$(document).ready(function () {
$('.mainpicture').click(function() {
    $('.mainpicture').hide();
    $('#allesfehlt').show();
});
});

jetzt auf den schnellen Blick, kann ich nur sagen, dass jquery so einges mit sich bringt....

So könnte ich mir auch einen "Lern-verysimple" preloader bauen:
dazu bräuchte ich nur meine Homepage in einem Div einbauen, welches über css auf display:none gesetzt ist. Bspw: #allesfehlt{display:none; position: fixed}
und noch einen Ladekreis(denn hab ich im Photoshop Elemetns bereits gestaltet) mit einer css id auf display-block stellen. Bspw: #ladekreis{ display:block;}
Code: 
[COLOR=#333333]$[/COLOR][COLOR=#009900]([/COLOR][COLOR=#333333]document[/COLOR][COLOR=#009900])[/COLOR][COLOR=#333333].[/COLOR][COLOR=#660066]ready[/COLOR][COLOR=#009900]([/COLOR][COLOR=#003366][B]function[/B][/COLOR][COLOR=#009900]([/COLOR][COLOR=#009900])[/COLOR][COLOR=#009900]{
$("#ladekreis")[/COLOR][COLOR=#333333].[/COLOR][COLOR=#660066]css[/COLOR][COLOR=#009900]([/COLOR][COLOR=#3366CC]"display"[/COLOR][COLOR=#339933],[/COLOR][COLOR=#3366CC]"none"[/COLOR][COLOR=#009900])[/COLOR][COLOR=#339933];[/COLOR][COLOR=#009900]
[/COLOR][COLOR=#333333]$("#allesfehlt")[/COLOR][COLOR=#333333].[/COLOR][COLOR=#660066]delay[/COLOR][COLOR=#009900]([/COLOR][COLOR=#cc0000]100[/COLOR][COLOR=#009900])[/COLOR][COLOR=#333333].[/COLOR][COLOR=#660066]fadeIn[/COLOR][COLOR=#009900]([/COLOR][COLOR=#3366CC]"slow"[/COLOR][COLOR=#009900])[/COLOR][COLOR=#333333]";[/COLOR]
}

müsste doch funktionieren....

wobei sich hier die Frage stellt, ob das nicht mit meiner "Intro" css animation kollidiert..... Da beim seitenaufruf eine einmalige Css animation abgespielt wird.... Diese würde ja schon längst ablaufen, bis die seite fertig geladen ist..... jetzt muss ich wieder grübeln:???:

aber ich glaube, wenn ich die animation bereits habe, bspw: .textbox{width:.. height:....; etc. etc} UND eine dazugehörende animation{@webkit-keyframes textboxanimation{ 0%..... 100%.... }
muss ich nur noch
Code: 
[COLOR=black][FONT=Inconsolata]$[/FONT][/COLOR][COLOR=#666666][FONT=Inconsolata]([/FONT][/COLOR][COLOR=#AA2222][FONT=Inconsolata]".textbox"[/FONT][/COLOR][COLOR=#666666][FONT=Inconsolata])[/FONT][/COLOR][COLOR=#666666][FONT=Inconsolata].[/FONT][/COLOR][COLOR=black][FONT=Inconsolata]toggleClass[/FONT][/COLOR][COLOR=#666666][FONT=Inconsolata]([/FONT][/COLOR][COLOR=#AA2222][FONT=Inconsolata]"textboxanimation"[/FONT][/COLOR][COLOR=#666666][FONT=Inconsolata])[/FONT][/COLOR][COLOR=#666666][FONT=Inconsolata]; //in die document.ready function schreiben.....[/FONT][/COLOR]
und den standart css-anitmationtext(Duration, name etc.) gegen -webkit-transition tauschen :???:naja, mal sehen, das hat bis morgen zeit...
oder sollte ich dem Forum etwas gutes tun und mit dem programmieren schluss machen, um meine unzähligen psots zu verhindern.....mal ne nacht drüber schlafen
Jedenfalls danke
 
Wenn du dich etwas länger mit jQuery beschäftigst, wirst du merken, dass dieses Framework noch einiges mehr zu bieten hat als dynamisches Styling. Zum Beispiel ist each() ein Äquivalent für die aus PHP bekannte foreach Schleife und auch der Einstieg in Ajax gestaltet sich hier wesentlich einfacher. Außerdem gibt es als Erweiterungen noch jQuery UI und jQuery Mobile.

wobei sich hier die Frage stellt, ob das nicht mit meiner "Intro" css animation kollidiert..... Da beim seitenaufruf eine einmalige Css animation abgespielt wird.
Zum Vergrößern anklicken....

Du kannst ein delay() in eine jQuery-Animation einbauen; um allerdings eine ganze Funktion verzögert auszulösen, muss doch wieder auf das "alte" setTimeout() zurück gegriffen werden. jQuery ist zwar wesentlich zugänglicher, aber eben kein vollwertiger Ersatz für vanilla JS. Mit JavaScript lassen sich komplette Applikationen schreiben, und man benötigt es ebenso für einige der neuen HTML5 Elemente, wie bsw. Canvas.

Als Anmerkung noch zu dem von Threadi verlinkten Tutorial:

Anstatt eines return false schreibt man in jQuery:
Code: 
$('selector').click(function(e) {
     // tu was
    e.preventDefault();
});
 
Zuletzt bearbeitet:
das mit dem
Code: 
[COLOR=#333333]$[/COLOR][COLOR=#009900]([/COLOR][COLOR=#333333]document[/COLOR][COLOR=#009900])[/COLOR][COLOR=#333333].[/COLOR][COLOR=#660066]ready[/COLOR][COLOR=#009900]([/COLOR][COLOR=#003366][B]function[/B][/COLOR][COLOR=#009900]([/COLOR][COLOR=#009900])[/COLOR][COLOR=#009900]
[/COLOR]

funktioniert nicht wirklich. Meine Seite sihet so aus:
Code: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>


  <meta http-equiv="content-type" content="text/html; charset=utf-8">
  <meta name="generator" content="PSPad editor, www.pspad.com">
<link rel="stylesheet" type="text/css" href="style/style.css" />
<link rel="stylesheet" type="text/css" href="style/index-animation.css" />
<link href="css/ui-lightness/jquery-ui-1.9.2.custom.css" rel="stylesheet">
	<script src="js/jquery-1.8.3.js"></script>
	<script src="js/jquery-ui-1.9.2.custom.js"></script>  
    

  <script type="text/javascript">
$(document).ready(function(){
  $('#preloader').hide();
  $('#allesfehlt').delay(100).fadeIn("slow") ;
 });
</script>





    <script>
    $(function() {
        $( "#accordion" ).accordion();
    });
    </script>   
    


  <title>Home</title>
  </head>
  <body>
  <div id="preloader">
  </div>
 <div id="allesfehlt">

//seiteninahlt
</div>
</body>
etc..

css datei:
Code: 
#preloader{
background-image: url(aufbau/ladekreis.gif);background-repeat:no-repeat;


width:250px;
height: 210px;
 margin-top:-105px; 
 margin-left:-125px;
	  top:50%;
    left:50%;
	  position:absolute;
    display: block;
}


#allesfehlt{
    width: 1270px;
  height: 1250px;
  position:relative;
  left: 50%;
  margin-left: -625px;
  display: none;
}

mittels Netlimiter habe ich das internet auf 32kbits gedrosselt. Fazit: es erscheint ewig lange eine weiße, leere Seite. Danach kommt direkt die Homepage(ohne ladekreis oder der gleichen) UND die Bild sind noch immer nicht vollstängig geladen. Hat jemand eine ahnung?

Wenn ich mir den Queltext während des weißen Bildschirmes ausgebe, steht nur:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>


<meta http-equiv="content-type" content="text/html; charset=utf-8">
<meta name="generator" content="PSPad editor, www.pspad.com">
<link rel="stylesheet" type="text/css" href="style/style.css" />
<link rel="stylesheet" type="text/css" href="style/index-animation.css" />
<link href="css/ui-lightness/jquery-ui-1.9.2.custom.css" rel="stylesheet">
<script src="js/jquery-1.8.3.js"></script>
<script src="js/jquery-ui-1.9.2.custom.js"></script>
</head>
</html>
Zum Vergrößern anklicken....
 
jumbo125 schrieb:


mittels Netlimiter habe ich das internet auf 32kbits gedrosselt. Fazit: es erscheint ewig lange eine weiße, leere Seite. Danach kommt direkt die Homepage(ohne ladekreis oder der gleichen) UND die Bild sind noch immer nicht vollstängig geladen. Hat jemand eine ahnung?
Zum Vergrößern anklicken....

32kbit entsprechen halber ISDN-Geschwindigkeit und übertragen etwa 3k/s. Das ist Standard von 1994. Zu dem Zeitpunkt wurden GIFs noch interlaced, damit der Besucher sah, dass etwas passierte und nicht dachte, sein Browser wäre abgestürzt. ;)

Um aufzuspüren, welche Ressourcen (nicht) geladen werden (können), gibt es das Netzwerk-Tab in Firebug.
 
okay. Jetzt kenne ich mich nicht mehr aus. Im Firebug im Netzwerk-tab

werden folgende Punkte, IN DIESER REIHENFOLGE geladen:
1. meine seite.
2. die css datei, welhce den großteil der Styles beinhaltet(style/style.css) //steht oben im code
3. eine zweite css datei, welche die Index animationen enthält (index-animation)
3. jquery ui-1.9.2
4. jqueri 1.3.8 js
5. jquery ui-1.9.2.
6. ein großes Bild der index-seite
7. eine logo auf der homepageseite
8. DER LADEKREIS

Wie kann es sein, dass bereits inhalte derHomepage vor dem LADEKREIS geladen werden?

Vorallem da in der style/style.css Datei, die gesamte Seite auf display:none gestezt wurde und der ladekreis auf display:block....
 
Ich kann es dir nicht sagen. Vielleicht deshalb, weil bei deiner reduzierten Übertragungsrate das HTML vor den Bibliotheken geladen wird. Mein von Google verlinktes jQuery überträgt 261kb. Das würde bei 32kbit mehr als eine Minute benötigen.

JavaScript muss übrigens nicht im Head stehen. Ich platziere es in der Regel vor dem schließenden Body-Tag und verzichte auf das $(document).ready. Daneben gibt es auch JS-Frameworks, die Bibliotheken nach einer festgelegten Reihenfolge laden.
 
Bei näherer Betrachtung könnte sich auch hier eine Fehlerquelle verbergen.

Code: 
$(document).ready(function(){
  $('#preloader').hide();
  $('#allesfehlt').delay(100).fadeIn("slow") ;
 });
</script>


    <script>
    $(function() {
        $( "#accordion" ).accordion();
    });
    </script>

$(document)ready(function(){}) und $function(){} machen beide das selbe. Du kannst diese Funktion pro Seite aber nicht mehrfach aufrufen. Verschiebe dein Akkordeon nach oben oder das jQuery ans Ende der Seite. Dann brauchst du gar kein $(document).ready() mehr.
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben