Колонки одной высоты в WP с помощью js

**5NUM** · 24.03.2012 17:43

Для реализации хочу использовать скрипт js
Есть 2 файла.
1-й: equalHeight
В этом указываются блоки с колонками для выравнивания (#content, #sidebar):

Код:

$(document).ready(function() {
 function setEqualHeight(columns)
 {
 var tallestcolumn = 0;
 columns.each(
 function()
 {
 currentHeight = $(this).height();
 if(currentHeight > tallestcolumn)
 {
 tallestcolumn  = currentHeight;
 }
 }
 );
 columns.height(tallestcolumn);
 }
 setEqualHeight($("#content,#sidebar"));
});

и 2-й: jquery-1.5.min

Подключаю всё вроде правильно:
Например в файле header.php в тэге head вставляю:

Код:

<script src="js/jquery-1.5.min.js" type="text/javascript"></script>
<script src="js/equalHeight.js" type="text/javascript"></script>

Ничего не работает. В чём глюк?

**c0ns0l3** · 24.03.2012 17:50

5NUM, честно, судя из скрипта - непонятно для чего ты подключаешь вообще equalHeight? Ты его не используешь, ты написал свою ф-цию по "выравниванию" высоты.
А почему не работает, надо пример.
А по факту просмотри логи, попиши переменные в console.log может где то просто ошибся, и P.S. высоту лучше указывать через .css('height': '**px');

**5NUM** · 24.03.2012 23:12

c0ns0l3, скрипт рабочий 100%, проверено на голом html.

При его подключении, проблема одинаковой высоты колонок решается раз и навсегда.
Вы же будете каждый раз, при изменении объёма контента той или иной колонки, править файл css.

Вопрос в том, в каком файле его подключать при использовании CMS, в частности WP.
Кто в курсе? Подскажите пожалуйста.

**Zvеr** · 24.03.2012 23:54

5NUM колонки одной высоты, а точнее их эмуляцию можно сделать и на чистом CSS, а решение на jQuery не совсем удачное т.к. во первых не у всех могут работать скрипты, во вторых пока jQuery не верстка будет "плавающей", а если он вообще не загрузиться из-за проблем с соединением :)

Подключить в WP его можно вставив в файл header.php вашей темы, при этом не нужно подключать jQuery, она уже вшита в WP, и еще весь вставляемый код должен быть строго после строки <?php wp_head(); ?>.
Подключение и все ошибки вы можете посмотреть в консоли с помощью FireBug(есть для Firefox и для Chrome), либо воспользовавшись подобными стандартными средствами браузера(Например, в Chrome - клик правой кнопкой мыши на странице -> Просмотр кода элемента -> Консоль).

**c0ns0l3** · 25.03.2012 01:57

5NUM,
Во первых.
Вы же будете каждый раз, при изменении объёма контента той или иной колонки, править файл css.
Нет, я имел в виду, через jQuery указывать CSS параметр на прямую. $.fn.css()
Во вторых.
Проверь, работает ли у тебя сейчас jQuery защищенном режиме? Попробуй сделать самый простой вариант - alert($), должно выдать модальное окно с кучей матюгов

Если же не выдаст, то у тебя в jQuery запущен в режиме "совместимости", попробуй потом заменить "$" на "jQuery" - это на прямую запрос в объекту будет. Он будет работать 100%.
А проще всего, дай лучше линк, куда ты хочешь прекрутить все это. Желательно в том вариенте, в который ты уже "прекрутил" и оно неработает...

---------- Сообщение добавлено 22:57 ---------- Предыдущее 22:46 ----------

5NUM,

Код:

<html>
    <head>
        <script src="http://code.jquery.com/jquery-latest.js"></script>
        <script type="text/javascript">
    	   $(document).ready(function(){
    	       function setEqualHeight(columns){
                     var tallestcolumn = 0;
                     columns.each(function(){
                        currentHeight = $(this).height();
                        if(currentHeight > tallestcolumn){
                            tallestcolumn  = currentHeight;
                        }
                     });
                    columns.height(tallestcolumn);
               }
               setEqualHeight($("#content,#sidebar"));
    	   });
        </script>
        <style>
            div {
                border: solid 1px gray;
                width: 100px;
                float: left;
            }
        </style>
    </head>
    
    <body>
        <div id="content">asdgas dgasdgas dgasgd asdg asdg asdg asdg asd asg asdgas dgasg asdg asdg asdg asdg </div>
        <div id="sidebar">as dgasd gasdg asd asd asdg asdg asdg asd gasdg asd</div>
    </body>
</html>

У меня работает по крайней мере...
Ищи проблему тогда в самом jQuery, проверь переменную $

**5NUM** · 25.03.2012 04:06

Сообщение от c0ns0l3

У меня работает по крайней мере...
Ищи проблему тогда в самом jQuery, проверь переменную $

У меня этот кусок тоже работает. А вот вставляю в header.php - нет.

Сообщение от c0ns0l3

Проверь, работает ли у тебя сейчас jQuery защищенном режиме? Попробуй сделать самый простой вариант - alert($), должно выдать модальное окно с кучей матюгов Если же не выдаст, то у тебя в jQuery запущен в режиме "совместимости", попробуй потом заменить "$" на "jQuery" - это на прямую запрос в объекту будет. Он будет работать 100%.

Можно с этого места поподробнее.

Firebug выдаёт в консоли следующее:

$ is not defined
... the page to get source for: http://wp1.net/wp-content/themes/default/js/equalHe...
equalHeight.js (строка 1)
Ожидается селектор. Набор правил проигнорирован из-за плохого селектора.
error source line:
$(document).ready(function() {

	24.03.2012 17:43 #1
5NUM Дипломник Регистрация: 31.01.2012 Сообщений: 163 Репутация: 17	Для реализации хочу использовать скрипт js Есть 2 файла. 1-й: equalHeight В этом указываются блоки с колонками для выравнивания (#content, #sidebar): Код: $(document).ready(function() { function setEqualHeight(columns) { var tallestcolumn = 0; columns.each( function() { currentHeight = $(this).height(); if(currentHeight > tallestcolumn) { tallestcolumn = currentHeight; } } ); columns.height(tallestcolumn); } setEqualHeight($("#content,#sidebar")); }); и 2-й: jquery-1.5.min Подключаю всё вроде правильно: Например в файле header.php в тэге head вставляю: Код: <script src="js/jquery-1.5.min.js" type="text/javascript"></script> <script src="js/equalHeight.js" type="text/javascript"></script> Ничего не работает. В чём глюк? Последний раз редактировалось 5NUM; 24.03.2012 в 17:45.
0 5NUM

	24.03.2012 17:50 #2
c0ns0l3 Новичок Регистрация: 20.03.2012 Сообщений: 10 Репутация: 0	5NUM, честно, судя из скрипта - непонятно для чего ты подключаешь вообще equalHeight? Ты его не используешь, ты написал свою ф-цию по "выравниванию" высоты. А почему не работает, надо пример. А по факту просмотри логи, попиши переменные в console.log может где то просто ошибся, и P.S. высоту лучше указывать через .css('height': '**px');
0 c0ns0l3

	24.03.2012 23:12 #3
5NUM Дипломник Регистрация: 31.01.2012 Сообщений: 163 Репутация: 17	c0ns0l3, скрипт рабочий 100%, проверено на голом html. При его подключении, проблема одинаковой высоты колонок решается раз и навсегда. Вы же будете каждый раз, при изменении объёма контента той или иной колонки, править файл css. Вопрос в том, в каком файле его подключать при использовании CMS, в частности WP. Кто в курсе? Подскажите пожалуйста. Последний раз редактировалось 5NUM; 24.03.2012 в 23:14.
0 5NUM

	25.03.2012 04:06 #6
5NUM Дипломник Регистрация: 31.01.2012 Сообщений: 163 Репутация: 17	Сообщение от c0ns0l3 У меня работает по крайней мере... Ищи проблему тогда в самом jQuery, проверь переменную $ У меня этот кусок тоже работает. А вот вставляю в header.php - нет. Сообщение от c0ns0l3 Проверь, работает ли у тебя сейчас jQuery защищенном режиме? Попробуй сделать самый простой вариант - alert($), должно выдать модальное окно с кучей матюгов Если же не выдаст, то у тебя в jQuery запущен в режиме "совместимости", попробуй потом заменить "$" на "jQuery" - это на прямую запрос в объекту будет. Он будет работать 100%. Можно с этого места поподробнее. Firebug выдаёт в консоли следующее: $ is not defined ... the page to get source for: http://wp1.net/wp-content/themes/default/js/equalHe... equalHeight.js (строка 1) Ожидается селектор. Набор правил проигнорирован из-за плохого селектора. error source line: $(document).ready(function() { Последний раз редактировалось 5NUM; 25.03.2012 в 04:15.
0 5NUM

Темы	Раздел	Ответов	Последний пост
Новости 2 колонки DLE	Web программирование	1	12.03.2012 02:51
как сделать чтобы 1 запись выводилась на всю ширину, а остальные под ней в 2 колонки в wp	Web программирование	0	15.02.2012 23:01
Разбиваем контент в произвольных записях и страницах WordPress на колонки при помощи шорткода	Web программирование	0	13.07.2011 13:33
Разбиваем контент в произвольных записях и страницах WordPress на колонки при помощи шорткода	Дайджест блогосферы	0	13.07.2011 13:33

Колонки одной высоты в WP с помощью js

Опции темы

Спасибо сказали:

Спасибо сказали:

Тэги топика:

Похожие темы

Новости 2 колонки DLE

как сделать чтобы 1 запись выводилась на всю ширину, а остальные под ней в 2 колонки в wp

Разбиваем контент в произвольных записях и страницах WordPress на колонки при помощи шорткода

Разбиваем контент в произвольных записях и страницах WordPress на колонки при помощи шорткода

Тем:

Сообщений:

Пользователей:

Сейчас на сайте:

Вход

Сайт

Разделы

Прочее

Следите за нами

Витрина ссылок

У нас проходит

У кого попросить инвайт?

Золотые темы форума

Последние новости

Популярные темы

Информеры