zurück zur Startseite
  


Zurück XHTMLforum > Webentwicklung (außer XHTML und CSS) > Javascript & Ajax
Seite neu laden Elemente mit Javascript zählen

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 06.11.2008, 14:33
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 23.10.2008
Beiträge: 29
therug befindet sich auf einem aufstrebenden Ast
Standard Elemente mit Javascript zählen

Hallo

also ich habe ein einfaches, aber für mich nicht zu lösen des Problem...

also in meiner kleinen Thumbgallery müßte man per Hand den CSS-code anpassen wenn man die Anzahl der Bilder ändert... ich könnte mir Vorstellen das Javascript ohne Probleme die Elemente in der Liste zählen kann. Den 'count' mit einer Breite multipliziert und dann die Breite im CSS-Code anpasst.

HTML-Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<title>visusta.com - your e-learning source for statics</title>
<style type=text/css>
 * {border:0px; padding:0px; margin:0px;}
 body {background:#FFFFFF; font-family:Helvetica, Arial, sans-serif; font-size:75%; color:#000000; text-align: center; cursor:default;}
.page {margin:10px; padding:10px; background:#007EC6; min-width:940px;}
.related {border:#FFD98F 1px solid; height:211px;}
.relatedout {margin:10px 5px; height:193px; overflow-x:scroll;}
.relatedin {width:9999px; heigth:168px;}
/*Hier müßte man "width" per Hand immer anpassen*/
/*Javascript sollte z.B. 'LI' zählen mit 178px multiplizieren und dann 10px abziehen*/
/*also ('count LI' * 178px) - 10px*/
.relatedin ul {list-style:none; margin-left: -10px; }
.relatedin ul li {float:left; cursor:pointer;}
.relatedin h2 {display:none;}
.relatedin div {margin-left: 10px; background:#000000; width:168px; height:168px;}
</style>
</head>

<body>
<div class="page">
<div class="related">
<div class="relatedout">
<div class="relatedin">
   <ul>
      <li><h2>Ähnliches Projekt</h2><div></div></li>
      <li><h2>Ähnliches Projekt</h2><div></div></li>
      <li><h2>Ähnliches Projekt</h2><div></div></li>
      <li><h2>Ähnliches Projekt</h2><div></div></li>
      <li><h2>Ähnliches Projekt</h2><div></div></li>
      <li><h2>Ähnliches Projekt</h2><div></div></li>
      <li><h2>Ähnliches Projekt</h2><div></div></li>
      <li><h2>Ähnliches Projekt</h2><div></div></li>
      <li><h2>Ähnliches Projekt</h2><div></div></li>
      <li><h2>Ähnliches Projekt</h2><div></div></li>
</ul>
</div>
</div>
</div>
</div>
</body>
</html>

Hier mein Ansatz... den ich mir zusammen reimen konnte, aber wirklich Ahnung habe ich nicht!!! habe lediglich versucht Analogien aus anderen Skripten zu ziehen...

function breitenangabe()
{var count = document.getElementByClass('relatedin').getElement sByTagName('LI').length;
breite=count*178px-10px
document.getElementByClass('relatedin').replace(?? ????)
}
breitenangabe();
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 06.11.2008, 17:31
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 23.10.2008
Beiträge: 29
therug befindet sich auf einem aufstrebenden Ast
Standard

Hm, das mit den ClassName ist komisch...

AufSELFHTML: JavaScript / Objektreferenz / HTML-Elementobjekte wird es als Universalattribute geführt hatte daher gedacht man könnte es so benutzen, aber na ja... ich bringe da bestimmt etwas durcheinander...

also ich raffe es trotzdem nicht...
habe jetzt den Code jetzt versucht an verschiedenen stellen einzufügen, aber nichts klappt...

Code:
<script type="text/javascript">
function adjustWidth() {
    var elem = document.getElementById('relatedin');
    var count = elem.getElementsByTagName().length;
    elem.style.width = ((count * 178) - 10) + 'px';
}
</script>
Müßte bei der Variablen count nicht der TagName('LI') mit angegeben werden?

Muß das Script noch irgenwie aktiviert werden? (onload oder ähnliches???) bei den anderen scripten brauchte ich das nicht, aber funktionieren tut dieses ja nicht???
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 06.11.2008, 17:55
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 27.06.2006
Beiträge: 134
cybaer befindet sich auf einem aufstrebenden Ast
Standard

Zitat:
Zitat von VuuRWerK Beitrag anzeigen
document.getElementsByClassName gibt es nur im Opera ab 9.5, FF3 und Browser die Webikit implementieren, also ist das keine gute Lösung für Browserunabhängigkeit.
Unabhängig vom Problem hier: Ich halte die Verwendung für absolut unproblematisch. Die Methode wird standardisiert (oder ist es bereits?) und peu a pe in allen Browsern verfügbar sein.

Und wenn sie es nicht ist, was man ja abfragen kann, verwendet man hilfsweise eine der vielen getElementsByClass-Funktionen, die man im Netz finden kann.
__________________
Gruß, Cybaer
Mit Zitat antworten
  #4 (permalink)  
Alt 06.11.2008, 18:01
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 27.06.2006
Beiträge: 134
cybaer befindet sich auf einem aufstrebenden Ast
Standard

Zitat:
Zitat von therug Beitrag anzeigen
.relatedin {width:9999px; heigth:168px;}
/*Hier müßte man "width" per Hand immer anpassen*/
/*Javascript sollte z.B. 'LI' zählen mit 178px multiplizieren und dann 10px abziehen*/
/*also ('count LI' * 178px) - 10px*/
Wenn Du die Anzahl hast, kannst Du auch mittels cssRule() den CSS-Code selbst per JS ändern (cssRule(".relatedin","width",newValue);).
__________________
Gruß, Cybaer
Mit Zitat antworten
  #5 (permalink)  
Alt 06.11.2008, 19:43
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 27.06.2006
Beiträge: 134
cybaer befindet sich auf einem aufstrebenden Ast
Standard

Zitat:
Zitat von VuuRWerK Beitrag anzeigen
jetzt glaubst Du ernsthaft das gerade ein IE der Browser ist der getElementsByClassName am schnellsten intigriert hat? Sry, aber da muss ich mal fix schmunzeln
Wie kommst Du darauf, daß ich auch nur so etwas ähnliches ausgesagt hätte?

Fakt ist: Es gibt zahlreiche Browser, die das bereits nativ unterstützen, und es gibt zahlreiche Browser, die das nicht tun, denen man diese Funktionalität aber einfach beibringen kann. Es ist nicht abzusehen, wann die letzten Browser verschwunden sein werden, die das nicht nativ unterstützen. Aber darauf Rücksicht zu nehmen, ist ja wg. der ohnehin notwendigen Pflicht zur Alternative auch überhaupt nicht notwendig ...


Zitat:
wie oben schon erwähnt soll er halt gleich ein Framework nehmen. Es wird nicht das einzige bleiben was er machen will und dann lohnt es sich schon.
vielleicht, vielleicht auch nicht.

Ansonsten muß ich bei den Frameworks immer an die berechtigte Kritik zu Prototype aus der JS-Newsgroup denken: Für Leute die kein JavaScript programmieren können, von Leuten die kein JavaScript programmieren können.

Und wenn ich alleine an die zahlreichen technisch mangelhaften (und inhaltlich noch nicht mal begründbaren) "Browserweichen" in jQuery denke, dann kann ich nur eines empfehlen: Abstand.

Aber das wird natürlich kein Script-Kiddie davon abhalten, zweifelhafte Scripts mit zweifelhaftem Sinn, basierend auf zweifelhaften Frameworks ins Web zu rotzen ...

... bei der Menge Schrott kommt es auf ein wenig mehr Schrott ja auch gar nicht mehr an.
__________________
Gruß, Cybaer
Mit Zitat antworten
  #6 (permalink)  
Alt 06.11.2008, 20:12
Benutzerbild von Curtains
(Schlafen||Programmieren)
XHTMLforum-Mitglied
 
Registriert seit: 27.08.2008
Beiträge: 198
Curtains befindet sich auf einem aufstrebenden Ast
Standard

Wie wäre es mit einer reinen CSS Lösung? Floating thumbnails passen sich an die Browser-Breite an.
__________________
My knowledge is your right
Mit Zitat antworten
  #7 (permalink)  
Alt 07.11.2008, 11:12
Benutzerbild von Scheppertreiber
Chaot und Nonkonformist.
XHTMLforum-Kenner
 
Registriert seit: 13.03.2007
Ort: Steinmark im Spessart
Beiträge: 7.458
Scheppertreiber ist ein LichtblickScheppertreiber ist ein LichtblickScheppertreiber ist ein LichtblickScheppertreiber ist ein LichtblickScheppertreiber ist ein Lichtblick
Standard

Könnte der OP nicht vom <ul> die Anzahl <li> ermitteln ?
(Natürlich dem <ul> eine id mitgeben)
__________________
Grüße aus dem Spessart, Joe

{ table-layout: biertischistbesser; }
Der Mausinator
Mit Zitat antworten
  #8 (permalink)  
Alt 07.11.2008, 12:11
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 23.10.2008
Beiträge: 29
therug befindet sich auf einem aufstrebenden Ast
Standard

Zitat:
Das ganze funktioniert natürlich erst wenn das DOM geladen wurde, entweder Du baust Dir ein onLoad-Event für alle Browser oder nimmst gleich ein Framework wie schon erwähntes jQuery (Beispiel hab ich ebenfalls hingeschrieben).
vielen Dank mit onload klappt es, aber leider ist dann meine Greybox blockiert und funktioniert nicht mehr... Gibt es da irgendeine Möglichkeit, das beides läuft?

Zitat:
Wie wäre es mit einer reinen CSS Lösung? Floating thumbnails passen sich an die Browser-Breite an.
also VuuRWerK hat das schon richtig erkannt. Deine lösung macht nicht ganz, dass was ich mir vorstelle... trotzdem Danke für dein Feedback...

Zitat:
JS-Framework & document.getElementsByClassName
Also wie gesagt, im Prinzip habe ich noch keine Ahnung von der ganzen Materie... Habe mir diese jQuery angeschaut, aber leider nur Bahnhof verstanden... Bevor mein Kopf einen Rappel bekommt, habe ich das Thema erstmal auf die lange Bank geschoben und werde mich weiterhin nur mit den Basics beschäftigen...
was den ClassName betrifft, so ist es für mich müßig über den Support und irgendwelche Browserweichen nachzudenken, wenn ich doch recht einfach aus der class eine id machen kann und es dann von allen verstanden wird (soweit ich euch jetzt folgen konnte)...
also nichts gegen eure Diskussion, aber ich als Anfänger verstehe nichts von solchen Detailfragen...
mal schauen, wenn ich in ein paar monaten oder jahren ein wenig mehr Erfahrung habe, kann ich vielleicht mit solchen Gedankengängen etwas anfangen, aber momentan Tillt mein Kopf bei so etwas...

Zitat:
Wenn Du die Anzahl hast, kannst Du auch mittels cssRule() den CSS-Code selbst per JS ändern (cssRule(".relatedin","width",newValue).
hatte diesen Ansatz ganz übersehen, werde ihn mal weiterverfolgen und event. darauf zurückkommen...


Danke für eure Mühen!!!
Mit Zitat antworten
  #9 (permalink)  
Alt 07.11.2008, 13:54
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 23.10.2008
Beiträge: 29
therug befindet sich auf einem aufstrebenden Ast
Standard

hm, habe das onload jetzt weggelassen und das <script> ans Ende des Bodys geschrieben. und wird es ohne onload geladen und blockiert das andere skript nicht mehr... mir fehlt zwar jetzt noch die erkenntnis warum? das sich jetzt alles so verhält...

Das eine Skript muss im head stehen, den andrem ist es egal wo es steht, aber es stört ein anderes ... usw... usw...

Ich verstehe nur Bahnhof... da brauche ich wohl noch ein paar lesestunden bis ich wirklich dahinter steige...

Geändert von therug (07.11.2008 um 13:57 Uhr)
Mit Zitat antworten
Sponsored Links
  #10 (permalink)  
Alt 07.11.2008, 14:08
Benutzerbild von Curtains
(Schlafen||Programmieren)
XHTMLforum-Mitglied
 
Registriert seit: 27.08.2008
Beiträge: 198
Curtains befindet sich auf einem aufstrebenden Ast
Standard

Zitat:
Zitat von VuuRWerK Beitrag anzeigen
@Curtains: Ich glaub er will nicht das die Breite des Browser ausschlaggebend ist sondern er will je mehr Bilder da sind das div auch so breit ziehen damit alle Bilder nebeneinander angezeigt werden, egal ob man dann Querscrollen muss *brrr...*
Das sollte aber auch mit reinem CSS realisierbar sein. Vielleicht irgendwie so:

HTML-Code:
<html>
<head>

<style type="text/css">

ul
{
	white-space: nowrap;
}

ul li
{
	display: inline;
}

</style>

</head>
<body>

<div>
	<ul>
		<li>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</li>
		<li>bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</li>
		<li>cccccccccccccccccccccccccccccccc</li>
		<li>dddddddddddddddddddddddddddddddd</li>
		<li>eeeeeeeeeeeeeeeeeeeeeeeeeeeeeeee</li>
	</ul>
</div>

</body>
</html>
__________________
My knowledge is your right
Mit Zitat antworten
Sponsored Links
Antwort

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ähnliche Themen
Thema Autor Forum Antworten Letzter Beitrag
jQuery: li -elemente innerhalb von ul zählen? sepp88 Javascript & Ajax 5 05.07.2010 21:52
Wort in Javascript Code einfügen; dann Javascript Code ausgeben Sp33dy G0nz4l3s Javascript & Ajax 1 23.05.2008 10:37
Impressumsaufruf mit Javascript Sinclair Javascript & Ajax 6 19.05.2008 16:41
Welche Positionierung für elemente eines Formulas? bastien CSS 3 01.01.2007 23:31
Javascript, Datentabelle und Screenreader laborix Barrierefreiheit 8 02.04.2006 19:25


Alle Zeitangaben in WEZ +2. Es ist jetzt 16:17 Uhr.