zurück zur Startseite
  


Zurück XHTMLforum > Webentwicklung (außer XHTML und CSS) > Javascript & Ajax
Seite neu laden Position von span-Tags auslesen (und weitere Fragen)

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 24.01.2014, 17:08
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 24.01.2014
Beiträge: 12
Xiang befindet sich auf einem aufstrebenden Ast
Standard Position von span-Tags auslesen (und weitere Fragen)

Hallo alle zusammen, ich hoffe hier kann mir jemand helfen.

Also ich habe auf meiner Seite eine Webseite mit vielen ineinander verschachtelten divs.

Hier ein Beispiel:

Zitat:
<body id="swptemplate" class="boxlayout largeheader">
<div id="page-wrapper">
<div id="page">
<div id="page-content" class="page-inner">
<div id="page-content-inner">
<div class="box tagcloud">
<div class="modulcontent">
<div class="tagspopular tagcloud tagscloud tagcloud">
<span class="tag" >
<a class="tag-name" > test1</a>
</span>
<span class="tag">
<a class="tag-name" >test2</a>
</span>
<span class="tag">
<a class="tag-name" >test3</a>
</span>
<span class="tag">
<a class="tag-name" > test4</a>
</span>
<span class="tag">
<a class="tag-name" >test5</a>
</span>
<span class="tag">
<a class="tag-name" >test6</a>
</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
Im letzten Div befinden sich dann mehrere Span-Tags.

Ich möchte nun die Koordinaten einzelner Spans auslesen können. Dafür hab ich den Code geschrieben:

Zitat:
<script type="text/javascript">

function getPosition(element) {
var xPosition = 0;
var yPosition = 0;

while(element) {
xPosition += (element.offsetLeft - element.scrollLeft + element.clientLeft);
yPosition += (element.offsetTop - element.scrollTop + element.clientTop);
element = element.offsetParent;

}
return { x: xPosition, y: yPosition };
}

var myElement = document.getElementsByClassName("tag")[0];
console.log(myElement);
var position = getPosition(myElement);
alert("The image is located at: " + position.x + ", " + position.y);
</script>
Mein Problem dabei ist die fett markierte Zeile. Eigentlich müsste das Kommando mir das erste Element ausgeben das den Classnamen "tag" hat und damit weiter die Position des Elementes.

Ich kriege beim console.log aber nur ein undefined und im alert nur 0 bei den Koordinaten.


Ansonsten such ich aktuell noch 2 Funktionen. Einmal die Möglichkeit Span Tags invisible zu machen mit Javascript. Ich habe dafür aktuell den Tag, aber dasselbe Problem:

Zitat:
document.getElementsByClassName("tag")[0].style.visibility = "hidden";
Hier kommt wieder die Fehlermeldung das getElementsByClassName("tag")[0] undefined ist.

Und abschließend such ich nach einer Funktion mit der ich feststellen kann wie oft eine bestimmte Klasse im ganzen Quelltext vorhanden ist. Also wenn ich 20 spans mit dem namen "tag" habe, suche ich eine funktion die mir 20 ausgibt.

Hoffe mir kann jemand helfen.
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 24.01.2014, 17:38
Benutzerbild von cebito
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 18.07.2009
Ort: Dresden
Beiträge: 688
cebito sorgt für eine eindrucksvolle Atmosphärecebito sorgt für eine eindrucksvolle Atmosphäre
Standard

Hmmm, weiß nicht, warum du undefined bekommst, normalerweise sollte element-span ausgegeben werden. Nun denn, ich würd die erstmal in ein Array schreiben, so kannst schneller drauf zugreifen, zählen etc.pp...

Edit fiddle - JSFiddle
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 24.01.2014, 17:41
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 24.01.2014
Beiträge: 12
Xiang befindet sich auf einem aufstrebenden Ast
Standard

Hallo

Das mit dem Array habe ich gerade probiert.

Zitat:
var elementArray;

elementArray = document.getElementsByClassName("tag");

for(var i = 0; i < elementArray.length; i++)
{
console.log(elementArray[i].className);
}
Konsole bleibt leer.
Mit Zitat antworten
  #4 (permalink)  
Alt 24.01.2014, 17:46
Benutzerbild von cebito
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 18.07.2009
Ort: Dresden
Beiträge: 688
cebito sorgt für eine eindrucksvolle Atmosphärecebito sorgt für eine eindrucksvolle Atmosphäre
Standard

Hau mal bitte deinen kompletten code in ein fiddle, dann müssen wir nicht raten woran es liegt. Create a new fiddle - JSFiddle
Mit Zitat antworten
  #5 (permalink)  
Alt 24.01.2014, 17:52
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 24.01.2014
Beiträge: 12
Xiang befindet sich auf einem aufstrebenden Ast
Standard

Hoffe das ist so richtig.

Edit fiddle - JSFiddle
Mit Zitat antworten
  #6 (permalink)  
Alt 24.01.2014, 18:03
Benutzerbild von cebito
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 18.07.2009
Ort: Dresden
Beiträge: 688
cebito sorgt für eine eindrucksvolle Atmosphärecebito sorgt für eine eindrucksvolle Atmosphäre
Standard

Du hast da einen Punkt statt ner einleitenden Klammer. Und ein Array solltest du auch als solches initiieren... Edit fiddle - JSFiddle
Mit Zitat antworten
  #7 (permalink)  
Alt 24.01.2014, 18:08
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 24.01.2014
Beiträge: 12
Xiang befindet sich auf einem aufstrebenden Ast
Standard

Tatsächlich. Ich danke dir schonmal vielmals.

Meine Konsole bleibt leider trotzdem leer.

Ok ich hab jetzt vom Stackoverflow einen funktionierenden JQuery Tag.

Zitat:
jQuery( document ).ready(function() {

var pre = jQuery('.tag');

pre.each(function(i, el){
console.log( this ); // will give you the element
});

});
Damit hab ich den schwierigen Teil schonmal geschafft. Nun fehlen noch das erkennen der Position in Relation zum Parent-div und die möglichkeit die Tags unsichtbar zu machen.

Habt ihr da Ideen?

Geändert von Xiang (24.01.2014 um 18:16 Uhr)
Mit Zitat antworten
  #8 (permalink)  
Alt 24.01.2014, 18:28
Benutzerbild von protonenbeschleuniger
Verbesserer
XHTMLforum-Kenner
 
Registriert seit: 06.09.2007
Beiträge: 4.977
protonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblick
Standard

Das sind alles Funktionen, die jQuery bietet
.position() | jQuery API Documentation
.hide() | jQuery API Documentation
Mit Zitat antworten
  #9 (permalink)  
Alt 24.01.2014, 18:42
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 24.01.2014
Beiträge: 12
Xiang befindet sich auf einem aufstrebenden Ast
Standard

Ich danke dir.

Die Elemente hab ich jetzt gefunden und position schon eingebunden.

Der letzte Punkt den ich aktuell noch habe ist die Einbindung vom font-size.

Zur Erklärung:

Das Ziel ist ein Programm, das alle Tags die eine bestimmte Tiefe überschreiten, also vertikal aus dem Parent-div fallen ausblendet.

Der Quellcode schaut aktuell so aus:

Zitat:
jQuery( document ).ready(function() {

var pre = jQuery('.tag');

pre.each(function(i, el){
//console.log( this ); // will give you the element
var p = jQuery( el );
var position = p.position();
console.log( "left: " + position.left + ", top: " + position.top );
console.log(el.style);
});

});
Damit sollte ich die Position der Tags in Relation zum "<div class="tagspopular tagcloud tagscloud tagcloud">" bekommen richtig soweit?

Das sind aber nur die top Koordinaten, ich benötige aber die downkoordinaten sogesehen. Daher dachte ich, ich lese jetzt den font-size aus, rechne diesen in Pixel um und addier ihn auf den position.top wert. müsste funktionieren oder?

Edit:
Wenn ich console.log(el.style.fontSize); nehme kommt zumindest nur ein Leerstring bei raus.

Geändert von Xiang (24.01.2014 um 18:45 Uhr)
Mit Zitat antworten
Sponsored Links
  #10 (permalink)  
Alt 24.01.2014, 19:06
Benutzerbild von protonenbeschleuniger
Verbesserer
XHTMLforum-Kenner
 
Registriert seit: 06.09.2007
Beiträge: 4.977
protonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblick
Standard

Zitat:
Zitat von Xiang Beitrag anzeigen
Das sind aber nur die top Koordinaten, ich benötige aber die downkoordinaten sogesehen.
Was soll das sein?
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
div-höhe? - Hauptcontainer über ganze Seite will nicht... AndMei CSS 5 13.12.2010 15:43
z-index hoch, dennoch grafik nicht ganz oben bergg CSS 6 27.10.2010 17:02
Problem mit einem 3D-Effekt moep0710 CSS 12 12.06.2010 15:30
Navigation verschwindet im IE6 emti CSS 4 12.05.2009 16:01
prblemme mit mein inhalt div carlos587261 CSS 3 23.04.2008 15:07


Alle Zeitangaben in WEZ +2. Es ist jetzt 07:00 Uhr.