вопрос по overflow - hidden

[chiffenok]

Добрый вечер есть 2 похожие проблемы связаные с overflow - hidden

Моя ссылка на работу

1 Это меню в шапке. Так как сайт делается на цмс то нужно скрывать пункты которые не влазиют по ширине, обычно я это делаю это с помощью overflow - hidden для родительского элемента (на моем примере это ul с class="b-menu")но если я поставлю списку overflow - hidden , то у меня скроется и саб меню которое появляется при наведении на пункт меню например "Оптовикам" или "Компаниям"

2 В самом низу есть блок Планируем поступления в котором пока токо один товар(но естествено их будет больше), внутри блока товара есть ссылка "сообщить о поступлении" по нажатию на которую возникает не большая форма(сейчас я пока просто показала функионал не стала прекриплять действие по клику) прикладываю скрин что было нагляднее

,

, где нужно заполнить свой емэйл. Но обертка от карусели скрывает эту форму, а без overflow - hidden в карусели ни как не обойтисью Что можно сделать?

Причем такая форма должна лежать в каждом блоке товара (li с классом b-product)

пробовала уже overflow-x - hidden не помогло(

Edited December 3, 2012 by chiffenok

[Николя223]

2)что то вы там намудрили... я ужу пятый раз перечитываю ваш вопрос и просматриваю сайт и ничего не могу понять)))))

если я правильно понял, то по второму пункту в форме измените для первого li, left и bottom на 6px(чтобы чтобы тень не терялась) а обертка перекрывает форму - потому что ul - имеет длину всего лишь 300px (но в конечном итоге оно же будет больше), но там проблемма встанет с последним пунктом

Думаю что то другое можно придумать с вашей формой

1)а здесь я вообще ничего не понял ((( поподробнее )) какое меню

Edited December 2, 2012 by Николя223

[chiffenok]

обновила описание вопроса, надеюсь так понятнее)

[SelenIT]

Как вариант — убрать position: relative у дива с классом jcarousel-clip и ul в нем. Правда, тогда координаты формы будут отсчитываться от внешнего дива jcarousel-container, но для вертикальной координаты это вроде как не помеха, а горизонтальную можно не указывать вообще (по умолчанию абсолютные элементы позиционируются там, где они были бы в потоке). Но обрезаться форма перестанет.

[Vadimka]

тебе принципиально важно чтобы форма выводилась внизу под блоком? если нет то как вариант выводи её в самом блоке поверх пункта к которому она относится

[chiffenok]

Как вариант — убрать position: relative у дива с классом jcarousel-clip и ul в нем. Правда, тогда координаты формы будут отсчитываться от внешнего дива jcarousel-container, но для вертикальной координаты это вроде как не помеха, а горизонтальную можно не указывать вообще (по умолчанию абсолютные элементы позиционируются там, где они были бы в потоке). Но обрезаться форма перестанет.

что-то я не понимаю , я залезла в скрипт убрала то что говорите но все равно обрезается

обновленная верстка

вот посмотрите верстку, сейчас не обрезается токо потому что я поставила падинг у jcarousel-clip, но если посмотреть крайний правый продукт то все равно видно что обрезается или убрать этот падинг,

к сожалению падинг-райт я так не могу поставить

upd: вот сейчас еще убрала еще у li position: relative , заработало но токо вот прокрутка карусели не работает без position: relative у дива с классом jcarousel-clip

Edited December 3, 2012 by chiffenok

[Vadimka]

к сожалению не смог посмотреть как у вас карусель перемещает блоки. сдвигая весь список или перемещая первый элемент в конец?

если перекидывает первый назад можно как выход сделать таким образом как на картинке, всплывающей форме 4 элемента задать стиль чтобы он выглядел так через :nth-of-type(4) в css или через js

[chiffenok]

карусель вот эта источник

нет она сдвигает весь список

[Vadimka]

хмм...лично мне в голову решений мало приходит, либо выносить эту форму за блок с оверфлоу, либо у 4 элемента в списке всплывающая форма должна быть сдвинута влево (а тут с данным скриптом только через js сделать так можно)

[chiffenok]

да можно было бы даже через js но так дело то в том что сдвинута форма не у четвертого элемента в списке а поледнего в контейнере jcarousel-clip это может быть и 5 и 6 и т.д, как это это сделать я не знаю, пришло на ум токо то что у всех элементов после 3 сдвигать эту форму, но тут если человек прокрутит карусель в самый конец ну например из 8 элементов состоящих то получится что все формы сдинуты

[SelenIT]

Высота формы вроде фиксированная. Может, попробовать задать .jcarousel-clip'у еще больший нижний padding (чтобы форма могла на него «налезть»), и компенсировать это отрицательным нижним margin-ом общего контейнера галереи?

Хотя вообще, имхо, вынести форму за карусель логично. Внутри карусели можно оставить только радиокнопку с id интересующего товара, а поле email-а и кнопка отправки пусть будет одна на всех...

[Vadimka]

через js можно просто присвоить 4 элементу класс который будет отвечать за то всплывающая форма элемента с этим классом будет смещена влево, и при клике на навигационные кнопки этот класс будет удалятся у элемента и присваиваться следующему или предыдущему в зависимости куда вы крутите карусель. скрипт сам по себе не сложный но мне кажется всё же стоит вынести за контейнер форму, скриптами сайт перегружать не стоит думаю

[chiffenok]

Высота формы вроде фиксированная. Может, попробовать задать .jcarousel-clip'у еще больший нижний padding (чтобы форма могла на него «налезть»), и компенсировать это отрицательным нижним margin-ом общего контейнера галереи?

так вроде щяс так и сделано .b-products__all компесирует этот падинг, но дело то в том что крайняя форма все равно обрезается, или я не правильно поняла?

Хотя вообще, имхо, вынести форму за карусель логично. Внутри карусели можно оставить только радиокнопку с id интересующего товара, а поле email-а и кнопка отправки пусть будет одна на всех...

да я уже думала на эту тему, по требованиям мне сказали что нельзя так(

[Vadimka]

раз сказали...то..хм..

$(document).ready(function() {

    $('.jcarousel-list .b-product:nth-of-type(4)').addClass('fourth');

    $('.jcarousel-prev').click(function(){
        if($(this).hasClass('jcarousel-prev-disabled')) {
            return false;
        }
        else {
            $('.jcarousel-list .fourth').removeClass('fourth').next('li').addClass('fourth')
        }
    })

    $('.jcarousel-next').click(function(){
        if($(this).hasClass('jcarousel-next-disabled')) {
            return false;
        }
        else {
            $('.jcarousel-list .fourth').removeClass('fourth').prev('li').addClass('fourth')
        }
    })

});

и добавить в css

.fourth .b-product__report-form:after {
  left: 106px;
}
.fourth .b-product__report-form {
  left: -116px;
}

вот скриптик небольшой. принцип работы - загрузилась страница, 4 блоку в списке карусели присвоился класс fourth (для формы внутри него сделал смещение)

при клике на кнопку дальше он присваивается следущему блоку предварительно удалившись у предыдущего аналогично с кнопкой назад.

если список подошёл к концу, кнопке дальше или назад присваивается класс jcarousel-next-disabled это уже делает скрипт карусели а мой проверяет если есть такой класс то он больше не присваивает класс fourth дальше или назад в зависимости куда мы листали. проверьте у себя

Edited December 3, 2012 by Vadimka

[chiffenok]

вот скриптик небольшой. принцип работы - загрузилась страница, 4 блоку в списке карусели присвоился класс fourth (для формы внутри него сделал смещение)

при клике на кнопку дальше он присваивается следущему блоку предварительно удалившись у предыдущего аналогично с кнопкой назад.

если список подошёл к концу, кнопке дальше или назад присваивается класс jcarousel-next-disabled это уже делает скрипт карусели а мой проверяет если есть такой класс то он больше не присваивает класс fourth дальше или назад в зависимости куда мы листали. проверьте у себя

блин да что такое(( почему то даже класс не добавляется ни как не могу понять почему(, ту страницу я обновила можете посмотреть

[Vadimka]

вот вам визуализировал класс fourth красным выделением, тут всё работет http://jsfiddle.net/3ht6M/

кроме условия, так как кнопка не присваивается "отключение"

странно, сохраняю вашу страницу на компьютер, со всеми картинками и скриптами, всё работает. вы кстати li.b-product position: relative; задайте ато всплывающая форма внутри fourth съезжает относительно всего контейнера а не родительского блока

[chiffenok]

я вот подумала, может это скрипт карусели не дает ему класс добавлять?

[Vadimka]

у меня не перекидывается класс fourth из за user.js если удалить всё содержимое и вставить мой скрипт то всё работает. то есть конфликт какой то в этом скрипте

В общем вставляю строку

$('.jcarousel-list .b-product:nth-of-type(4)').addClass('fourth');

в скрипт в начало , класс присваивается, но при клике на ссылку он не перебрасывается из за того что на этот клик ещё в другом месте функция назначена, вот в то место и надо вписывать это условие

        if($('.jcarousel-prev').hasClass('jcarousel-prev-disabled')) {
            return false;
        }
        else {
            $('.jcarousel-list .fourth').removeClass('fourth').next('li').addClass('fourth');
        }

для каждой из двух кнопок, это в скрипте карусели

[chiffenok]

ок я потестю через пару часов и отпишусь о результах, щяс мне нужно идти, кст большое спасибо)

[Vadimka]

ну немного невнимательно отнёсся к скрипту. изначально у нас голый список у которого есть свой id, в скрипте немного не верно обратился.

задайте списку ul, для которого написал скрипт id="overflow" И замените мой скрипт на этот

$('#overflow li:nth-of-type(4)').addClass('fourth');

    $('.jcarousel-prev').click(function(){
        if($('.jcarousel-prev').hasClass('jcarousel-prev-disabled')) {
            return false;
        }
        else {
            $('#overflow .fourth').removeClass('fourth').next('li').addClass('fourth');
        }
    });

    $('.jcarousel-next').click(function(){
        if($('.jcarousel-next').hasClass('jcarousel-next-disabled')) {
            return false;
        }
        else {
            $('#overflow .fourth').removeClass('fourth').prev('li').addClass('fourth');
        }
    });

нашёл ещё пару косяков в моём скрипте.будет вечером время переделаю, проблема с листанием назад получается с каруселью

Edited December 3, 2012 by Vadimka

[chiffenok]

ага я тоже сейчас посмотрела, он назначил класс fouth а когда нажимаешь на кнопку next он перезначает этот класс 3 элемнту списка хотя по идеии должен быть назначать 5 а на prev вообще не работает

Edited December 3, 2012 by chiffenok

[Vadimka]

$('#overflow li:nth-of-type(4)').addClass('fourth');

    $('.jcarousel-prev').click(function(){
        if($('.jcarousel-prev').hasClass('jcarousel-prev-disabled')) {
            return false;
        }
        else {
            $('#overflow .fourth').removeClass('fourth').prev('li').addClass('fourth');
        }
    });

    $('.jcarousel-next').click(function(){
        if($('.jcarousel-next').hasClass('jcarousel-next-disabled')) {
            return false;
        }
        else {
            $('#overflow .fourth').removeClass('fourth').next('li').addClass('fourth');
        }
    });

поменял местами .next и .prev , ошибся сперва. а кнопка назад не работает потому что изначально в кнопки назад стоит класс jcarousel-prev-disabled. по идее после перемещения вперёд этот класс удаляется и при нажатие Назад проверяет, нет класса и должно перемещать назад а не происходит этого.

[chiffenok]

$('#overflow li:nth-of-type(4)').addClass('fourth');

    $('.jcarousel-prev').click(function(){
        if($('.jcarousel-prev').hasClass('jcarousel-prev-disabled')) {
            return false;
        }
        else {
            $('#overflow .fourth').removeClass('fourth').prev('li').addClass('fourth');
        }
    });

    $('.jcarousel-next').click(function(){
        if($('.jcarousel-next').hasClass('jcarousel-next-disabled')) {
            return false;
        }
        else {
            $('#overflow .fourth').removeClass('fourth').next('li').addClass('fourth');
        }
    });

поменял местами .next и .prev , ошибся сперва. а кнопка назад не работает потому что изначально в кнопки назад стоит класс jcarousel-prev-disabled. по идее после перемещения вперёд этот класс удаляется и при нажатие Назад проверяет, нет класса и должно перемещать назад а не происходит этого.

но этот скрипт не работает и я кажется догадываюсь почему, не перемещает классы, у вас он работает?

Edited December 4, 2012 by chiffenok

[Vadimka]

скачал архив со скриптом на сайте что вы дали. поставил свой скрипт, работает всё кроме перелистывания назад, поскольку кнопке назад изначально задаётся класс jcarousel-prev-disabled. сейчас разгребусь на работе немного и скину то что у меня вышло

[Vadimka]

хм...вот результат

http://upwap.ru/2924961

в папке examples откройте static_multiple.html, на примере первой карусели увидите.здесь класс fourth присваивается 3 картинке, и видно красную рамку, при перелистывание вперёд и назад она остаётся у третьего из видимых блоков.скрипт подправил. в редакторе откройте тот же файл и увидите

<script type="text/javascript">

jQuery(document).ready(function() {
    // Initialise the first and second carousel by class selector.
	// Note that they use both the same configuration options (none in this case).
	jQuery('.first-and-second-carousel').jcarousel();

	// If you want to use a caoursel with different configuration options,
	// you have to initialise it seperately.
	// We do it by an id selector here.
	jQuery('#third-carousel').jcarousel({
        vertical: true
    });

  $('#first-carousel li:nth-of-type(3)').addClass('fourth');

  $('.jcarousel-prev').click(function(){
    if($(this).hasClass('jcarousel-prev-disabled')) {
      return false;
    }
    else {
      $('#first-carousel .fourth').removeClass('fourth').prev('li').addClass('fourth');
    }
  });

  $('.jcarousel-next').click(function(){
    if($(this).hasClass('jcarousel-next-disabled')) {
      return false;
    }
    else {
      $('#first-carousel .fourth').removeClass('fourth').next('li').addClass('fourth');
    }
  });

});

</script>

так, подработал скрипт для вашего сайте. у вас как я понял тот список в котором будут всплывающие формы находится в div с классом .b-products_new

такого класса больше нет? нужно чтобы список в котором будут всплывающие формы был в div с уникальным классом которого нет больше, и кнопки перелистывания тоже должны быть внутри этого div'a

у вас он .b-products_new, списку внутри него задайте id="overflow"

тогда скрипт ваш будет таков

jQuery(document).ready(function() {
      $('.b-products_new #overflow li:nth-of-type(4)').addClass('fourth');

      $('.b-products_new .jcarousel-prev').click(function(){
        if($(this).hasClass('jcarousel-prev-disabled')) {
          return false;
        }
        else {
          $('.b-products_new #overflow .fourth').removeClass('fourth').prev('li').addClass('fourth');
        }
      });

      $('.b-products_new .jcarousel-next').click(function(){
        if($(this).hasClass('jcarousel-next-disabled')) {
          return false;
        }
        else {
          $('.b-products_new #overflow .fourth').removeClass('fourth').next('li').addClass('fourth');
        }
      });
    });

вставьте в отдельный файл скрипта и подключите после остальных скриптов.

проверил у себя, работает

и ещё момент, по умолчанию скрипт карусели листает не по 1 картинке а по три, у вас изменено на 1, если вы измените скролинг на другое кол-во картинок, то мой скрипт надо будет переделать. а если остаётся листание по одной то всё ок.

Edited December 4, 2012 by Vadimka

[chiffenok]

так вот кнопки тоже дожны быть уникальными

ну да я щяс посмотрела вы тоже кнопки с помощью родительского класса переопрелили

я просто обратилась к ним через список со связкой parent().siblings('.jcarousel-next')

вот мой скрипт:

var listOv = $('#overflow'),
		btnNext = listOv.parent().siblings('.jcarousel-next'),
		btnPrev = listOv.parent().siblings('.jcarousel-prev');

    listOv.children().eq(3).addClass('fourth');

    btnNext.click(function(){
        if(btnNext.hasClass('jcarousel-next-disabled') != true ) {
            listOv.children('.fourth').removeClass('fourth').next('li').addClass('fourth');
        }
    });
    btnPrev.click(function(){
        if(btnPrev.hasClass('jcarousel-prev-disabled') != true ) {
            listOv.children('.fourth').removeClass('fourth').prev('li').addClass('fourth');
        }
    });

можете сейчас ту страницу я там обновила и все работает

Edited December 4, 2012 by chiffenok