Нужна помощь по js и php в шаблоне

vsenik

Осваиваюсь на форуме
21
2 / 1

Нужна помощь по js и php в шаблоне

« : 26.08.2012, 12:23:55 »

Делаю шаблон сам. В <head> вставил такой скрипт (где-то подсмотрел):

Спойлер

[свернуть]

Он вычисляет высоту дива #middle в зависимости от высоты окна браузера. Его результатом является: <div id="middle" style="height: 581px;">. Но это не совсем то, что мне нужно. А нужно, чтобы в <head> выводилась такая строчка: <style type="text/css"> #middle {height: 581px;} </style>. В обоих случаях 581px - это вычисленное скриптом значение.
Чувствую, что "истина где-то рядом", но знаний не хватает. А для кого-то это секундное дело. Помогите. Спасибо.

Записан

buyanov

Захожу иногда
188
29 / 1
Сайты 74

Re: Нужна помощь по js и php в шаблоне

« Ответ #1 : 26.08.2012, 12:55:02 »

вот эта штука добавит такой элемент в head

Код: javascript

var h = document.getElementsByTagName('head')[0]; 
style = document.createElement('style');
style.type = 'text/css';
style.innerHTML = '#middle{height: 581px;}';
h.appendChild(style);

Только я не пойму к чему такие сложности =)

Почему бы не использовать JQuery или Mootools - это я к тому что на чистом яваскрипте такое давно не пишут =) и к чему вставлять <style> динамически когда можно просто изменять свойства элементов?

« Последнее редактирование: 26.08.2012, 12:58:44 от buyanov »

Записан

Создание сайтов, интернет-магазинов, оптимизация, продвижение, хостинг, безопасность, лечение от вирусов - мой сайт, телега, Хостинг

vsenik

Осваиваюсь на форуме
21
2 / 1

Re: Нужна помощь по js и php в шаблоне

« Ответ #2 : 26.08.2012, 13:06:47 »

581px - это не 581, а сколько получится в результате работы скрипта. Это значение (вычисленное) мне нужно будет присвоить ещё двум классам, причём это нужно сделать в <head>, как CSS, иначе некоторые вещи не будут работать. Я думал это будет что-то через echo, и я потом сам допишу что нужно.

Записан

buyanov

Захожу иногда
188
29 / 1
Сайты 74

Re: Нужна помощь по js и php в шаблоне

« Ответ #3 : 26.08.2012, 13:11:26 »

через echo это значит через php но как через php определить высоту окна браузера? =)

вот итоговый скрипт который должен получиться

Код: javascript

<script type="text/javascript">
        function findDimensions()
                {
                var height = 0;
                if(window.innerWidth)
                        height = window.innerHeight;
                else if(document.body && document.body.clientWidth)
                        height = document.body.clientHeight;
                var h = document.getElementById("middle");
                if(h)
                var head = document.getElementsByTagName('head')[0]; 
                style = document.createElement('style');
                style.type = 'text/css';
                style.innerHTML = '#middle{height: '+height - 135 + 'px'+'}';
                head.appendChild(style);
                }
                if (window.addEventListener)
                        window.addEventListener("load", findDimensions, false);
                else if (window.attachEvent)
                        window.attachEvent("onload", findDimensions);
</script>

Записан

Создание сайтов, интернет-магазинов, оптимизация, продвижение, хостинг, безопасность, лечение от вирусов - мой сайт, телега, Хостинг

buyanov

Захожу иногда
188
29 / 1
Сайты 74

Re: Нужна помощь по js и php в шаблоне

« Ответ #4 : 26.08.2012, 13:15:41 »

Тут сразу замечу и еще одна проблема возникает, что если пользователь потом изменит размер окна? нужно вешать событие еще и на resize и тогда что дописывать в <style>?</style> его прийдется удалить или пересоздать или еще что-то, в общем я бы очень задумался над этой реализацией ))))

покажите если есть возможность сайт и подробнее объясните проблему ) я может че посоветую =)

Записан

Создание сайтов, интернет-магазинов, оптимизация, продвижение, хостинг, безопасность, лечение от вирусов - мой сайт, телега, Хостинг

vsenik

Осваиваюсь на форуме
21
2 / 1

Re: Нужна помощь по js и php в шаблоне

« Ответ #5 : 26.08.2012, 13:28:06 »

Спасибо большое за ответ. Попробую Ваш скрипт позже. Интернет начал вырубаться раз в две минуты. Провайдер (Smile) - гадина, каждую неделю аварии.

Сайт: nakuhne.pro. Пока в начальной стадии. Делаю сразу на хостинге. Не судите строго - сайты это, скорее, моё хобби.

Записан

vsenik

Осваиваюсь на форуме
21
2 / 1

Re: Нужна помощь по js и php в шаблоне

« Ответ #6 : 27.08.2012, 20:11:42 »

Попробовал обновлённый скрипт. не работает. Но заработал после небольших изменений. Большое спасибо buyanov. Вы дали мне недостающее звено. Вот окончательный текст:

Спойлер

[свернуть]

Про изменение размера окна мне думать ещё рановато. Дай Бог, что бы всё заработало в нормальном окне. А работает не всё. Хотя теперь в <head> прописывается нужный стиль, счастья не случилось.

Суть проблемы. Мне нужно было подогнать размер страницы под размер окна браузера. С шириной ни каких проблем. С высотой сложнее. Попробовал несколько методов на чистом CSS. Ни один не работает, так как мне нужно. В тырнете нашёл скрипт (который в начале темы). Всё заработало. Но в дизайн не вписывался стандартный ScrollBar. Решил заменить его с помощью JQuery плагина JScrollPane (пробовал и другие, но неудачно). С JScrollPane одна проблема - высота дива .scroll-pane должна быть жёстко задана в px в CSS, другие варианты не работают, пробовал. У меня же эта высота резиновая. Попробовал задать высоту не в таблице стилей, а в <head>. Работает. Нужная высота у меня уже расчитывалась скриптом, решил применить её и для .scroll-pane. Для этого и понадобилось исправлять скрипт. Скрипт общими усилиями исправили. Он работает отлично, а вот JScrollPane - нет.

Собственно, проблема: если строка <style type="text/css"> #middle, .scroll-pane-right, .scroll-pane-left {height: 581px;} </style> прописывается в <head> вручную, всё нормально, а если с помощью скрипта (та же самая, с точностью до пробелов) - всё плохо, как в случае если высота не задана вообще. Такое ощущение, что JScrollPane инициализируется быстрее, чем высоту подсчитывает и прописывает скрипт. Но почему? Может, кто подскажет, в чём косяк и как с этим бороться? Спасибо.

Записан

NightGuard

Живу я здесь
2927
378 / 7
вжжж-вжжж

Re: Нужна помощь по js и php в шаблоне

« Ответ #7 : 27.08.2012, 20:36:14 »

Ну так поставьте задержку выполнения или грузите его внизу страницы, правда будет видно как подменяется бар, но можно задержку поставить на показ контента, это так, топорное решение.

Записан

Идеология сверхпотребления более опасна для человечества, чем идеология гитлеровского тоталитаризма

vsenik

Осваиваюсь на форуме
21
2 / 1

Re: Нужна помощь по js и php в шаблоне

« Ответ #8 : 27.08.2012, 20:57:54 »

JScrollPane я и так поставил в конце страницы. Не помогло. А как сделать задержку не знаю, не силён в JS.

Скрипт грузится так:

Код

<script type="text/javascript">
    jQuery(function(){jQuery('.scroll-pane-right').jScrollPane({verticalDragMinHeight: 30, verticalDragMaxHeight: 30});});
</script>

« Последнее редактирование: 27.08.2012, 21:03:39 от vsenik »

Записан

vsenik

Осваиваюсь на форуме
21
2 / 1

Re: Нужна помощь по js и php в шаблоне

« Ответ #9 : 28.08.2012, 00:09:00 »

А как этот скрипт будет выглядеть, если его переписать с использованием JQuery?

Код

<script type="text/javascript">
   function findDimensions()
    {
           var height = 0;
            if(window.innerWidth)
                   height = window.innerHeight;
                else if(document.body && document.body.clientWidth)
                   height = document.body.clientHeight;
           var a = height - 135;
           var b = document.getElementsByTagName('head')[0];
           style = document.createElement('style');
           style.type = 'text/css';
           style.innerHTML = '#middle, .scroll-pane-right, .scroll-pane-left {height: ' + a + 'px;}';
           b.appendChild(style);
   }
   if (window.addEventListener)
              window.addEventListener("load", findDimensions, false);
   else if (window.attachEvent)
              window.attachEvent("onload", findDimensions);
</script>

Я заметил такую фигню: простейший скрипт на JS выполняется на порядок дольше, чем сложнейший JQuery плагин (JScrollPane 2.0) в несколько десятов кБ!

Записан

buyanov

Захожу иногда
188
29 / 1
Сайты 74

Re: Нужна помощь по js и php в шаблоне

« Ответ #10 : 28.08.2012, 01:46:41 »

Выполняется он быстрее, просто видимо разные события там(JQuery) DomReady а тут onLoad. Напишите конкретную задачу, прикинем Вам скрипт =)

Записан

Создание сайтов, интернет-магазинов, оптимизация, продвижение, хостинг, безопасность, лечение от вирусов - мой сайт, телега, Хостинг

Shustry

Moderator
6434
745 / 3

Re: Нужна помощь по js и php в шаблоне

« Ответ #11 : 28.08.2012, 07:36:12 »

На JQ это можно сделать так:

Код: javascript

$(document).ready(function(){
  var cheight = $(document).height();
  $('.mydiv').height(cheight - 135);
  $(window).resize(function(){
     var cheight = $(document).height();
     $('.mydiv').height(cheight - 135);
  });
});

Можно и в отдельную функцию сперва вынести, а потом инициализировать при домреди и при ресайзе, для перфекционистов. А вообще, есть подозрение, что ваша задача средствами обычной вёрстки решается. У вас приращение высоты линейное. Тут по-моему js не нужен.

Записан

vsenik

Осваиваюсь на форуме
21
2 / 1

Re: Нужна помощь по js и php в шаблоне

« Ответ #12 : 30.08.2012, 22:39:47 »

В общем, сделал я, что хотел. С помощью JQuery. Всё оказалось до безобразия просто. И о ресайзе позаботился, хотя и не перфекционист. Всё работает отлично. Только сейчас начал понимать, какую чушь нёс раньше. Спасибо всем кто откликнулся. Окончательный скрипт:

Код

<script type="text/javascript">
    $(document).ready(function(){
        var h = $(window).height();
        $('#middle').height(h-135);
        $('.scroll-pane').height(h-135);
    });
    $(window).resize(function(){setTimeout('window.location.reload()',0);});
</script>

PS: Начал изучать JQuery! Охренеть! Ещё не так давно я начал изучать Joomla, чтобы без лишних заморочек сделать себе простенький сайт...

Записан

Картинка в шаблоне Автор Alkor94	Ответов: 13 Просмотров: 3928	23.05.2018, 03:04:28 от Alkor94
Добавить позицию модуля в шаблоне traction Автор amaddeus	Ответов: 1 Просмотров: 2939	27.04.2017, 22:23:31 от darkghost
Не работает mega menu в шаблоне sj_jare Автор premisse	Ответов: 5 Просмотров: 4940	28.02.2017, 21:35:24 от ddenov
Save failed в шаблоне YOO Nano3 Автор svarg	Ответов: 8 Просмотров: 4609	06.01.2017, 18:34:00 от mogylshik
Решено: Социальные иконки в шаблоне Yoo Radiance Автор Virocracy	Ответов: 7 Просмотров: 6035	26.07.2016, 18:03:04 от OFFlineby

Нужна помощь по js и php в шаблоне - Joomla 2.5: Шаблоны, разметка и макеты вывода

Новости Joomla

👩‍💻 Компонент "CS Афиши" для Joomla.

Яндекс выпустил инструмент Видимость сайта в Алисе AI.

👩‍💻 ИИ-админ для Joomla ближе, чем вы думаете: Joomla MCP.

vsenik

Нужна помощь по js и php в шаблоне

buyanov

Re: Нужна помощь по js и php в шаблоне

vsenik

Re: Нужна помощь по js и php в шаблоне

buyanov

Re: Нужна помощь по js и php в шаблоне

buyanov

Re: Нужна помощь по js и php в шаблоне

vsenik

Re: Нужна помощь по js и php в шаблоне

vsenik

Re: Нужна помощь по js и php в шаблоне

NightGuard

Re: Нужна помощь по js и php в шаблоне

vsenik

Re: Нужна помощь по js и php в шаблоне

vsenik

Re: Нужна помощь по js и php в шаблоне

buyanov

Re: Нужна помощь по js и php в шаблоне

Shustry

Re: Нужна помощь по js и php в шаблоне

vsenik

Re: Нужна помощь по js и php в шаблоне

Похожие темы