[Javascript] Voce del menu evidenziata in base alla pagina attiva

marlev

Utente Attivo
19 Apr 2018
80
1
6
marlev.it
ti ho chiesto diverse volte se ha provato la mia... No mi hai risposto. In ogni caso ho modificato il tuo codice del post precedente integrando la mia funzione, prova e fammi sapere.
Codice:
<!doctype html>
<!--[if lt IE 7]>
    <html class="no-js ie6 oldie" lang="en">
<![endif]-->
<!--[if IE 7]>
    <html class="no-js ie7 oldie" lang="en">
<![endif]-->
<!--[if IE 8]>
    <html class="no-js ie8 oldie" lang="en">
<![endif]-->
<!--[if gt IE 8]><!-->
    <html class="js" lang="{{ page.seoLang }}">
<!--<![endif]-->
<head>
    <meta charset="utf-8" />
    <title>{{ page.title }}</title>
    <meta name="keywords" content="{{ page.keywords }}" />
    <meta name="description" content="{{ page.description }}" />
    <meta http-equiv="content-language" content="{{ page.seoLang }}" />

    {% if site.favicon %}
        <link rel="icon" href="{{ site.favicon['favicon'] }}" type="image/x-icon" />
        <link rel="SHORTCUT ICON" href="{{ site.favicon['thumbnail'] }}?v={{ "now"|date("U") }}" type="image/x-icon" />
    {% endif %}
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width,initial-scale=1">

    {% include basekit.headScript %}

</head>

<body class="{{ page.backgroundClass }}">

    {% block content %}
    {% endblock %}
    
    {% include basekit.bodyScript %}
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>

            jQuery(document).ready(function () {
                function current_page() {
                    var pathname = window.location.pathname;
                     var li_id;
                    switch (pathname) {
                        case  "" :
                        case "/":
                            li_id = "#menu-item_1";
                            break;
                        case  "/galleria":
                        case "/galleria/":
                            li_id = "#menu-item_2";
                            break;
                        case  "/acquerello":
                        case "/acquerello/":
                            li_id = "#menu-item_3";
                            break;
                        case  "/incisione":
                        case "/incisione/":
                            li_id = "#menu-item_4";
                            break;
                        default :
                            li_id = "not_a_menu";
                    }

                    if (jQuery(li_id).length) {
                        jQuery(li_id).addClass("selected");
                    }

                }
                current_page();
            });
        </script>
        
        
<script type="text/javascript">
    ! function () {
        function supportsSVG() {
            return !!document.createElementNS && !! document.createElementNS('http://www.w3.org/2000/svg', 'svg').createSVGRect
        }
        if (supportsSVG()) document.documentElement.className += ' svg'
    };
</script>

</body>
</html>
 

PavlovTheDog

Nuovo Utente
14 Apr 2018
24
0
1
ti ho chiesto diverse volte se ha provato la mia... No mi hai risposto. In ogni caso ho modificato il tuo codice del post precedente integrando la mia funzione, prova e fammi sapere.
Codice:
<!doctype html>
<!--[if lt IE 7]>
    <html class="no-js ie6 oldie" lang="en">
<![endif]-->
<!--[if IE 7]>
    <html class="no-js ie7 oldie" lang="en">
<![endif]-->
<!--[if IE 8]>
    <html class="no-js ie8 oldie" lang="en">
<![endif]-->
<!--[if gt IE 8]><!-->
    <html class="js" lang="{{ page.seoLang }}">
<!--<![endif]-->
<head>
    <meta charset="utf-8" />
    <title>{{ page.title }}</title>
    <meta name="keywords" content="{{ page.keywords }}" />
    <meta name="description" content="{{ page.description }}" />
    <meta http-equiv="content-language" content="{{ page.seoLang }}" />

    {% if site.favicon %}
        <link rel="icon" href="{{ site.favicon['favicon'] }}" type="image/x-icon" />
        <link rel="SHORTCUT ICON" href="{{ site.favicon['thumbnail'] }}?v={{ "now"|date("U") }}" type="image/x-icon" />
    {% endif %}
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width,initial-scale=1">

    {% include basekit.headScript %}

</head>

<body class="{{ page.backgroundClass }}">

    {% block content %}
    {% endblock %}
  
    {% include basekit.bodyScript %}
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>

            jQuery(document).ready(function () {
                function current_page() {
                    var pathname = window.location.pathname;
                     var li_id;
                    switch (pathname) {
                        case  "" :
                        case "/":
                            li_id = "#menu-item_1";
                            break;
                        case  "/galleria":
                        case "/galleria/":
                            li_id = "#menu-item_2";
                            break;
                        case  "/acquerello":
                        case "/acquerello/":
                            li_id = "#menu-item_3";
                            break;
                        case  "/incisione":
                        case "/incisione/":
                            li_id = "#menu-item_4";
                            break;
                        default :
                            li_id = "not_a_menu";
                    }

                    if (jQuery(li_id).length) {
                        jQuery(li_id).addClass("selected");
                    }

                }
                current_page();
            });
        </script>
      
      
<script type="text/javascript">
    ! function () {
        function supportsSVG() {
            return !!document.createElementNS && !! document.createElementNS('http://www.w3.org/2000/svg', 'svg').createSVGRect
        }
        if (supportsSVG()) document.documentElement.className += ' svg'
    };
</script>

</body>
</html>
Scusa, avevo detto solo che ho provato le vostre soluzioni proposte, non ti ho risposto individualmente.
Comunque anche così non va.
 
Ultima modifica:

PavlovTheDog

Nuovo Utente
14 Apr 2018
24
0
1
Ho provato anche questa (trovata altrove):
Codice:
<script type="text/javascript">

    //attivazione del menu
    function setActiveMenu(mnuId){
      var ul=document.getElementById("menunav");
      var lis=ul.getElementsByTagName("LI");    
      for(var i=0; i<lis.length; i++){
         if(lis[i].id==mnuId)lis[i].className="selected";
         else lis[i].className="";
          }
          return true;
    }
</script>
Ma non va, o non l'ho adattata come si deve.
 

marlev

Utente Attivo
19 Apr 2018
80
1
6
marlev.it
Allora prova cosi, apri inspector e vedi se si e' aggiunta la classe "selected""a <li> e apri anche la console e vedi eventuali errori JS.
E vedi anche che script lavora con path, quindi il nome del sito deve essere fatto cosi example.com/galleria e non localhost/example/galleria
Se e' come ultimo, nel mio script devi aggiungere il path mancante
 

PavlovTheDog

Nuovo Utente
14 Apr 2018
24
0
1
Allora prova cosi, apri inspector e vedi se si e' aggiunta la classe "selected""a <li> e apri anche la console e vedi eventuali errori JS.
E vedi anche che script lavora con path, quindi il nome del sito deve essere fatto cosi example.com/galleria e non localhost/example/galleria
Se e' come ultimo, nel mio script devi aggiungere il path mancante
Qui si può dare un'occhiata alla preview https://55b558c7-site-preview.spazioweb.it/home.
Ho provato a modificare in vari modi i "case", come mi dicevi, ma niente.
 

PavlovTheDog

Nuovo Utente
14 Apr 2018
24
0
1
comunque ho provato ad aggiungere sia nomesito.it, sia 55b558c7-site-preview.spazioweb.it ai "case", ma non va. La classe "selected" non viene aggiunta.
 

marlev

Utente Attivo
19 Apr 2018
80
1
6
marlev.it
Se il link del sito e' questo https://55b558c7-site-preview.spazioweb.it/home e dopo la home finale nel link non ci sono altri cartelle, nomi file , allora fai una prova, nell'ultimo codice che ho inviato, aggiungi la /home, riporto una parte modificata, nota inella condizione case : ...

Codice:
                        case  "/home" :
                        case "home/":
                            li_id = "#menu-item_1";
                            break;
                        case  "/home/galleria":
                        case "/home/galleria/":
 

PavlovTheDog

Nuovo Utente
14 Apr 2018
24
0
1
Se il link del sito e' questo https://55b558c7-site-preview.spazioweb.it/home e dopo la home finale nel link non ci sono altri cartelle, nomi file , allora fai una prova, nell'ultimo codice che ho inviato, aggiungi la /home, riporto una parte modificata, nota inella condizione case : ...

Codice:
                        case  "/home" :
                        case "home/":
                            li_id = "#menu-item_1";
                            break;
                        case  "/home/galleria":
                        case "/home/galleria/":
No, ogni pagina ha il suo nome, "home" è valido solo per la homepage. Non ci sono cartelle, sono tutte pagine a sè stanti. Ho l'impressione che la difficoltà sia proprio aggiungere "selected" nell'array delle classi. Un problema simile l'ho avuto per inserire la classe "open" per far aprire il menu cliccando sull'icona per tablet e smartphone. Cosa che ho risolto così:
Codice:
<script>
function showNav() {
    var element = document.getElementById("menunav");

    if (element.classList) {
        element.classList.toggle("open");
    } else {
        var classes = element.className.split(" ");
        var x = classes.indexOf("open");

        if (x >= 0)
            classes.splice(x, 1);
        else
            classes.push("open");
            element.className = classes.join(" ");
    }
}
</script>
Magari da questo si può ricavarne qualcosa utile?
 

marlev

Utente Attivo
19 Apr 2018
80
1
6
marlev.it
Allora in questo caso nelle prime due case : devi mettere come di seguito, loro definisco la home
Codice:
case  "/home" :
case "/home/":
E nelle altre pagine, secondo la pagina, esempio.
Codice:
case  "/galleria" :
case "/galleria/":
Ora prova a fare questa modifica e vedi con inspector del browser se si aggiunge la classe a li oppure vedi la console la presenza di qualche errore js.
 

PavlovTheDog

Nuovo Utente
14 Apr 2018
24
0
1
Allora in questo caso nelle prime due case : devi mettere come di seguito, loro definisco la home
Codice:
case  "/home" :
case "/home/":
E nelle altre pagine, secondo la pagina, esempio.
Codice:
case  "/galleria" :
case "/galleria/":
Ora prova a fare questa modifica e vedi con inspector del browser se si aggiunge la classe a li oppure vedi la console la presenza di qualche errore js.
Nulla di fatto. Ho provato anche a mettere lo script nella sezione head e non nel body, ma non cambia nulla. La console non sembra riportare errori.
 

marlev

Utente Attivo
19 Apr 2018
80
1
6
marlev.it
Ma la classe aggiunge? Posta l'immagine simile a quella che posto io (la mia e' in russo, quindi non fare il caso alle lettere strane). Per lanciare questa console, in firefox premi contemporaneamente CTRL + SHIFT + I. Si apre il pannello, a sinistra vedrai il primo pulsante con il simbolo di mouse, lo clicchi e avvicina il mouse alla voce del menu.
Vedrai classi ed i dettagli.
Penso che magari in qualche modo non prende il CSS e voiglio vedere se classe selected si aggiunge e se si aggiunge devi solo sistemare CSS
 

Allegati

PavlovTheDog

Nuovo Utente
14 Apr 2018
24
0
1
Ma la classe aggiunge? Posta l'immagine simile a quella che posto io (la mia e' in russo, quindi non fare il caso alle lettere strane). Per lanciare questa console, in firefox premi contemporaneamente CTRL + SHIFT + I. Si apre il pannello, a sinistra vedrai il primo pulsante con il simbolo di mouse, lo clicchi e avvicina il mouse alla voce del menu.
Vedrai classi ed i dettagli.
Penso che magari in qualche modo non prende il CSS e voiglio vedere se classe selected si aggiunge e se si aggiunge devi solo sistemare CSS
No, non aggiunge la classe, ma il CSS è corretto, perché se aggiungo manualmente, tramite html, la classe "selected" a uno degli elementi "a", cambia effettivamente colore la voce corrispondente nel menu.
Errori non ce ne sono, ho solo una serie di GET...