jQuery funktioniert im Template nicht

SunnyCue · Jul 14th 2020

Hallo zusammen,

wie bekomme ich ein jQuery Script im Template zum laufen?

Dieses soll den Header bei jedem refresh wechseln.

HTML

        <div id="pageHeaderFacadeSmall" class="pageHeaderFacadeSmall">
            <div class="layoutBoundary">
                {include file='pageHeaderLogo'}
            </div>
        </div>
        <script data-relocate="true">
            $(function() {
    var images = [
        'images/community/dark/header.png',
        'images/community/dark/header_small.png',
        'images/community/dark/partner1.png',
    ];

    var key = Math.floor((Math.random()*images.length));
    var img = images[ key ];
    $('#pageHeaderFacadeSmall').css('background-image', 'url(' + img + ')' );
        });
</script>

Display More

Passieren tut leider nichts.

LG

Hundiiiiiiiiii · Jul 15th 2020

Der Code an sich ist ok und funktioniert. Gibt es den Container #pageHeaderFacadeSmall in deinem Design? Stimmt der Pfad zu den Bildern? Versuche es mal mit den absoluten URLs: https://www.domain.de/images/community/dark/partner1.png

SunnyCue · Jul 15th 2020

Quote from cls-design

Versuche es mal mit den absoluten URLs: https://www.domain.de/images/community/dark/partner1.png

~~Das klappt leider auch nicht.~~

~~Und ja, der Container ist natürlich vorhanden.~~

Läuft

LRDE · Jul 15th 2020

Und das wechselt nun den Banner oder was?

SunnyCue · Jul 15th 2020

Ja richtig, das wechselt nach jedem Refresh den Header.

Syntafin · Jul 15th 2020

Kurz mal gefragt... warum dann jQuery und nicht simpel mit PHP?

LRDE · Jul 15th 2020

Quote from Benny Change

Hallo zusammen,

wie bekomme ich ein jQuery Script im Template zum laufen?

Dieses soll den Header bei jedem refresh wechseln.

HTML

        <div id="pageHeaderFacadeSmall" class="pageHeaderFacadeSmall">
            <div class="layoutBoundary">
                {include file='pageHeaderLogo'}
            </div>
        </div>
        <script data-relocate="true">
            $(function() {
    var images = [
        'images/community/dark/header.png',
        'images/community/dark/header_small.png',
        'images/community/dark/partner1.png',
    ];

    var key = Math.floor((Math.random()*images.length));
    var img = images[ key ];
    $('#pageHeaderFacadeSmall').css('background-image', 'url(' + img + ')' );
        });
</script>

Display More

Passieren tut leider nichts.

LG

Display More

Sind die Images dann alle gleich groß, oder wird per CSS da noch was gesteuert? In welches Template würde das kommen?

SunnyCue · Jul 16th 2020

Quote from Syntafin

Kurz mal gefragt... warum dann jQuery und nicht simpel mit PHP?

Die Frage kann ich ebenfalls stellen, warum PHP und nicht jQuery. Ich finde es so viel einfacher und es funktioniert, wie gewollt.

Quote from LRDE

Sind die Images dann alle gleich groß, oder wird per CSS da noch was gesteuert? In welches Template würde das kommen?

Wie groß die Images sind, ist dir natürlich überlassen. Ist ja im Grunde davon abhängig wo du das einsetzen möchtest. Wichtig ist nur, den Container anzusprechen und das jQuery-Script direkt darunter zu setzen.

Sagen wir mal du möchtest auch bei dir den Header ändern, musst du entsprechend den Container suchen, wo er Header eingebunden ist. Das kann sich von Stil zu Stil unterscheiden. Bei mir ist es ein extra Template vom Stil "pageHeader".

HTML

        <div id="deinHeader" class="deinHeader">
        </div>

In dem Fall wäre der Container deinHeader

Dieser muss im Script verwendet werden. Wenn es eine ID ist, welche du ansprechen kannst, musst du #deinHeader nutzen. Wenn du nur eine CSS-Klasse ansprechen kannst, musst du deinHeader nutzen, oder .deinHeader (Weis ich gerade nicht). Sollte dir eine ID fehlen, kannst du das Template, welches du dann sowieso bearbeiten musst, auch um eine ID im entsprechenden Container erweitern.

JavaScript

        <script data-relocate="true">
            $(function() {
    var images = [
        'images/header/1.png',
        'images/header/2.png',
        'images/header/3.png',
    ];

    var key = Math.floor((Math.random()*images.length));
    var img = images[ key ];
    $('#deinHeader').css('background-image', 'url(' + img + ')' );
        });
</script>

Display More

LG

Xopez · Jul 16th 2020

Quote from Benny Change

Die Frage kann ich ebenfalls stellen, warum PHP und nicht jQuery. Ich finde es so viel einfacher und es funktioniert, wie gewollt.

Ganz so trivial ist das auch nicht. Das eine arbeitet serverseitig und das andere clientseitig. Nur mal so nebenbei

Tobias777 · Jul 16th 2020

Javascript kann man aber einfach ins Template schreiben, PHP lässt sich nicht ohne weiteres Einbinden.

SunnyCue · Jul 16th 2020

Genau das war mein Grundanliegen, warum ich jQuery nutzen wollte.

**Alexander Ebert** · Jul 16th 2020

jQuery ist schon seit Jahren vollkommen nutzlos und hat auch noch eine miese Performance. Hier mal der identische Code mit nativen Funktionen, die in allen Browsern inkl. IE11 funktionieren

HTML

<script data-relocate="true">
    (function() {
        var images = [
            'images/header/1.png',
            'images/header/2.png',
            'images/header/3.png',
        ];

        var key = Math.floor((Math.random()*images.length));
        var img = images[key];
        document.getElementById('deinHeader').style.setProperty('background-image', 'url(' + img + ')', '');
    })();
</script>

Display More

SunnyCue · Jul 16th 2020

Vielen Dank, den Unterschied spürt man enorm.... Das Bild switcht nun sofort. Vorher gab es eine gewisse Verzögerung.

Quote from Alexander Ebert

jQuery ist schon seit Jahren vollkommen nutzlos

Ist dies auch nativ umsetzbar? Ein Text-Rotator.

HTML

<span id="rotate"></span>
        <script data-relocate="true">
            $(function() {
var terms = ["1", "2", "3"];

function rotateTerm() {
  var ct = $("#rotate").data("term") || 0;
  $("#rotate").data("term", ct == terms.length -1 ? 0 : ct + 1).text(terms[ct]).fadeIn()
              .delay(20000).fadeOut(200, rotateTerm);
}
$(rotateTerm);
        });
</script>

Display More

Syntafin · Jul 16th 2020

Bin noch nicht wirklich drin in der Architektur von WSC/WCF... aber die PHP File könnte man einfach als Grafik einbinden so hab ich das früher schon gemacht...

SunnyCue · Jul 16th 2020

Du kannst aber, so viel ich weiß, nicht einfach in den Templates PHP benutzen.

**Alexander Ebert** · Jul 16th 2020

Quote from Benny Change

Ist dies auch nativ umsetzbar? Ein Text-Rotator.

Du kannst alles, was mit jQuery möglich ist, auch mit nativem JavaScript + CSS erreichen. jQuery-Code ist i.d.R. sehr kompakt, aber hinter Aufrufen wie fadeIn() steckt eine Menge an Programmlogik.

HTML

<span id="rotate" style="opacity: 0; transition: opacity .24s linear"></span>
<script data-relocate="true">
    (function() {
        var terms = ["1", "2", "3"];
        var i = 0;
        
        var rotate = document.getElementById('rotate');
        function rotateTerm() {
            if (i === terms.length) {
                i = 0;
            }
            
            rotate.textContent = terms[i];
            rotate.style.setProperty('opacity', '1', '');
            
            setTimeout(function() {
                rotate.style.setProperty('opacity', '0', '');
                
                setTimeout(rotateTerm, 250);
            }, 20000);
            
            i++;
        }
        
        rotateTerm();
    })();
</script>

Display More

Das hier ist das Gegenstück ohne jQuery, es basiert auf opacity und einer transition, um ein Aus- und Einblenden des Textes zu erreichen. Alles hochperformant und ohne Abhängigkeit von irgendeiner Drittbibliothek wie jQuery.

SunnyCue · Jul 16th 2020

Sehr interessant. Ich bedanke mich dafür !

Syntafin · Jul 16th 2020

Quote from Benny Change

Du kannst aber, so viel ich weiß, nicht einfach in den Templates PHP benutzen.

Du nutzt zu 99% wahrscheinlichkeit Apache, Stichwort: htaccess Rewrite .

image.php -> image.png...

SunnyCue · Jul 16th 2020

Ich weiß erhlich gesagt nicht, worauf du hinaus willst.

Tobias777 · Jul 16th 2020

Quote from Syntafin

Du nutzt zu 99% wahrscheinlichkeit Apache, Stichwort: htaccess Rewrite .
image.php -> image.png...

Da ist Javascript im Template aber deutlich weniger Pfusch...

jQuery funktioniert im Template nicht

Participate now!

Share

Similar Threads

Import geht nicht (Problem Gelöst)

Background-Image im Footer

Filter für imageList

Ajax Request im UploadFormField funktioniert u.U. nicht

Internationalisierung funktioniert im Plugin-Store nicht mehr

Tags

Users Viewing This Thread