Вебмастер :: Форум начинающих web разработчиков

Информация о пользователе

Привет, Гость! Войдите или зарегистрируйтесь.

Вы здесь » Вебмастер :: Форум начинающих web разработчиков » PHP » Сделать активным поле ввода текста input[type=text] в скрипте с интера

Сделать активным поле ввода текста input[type=text] в скрипте с интера

Страница: 1

Сообщений 1 страница 5 из 5

1

  • Автор: Ron2
  • Втягивающийся
  • Зарегистрирован: 2017-05-01
  • Приглашений: 0
  • Сообщений: 14
  • Уважение: [+0/-0]
  • Позитив: [+0/-0]
  • Провел на форуме:
    1 час 1 минуту
  • Последний визит:
    2020-10-06 06:06:48

Здравствуйте.
Нужна такая помощь:
У меня на странице сайта имеется фоновая интерактивная заставка (скрипт "паралакс") с прозрачностью этого "слоя" opacity: 0.3; , перед ним расположена таблица, где в нескольких ячейках находится поле ввода текста (тоже скрипт), после которого расположена кнопка перехода на адрес, указанный в текстовом поле. Все нормально работает, только вот я не могу ввести в текстовое поле никакие символы, т.к. фон является первым (полупрозрачным) слоем, и блокирует ввод символов.
Я не могу подобрать правильный синтаксис команды для z-index в скрипте, пробовал назначить отдельно текстовое поле input[type=text] верхним слоем (#input { z-index: 9999; }), но что то не выходит, хотя для div.wrapper оно нормально назначается. Ниже приведу фрагмент скрипта на странице, может поможете подобрать правильную команду для input[type=text], что бы оно было редактируемым.

* Не предлагайте назначить верхним слоем div.wrapper, после чего текст конечно спокойно вводится, но только вот все интерактивные свойства фоновой заставки, сразу перестают работать.

<style>
#input { z-index: 9999; }
* {
border: 0;
margin: 0;
padding: 0;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
div.wrapper {
width: 500px;
height: 260px;
margin: 0 auto;
padding: 0px;
border-radius: 10px;
background: -moz-linear-gradient(top, #387ECF 0%, #A3CAE8 100%);
background: -ms-lznear-gradient(top, #387ECF 0%, #A3CAE8 100%);
background: -o-linear-gradient(top, #387ECF 0%, #A3CAE8 100%);
background: -webkit-linear-gradient(top, #387ECF 0%, #A3CAE8 100%);
background: linear-gradient(top, #387ECF 0%, #A3CAE8 100%);
color: #fff;
box-shadow: 5px 7px 12px #0298F8;
overflow: auto;
}
input[type=text] {
padding: 3px;
margin: 0px;
border-radius: 20px 20px 20px 3px;
box-shadow: 0px 0px 3px #000 inset;
font-weight: bold;
font-style: normal;
font-size: 14px;
background: -moz-linear-gradient(top, #387ECF 0%, #A3CAE8 100%);
background: -ms-linear-gradient(top, #387ECF 0%, #A3CAE8 100%);
background: -o-linear-gradient(top, #387ECF 0%, #A3CAE8 100%);
background: -webkit-linear-gradient(top, #fff 0%, #A3CAE8 100%);
background: linear-gradient(top, #387ECF 0%, #A3CAE8 100%);
color: #111;
}
input[type=text]:hover {
box-shadow: 5px 7px 12px #000, 0px 0px 3px #fff;
}
input[type=button] {
padding: 3px;
margin: 0px;
border-radius: 20px 20px 20px 20px;
box-shadow: 0px 0px 3px #000 inset;
font-weight: bold;
font-style: normal;
font-size: 14px;
background: -moz-linear-gradient(top, #387ECF 0%, #A3CAE8 100%);
background: -ms-linear-gradient(top, #387ECF 0%, #A3CAE8 100%);
background: -o-linear-gradient(top, #387ECF 0%, #A3CAE8 100%);
background: -webkit-linear-gradient(top, #387ECF 0%, #A3CAE8 100%);
background: linear-gradient(top, #387ECF 0%, #A3CAE8 100%);
color: #fff;
}
input[type=button]:hover {
box-shadow: 5px 7px 12px #000, 0px 0px 3px #111;
}
</style>

0

2

  • Автор: yiiconf2017
  • Освоившийся
  • Зарегистрирован: 2017-05-12
  • Приглашений: 0
  • Сообщений: 3
  • Уважение: [+0/-0]
  • Позитив: [+0/-0]
  • Провел на форуме:
    2 минуты
  • Последний визит:
    2017-05-12 09:45:44

Можно поподробнее пожалуйста

0

3

  • Автор: Ron2
  • Втягивающийся
  • Зарегистрирован: 2017-05-01
  • Приглашений: 0
  • Сообщений: 14
  • Уважение: [+0/-0]
  • Позитив: [+0/-0]
  • Провел на форуме:
    1 час 1 минуту
  • Последний визит:
    2020-10-06 06:06:48

В общем после долгих стараний, мне все таки удалось совместить панорамный вьюер с скриптом увеличения картинки на странице сайта, при наведении на нее курсора мыши.
Только вот возникла следующая проблема с отображением картинки на экране, а т.е. теперь при наведении курсора, панорамный вьюер и скрипт увеличения картинки, обеспечивают одновременно панорамный просмотр и увеличение ее размера внутри маленького "окна" с уходом части изображения в невидимую зону (т.е.в изначальном поле картинки с размером 300х169px) а мне нужно что бы это поле расширялось на странице до 600х400px. И желательно класс картинки class="panorama" поменять на class="catalog_view watermark", т.к. у меня на этот класс завязан на водный знак для каждого фото.

<link href="jquery.panorama.css" rel="stylesheet" />
<script src="jquery-1.4.2.min.js"></script>
<script src="jquery.panorama.js"></script>
<a class="test" href="javascript:">
<div class="sdf"><img src="1.jpg" class="panorama"></div><style>
a.test .sdf img{width:300px;height:169px;}
a.test:hover .sdf{width:300px;height:169px;overflow:visible;visibility:hidden;}
a.test:hover .sdf img{visibility:visible;width:600px;height:400px;position:absolute;z-index:150;}
</style>

Вот здесь расположены исходники и полное описание простого панарамного вьюера: http://xiper.net/collect/web-without-fl … y-panorama
А вот пример конкретно этого кода этого скрипта увеличения картинки, который прописан у меня на временном сайте:
http://trud.kish-host.ru/1/index.htm

Так же автор вьюера указывает, что можно включить дополнительно и вертикальный просмотр "-нет возможности обзора вверх-вниз (эти возможности несложно добавить, если тебе хотя бы немного знаком Javascript и jQuery)". А я вот очень плохо с ними знаком, что бы добавить в эти скрипты полноценный 3D просмотр сферических панорам.
Вот поэтому помогите пожалуйста доработать эту систему до ума. Т.к. остался последний штрих к полноценному ее функционированию, а я больше дизайнер, чем программист. Буду очень признателен.

0

4

  • Автор: Dikkin
  • Активный
  • Dikkin
  • Зарегистрирован: 2021-10-11
  • Приглашений: 0
  • Сообщений: 24
  • Уважение: [+0/-0]
  • Позитив: [+0/-0]
  • Провел на форуме:
    1 час 58 минут
  • Последний визит:
    2023-05-18 18:44:16

Решили проблему?

0

5

  • Автор: Lola
  • Активный
  • Lola
  • Зарегистрирован: 2021-10-12
  • Приглашений: 0
  • Сообщений: 24
  • Уважение: [+0/-0]
  • Позитив: [+0/-0]
  • Провел на форуме:
    1 час 39 минут
  • Последний визит:
    2023-05-17 19:57:39

Наверно всё получилось.

0

Страница: 1

Вы здесь » Вебмастер :: Форум начинающих web разработчиков » PHP » Сделать активным поле ввода текста input[type=text] в скрипте с интера

Рейтинг форумов | Создать форум бесплатно