fix0_o

Считаю лучшим решением hammer.js

Разбераешь url и стилизуешь родительский блок div и ссылку.

javascript

Разберём адрес: http://realadmin.ru/saytostroy/?page=4#top

document.location.href	        http://realadmin.ru/saytostroy/?page=4#top
document.location.protocol	http:
document.location.host	        realadmin.ru
document.location.pathname	/saytostroy/
document.location.search	?page=4
document.location.hash	        #top

Ковыряй интерфейсы в PHP

interface EngineInterface
    {
        public function ArrayMerge($item_1);

        public function value_search($item_1, $item_2);
    }

class ArrayFunct
    {
        private $Engine;
      
        function __construct(EngineInterface $Engine)
        {
            $this -> Engine = $Engine;
        }

        public function ArrMerge($array)
        {
            return $this -> Engine -> ArrayMerge($array);
        }

        public function value_search($array, $search)
        {
            return $this -> Engine -> key_search($array, $search);
        }
    }

class Engine implements EngineInterface
    {

        private $array_result;
        private $array_count;

        public function ArrMerge($array) {

            // ваш функционал

            return $result;
        }

        public function value_search($array, $search) {

            // ваш функционал
                
            return $result;
        }
    }

$engine = new Engine;
    $ArrayFunct = new ArrayFunct($engine);

//////////////////////////////////////////////////////////////////////////////////////////////////////////////////
  // ФУНКЦИЯ ДЛЯ УПРАВЛЕНИЯ КУКАМИ
//////////////////////////////////////////////////////////////////////////////////////////////////////////////////
// как пользываться                                    
/*    
    // установка куки без срока хранения:
    set_cookie ( "username", "Вася Пупкин" );

    // установка куки со сроком хранения до 15 февраля 2011:
    set_cookie ( "username", "Вася Пупкин", 2011, 01, 15 );

    // установка куки со сроком хранения, доменом ruseller.com, использованием SSL, но без пути:
    set_cookie ( "username", "Вася Пупкин", 2003, 01, 15, "", "ruseller.com", "secure" );

    // получение значения куки:
    var x = get_cookie ( "username" );

    // удаление куки:
    delete_cookie ( "session_new" );
*/
//////////////////////////////////////////////////////////////////////////////////////////////////////////////////
function set_cookie ( name, value, exp_y, exp_m, exp_d, path, domain, secure )
{
  var cookie_string = name + "=" + escape ( value );
 
  if ( exp_y )
  {
    var expires = new Date ( exp_y, exp_m, exp_d );
    cookie_string += "; expires=" + expires.toGMTString();
  }
 
  if ( path )
        cookie_string += "; path=" + escape ( path );
 
  if ( domain )
        cookie_string += "; domain=" + escape ( domain );
  
  if ( secure )
        cookie_string += "; secure";
  
  document.cookie = cookie_string;
}

function delete_cookie ( cookie_name )
{
  var cookie_date = new Date ( );  // Текущая дата и время
  cookie_date.setTime ( cookie_date.getTime() - 1 );
  document.cookie = cookie_name += "=; expires=" + cookie_date.toGMTString();
}

function get_cookie ( cookie_name )
{
  var results = document.cookie.match ( '(^|;) ?' + cookie_name + '=([^;]*)(;|$)' );
 
  if ( results )
    return ( unescape ( results[2] ) );
  else
    return null;
}

Пробуй.

Удачи в разработках!

Для однопользовательской 1 вариант приемлем. Сокеты предпочтительны, но возможны только на системе люнекс. На Win тоже есть вариант сокетов но имеет ряд проблем, основная которой не возможность контроля демона изнутри.

По 1 варианту., это мин библиотека js на основе jquery, суть в том что если ты немного разберешься в реализации, то ты поймешь как лучше реализовать 1 вариант.

Flex не подходит. Замени и посмотри.

JS

width_body = screen.width;

function benefits(evt, cityName) {
    var i, tabcontent, tablinks, width;
    tabcontent = document.getElementsByClassName("tabcontent");
    width = (tabcontent[0].offsetWidth) / 2;
    for (i = 0; i < tabcontent.length; i++) {
      
      tabcontent[i].style.transform = "translateX(-500px)";
      tabcontent[i].style.opacity = "0";
      tabcontent[i].style.left = "calc(50% - "+width+"px)";
      tabcontent[i].style.maxWidth = width_body+'px';
    }
    tablinks = document.getElementsByClassName("tablinks");
    for (i = 0; i < tablinks.length; i++) {
      tablinks[i].className = tablinks[i].className.replace(" active", "");
    }
  document.getElementById(cityName).style.opacity = "1";
    document.getElementById(cityName).style.transform = "translateX(0px)";
    evt.currentTarget.className += " active";
  }
  
  // Get the element with id="defaultOpen" and click on it
  document.getElementById("defaultOpen").click();

CSS
Замени только 1 класс:

.tabcontent {
  display: block;
  position:absolute;
      -webkit-transition: .6s;
      -o-transition: .6s;
      transition: .6s;
  margin:0px 30px 0px 0px;
}

Проблема может быть не в коде.

file_get_html загружает страницы обычным file_get_contents. Это значит если хостер, выставил в php.ini allow_url_fopen = false (т.е. запретил удаленно открывать файлы), то загрузить что-то удаленно, не получится. Да и серьезные веб сайты таким способом парсить не стоит, лучше использовать CURL с поддержкой proxy и ssl.

Что за библиотека?

Тебе нужна идея реализации.

Механизм всегда один, твоя задача скомпоновать его так, что бы у тебя получилось то, что ты хочешь. Физически слои не могут проходить сквозь друг друга (z-index(1-2)) - это механика браузеров. Но можно создать визуальный эффект, будто происходит то что ты хочешь

- "при пролистывании верхний уходит и становится как бы фоном всего, второй на передний план и третий становится вторым маленьким"

.
Для этого тебе необходимы клоны фотографий. К примеру - "

при пролистывании верхний уходит и становится как бы фоном

"
- тебе нужны 2 фото 1 уже фон но со стилем (opacity:0), другой верхний клон. При пролистывании совместно, скрываешь и растягиваешь на весь экран верхний кадр. Второй сдвигаешь и растягиваешь до размеров первого. На третьем просто проявляешь его. Те фото, что находятся в очереди и скрыты, меняешь стили (z-index(1-2)). Просто пойми рамки реализации, рендера браузера, накидай план и действуй.

Тебе в принципе понадобятся только 3 свойства:
1) z-index
2) opacity
3) transform

Я не дал тебе готового ответа, но попробовал дать представление, как это делается. Если разберешься, такие задачи будешь щелкать как орешки.

Server на PHP? - chdir(); // указываете рабочий каталог (тут вариаций много, нужно поиграть)...
Или создать переменную window.path до начала отработки ваших скриптов парсить строку

console.log(document.location.pathname+' : путь без параметров');
console.log(document.location.search+' :параметры');

у каждого под домена свой путь, изменяете window.path и определяете как путь по умолчанию для текущих ajax запросов. Не надо мудрить, и так проще некуда.

По мойму это для манипуляций с XML структурами
создаем временный DOMDocument?

$doc = new DOMDocument(); // инициализация
$doc->formatOutput = true; // мы хотим красивый вывод
$doc->loadXML("<root/>"); // наш XML обьект
$f = $doc->createDocumentFragment(); // создаем временный DOMDocument
$f->appendXML("<foo>text</foo><bar>text2</bar>"); // объявляем новый элемент $f
$doc->documentElement->appendChild($f);  // добавляем элемент $f
echo $doc->saveXML(); // выводим на экран
echo $doc->saveXML() . "\n"; // Сохранение всего документа

overflow-x: hidden;
overflow-y: scroll;
напомню что элементы скролла имеют фиксированную позицию и накладываются сверху.

Вообще ни чего не понял... Думаю не я один...

Вот простой пошаговый опросник. Он работает цепочкой, но его можно модифицировать, добавить проверку выполненного шага и подгрузку необходимого.

Вот отличный вариант. Может все что нужно и при этом ничего лишнего.class для работы с файлами

Вот рабочий вариант.
Думаю сам разберешься как этим пользоваться.
Стилизуй и вперед к свершениям.

<!--Первый аккордеон-->
<ul accordion='test'>
     <li><a href='1'>item1</a></li>
     <li><a href='2'>item2</a></li>
</ul>

<div test='1' style='display:none;'>
      ####item1####
</div>
<div test='2' style='display:none;'>
      ####item2####
</div>

<!--Второй аккордеон-->
<ul accordion='test2'>
     <li><a href='1'>item1!!!</a></li>
     <li><a href='2'>item2!!!</a></li>
</ul>

<div test2='1' style='display:none;'>
      ####item1!!!####
</div>
<div test2='2' style='display:none;'>
      ####item2!!!####
</div>

$(document).on('click', "[accordion]", function(event){
      event.preventDefault();
      event.stopPropagation();
      var target = event.target;
      var check = $(this).attr('accordion');
      $("["+check+"]").fadeOut(0);
      $("["+check+"='"+$(target).attr('href')+"']").fadeIn(300);    
});

Пример:

Вот вариант.
Закрывается при клике вне области модульного окна.
Можно создавать сколько угодно модульных окон.

Пример: https://codepen.io/Fix0_o/pen/wRRVpW

<a modal-win='modal_1' href='#'>Click me</a>
<a modal-win='modal_2' href='#'>Click me</a>

<div class='modal_bg'>
  <div class='flex'>
    <div class='modal_win modal_1'>Modal window 1</div>
    <div class='modal_win modal_2'>Modal window 2</div>
  </div>
</div>

.modal_bg {
  position: fixed;
  left: 0px;
  right: 0px;
  top: 0px;
  bottom: 0px;
  background: #000;
  display: none;
}
.flex {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  height:100%;
}
.modal_win {
  display: block;
  min-width: 300px;
  min-height: 300px;
  background: #fff;
  text-align: center;
  display: none;
}

$(document).on('click', "[modal-win]", function(event){
  event.preventDefault();
  var target = event.target;
  var acbut = $(target).attr('modal-win');
  $('.'+acbut).fadeIn(600);
  $('.modal_bg').fadeIn(600);
});

$(document).on('click', ".modal_bg", function(event){
  event.preventDefault();
  event.stopPropagation();
  var target = event.target;
  var check = $(target).attr('class');
  if(check == 'flex'){
    $(this).fadeOut(600);
    $('.modal_win').each(function (index, element) {
      $(element).fadeOut(600);
    });
  }
});