Гость
Войти | Профиль | Очистить
Целевая тема:
Создать новую тему:
Автор:
Действия ...
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / Добавить к коду кнопки функцию Canvas / 11 сообщений из 11, страница 1 из 1
25.11.2015, 11:42
    #39112968
asdasd2131aa
asdasd2131aa
Гость
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Добавить к коду кнопки функцию Canvas
Сделал кнопку по образцу, но при попытке размножить их по сайту заметил, что они работают некорректно. При нажатии на любую из них, открывается окно первой. Полагаю, надо добавить функцию Canvas, но я плохо понимаю, как ее правильно добавить в код. HELP


Код: html
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.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.
51.
52.
53.
54.
55.
56.
57.
58.
59.
60.
61.
62.
63.
64.
65.
66.
67.
68.
69.
70.
71.
72.
73.
74.
75.
76.
77.
78.
79.
80.
81.
82.
83.
84.
85.
86.
87.
88.
89.
90.
91.
92.
93.
94.
95.
96.
97.
98.
99.
100.
101.
102.
103.
104.
105.
106.
107.
108.
109.
110.
111.
112.
113.
114.
115.
116.
117.
118.
119.
120.
121.
122.
123.
124.
125.
126.
127.
128.
129.
130.
131.
<html>
<head>
<meta http-equiv='Content-Type' content='text/html; charset=utf8'>
<link rel="stylesheet" href="http://wwwwww.ucoz.net/sss.css" type="text/css" />
<style type="text/css">
	
	#wrap{
		display: none;
		opacity: 0.8;
		position: fixed;
		left: 0;
		right: 0;
		top: 0;
		bottom: 0;
		padding: 16px;
		background-color: rgba(1, 1, 1, 0.725);
		z-index: 100;
		overflow: auto;
	}
	
	#window{
		width: 600px;
		height: auto;
		margin: 50px auto;
		display: none;
		background: #fff;
		z-index: 100;
		position: fixed;
		left: 0;
		right: 0;
		top: 0;
		bottom: 0;
		padding: 16px;
	}
	
	.close{
		margin-left: 530px;
		margin-top: 4px;
		cursor: pointer;
	}
	
</style>
</head>
<body>
		<script type="text/javascript">

					//Функция показа
			function show(state){

					document.getElementById('window').style.display = state;			
					document.getElementById('wrap').style.display = state; 			
			}
			
		</script>
					<!-- Задний прозрачный фон-->
		<div onclick="show('none')" id="wrap"></div>

					<!-- Само окно-->
			<div id="window">
						
						 <!-- Картинка крестика-->
				<img class="close" onclick="show('none')" src="http://sergey-oganesyan.ru/wp-content/uploads/2014/01/close.png">
					
			<p style="text-align: center;"><span style="font-size:24px;">Bluedio H+</span></p>

<br>

<br><br><br><p><span style="line-height: 18.9091px;">Удобным и многофукнциональным наушникам Bluedio H+ найдется применение практически везде. Вы можете использовать их для разговора (в наушниках есть встроенный микрофон с функцией шумоподавления) или для прослушивания музыки. Чистый звук и мощные басы позволят вам сполна насладиться любимыми произведениями, а наличие слота под MicroSD и встроенного радио позволяет использовать Bluedio H+ как самостоятельное устройство без синхронизации с телефоном.</span><br style="line-height: 18.9091px;" />
&nbsp;</p>

<table border="0" cellpadding="0" cellspacing="0" style="line-height: 18.9091px; width: 447px;">
	<tbody>
		<tr>
			<td style="height: 25px; width: 251px;">Версия bluetooth:</td>
			<td style="width: 196px;">4,1</td>
		</tr>
		<tr>
			<td style="height: 25px;">Рабочее расстояние:</td>
			<td>до 10 метров</td>
		</tr>
		<tr>
			<td style="height: 25px;">Bluetooth профили:</td>
			<td>A2DP, AVRCP, HFP, HSP</td>
		</tr>
		<tr>
			<td style="height: 25px;">Частотная ххарактеристика:</td>
			<td>20 Гц - 20 ГГц</td>
		</tr>
		<tr>
			<td style="height: 25px;">Время активной работы:</td>
			<td>45 часов</td>
		</tr>
		<tr>
			<td style="height: 25px;">Время ожидания:</td>
			<td>1625 часов</td>
		</tr>
		<tr>
			<td style="height: 25px;">Время зарядки:</td>
			<td>3 часа</td>
		</tr>
		<tr>
			<td style="height: 25px;">Коэф. искажений:</td>
			<td>&lt;0,1%</td>
		</tr>
		<tr>
			<td style="height: 25px;">Чувствительность:</td>
			<td>110 Дб</td>
		</tr>
		<tr>
			<td style="height: 25px;">Встроенный микрофон:</td>
			<td>Да</td>
		</tr>
		<tr>
			<td style="height: 25px;">Доп. функции:</td>
			<td>Радио, поддержка microSD</td>
		</tr>
	</tbody>
</table><br><br>
				<center>
							
					
				</center>
				
			</div>

		<center><button id = "canvas1" class="myButton" onclick="show('block')">О товаре</button></center>	
			
		</center>
		
</body>
</html>
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
25.11.2015, 12:25
    #39113011
kunaksergey
kunaksergey
Гость
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Добавить к коду кнопки функцию Canvas
asdasd2131aa,
Так ты кроме как статуса ничего не передаешь.
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
25.11.2015, 13:33
    #39113085
asdasd2131aa
asdasd2131aa
Гость
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Добавить к коду кнопки функцию Canvas
kunaksergey,
в каком смысле?
Более одной такой кнопки на сайте разместить нельзя? не верю.
Надо каждой присвоить индивидуальный ID, что бы они все корректно работали. Я почти уверен, что это возможно, только не знаю как.
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
26.11.2015, 10:10
    #39113776
kunaksergey
kunaksergey
Гость
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Добавить к коду кнопки функцию Canvas
asdasd2131aakunaksergey,
в каком смысле?
Более одной такой кнопки на сайте разместить нельзя? не верю.
Надо каждой присвоить индивидуальный ID, что бы они все корректно работали. Я почти уверен, что это возможно, только не знаю как.
это был намек.. передавайте или перехватывайте id элемента
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
26.11.2015, 11:44
    #39113856
asdasd2131aa
asdasd2131aa
Гость
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Добавить к коду кнопки функцию Canvas
kunaksergey,

В теории я понимаю, что надо делать, а на практике кнопка ломается, когда я начинаю ее трогать.
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
26.11.2015, 12:51
    #39113935
kunaksergey
kunaksergey
Гость
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Добавить к коду кнопки функцию Canvas
Сколько у тебя планируется быть товаров?
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
26.11.2015, 13:34
    #39113989
kunaksergey
kunaksergey
Гость
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Добавить к коду кнопки функцию Canvas
Код: html
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.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.
51.
52.
53.
54.
55.
56.
57.
58.
59.
60.
61.
62.
63.
64.
65.
66.
67.
68.
69.
70.
71.
72.
73.
74.
75.
76.
77.
78.
79.
80.
81.
82.
83.
84.
85.
86.
87.
88.
89.
90.
91.
92.
93.
94.
95.
96.
<html>
<head>
<meta http-equiv='Content-Type' content='text/html; charset=utf8'>
<link rel="stylesheet" href="http://wwwwww.ucoz.net/sss.css" type="text/css" />
<style type="text/css">
  
  #wrap{
    display: none;
    opacity: 0.8;
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    padding: 16px;
    background-color: rgba(1, 1, 1, 0.725);
    z-index: 100;
    overflow: auto;
  }
  
  #window{
    width: 600px;
    height: auto;
    margin: 50px auto;
    display: none;
    background: #fff;
    z-index: 100;
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    padding: 16px;
  }
  
  .close{
    margin-left: 530px;
    margin-top: 4px;
    cursor: pointer;
  }

  .product{
    display: none;
  }
  
</style>
</head>
<body>
    <script type="text/javascript">

          //Функция показа
   function show(state,id){

          document.getElementById('window').style.display = state;      
          if(id){
          document.getElementById(id).style.display=state;
        }else{
          var elements=document.getElementsByClassName('product');
          
    
          Array.prototype.forEach.call(elements, function(child) {
          // делаем что-нибудь с объектом child
          child.style.display=state;
          });

        }
          document.getElementById('wrap').style.display = state;      
      }
      
    </script>
          <!-- Задний прозрачный фон-->
    <div onclick="show('none')" id="wrap"></div>

          <!-- Само окно-->
      <div id="window">
  
             <!-- Картинка крестика-->
        <img class="close" onclick="show('none')" src="http://sergey-oganesyan.ru/wp-content/uploads/2014/01/close.png">
        <div id="p1" class="product"> Товар1</div>
        <div id="p2" class="product"> Товар2</div>
        <div id="p3" class="product"> Товар3</div>
        <div id="p4" class="product"> Товар4</div>
      
      </div>

         <center>
        <button id = "canvas1" class="myButton" onclick="show('block','p1')">Товар1</button><br/>
        <button id = "canvas1" class="myButton" onclick="show('block','p2')">Товар2</button><br/>
        <button id = "canvas1" class="myButton" onclick="show('block','p3')">Товар3</button><br/>
        <button id = "canvas1" class="myButton" onclick="show('block','p4')">Товар4</button><br/>
        </center>  
      
    
    
</body>
</html>



Но твой подход изначально не верный. не стоит держать всю инфу в одном файле.
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
27.11.2015, 03:43
    #39114547
asdasd2131aa
asdasd2131aa
Гость
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Добавить к коду кнопки функцию Canvas
kunaksergey,

6-10
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
27.11.2015, 03:51
    #39114548
asdasd2131aa
asdasd2131aa
Гость
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Добавить к коду кнопки функцию Canvas
kunaksergey, спасибо. но кнопки должны находиться разных местах страницы. Ситуацию осложняет движок сайта, который позволяет это реализовать только посредством распихивания кода в имеющиеся HTML блоки.
Поэтому мне и нужно было создать макет, код которого можно копировать и распихивать в другие ячейки, меняя лишь ID.
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
27.11.2015, 04:00
    #39114550
asdasd2131aa
asdasd2131aa
Гость
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Добавить к коду кнопки функцию Canvas
asdasd2131aakunaksergey, спасибо. но кнопки должны находиться разных местах страницы. Ситуацию осложняет движок сайта, который позволяет это реализовать только посредством распихивания кода в имеющиеся HTML блоки.
Поэтому мне и нужно было создать макет, код которого можно копировать и распихивать в другие ячейки, меняя лишь ID.


возможно резонно будет присвоить ID всему коду?)
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
27.11.2015, 12:01
    #39114765
kunaksergey
kunaksergey
Гость
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Добавить к коду кнопки функцию Canvas
asdasd2131aa,

размещай где хочешь, главное, что бы они были обернуты в <div id="тут ваш id" class="product"> Товар(или что-то другое)</div>
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / Добавить к коду кнопки функцию Canvas / 11 сообщений из 11, страница 1 из 1
Найденые пользователи ...
Разблокировать пользователей ...
Читали тему (0):
Читали форум (0):
Пользователи онлайн (0):
Польз. соглашение  
Полит. конфиден.  
созд. / загр.: 404ms
Закрыть
start [/forum/topic.php?fid=22&mobile=1&tid=1445597]:
 0ms
get settings:
 7ms
get forum list:
 15ms
check forum access:
 3ms
check topic access:
 3ms
track hit:
 80ms
get topic data:
 11ms
get forum data:
 3ms
get page messages:
 42ms
get tp. blocked users:
 1ms
others: 239ms
total:  404ms
x
x
Закрыть


Просмотр
0 / 0
Close
Debug Console [Select Text]