Beiträge von CTS-X

Hatte letztens etwas bei dem ich nur einen Teil der Seite neu laden wollte und dabei hat mir das geholfen:
https://stackoverflow.com/ques…/refresh-part-of-page-div
oder
https://stackoverflow.com/ques…o-i-refresh-a-div-content

Vielleicht reicht dir das. Wenn du nur einen bestimmten Inhalt der Seite neu lädst, und nicht die komplette Seite, dürfte genau das raus kommen was du suchst.
Ansonsten in Richtung "JS reload/refresh div" suchen. Da müsstest was finden.

Ohne jetzt zu wissen was genau du vor hast.

In meinem Fall (Intranet) alles was die Wünsche der User erfüllt und gleichzeitig ermöglicht normgerecht zu arbeiten. Das ganze hab ich sehr wild, bunt und undurchdacht übernommen. Jede Seite und Funktion war auf vielerlei Varianten ansprechbar. Ziel war es möglichst simpel alles runterzubrechen und dabei dennoch die Funktionen zu erhalten und stetig auszubauen.

Und das bekommt man auch zurück. Anfangs war das Intranet das böse digitale Ende. Inzwischen sehr viel und gern genutzt und es kommen stetig eigene Vorschläge der MA hinzu wie man das ganze noch größer machen kann. Werkstattmeldungen, Raumverwaltung, uvm. alles digitalisiert. Was ich eigentlich sagen will: Individualität und Layouting sind mindestens genauso wichtig wie die Funktionen. Wenn die keiner versteht/findet können sie noch zu gut geschrieben sein. Ein Layout, dass den User selbsterklärend leitet hilft viel. Bspw. bei Formularen einen guten Tabindex einbauen, den Speichern Button als einziges farbig (wie hier bei Absenden und Vorschau), einheitliche Vorgehensweisen oder bildliche Darstellungen anstatt meterweise Text. Alles so Kleinigkeiten die das Gesamtbild und Leben mit der Website ausmachen.

Natürlich gibt es noch viele Baustellen. Aber es wird. Und da ich das ganze nie richtig gelernt hab geht es sicher besser. Aber wenn der Nutzen und das positive Feedback steigen, ist sicher, dass man auf dem richtigen Weg ist.

So können auch JS Animationen zwar toll sein, aber irgendwie auch zu viel. Kleinigkeiten die einem die Navigation erleichtern wie Hover, leuchten, ausblenden usw. reichen völlig. Alles was durch die Gegend fliegt ist mir zu viel. Oder auch Formen. Mit ein paar Ausnahmen bin ich Freund von klaren Ecken und Kanten und empfinde das als viel angenehmer als super softe runde Buttons mit Plüsch :p

Aber: Es ist alles Ansichtssache. Man kann etwas entwickeln und super finden. Oder die Nutzer sind begeistert. Plötzlich gibt es neue Nutzergruppen die das gar nicht mehr so dolle finden.

Hallo zusammen! Ich habe mir ein eigenes Dropdown Skript gebastelt. Es sind drei nebeneinander liegende Icons und jeweils deren Dropdown Menü.

Im 1. Code die Details dazu was was ist.

1. Icon:

$(function() {
    $("#interneLinksIcon a").mouseover(function(){            /1. Icon
     $("#interneLinksIcon a").css({ opacity: 0.5 });      /Manueller Hover-Effekt über dem Icon 
     $("#DropwdownDreieck a").css({ opacity: 0.5 });
     $('#externeLinks').hide();                           /Dropdown 2. Icon ausblenden
     $('#Meldungen').hide();                              /Dropdown 3. Icon ausblenden
     $('#interneLinksCon').delay(50).slideDown(400);
    });
    $("#interneLinksIcon a").mouseout(function(){
     $("#interneLinksIcon a").css({ opacity: 0.9 });      /Hover-Effekt entfernen
     $("#DropwdownDreieck a").css({ opacity: 1.0 });
     $('#interneLinksCon').delay(200).hide(0);            /Dropdown ausblenden 
    });                                                   /Delay gibt dem User die Chance das Dropdown zu "berühren" bevor es
    });                                                   /durch Icon-Mouseout geschlossen wird

    
    $('#interneLinksCon').mouseover(function() {
        $('#interneLinksCon').stop();                     /Dropdown Animation unterbrechen und Menü sofort anzeigen,
        $('#interneLinksCon').fadeIn(0);                  /falls der Nutzer schneller runter scrollt als die Animation ist
        $("#interneLinksIcon a").css({ opacity: 0.5 });   /Manueller Hover-Effekt über dem Icon so lange man im Menü ist
        $("#DropwdownDreieck a").css({ opacity: 0.5 });
    }); 
    
    $('#interneLinksCon').mouseleave(function() {
        $("#interneLinksIcon a").css({ opacity: 0.9 });   /Hover-Effekt entfernen
        $("#DropwdownDreieck a").css({ opacity: 1.0 });
        $('#interneLinksCon').fadeOut(400);               /Dropdown ausblenden
        return false;                                     /fadeOut zusammen mit .stop() beim mouseover ermöglicht zurückkehren
    });                                                   /falls Dropdown verlassen eigentlich nicht gewünscht war

2. Icon:

$(function() {
    $("#externeLinksIcon a").mouseover(function(){
     $("#externeLinksIcon a").css({ opacity: 0.5 });
     $("#DropwdownDreieck_1 a").css({ opacity: 0.5 });
     $('#Meldungen').hide();
     $('#interneLinksCon').hide();
     $('#externeLinks').delay(50).slideDown(400);
    });
    $("#externeLinksIcon a").mouseout(function(){
     $("#externeLinksIcon a").css({ opacity: 0.9 });
     $("#DropwdownDreieck_1 a").css({ opacity: 1.0 });
     $('#externeLinks').delay(200).hide(0);
    });
    });    
    
    $('#externeLinks').mouseover(function() {
        $('#externeLinks').stop();
        $('#externeLinks').fadeIn(0);
        $("#externeLinksIcon a").css({ opacity: 0.5 });
        $("#DropwdownDreieck_1 a").css({ opacity: 0.5 });
    });
    
    $('#externeLinks').mouseleave(function() {
        $("#externeLinksIcon a").css({ opacity: 0.9 });
        $("#DropwdownDreieck_1 a").css({ opacity: 1.0 });
        $('#externeLinks').fadeOut(400);
        return false;
    });

3. Icon:

$(function() {
    $("#Container_3 a").mouseover(function(){
     $("#Container_3 a").css({ opacity: 0.5 });
     $("#DropwdownDreieck_2 a").css({ opacity: 0.5 });
     $('#interneLinksCon').hide();
     $('#externeLinks').hide();
     $('#Meldungen').delay(50).slideDown(400);
    });
    $("#Container_3 a").mouseout(function(){
     $("#Container_3 a").css({ opacity: 1.0 });
     $("#DropwdownDreieck_2 a").css({ opacity: 1.0 });
     $('#Meldungen').delay(200).hide(0);
    });
    });    
    
    $('#Meldungen').mouseover(function() {
        $('#Meldungen').stop();
        $('#Meldungen').fadeIn(0);
        $("#Container_3 a").css({ opacity: 0.5 });
        $("#DropwdownDreieck_2 a").css({ opacity: 0.5 });
    });
    
    $('#Meldungen').mouseleave(function() {
        $("#Container_3 a").css({ opacity: 1.0 });
        $("#DropwdownDreieck_2 a").css({ opacity: 1.0 });
        $('#Meldungen').fadeOut(400);
        return false;
    });

Im Anhang noch Screens.

Mein Problem: Bei hover über das nächste Icon sollen sofort (!) die Dropdowns der anderen Menüs ausgeblendet werden. Passiert aber nicht. Es gibt teils starke Verzögerungen. Solange ich gemütlich über die Icons gehe ist alles gut. Sollte ein User aber schnell mal drüber wischen gibt es erst einmal alle drei Dropdowns die dann erst nach und nach verschwinden. Klar nur Sekündchen, max., aber schön ist das nicht.

Hatte es auch mit .stop() und danach .hide() versucht. Aber das bringt keine Beschleunigung sondern nur noch mehr Unruhe.

Langsam einarbeiten. Und viele Seiten durchstöbern zum Aufbau von HTML und CSS. Und auch praktische Beispiele ansehen, oder aus Neugierde mit F12 im sogenannten Entwicklermodus die derzeitige Seite auseinander nehmen. So versteht man für den Anfang so nach und nach das warum und wieso dieser Materie.

Damit du dich noch etwas reinlesen kannst:
https://www.w3schools.com/cSS/css_padding.asp
https://www.w3schools.com/cSS/css_margin.asp
https://www.w3schools.com/cSS/css_dimension.asp
https://www.w3schools.com/css/css_font.asp

Super, großen Dank!!

Hm ja, das war's. Vielen Dank!

Aber ehrlich, versteh mal einer das System... Ich muss bei JS auf Seiten immer "ID_" vorgeben. Also bspw. ID_textcontrolxyz. Da hattet ihr euch schon oft gewundert wenn ich hier Skripte gepostet hatte. Aber nur so geht es.

Anscheinend sind aber Objekte im Header, anstatt der Applikationsseite, von dieser ID-Regelung ausgenommen. Hätte ich auch selbst drauf kommen können... Nun ja.

Immerhin mit textContent was neues gelernt!

Zitat

Navigieren im DOM ist mit Vanilla-Javascript ziemlich spröde. Dafür empfehle ich eher jQuery.

Vielleicht wenn wir schon dabei sind: jQuery finde ich genauso sympathisch wie JS. Also wenn du mir irgendwelche Unterlagen zum büffeln zur Navigation per jQuery zeigen kannst bin ich sehr dankbar! Das ist zu 50% meine Hauptsuche im Internet herauszufinden wie ich bestimmte Objekte anspreche.

Danke dir! Leider ist er immer noch der Meinung, dass es das Element nicht gibt. Verstehe es wirklich nicht...

Gibt mir weiterhin einen Fehler aus, dass textcontent eines undefinierten Wertes oder Nullverweises nicht abgerufen werden kann.
Dabei sieht man doch im Skript ganz klar es ist da und auf dieser Seite.

Verstehe zwar dein Script nicht, aber müsste dir das nicht helfen:
https://api.jquery.com/stop/

Mit .stop() beende ich oft Animationen. Bspw. beim Hover über den nächsten Dropdown-Eintrag wenn das vorherige noch nicht ganz da ist.

Hallo zusammen!

Anbei das Skript um welches es geht. Ich versuche mit JS beim Onload auf die blau markierte Zeile und dessen Text zuzugreifen.

Dachte eigentlich, dass es so gehen müsste:

function ReplaceText(){
    var txt = document.getElementById('ID_Action_ApplicationName_Inner');
    var eltxt = txt.firstChild.nodeValue;
    eltxt = eltxt.replace('Hilfe', 'NeuerText');
    txt.firstChild.nodeValue = eltxt;
}

Aber irgendwie will das nicht so recht. Es scheitert beim Anwählen des Elements. Mit der ID-Variante, die mit Ausnahme von Tabellen, sonst brav funktioniert, klappt hier nichts.

PS: Ich würde mich sehr freuen wenn ich auch mal was finde, womit ich selber lerne auf diese Ebenen zuzugreifen. Mit JS und jQuery komme ich gut klar, aber die richtigen Elemente bzw. deren Ebenen anzuwählen macht mir immer Schwierigkeiten. Mal sind es Tabellen, mal solche Seitenelemente wie hier. Leider weiß auch mein schlaues Buch von Jon Duckett hier nicht weiter. Alle anderen Wälzer von Rheinwerk Computing und Co. die hier sonst rumliegen sind noch weiter am Thema vorbei. Immer bestens erklärt wie man Skripte bastelt, aber dieses Auffinden von Elementen max. nur anhand von Class oder ID.

Und vielleicht gibt es in der dem Forum zugehörigen Seminarreihe da was für mich...

Muss zugeben, dass ich so schlechtes nicht mal gehört hab. Java kenne ich als unbeliebt. Aber JavaScript überhaupt nicht. Benutze es, sowie auch jQuery, gerne und viel. Gibt weder meinerseits noch von User-Rückmeldungen Beschwerden darüber. Wenn etwas nicht klappt war ich beim schreiben dran Schuld, aber nicht das Skript

Vorteile sind für mich die wirklich sehr hohe Spannweite an Einsatzmöglichkeiten, der (je nachdem) selbst erklärende Aufbau und die gute Web-Kompatibilität unabhängig des eingesetzten Browsers. Gibt Ausnahmen die nur bei dem einen oder anderen Browser, vor allem je nach Version, funktionieren. Aber ansonsten sehe ich da keine Probleme.

http://jstherightway.org/de-de/#the-good-parts

Du, mal abgesehen von deinem Problem wo ich leider nicht helfen kann, bei mir ist diese Seite sehr langsam. Ist das normal/dir bewusst? Nutze Chrome, aktuell. Also alles sehr schleppend. Sogar das scrollen durch den Text hat Verzögerungen und ist sehr abgehackt.

Zitat von basti1012

Code

if(a==-1){bla}
oder
if(a=='-1'){bla}

Bei beiden wird das -1 nicht erkannt.Gibt es da nee andere möglichkeit?

var a = "-1"
if(a=='-1'){
alert ("Test")
}

So geht es auf jeden Fall. Wenn er bei dir mit der -1 nichts anfangen kann liegt es vielleicht an der vorher gehenden Definition bzw. dem Auffinden des Datensatzes "a"

Zitat von Sempervivum

Wenn ich dich da richtig verstehe, sollte dieses es tun:

[...]

Und genau das war es! Hab das img bei der new ID entfernt, da ich das nicht brauche bei mir:

function zeile(){
var rows = document.getElementById('ID_tablecontrolE1253671').getElementsByTagName('tbody')[0].getElementsByTagName('tr');
for (i = 0; i < rows.length; i++) {
        rows[i].addEventListener('click', function() {
            var row = this.rowIndex + 1;
            var idPlus = "_" + row + "_IMG";
            var newId = "ID_imageactioncontrol735BC564" + idPlus;
            $("#" + newId).trigger("click");
            return true;
});
}
}

Größten Dank für die Mühe! Ich bin einfach begeistert. Die Spalten mit den Edit Feldern wurden in eine parallel laufende Tabelle ausgegliedert. Der Verwaltungsbereich hat also ein kleines Manko der nicht ganz durchgängigen hover-Markierung. Aber da seis nun drum. Der normal-Nutzer-Modus läuft bestens.
Wüsste nicht ansatzweise wie ich das Skript hier eingrenze, und das ist die Mühe jetzt auch nicht wert.

Vielen Dank! Schätze ich sehr.

Sieht nun alles erstmal so aus:
Das ein oder andere wird jetzt noch in Ruhe editiert.

Zitat von basti1012

Kuck mal ob du damit was anfangen kannst ,das sollte die funktion sein die du brauchst .fals ich es verstanden habe https://jsfiddle.net/basti1012/wwxefet6/13/

Abgefahren.... Nein das war es nicht. Bzw naja wer weiß. Ehrlich gesagt bin da nun ich mit überfordert.

Dennoch vielen Dank für den Versuch! Wirklich großes Dankeschön für die Mühe.

Genau. Damit hat der Thread hier ja angefangen. Nur gab es da Probleme was die Umsetzung anging. Da ich mit einem Portal-Programm für Intranets arbeite gibt es da Unterschiede. Bspw. auch wie ich HTML anpassen kann. Somit war es dem Zeilen-Klick-Link einfach nicht beizubringen, welche Informationen das aufzurufende Fenster nun haben soll. Waren immer die Inhalte eines anderen Datensatzes zu sehen. Gäbe Möglichkeiten mit sehr weitem, verschachteltem Velocity usw. Das hab ich aber nicht hinbekommen.

Andererseits hatten wir anfangs die Möglichkeit mit href etc. Aber da wollte er einfach nicht modal öffnen sondern hat immer ein neues Fenster genommen. Auch hier war die HTML Anpassung der entsprechende K.O. Punkt.

Die Buttons jetzt sind Marke Eigenbau in Kooperation mit dem Portal-Programm. öffnen zuverlässig, in gewünschter Weise, Modal und mit richtigem Inhalt. So wie es auch bei einem normalen Link der Fall ist. Zudem sind sie viel leichter anzupassen was ihr Verhalten angeht als ein umfassendes Velocity Skript.

Damit diese ganze Zeile nun angeklickt werden kann wird dabei auf die Buttons verwiesen. Jedoch hat jede Zeile individuell einen anderen Button mit verschiedenen Nummern. Diese Ermittlung klappt. Nur bekomme ich es nicht hin nun wieder anders herum zu sagen "hey, bitte nehm jetzt diesen gerade ermittelten Text und nutze ihn um die richtige ID zu suchen und aufzurufen".

Achso. Ne du verstehst das falsch.

also: die Zeile ist komplett anklickbar und soll den Datensatz öffnen der jeweils angezeigt wird in der Zeile. Dafür wird beim Klick auf die Zeile der Button betätigt, der wiederum ist so eingerichtet, dass er Modal das mit dem richtigen Inhalt öffnet. Die Zeile dazu zu bekommen war zu aufwendig bzw. hab ich es auch schlichtweg nicht hin bekommen.

Momentan erscheint beim Klick testweise die ID des Buttons in der letzten Spalte, aber gleichen Zeile. Die ID wird dynamisch ermittelt. Nicht durch klick auf den Button selbst, sondern durch die Zeilennummer und die gleich bleibende Grund-ID.

Der Button wird später ausgeblendet und so versteckt durch Zeilen-Klick aufgerufen. Dafür muss ich die ID immer wieder neu ermitteln. Und dieses gerade neu ermittelte soll direkt in die Funktion eingesetzt werden, damit er überhaupt weiß welchen Button ich möchte.

also der Sinn ist: Ich habe die Tabelle und möchte wenn ich auf die Zeile klicke auf den Button klicken der in dieser Zeile liegt. Darum ermittelt das Skript erst einmal die Zeile und fügt die Zeilennummer in die ID. Denn genau daraus besteht die ID in jeder Zeile individuell.

Danach will ich den Button mit genau der ID aufrufen. getElementById wäre genau der richtige Aufruf wenn ich ID_imageaction.._1_IMG direkt aufrufen würde. Deswegen hab ich es mit der Variable auch so gelassen. Vermute aber, dass genau das der Fehler ist. Alle anderen Kombis haben bisher aber auch nichts gebracht.

Danke trotzdem!

Tut mir leid, aber das ist das ganze Skript. Länger ist das JS nicht. Das Skript von der Tabelle hilft dir wenig. Anbei ein Bild als Erläuterung vielleicht.

Ein alert brauche ich nicht. Das hatte ich nur für mich drin damit ich kontrollieren kann ob er die richtige ID bastelt. Wie im Screenshot im Anhang zu sehen klappt es. Beim Klick auf die Zeile kommt genau die richtige ID zurück. Die ID will ich aber nicht als alert sondern, wie du richtig gesehen hast, im Skript und aufrufen.

Aber: Die variable bei getElementById einzusetzen hilft nicht. Damit kann er nichts anfangen. Genau da liegt mein Problem.

Würde ausgefüllt so aussehen:

function zeile(){
var rows = document.getElementById('ID_tablecontrolE1253671').getElementsByTagName('tbody')[0].getElementsByTagName('tr');
for (i = 0; i < rows.length; i++) {
        rows[i].addEventListener('click', function() {
            var row = this.rowIndex + 1;
            var idPlus = "_" + row + "_IMG";
            var newId = "ID_imageactioncontrol735BC564" + idPlus;
            var oButton = getElementById(newId).onclick();
            return true;
});
}
}

Nein nein es soll gar nicht raus. Am Ende des Skriptes soll ein Button mit der gerade ermittelten ID angeklickt werden:

var oButton = getElementById( [..] ermittelte ID [...] ).onclick();

Du siehst oben wie das Skript nach dem klick erstmal die ID ermittelt, und am Ende soll es die gerade ermittelte ID nun auch nutzen. Habe versucht die variable als ByID(newId).onclick, oder ähnliches, anzugeben. Ohne Erfolg

Danke!

PS: Was heißt "wenn man das Skript sehen würde"? Hab das doch in meinem Beitrag oben drin?