Snippets

jQuery

Zu breite Tabelle Responsive fähig machen

/* ----------------------------- Table too wide ----------------------------- */

$(document).ready(function () {
  if ($(".products-container table").length > 0) {
    var table = $(".products-container table");

    /* IF TABLE too wide */
    if (table.width() > table.parent().width()) {
      table.parent().addClass("table-overflow");

      /* CREATE Sidebar */
      table.parent().prepend("<div class='table-sidebar'></div>");

      /* DELETE old headlines */
      table.find("thead tr > th:first-child").remove();
      table.find(".tb-footer td:first-child()").remove();
      table.find("tbody tr th").each(function () {
        $(".table-sidebar").append("<div>" + $(this).html() + "</div>");
        $(this).remove();
      });

      /* RECREATE Table */
      setTimeout(() => {
        $(".table-sidebar").css(
          "paddingTop",
          table.find("thead tr").outerHeight()
        );

        table.find("tbody tr").each(function (index) {
          $(".table-sidebar div:nth-child(" + index + 1 + ")").css(
            "height",
            $(this).outerHeight()
          );
        });
      }, 200);
    }
  }
});

/* ----------------------------- Table Overflow ----------------------------- */

.products-container.table-overflow {
  display: flex;
}

.products-container.table-overflow table {
  overflow-x: scroll;
  display: block;
  box-shadow: inset 0px -10px 17px #eee;
}

.products-container.table-overflow .table-sidebar {
  width: 200px;
}

.products-container.table-overflow .table-sidebar > div {
  border-top: 1px solid #eee;
  padding: 0.75rem;
  color: var(--h-color);
  transition: 0.2s;
  font-size: 15px;
  line-height: 1.2em;
  font-family: "GilroyBold";
  font-weight: 500;
}

PHP

Ein URL-Parameter abfragen

Link: domain.com/unterseite?product=loremIpsum

<?php
$url = explode('?product=', $_SERVER['REQUEST_URI']);
if ($url[1]) {
    $product = str_replace("/", "", $url[1]);
    /* Do something */ 
}
?>

Mehrere URL-Parameter abfragen

Link: domain.com/unterseite?data=loremIpsum&foo=data

<?php
$url = explode('/?', $_SERVER['REQUEST_URI']);

if ($url[1]) {
    $parameterString = str_replace("/", "", $url[1]);
    $parameterData = explode("&", urldecode($parameterString));
    $parameterKeyArr = [];

    foreach ($parameterData as $parameterValue) {
        $parameterKeyValue = explode("=", $parameterValue);
        $parameterArr += [$parameterKeyValue[0] => $parameterKeyValue[1]];
    }

    print_r($parameterArr["foo"]); // -> data
}
?>    

Uploadrate erhöhen (php.ini)

.user.ini-Datei in das Root Verzeichnis erstellen und folgendes einfügen und beliebige php.ini Einstellungen überschreiben.

upload_max_filesize = 150M
post_max_size = 150M

VISION Plugins

YT-Video

element_videos.php

<div class="yt-item-outer row mb-100">
    <div class="col-md-8">
        <div class="tab-content" id="yt-tabContent">
            <?php
            $i = 0;
            $resultVid = cube_query('Select value1 from texte_elemente where id_text="' . $pageoptions_infos['pageId'] . '" and typ="14" and showing="1" and lan="' . $pageoptions_infos['language']['lan'] . '" order by reihenfolge');
            while ($rowVid = $resultVid->fetch_assoc()) {
                $i++;

                // regEx by mi-ca [https://regex101.com/library/OY96XI]
                preg_match(
                    '/(?:https?:)?(?:\/\/)?(?:[0-9A-Z-]+\.)?(?:youtu\.be\/|youtube(?:-nocookie)?\.com\S*?[^\w\s-])([\w-]{11})(?=[^\w-]|$)(?![?=&+%\w.-]*(?:[\'"][^<>]*>|<\/a>))[?=&+%\w.-]*/im',
                    $rowVid['value1'],
                    $YTID
                );
            ?>
                <div class="tab-pane fade <?= ($i == 1 ? "show active" : "") ?>" id="yt<?= $i ?>" role="tabpanel">
                    <div class="yt-item">
                        <iframe src="https://www.youtube-nocookie.com/embed/<?= $YTID[1] ?>" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
                    </div>
                </div>
            <?php
            }
            ?>
        </div>
    </div>

    <div class="col-md-4">
        <ul class="nav nav-pills" id="yt-box" role="tablist">
            <?php
            $i = 0;
            $resultNav = cube_query('Select value2 from texte_elemente where id_text="' . $pageoptions_infos['pageId'] . '" and typ="14" and showing="1" and lan="' . $pageoptions_infos['language']['lan'] . '" order by reihenfolge');
            while ($rowNav = $resultNav->fetch_assoc()) {
                $i++;
            ?>
                <li class="p-0 nav-item d-block w-100">
                    <button class="d-block w-100 nav-link <?= ($i == 1 ? "active" : "") ?>" id="yt<?= $i ?>-tab" data-toggle="pill" data-target="#yt<?= $i ?>" type="button" role="tab"><?= $rowNav["value2"] ?></button>
                </li>
            <?php
            }  ?>
        </ul>
    </div>
</div>

videos.css

.yt-item-outer {
  background-color: #141414;
  padding: 15px 0px;
}

.yt-item iframe {
  aspect-ratio: 16/9;
  width: 100%;
  height: auto;
}

#yt-box {
  height: 100%;
  display: block;
  overflow-x: auto;
}

#yt-box .nav-item:before {
  content: none;
}

#yt-box .nav-item .nav-link {
  color: #fff;
  border: 0;
  border-bottom: 1px solid #333;
  background-color: transparent;
  border-radius: 0;
  text-align: left;
  transition: 0.3s;
  line-height: 1.2em;
}

#yt-box .nav-item .nav-link:hover {
  background-color: #222;
  transition: 0.3s;
}

#yt-box .nav-item .nav-link.active {
  color: #1a1a1a;
  transition: 0.3s;
  background-color: #f9dd00;
}

videos.js

$(document).ready(function () {
  $("#yt-box").css("height", $("#yt-tabContent").height());
});