WBCE CMS Forum

vebea

Member

Habe ein Problem mit meinem selbstgebauten Template - javascript

Hallo,

es geht um folgendes habe einen Menü-Slider gebaut, der über js gesteuert wird. Mein Problem ist folgendes, wenn ich das entsprechende Symbol anklicke, dann wird nicht das Symbol angezeigt, welches unter Javascript geändert wird.

<div id="nav" >
                <a href="javascript:void(0)"  class="openbtn" onclick="Nav()">
        ##Das Symbol erscheint, wenn es weniger als 578px hat, und wenn ich es anklicke, sollte Javascript es austauschen, was es nicht macht.###
                    <img id="change-icon" class="img-svg" src="<?php echo TEMPLATE_DIR; ?>/assets/img/justify.svg" alt="">
                </a>

                <div id="mySidepanel" class="sidepanel">

                    <?php show_menu2(1); ?>
                </div>

            </div>

###Hier ist das zugehörige javascript####

function Nav() {
                let weite = document.getElementById("mySidepanel").offsetWidth;

                if (weite === 0) {
                    document.getElementById("mySidepanel").style.width = "150px";
                    document.getElementById("change-icon").style.margin="0 0  0 80px ";
#### Das funzt nicht ###
                    document.getElementById("change-icon").src="<?php echo TEMPLATE_DIR; ?>/assets/img/x-lg.svg";
                } else
                {
                    document.getElementById("mySidepanel").style.width = "0";
                    document.getElementById("change-icon").style.margin="0 0  0 10px ";
                    document.getElementById("change-icon").src="<?php echo TEMPLATE_DIR; ?>/assets/img/justify.svg";
                }
            }

Hoffe es hat jemand eine Idee, wie ich es beheben könnte.
Vielen Dank schonmal

Vebea

florian

Administrator

Re: Habe ein Problem mit meinem selbstgebauten Template - javascript

Versuch mal mit ... ('#change-icon')...

---

Sorgen sind wie Nudeln: man macht sich meist zu viele.

bernd

Developer

Re: Habe ein Problem mit meinem selbstgebauten Template - javascript

Ich stolper über dein if (weite === 0).

Ohne deine CSS-Formatierung für das sidepanel zu kennen allerdings schwierig zu beurteilen, ob du da jemals eine absolute 0  für weite erreichen kannst.
Wenn du z.B. einen 1px border drumrum hast bliebe trotz der width = 0 für weite (offsetWidth) immer noch 2.

Am besten mal sowohl in den if als auch in den else Zweig jeweils ein alert(weite); einbauen, dann dürfte es klarer werden.

---

... nein in Europa verwenden wir beim Programmieren nicht € statt $ ...

vebea

Member

Re: Habe ein Problem mit meinem selbstgebauten Template - javascript

Moin,

ich habe des Rätsels-Lösung !
Das Problem besteht darin, wenn der der Aufruf von PHP innerhalb von JS geschieht, dann werden die Sonderzeichen beim Aufruf umgewandelt.
Dieses ist mir zunächst nicht aufgefallen
document.getElementById("change-icon").src="<?php echo TEMPLATE_DIR; ?>/assets/img/x-lg.svg"; 
wird zu
http://localhost/wbce/%3C?php%20echo%20TEMPLATE_DIR;%20?%3E/assets/img/justify.svg
somit wird das Symbol nicht gefunden.

Daher gebe ich den PHP Aufruf zum ersetzen, als Parameter beim Funktionsaufruf in der Index.php mit, dann funktioniert es.

<a href="javascript:void(0)"  class="openbtn" onclick="Nav('<?php echo TEMPLATE_DIR; ?>')">
                    <img id="change-icon" class="img-svg" src="<?php echo TEMPLATE_DIR; ?>/assets/img/justify.svg" alt="">
                </a> 

function Nav(sPath)
...
document.getElementById("change-icon").src=sPath+"/assets/img/x-lg.svg";
...

Vielen Dank nochmal für die Tipps :-)

Vebea