Anchor jump is faulty if external screen is not connected

The CMS Questions
1

I have programmed the website with an external monitor connected. Everything works perfectly. As soon as I do not have the monitor connected, the anchor links do not jump correctly. Many of them jump to the wrong anchors, some are displayed again and again. What could be the reason for this?

2

Hi @AnneD With this little information, it’s impossible to answer your question. Maybe the targets are hidden or overlapping on a smaller screen, and/or an issue with your CSS…

3

This is the code of the php file


<?php /*      PROJECT VIEW     */ ?>
<div class="project-view-container">

<?php $key=1; ?>
<?php $array=1; ?>


<?php foreach ($projects
                as $project): ?>
                <div id="<?php print($array)?>">
                    <div class="project-anchor" id="project-anchor-<?php print($array)?>"></div>
                    <div class="project-view" id="project-view-<?php print($key)?>" onmouseleave="togglehide();" onmouseover="toggleshow();" ></div>
                    <script>

                              //   ANKERLINK IN URL ERSTELLEN
                                    var $content = $('.menu-content');

                                    function showContent(type) {
                                    $content.hide().filter('.' + type).show();
                                    }
                                                                  //   hier stand vorher .list-item
                                    $('.detailsGroup').on('click', '.list-item', function(e) {
                                       showContent(e.currentTarget.hash.slice(1));
                                       e.preventDefault();
                                    });

                              //   ÜBER ANKERLINK POPUP ANZEIGEN
                                    if(window.location.hash) {
                                    // Fragment exists
                                    $('.project-view-container').show();
                                    } else {
                                    // Fragment doesn't exist
                                    $('.project-view-container').hide();
                                    }


                    </script>
                </div>
<?php $key=$key+1; ?>
<?php $array=$array+1; ?>
<?php endforeach ?>
</div>




<?php /*      LISTE     */ ?>
<div class="articles__container" >
  <article id="article">
    <div class="article__scroller">
      <div class="article__wrapper">

        <?php /*      LISTE     */ ?>
        <div class="home-list" onclick="hidefilter();">
              <div class="detailsGroup">


                <?php $key=1; ?>
                <?php $array=1; ?>


                <?php foreach ($projects
                                as $project): ?>


                  <div class="linie"></div>
                  <a class="list-item" id="project-<?php print($array)?>" href="#project-anchor-<?php print($array)?>" onclick="toggle<?php print($array)?>();" ></a>

                  <?= js(['assets/js/popup.js', '@auto']) ?>

                  <script>

                      //   PROJEKT DETAILS ANZEIGEN
                            var toggle<?php print($array)?> = function hideShow () {
                                  $('.project-view-container').show()
                            };

                      //   PROJEKT DETAILS AUSBLENDEN nach 2s mit Rückkehroption
                            var timeoutId = null;
                            var togglehide = function() {
                                timeoutId = window.setTimeout(function(){
                                  $('.project-view-container').hide();
                                }, 1000);

                            };

                            var togglehidefast = function() {
                                timeoutId = window.setTimeout(function(){
                                  $('.project-view-container').hide();
                                });

                            };
                            var toggleshow = function() {
                                clearTimeout(timeoutId);
                            };




                  </script>

                <?php $key=$key+1; ?>
                <?php $array=$array+1; ?>

                <?php endforeach ?>


              </div>
        </div>

      </div>
    </div>
  </article>
</div>

This is the CSS section:

/*   ------- Project View -------   */
a .videolink {
  pointer-events: all;
}
.project-view-container{
  top:0;
  left:0;
  display:none;
  width: 100vw;
  height:2000vh;
  position: absolute;
  overflow-y: hidden;
  z-index: 999999;
}
#project-view-focus{
  opacity: 0.3;
  top:0;
  left:0;
  display:block;
  width: 100%;
  height:5000%;
  position: absolute;
  z-index: 1;
  animation-name: fadein;
  animation-duration: 2s;
}
.project-anchor {
  height: 1px;
  width: 100vh;
  overflow: hidden;
  display: block;
  position: relative;
  top: 0vh;  /*  Abstand des Projektfensters nach oben bei Ankersprung */
}
.project-view{
  display: block;
  opacity: 1;
  top:20vh;
  margin-bottom: 40vh;
  height: 33.725vw !important;
  width: 100vw;
  z-index: 999999999999999;
  position: relative;
  transition: all 0.3s ease-in-out;
  transition-delay: 1s;
}
.project-view.fade{
  opacity: 0;
}

.show {
  display: block;
}

.showHide{
  display:block;
  opacity: 1;
  transition: all 0.3s ease-in-out;
  transition-delay: 1s;
}

.project-button{
  position: relative;
}

  .hide {
    display: none !important;
  }
4

I’m sorry, this is definitely not a Kirby related problem, but most likely something with your CSS and/or Javascript. I cannot debug this for you.