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

У мене є завдання:
_________________

Є 2-х стовпчик шаблон bootstrap: Контент + Правий модуль.
Контенту на сторінці буває багато. А ось в модулів всього пара штук по 200 пікселів заввишки.
Після прокрутки частини контенту модулі пропадають. І залишається під ними пусте поле до самого низу сторінки * (кінця контенту).
---------------------------

Підкажіть, хто знає:
Як дізнатися, що модулі по ходу прокрутки виявилися за межами екрану, щоб задати контенту 100% ширини?
І чи можливо таке в принципі?

  • Як визначити, що елемент знаходиться за видимими межами браузера
  • Стара гвардія
  • 1 899 повідомлень
    • З *** гонець? Гонець з Пензи. Ні - реальний гонець!

    madcap. дивись в сторону плаваючого (прилипаючого) меню, на Хабре є таке та й багато де. Тільки я б не став робити 100% ширини, тому що основний блок стане ширше і контент перетече вгору. Друге (не завжди критично) - при зміні ширини цілком можливо, що доведеться перераховувати слайдери, що входять до складу основного блоку.

  • Як визначити, що елемент знаходиться за видимими межами браузера
  • активний учасник
  • 1 288 повідомлень
  • Вирішували цю проблему. Ідею та вихідні тирілі у ВКонтакте. Там в групах так само реалізовано.
    Тобто контент + правий сайд бар. Після прокрутки сайд бар йде вгору за межі екрану, а контент розширювався на ширину сайд бару правого.
    Початкових кодів на жаль немає, немає доступу.

  • Як визначити, що елемент знаходиться за видимими межами браузера
  • Стара гвардія
  • 741 повідомлень
  • ВКонтакте. Там в групах так само реалізовано

    Дякую за чудову ідею.

    p.s. Шкода, що вони все на чистому JS без Jquery написали (було б менше коду).

    p.p.s. Поки тільки визначення координат елемента на екрані знайшов. Думаю тепер буде простіше.
    Кому цікаво, то ось:

  • Як визначити, що елемент знаходиться за видимими межами браузера
  • Стара гвардія
  • 1 899 повідомлень
    • З *** гонець? Гонець з Пензи. Ні - реальний гонець!
  • Як визначити, що елемент знаходиться за видимими межами браузера
  • Стара гвардія
  • 741 повідомлень
  • Як визначити, що елемент знаходиться за видимими межами браузера
  • активний учасник
  • 1 288 повідомлень
  • Здається це не те.

    Просто треба злегка допив (1 варіант). І по феншую треба style -> class.

    Інструктор по щастю

  • Як визначити, що елемент знаходиться за видимими межами браузера
  • засновник
  • 1 279 повідомлень
  • Ну тут все просто. Дивимося на jquery, що при скролінгу ми досягли кінця блоку зліва. Можна по різному вважати. Можна в нього (в правий блок) увіткнути елемент, спеціально для цього. Можна порахувати положення правого елемента + його висоту (якщо там є картинки, то потрібно вважати після завантаження всіх картинок), і т.п.
    Все це вважається всередині ось цього:
    Як тільки умова виповнилося, присвоюємо правій колонці який-небудь клас інший, або приховуємо праву колонку, або і те й інше разом. ну тут треба дивитися, як влаштовано там все в html - як блоки зроблені і як потрібно. Зізнаюся, коли контент, як в Контактика розширюється, це зло. Хоча, може бути комусь подобається

    Ну і коли скролл поповз вгору, потрібно не забути повернути все як було.
    І так, потрібно не забувати щось перераховувати при ресайз вікна.
    І треба не забути, що для мобільної версії (тобто вузького вікна) все це робити не потрібно.

    На вскидку, я б робив так - блок просто притиснув би float: right, налаштував би йому margin'и. і не парився б з цим ява скриптом і збоченнями. Якраз - все що на рівні з ним, як раз було б по ширині менше, все що нижче нього, вийшло б на 100% ширини. А для маленьких екранів в стилях media просто вказати якесь інше позиціонування (без флоат, наприклад). Просто і сердито)))

    Є речі получше качалки, сноуборду. віндсерфінгу. кайтсерфінгу, роликів. батута. танців. Але я про них ніколи не чув
    Серйозні сайти розміщую на VPS. прості в TimeWeb. Старі, більш непотрібні мені сайти я продаю на Телдері. Бухгалтерію і звіти в податкову за мене робить Ельба.

  • Як визначити, що елемент знаходиться за видимими межами браузера
  • активний учасник
  • 1 288 повідомлень
  • Мета - розширити основний контент по ширині "від вуха до вуха", коли не помітні бічні модулі

    Це так макет. Доопрацювати CSS і пару рядків коду прибрати можна. Напевно ще можна сам скрипт оптимізувати

  • Як визначити, що елемент знаходиться за видимими межами браузера
  • Стара гвардія
  • 1 899 повідомлень
    • З *** гонець? Гонець з Пензи. Ні - реальний гонець!

    Просто треба злегка допив (1 варіант). І по феншую треба style -> class.

    Ага, я приклад дав для визначення умов, а що всередині напишіть - ваша справа: чи буде він доливати або розширюватися контент.
    Що гойдається стилів і класів, то стилями краще, тому що на них можна навішувати будь-яку анімацію, типу плавне розширення, а для seo в даному випадку воно все одно як.
    KaSH правильно розписав мої побоювання за перерахунок нутрощів і дав непоганий варіант з margin.

    Інструктор по щастю

  • Як визначити, що елемент знаходиться за видимими межами браузера
  • засновник
  • 1 279 повідомлень
  • Ось, тут як раз криється засада невелика Навіть не одна.

    1. Там задані чіткі значення ширини. І, значення висоти, за яким відбувається подія, воно вважається в самому початку, при завантаженні.
    І якщо висота завжди фіксована (що логічно, якщо ширина фіксована), це працює.
    Але якщо ширина блоку залежить від розміру вікна? Значить, з великою ймовірністю, і висота буде залежати від розміру вікна.
    І треба не забувати перераховувати це при ресайз вікна.
    Інакше, буде не красиво (не смертельно, але не по фен-шую).
    З огляду на, що ТС сказав, що у нього блоки bootstrap - припускаю, що залежність ширини від розміру екрана все ж є

    2. Блок зліва. Як тільки у блоку зліва ширина змінюється контент вписується в цей блок і. і на рівні цієї самої заданої висоти виявляється не та строчка, яка була при колишньої ширині блоку, а строчка, яка була при колишньої ширині далі.
    Залежно від контенту, це може дикою дратувати користувача, так як він ризикує просто пропустити шматок.
    Тобто в ідеалі, потрібно не просто ширину поміняти, але ще і сторінку проскролліть до якоїсь певної позначки при цьому. Як в ВК.

    Господар, звичайно, пан. Але, з огляду на вищенаписане, я б постарався уникнути такого рішення в принципі.

    Є речі получше качалки, сноуборду. віндсерфінгу. кайтсерфінгу, роликів. батута. танців. Але я про них ніколи не чув
    Серйозні сайти розміщую на VPS. прості в TimeWeb. Старі, більш непотрібні мені сайти я продаю на Телдері. Бухгалтерію і звіти в податкову за мене робить Ельба.

  • Як визначити, що елемент знаходиться за видимими межами браузера
  • активний учасник
  • 1 288 повідомлень
  • Та ще по скролинг можна подумати, що б Контент не упригівал вгору при розширенні.
    Решта питання напилка.

    Флоут то ще зло
    Є теж нюанси. При маліньікіх в висоту блоків в контенті, буде нормально виглядати. А якщо при великих висоту, то буде пусте місце з'являтися під лівим сайдбарі. Це порожнеча буде постійно змінюватися по площі при оновленні контенту (якщо динамічний контент).

    Це вже конкретно на "пацієнта" дивитися треба. Що більш гармонійно буде.

    Теж ЗА якомога менше скриптів використовувати

    Схожі теми

    Кількість користувачів, Новомосковскющіх цю тему: 0

    0 користувачів, 0 гостей, 0 анонімних

    Відповісти цитованим повідомленням Очистити

    Всі матеріали SEO форуму дозволені до копіювання тільки з установкою гіперактивної посилання на webimho.ru,
    тим, хто цього не зробить, ми відірвемо руки і ноги і поміняємо місцями,
    а коли вийдемо з в'язниці, знову відірвемо і знову поміняємо.

    Росія. м. Київ