Technotizen: Javascript

Showing posts with label Javascript. Show all posts

Tuesday, 28 June 2016

Richfaces.showModalPanel is not working with IE11 under some circumstances

IE 11
Richfaces 3.3.3.Final
JSF 1.2

Under some circumstances (in our case it is a page change, a download of a document and some other stuff), we did not figure out whats the exact problem, the javascript call Richfaces.showModalPanel() is not working anymore in IE 11. No problem with IE 10, Firefox or Chrome.

Usually you upgrade the JSF and Richfaces version to something thats maintained and forget this old stuff problems, but this was not possible for other reasons.

The solution we found is to change the code from

oncomplete="if(#{!list.errorMessages}){Richfaces.showModalPanel('myPanel');}jQuery.unblockUI();"

oncomplete="if(#{!list.errorMessages}){#{rich:component('myPanel')}.show()};jQuery.unblockUI();"

Now the ModalPanel is working in IE 11.

Monday, 21 March 2011

jQuery Datepicker: buttonImage ausrichten

JQuery-UI 1.8.2

In meinem letzten Beitrag wollte ich das Popup des Datepickers verschieben, nun will ich den Button, mit dem der Datepicker aufgerufen wird etwas anders positionieren.

Vorher noch die Methode, mit der man den Datepicker an ein Inputfeld hängt:

/**
 * Erzeugt einen Kalenderbutton in deutscher Sprache, wenn das Feld nicht disabled ist.
 *
 * @param fieldId: Id des Tags als String
 * @param addToTop: px value to add to the input field.top
 */
function addDatepicker(fieldId, addToTop){
    var $field = $( '#' + fieldId );
 if( $field.length > 0 && $field[0].disabled != true && $field[0].readonly != true && $field.hasClass("textoutput") != true){
     $field.datepicker({showOn: 'button',
       buttonImage: 'img/calendar_icon.gif',
       buttonImageOnly: true,
       buttonText: 'Kalender',
       changeMonth: true,
       yearRange: 'c-20:c+50',
       changeYear: true,
       beforeShow: function(fieldId) {
           var x = 100; //add offset 
           field = $(fieldId);
           left = field.position().left + x;
           /* top - 145 works for above the input */
           setTimeout(function(){
            if(addToTop != undefined || addToTop != null){
                var top = field.position().top + addToTop;
                $('#ui-datepicker-div').css({'top': top + 'px', 'left': left + 'px'});
            } else {
                $('#ui-datepicker-div').css({'left': left + 'px'});
            }
           },1);     
       }
     } );
    }
}

Dazu benutze ich CSS, in diesem ganz einfachen Fall will ich den Button einfach etwas runter setzen und hänge mich dazu an den ui-datepicker-trigger.

.ui-datepicker-trigger {
                               margin-bottom: -3px;
}

Links:
Blogbeitrag mit Lösung

Wednesday, 9 March 2011

jQuery DatePicker: Popup ausrichten

JQuery-UI 1.8.2

Der Datepicker ist ein unkompliziertes Datumsauswahltool, positioniert man allerdings das aufrufende Element zu weit rechts kann es einem passieren das das Popup aus dem Fenster rutscht. Abhilfe schafft dieses Codeschnippsel:

function addDatepicker(fieldId ){
    var $field = $( '#' + fieldId );
 if( $field.length > 0 && $field[0].disabled != true && $field[0].readonly != true && $field.hasClass("textoutput") != true){
     $field.datepicker({showOn: 'button',
       buttonImage: 'img/calendar_icon.gif',
       buttonImageOnly: true,
       buttonText: 'Kalender',
       changeMonth: true,
       changeYear: true,
       beforeShow: function(fieldId) {
           var x = 100; //add offset 
           field = $(fieldId);
           left = field.position().left + x;
           setTimeout(function(){
               $('#ui-datepicker-div').css({'left': left + 'px'});      
           },1);                    
       }
     } );
    }
}

Der Event beforeShow setzt hier das Popup etwas nach links, damit es ganz sichtbar ist, die Methode setTimeout brauchen wir, da es anders irgendwie nicht so gut klappt.

Links:
Datepicker Dokumentation
Stackoverflow Eintrag mit der Lösung des Problems
Datepicker Demos

Monday, 6 September 2010

Javascript File hosten

Da auf Blogspot das direkte Einbinden von Javascript ziemliche Probleme macht, bietet es sich an, diese extern zu hosten. Eine einfache Möglichkeit ist dabei yourjavascript.com, hat auf Anhieb geklappt. Man lädt einfach sein .js File hoch und bekommt über die Mailadresse, die man angegeben hat den Link zu diesem.

Diesen Link bindet man dann einfach im Post ein, hier als Beispiel:

Sunday, 5 September 2010

Javascript Source für den TextToHtmlTable Converter

Hier der Source für den TextToHtmlTable Converter, kann jeder verwenden wie er ihn braucht:

Ist denk ich nicht schwer zu verstehen, für die 'textarea' mit dem 'name' textToConvert wird als onclick Event einfach 'convert' gesetzt, das Ausgabefeld ist ebenfalls eine 'textarea' und erhält den 'name' 'convertedText'. Der Seperator ist einfach ein Textfeld mit 'name='seperator''. Leider arbeitet das Teil zur Darstellung des Sources nicht einwandfrei, so wird in Zeile 12 ein nonBreakingSpace im letzten String nicht angezeigt...
Ich hoffe ich kann das in den nächsten Tagen fixen, warum Blogspot da hin und wieder so seltsame Ergebnisse erzeugt ist mir ein Rätsel, scheint etwas mit internen Umwandlungen beim Abspeichern von Änderungen zu tun zu haben. Bei erstmaligen Speichern funkts halbwegs (aber nicht einwandfrei), bei jedem Drüberspeichern wirds schlimmer, muß also den Source jedesmal neu einfügen wenn ich den Post verändere, da sonst die nochmalige interne Anpassung des Textes durch das Blogspotteil den Source unkenntlich macht.

Saturday, 4 September 2010

Text in eine Html Tabelle umwandeln

Anläßlich dieses Eintrages machte ich mich im Netz auf die Suche, wie man Text angenehm in eine HTML Tabelle umwandeln kann, wobei jede Zeile eine Tabellen Zeile sein soll und in den Zeilen die Spalten mit einem Seperator getrennt sind. Ich wurde nicht fündig, drum habe ich mir schnell selber einen ziemlich primitiven in JavaScript gebastelt, vielleicht kanns ja wer brauchen.

Funktionsweise:
In das Feld 'Eingabe' kopiert man seinen Text, zum Beispiel:

Ctrl-a;Cursor zum Anfang der Zeile
Ctrl-e;Cursor zum Ende der Zeile
Ctrl-b;Ein Zeichen zurückgehen
Alt-b;Ein Wort zurückgehen

Als Seperator trägt man nun ';' ein, er zeigt wo man die Spaltentrennung haben möchte.
Dann klickt man auf Umwandeln, dadurch erhält man im Feld 'Ausgabe' diesen Text als HTML-Tabelle, die man nun einfach in irgendeiner HTML-Seite einbauen kann.

Seperator:
Eingabe:

Ausgabe:

Falls es Probleme oder Verbesserungsvorschläge gibt, einfach einen Kommentar hinterlassen.
Hier gehts zum Source.

Tuesday, 17 August 2010

Spoiler Button in Javascript

Ein nettes Codeschippsel ist diese Javascriptfunktion, es ist nicht von mir, aber da ich es an vielen Stellen im Netz gefunden habe scheint mir eine Quellenangabe nicht sinnvoll:

function spoil(me) { 
 if (me.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display != '') { 
  me.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = ''; me.innerText = ''; me.value = 'Hide'; 
 } else { 
  me.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; me.value = 'Show'; 
 }
}

Den zu versteckenden Text fügt man dann vor den 3 abschließenden divs ein:


 
Hier der zu versteckende Text

Die Darstellung für den html Teil ist mir leider nicht besser gelungen, irgendwie scheint sich Javascript mit der Darstellung von Xml zu schlagen.

Als Beispiel für Funktionsweise hab ich mal meine Leseliste versteckt:

Leseliste ab Ende Mai 2004

In diesem Zusammenhang habe ich auch noch eine nützliches Tool ausgegraben, einen TextToHtml Converter