Class on pages-call doesn't work with JS

Kirby 2 Solved ✅
1

Hi everyone,

I hope you can help me.

For a website I’m making, I need to align some elements according to the link of the current page in the navbar. Therefore, I put this code for my pages-call :

<span id='pages'>
 <li>3</li>

    <?php foreach($pages->visible() as $subpage): ?>
      <a href="<?php echo $subpage->url() ?>" <?php e($subpage->isOpen(), ' class="active"') ?>>
        <?php echo html($subpage->title()) ?>
      </a>
    </li>
    <?php endforeach ?>
</span>

and then I put this code in my JS script :

$(window).load(function(){

var p = $( ".active" );
var position = p.position().left;


$('h1').not('').css('margin-left', position);

$('#container-project-template p:first-child()').not('').css('text-indent', position + 0 )

$('h1 span').not('').css('width', position)


  jQuery(document).resize(function () {
      var screen = $(window)    
      if (screen.width() > 970) {
    $('#gallery img').not('').css('margin-left', position + 5)
  };

});

It usually works… but not when we are on subpages. When i’m in Projects childen pages, it doesnt work even though my link for the project page has the class ‘active’ !!!
Does someone has the solution ? Is it the JS code that is misplaced ? It’s being called from the head of the document and I tried from the footer and still doesn’t work…

thanks !

Valentin

2

Oh, no worries, I found the solution… aha

Valentin