Форум программистов, компьютерный форум, киберфорум
Наши страницы
HTML, CSS
Войти
Регистрация
Восстановить пароль
 
 
Рейтинг 4.65/23: Рейтинг темы: голосов - 23, средняя оценка - 4.65
monax_111
1 / 1 / 0
Регистрация: 06.07.2014
Сообщений: 61
1

Выезжающий блок справа

17.10.2014, 22:53. Просмотров 4359. Ответов 21
Метки нет (Все метки)

Люди добрые подскажите пожалуйста:
я хочу сделать выезжающий блок(roof_help) справа, когда на него наводят мышкой;
блок я уже сдел и когда я его смещаю как бы "за экран" (у меня он 1920px) с помощью jqeary
Javascript
1
2
doc_w = $(document).width();
$('.roof_help').css({'left':(doc_w*0.9)+'px'})
но не до конца, а что бы кончал кончик, в который я вставлю картинку или еще что-нить, на что пользователь будет наводить, что бы он выехал полностью!

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

CSS
1
2
3
body{z-index: 1;margin:0px; }
.roof{z-index: 2;text-align: center;color: DodgerBlue; font-size: 200%; height:100px}
.roof_cell{z-index: 3;opacity: 1;background-color: white;display:block;position: absolute;text-align:center;margin:10px;}
0
Надоела реклама? Зарегистрируйтесь и она исчезнет полностью.
Similar
Эксперт
41792 / 34177 / 6122
Регистрация: 12.04.2006
Сообщений: 57,940
17.10.2014, 22:53
Ответы с готовыми решениями:

Выезжающий фиксированный блок внутри контента
Внутри блока с основным контентом нужна фиксированная кнопка при нажатии по...

Создать блок справа
Приветствую. Есть вот такой код меню навигации: <div class="nav"> <ul...

Расположить левый блок по центру страницы, а правый справа от него
Пока получилось только так <div> <div class="okno"> 213 </div> <div...

выезжающий подсказка
Приветствую всех! Хочу сделать следующие - выезжающию подсказку. при...

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

21
ludmila-sv
276 / 276 / 62
Регистрация: 28.08.2014
Сообщений: 432
21.10.2014, 19:36 21
А вы ему position назначьте. Без position свойство left работать не будет.
0
monax_111
1 / 1 / 0
Регистрация: 06.07.2014
Сообщений: 61
21.10.2014, 21:56  [ТС] 22
Нашел решение, всем спасибо - что вышло
HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
<html><body>
    <script type="text/javascript">
        widht_ing_info=110;
        doc_w = $(document).width();
        $('body').css({'max-width':doc_w})
    </script>
    <div class="roof">
        
        <div class="roof_info"><img src="/librarys/info.png" alt="альтернативный текст" height="100px" width="100px" align="right">тут вся информация о проекте!</div>
        <div class="roof_help"><img src="/librarys/help.png" alt="альтернативный текст" height="100px" width="100px" align="left">тут вы сможете найти все описание программы, а так же примеры использования!</div>
        
        <div class="roof_cell">Супер визуализация от Тима и МАши!</div> 
        
        
    </div>
    
    
    <script type="text/javascript">
        
        $(document).ready(function () {
            $('.roof_info').css({'right':(doc_w-widht_ing_info)+'px'}).width(doc_w).hover(
            function () {
                $(this).css({'right':widht_ing_info+'px'});
            },
            function () {
                $(this).css({'right':(doc_w-widht_ing_info)+'px'})
            })
            $('.roof_help').css({'left':(doc_w-widht_ing_info)+'px'}).width(doc_w).hover(
            function () {
                $(this).css({'left':widht_ing_info+'px'});
            },
            function () {
                $(this).css({'left':(doc_w-widht_ing_info)+'px'})
            })
            
        })
    </script>   
</body>
</html>
CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
html{overflow:hidden}
body{z-index: 1;margin:0px; }
.roof_help {
    position: absolute;
    height: 100px;
    left: 100%;
    opacity: 1;background-color: white;text-align:center;margin:10px;
    transition-property: all;
    transition-duration: 2s;
    -webkit-transform: translate3d(0,0,0)
   }
   
   .roof_info{
    position: absolute;
    height: 100px;
    right: 100%;
    opacity: 1;background-color: white;text-align:center;margin:10px;
    transition-property: all;
    transition-duration: 2s;
    -webkit-transform: translate3d(0,0,0)
   }
0
21.10.2014, 21:56
MoreAnswers
Эксперт
37091 / 29110 / 5898
Регистрация: 17.06.2006
Сообщений: 43,301
21.10.2014, 21:56

Выезжающий текст к при наведении на картинку
Есть картинка, она расположена статично на странице( не исключительно слева как...

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

Прокрутка справа
Приветствую всех. Делаю первую в своей жизни верстку :) Столкнулся с...


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
22
Ответ Создать тему
Опции темы

КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin® Version 3.8.9
Copyright ©2000 - 2018, vBulletin Solutions, Inc.
Рейтинг@Mail.ru