Volltextsuche
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
-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:
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
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() {
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'
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 {
CSS-Grid-Layout formatieren mit JavaScript in CSS-Only
in Verbindung mit der BASE (Mobile First) JavaScript direkt in CSS eingebettet werden. Hier kann man auch komplexeres jQuery nutzen, um damit dynamisch CSS-Variablen zu setzen, die wiederum z.B. ein CSS-Grid-Layout formatieren. Das folgende
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
-w-add-data
-w-add-data: parallaxbackgrounddirection=topright;...} /* HTML-Ergebnis: Beispiel 3: Beispielhafte Definition eines jQuery-Überblendeffektes über CSS-Only (BASE Classic) .divXY { -w-add-data: effect=fadeIn,duration=0.3s} /* HTML-Ergebnis:
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
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 .
Anpassen einer Bannerslider Variante über CSS-Only
aus der design.css zur Banner-Variante 040 /* ... */ .listBannerSlider_var040 .listEntriesPreview .listEntry { -w-jquery: jQuery (this) .mouseover (function() \007BjQuery (this) .trigger ('click') \007D); display: table-cell; cursor:
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 (
Akkordeon-Container Elemente in der Bearbeitung geschlossen
bereits zugeklappt vorzufinden, können Sie nachfolgendes JavaScript nutzen. Beispiel: Auszug aus der design.js jQuery(document).ready(function(){ if (typeof (wEditor) !== 'undefined') { let accordeonContainer =
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 *')){
Sidebar-Navigation bei mobiler Darstellung
Anpassung vornehmen. Sidebar-Navigation inaktiv #_blockMainOuter { -w-add-classes: nextToSidebar,moveWithSidebar; -w-jquery: jQuery ("#blockMainOuter") .before (' ') } Sidebar-Navigation aktiv #blockMainOuter { -w-add-classes:
Anwendungsbeispiel: Formular mit Registerlaschen-Container strukturiert
aus design.js // ... //////////////////////////////////////////////////////////////// // // Initialisieren der Seite // //////////////////////////////////////////////////////////////// jQuery(document).ready(function(){ // ... jQuery('*[data-isinvalid="1"]').each(function(){ jQuery('#tab_' +
-w-add-objectdata
100%; height: auto} .listDefault_var999 .listEntry { -w-add-objectdata: wd: extension/ wd: meta/ wd: thumbnail/@src; -w-jquery: jQuery (this) .prepend (' .find ('.listEntryData-0') .html () + '"/>')} .listDefault_var999 .listEntryData-0 {} /*
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 () ;
Datenschutzkonforme Cookies in Weblication
id= " cookieNoticeCloser " style= " display:none " onclick= " document.cookie = 'hideCookieNotice=1;path=/';jQuery('#cookieNotice').slideUp() "> [x] if(document.cookie.indexOf('hideCookieNotice=1') != -1){
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
Scrolling von oben erzwingen
kann verhindert werden, indem in der design.js das Scroll-Event gesteuert wird. */ //Beispiel Auszug aus der design.js jQuery(document).ready(function(){ if (location.hash) { setTimeout(function() { var jQueryHashId =
BannerSlider - Beenden der Animation
dem Wechsel des Banners angestoßen wird */ wOnAfterSelectListEntryBannerSlider = function (listId) { var bannerObject = jQuery ('#bannerSlider_' + listId) ; /* * Abfrage der data-Attribute des BannerObjektes, * In diesem Fall soll die Animation nach
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);
includeJsRessources
Javascript-Dateien im Head ein und liest die Attribut-Werte über die Projektkonfiguration ein <!-- Registriert jQuery lokal oder optional von einer externen Ressource --> ... ... <!-- In den Elementen der aktuellen Seite benötigte
Breadcrumb-Navigation auf Hauptpunkte beschränken
der design.css Ihres Projektes folgende Zeile, um die Brotkrümelnavigation durch Einsatz der CSS-Only-Eigenschaft -w-jquery auf die Anzeige der Hauptpunkte zu minimieren: Beispiel: Auszug aus der design.css mit Definition /*
wPageCur::registerJs
); Registriert die JS-Datei für Ihre Anwendung im Head (über PHP eingebunden) // wenn jQuery-Funktionen z.B. eine im Head eingebundene JS erfordern (wegen z.B. ReferenceError Meldungen...) wPageCur :: registerJs
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
URL eines Links in die Zwischenablage kopieren
= function (linkClass) { let searchAppendix = (linkClass) ? '.' + linkClass : ''; let linkObjects = jQuery('a' + searchAppendix); linkObjects.each(function () { let currentLinkObject = jQuery(this);
Maximale Bestellmenge im Mini-Shop Weblic ergänzen
/> [!-- formInputCart --] < button type = "submit" class= "refreshAmount" onclick = "jQuery('#action_updateArticle_[!--formId--]').val('updateArticle');" title = "[!--text_shop_set_number_articles--]" >< img
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-registerJs
das erforderliche JS-Plugin ein /* ... */ .listDefault_var3600 { -w-registerJs: //cdnjs.cloudflare.com/ajax/libs/jquery.isotope/2.2.1/isotope.pkgd.min.js; /* ... */ } Weiterführende Links Einsatz von Isotope und Masonry für
-w-background-target
Einsatzgebiet beliebige jQuery/CSS3 Selektoren Definiert das Ziel eines Hintergrund-Elementes (z.B. Bannerbild) bannerSlider.wFilelist.php Beispiele /
includeCssRessources
eingelesen. --> select= " php:functionString('wPageCur::registerCss',
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
Globale Projekteinstellungen
Benutzer Passwort ändern für Redakteure und öffentliche Benutzer Layoutelemente wie Inhaltscontainer mit jQuery-Tab Funktion, konfigurierbare Leerzeilen etc. Komplexere Anwendungen wie eine Bildergalerie etc. Eine vollständige
HD-Funktion in BASE-Projekten nachrüsten
Ihrem globalen Projekt unter ( /[IHR-LAYOUT-PROJEKT]/wGlobal/layout/scripts/hd.js ) ab. Die Javascript-Datei setzt auf jQuery-Funktionen auf, weshalb die jQuery Library in den Seiten mit eingebunden sein muss. Dies ist in der BASE