Volltextsuche
-w-jquery
\7D ; maskiert: \3B Universell Beispiele / Anwendungsfälle Beispiel 1: Blendet das Suche-Feld bei Klick über jQuery ein #blockTop #searchBox #searchTerm { opacity: 0; cursor: pointer; width: 20px !important; height: 20px; transition:
-w-registerJsDefer
Einbinden einer JavaScript (defer) Datei über CSS
Snippets
Code-Schnipsel für diverse Fälle
Dynamisch HTML-Elemente über CSS und jQuery einfügen
eigene, abgewandelte Umsetzungen heranziehen können. Beispiel 1: Facebook Like-Button über eine Liste per CSS-Only (jquery) einfügen Beispiel 1: Facebook Like-Button über eine Liste per CSS-Only (jquery) einfügen Ohne Anpassung im
So lesen und schreiben Sie CSS-Variablen über jQuery
Sie CSS-Variablen über jQuery 07. Februar 2023 css javascript jquery css-only CSS-Variablen lassen sich über jQuery bzw. JavasScript sehr leicht lesen und schreiben. Wie, das zeigen wir Ihnen in einem kleinen Beispiel. Während sich
Links / Querverweise über Lightbox
über Lightbox Veröffentlichungsdatum: 02. Januar 2017 Änderungsdatum: 11. Februar 2019 weblication cms link fancybox jquery lightbox wlightbox ziel öffnen Nutzen Sie die Möglichkeiten der Lightbox / Fancybox, um Links in einem individuell
Manuelles Nachrüsten der 16er Statistik in älteren Projekten (z.B. BASE Classic)
// ... //////////////////////////////////////////////////////////////// // // Initialisieren der Seite // //////////////////////////////////////////////////////////////// jQuery(document).ready(function(){ // ... if(typeof wEditor === 'undefined'){ if(typeof wUiTmp['wHasWa'] !== 'undefined'
Responsive Toggler-Navigation anpassen
globalen Projektes (z.B. /de-wGlobal ). Passen Sie die Pfad e an Ihrer Projektpfade an ! Im Projekt sollte immer die jQuery-Version im Einsatz sein, welche auf in der BASE verwendet wird! Zum Aufklappmenü (Burgermenü) wird übrigens das Wort
Formulare - URL vor Submit/Absenden manipulieren
click-Events der Schaltflächen. Beispiel Editor Beispiel 1: Manipulieren der action eines Weblication Formulares via jQuery if (typeof wEditor == 'undefined') { document.addEventListener ('DOMContentLoaded', function waitUntilContentLoaded() {
Einsatz von Isotope Darstellungen für Bildergalerien
Version Veröffentlichungsdatum: 27. Oktober 2015 Änderungsdatum: 04. November 2021 weblication liste bildergalerie jquery plugin isotope mauerwerk kategorienfilter kategorien-filter Unterschiedliche Möglichkeiten, um Bildergalerien in
So beeinflussen Sie die Fancybox-Einstellungen beim Bildelement
beim Bildelement Veröffentlichungsdatum: 16. Februar 2011 Änderungsdatum: 15. September 2021 bild element fancybox jquery hintergrund abdunkeln vordergrund Dieser Artikel beschreibt, wie Sie zum Bildelement die Fancybox-Einstellungen
Formulare - clientseitige Validierung vor Submit ausführen
des Formular-Items folgender Code eingetragen wird: < wd: fragment name="formName" type="char.default">myForm */ jQuery (document) .ready (function() { /*Abfangen des Submit-Events*/ jQuery ('form[name=myForm]') .attr ( { onclick: '', type:
Formularfelder dynamisch ein- und ausblenden
entsprechenden Javascript-Code (siehe unten). Beispiel: Javascript-Code zum Ein- und Ausblenden der betreffenden Felder jQuery ( '#interests' ). change (function(){ if( jQuery ( this ). val () == 'coding' ){ jQuery ( '#coding' ). parent (). show ();
Interaktive Erklärbilder (ImageMap): Scrollevent nach Klick auf Labels bzw. Icons aktivieren
hinzugefügt wird. Sie können das entweder über CSS-Only lösen oder über Javascript . CSS-Only Javascript/jQuery CSS-Only Scrollverhalten für Marker und/oder Labels einstellen. /*Container der Marker*/ .imageMapEntries {
Fullpage - Scrollverhalten von Sections mit langem Content
wEditor == 'undefined'){ document.addEventListener('DOMContentLoaded', function waitUntilContentLoaded(){ if(!window.jQuery){ return setTimeout(waitUntilContentLoaded, 100); } var minWidthFullPage =
JavaScript Dateien im HTML-Head einbinden
Über das WSL-Element wsl:includeJsRessources werden dann die Skripte entsprechend eingebunden. Beispiel: Einbinden der jQuery.js im Head <!-- Auszug aus der Datei htmlHead.wGlobal.php --> <!-- Durch den 2. Parameter 'head' im
Hinweisbox bei Aufruf einer Seite / Layer für Aktionen
JavaScript-Element mit Funktion zum Aufruf des Links als Fancybox $(document).ready(function () { var callFancy = jQuery('a[name="callFancy"]'); callFancy.hide(); callFancy.trigger('click'); }); Dieses Beispiel wurde auf Grundlage eines BASE
Hash-Id vor Event "hashchange" manipulieren
So können Sie die Hash-Id vor der Weiterverarbeitung durch Weblication manipulieren
Lightbox-Darstellung beeinflussen
definierte Höhe und eine andere Hintergrundfarbe zugewiesen bekommt. Schritt 1: Zuweisen der Lightbox-Variante über w-jquery Schritt 2: Definition der Lightbox-Variante über JS Schritt 3: Darstellung der Lightbox-Variante im CSS definieren
Formular: Auswahlfeld über Dateipfade
um bei Auswahl eines Wertes direkt die zugehörigen Seite aufzurufen. Beispiel: Auszug aus JavaScript einbinden Element jQuery('#countrySelection').on('change', function(){ jQuery( location ).attr("href", jQuery(this).val()); }); Zusätzlich
Bereichsnavigation - Navigation nur beim Hochscrollen Anzeigen
wird. Auszug aus der desing.js //////////////////////////////////////////////////////////////// // // Beim Scrollen // //////////////////////////////////////////////////////////////// jQuery ( window ). on ( 'scroll' , function(){ /* Auslesen des Scrollstatus aus der globalen JS-Variable wUiTmp
Smooth Scrolling per CSS-Only generell aktivieren
weitergeleitet. Hinweis: Diese Version deaktiviert das scoll-behaviour nur für die ausgewählten Links in der Seite */ jQuery ("#navigationMain a[href^='#']") .click (function(event) { event.preventDefault () ; event.stopPropagation () ;
Fullpage - scrolldirection-Events aktivieren
wEditor == 'undefined'){ document.addEventListener('DOMContentLoaded', function waitUntilContentLoaded(){ if(!window.jQuery){ return setTimeout(waitUntilContentLoaded, 100); } var minWidthFullPage =
OpenStreetmap - Marker über Listeneinträge hervorheben
ausführt. Auszug aus einem Javascript-Quelltext-Element, dass für die Seite die Events auf die listenEinträge legt. jQuery ( document ). ready (function(){ jQuery ( '.listEntry a' ). on ( 'mouseenter' , function( e ){ e . preventDefault (); e .
Lightbox: Individuelle Inhalte in Lightbox anzeigen (data-lightboxtype=inline)
wEditor == 'undefined'){ document.addEventListener('DOMContentLoaded', function waitUntilContentLoaded(){ if(!window.jQuery){ return setTimeout(waitUntilContentLoaded, 100); } /*Auslesen der Hinweisbox*/ var selector =
Mini-Shop: Umsetzung über Objekt-Wizard - Beschreibung
geladen ist */ document . addEventListener ( 'DOMContentLoaded' , function waitUntilContentLoaded (){ if(! window . jQuery ){ return setTimeout ( waitUntilContentLoaded , 100 ); } /*Blendet den Zahlungspflichtig bestellen Button aus*/ jQuery (
Barrierefreiheit: Fokussperre für den Hinweislayer mit dem 'onkeyup'-Event
dass dieser nicht mittels der Tabulatortaste verlassen werden kann. Beispiel für ein keyup-Event auf einen Infolayer jQuery('body').on('keyup', function(e){ if(e.keyCode == 9 && !jQuery(e.target).is('#myInfoLayer *')){
Anwendungsbeispiel: Formular mit Registerlaschen-Container strukturiert
aus design.js // ... //////////////////////////////////////////////////////////////// // // Initialisieren der Seite // //////////////////////////////////////////////////////////////// jQuery(document).ready(function(){ // ... jQuery('*[data-isinvalid="1"]').each(function(){ jQuery('#tab_' +
Zeitraum für die Kalenderauswahl in Formularen setzen
z.B. dafür genutzt werden, um das bis-Datum nur maximal 5 Tage nach dem von-Datum wählen zu können. let startDate = jQuery(this).datepicker('getDate'); let maxEndDate = new Date(startDate); maxEndDate.setDate(maxEndDate.getDate() + 3);
Download von Binärdateien erzwingen
für alle download-CSS-Klassen erzwingen indem Sie in der design.js u.a. Snippet definieren. Auszug aus der design.js jQuery(document).ready(function(){ // ... //Funktion für alle A-Tags mit den u.a. download-CSS-Klassen über die
Lottie-Files: Player pausieren
setEventPauseLottiePlayer = function(id, pauseAtFrame){ if(jQuery('div[id=' + id + '] lottie-player').length == 1){ var lottiePlayer = jQuery('div[id=' + id + '] lottie-player').get(0);
CSS-Only Referenz
Legt fest, dass der Banner erst nach dem vollständigen Laden aller Seiteninhalte initialisiert wird (load). -w-jquery Führt den angegebenen jQuery-Code aus. -w-levelheadline Definiert das Level der Überschrift für die Listeneinträge
Navigationshilfe ScrollTop-Button - Anzahl der Pixel bis zum Einblenden anpassen
werden. Beispiel: Setzen der pixel ab welcher der ScrollTob-Button angezeigt werden soll im ready-Event der design.js jQuery (document) .ready (function() {
Formularfelder via Ajax laden
var url = '/wGlobal/wGlobal/scripts/php/getRadioValues.php?date=' + dateVal + '&elementName=' + elementName; //JQueryAufruf jQuery.ajax ( { type: "GET", url: url, success: function(result) { if (result != '') { //Ersetzen des bestehenden
-w-background-target
Einsatzgebiet beliebige jQuery/CSS3 Selektoren Definiert das Ziel eines Hintergrund-Elementes (z.B. Bannerbild) bannerSlider.wFilelist.php Beispiele /
Pflege von textbasierten Daten
innerhalb eines JavaScript-Bereiches, um Klasse des Display-Feldes zu verändern, z.B.: ... function checkDate($obje){ ... jQuery('#wDisplay_' + $obje.id).toggleClass("wErrorInput wEditorText"); ... ... --> Dateipfade Pflege eines Dateipfades
Neu in Weblication® Version 17 - veröffentlicht am 01.07.2022
TAN wie bisher aus vier Zahlen oder 6 alphanumerischen Zeichen besteht. CSS-Only Im CSS-Editor kann jetzt bei -w-jquery direkt JavaScript geschrieben werden, ohne dass die Zeichen {};und : kodiert werden müssen. Varianten lassen sich in