debugs/index.html at master · amatveevprog/debugs · GitHub

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

<html>
<meta charset="utf-8"/>
<body>
<style>
body
{
  font-family: Helvetica;
  margin-top:0px;
  margin-left:0px;
  margin-right:0px;
  background: url(http://cs628719.vk.me/v628719222/25edb/WOnjHpkgc2E.jpg) repeat;
  filter: alpha(opacity=90);
}
	.categoryshort
{
  width:100%;
  height:50px;
  //background:rgba(255,255,255, 0.7);
  background-color:rgba(0, 0, 0, 0.69);
  z-index:999;
}

.asphalt
{
	background-color:red;
	width:400px;
	height:40px;
	display:none;
}
.asphalt-item
{
	border: 2px dotted black;
	display:none;
}
</style>

<script>

	var category_container_short = document.createElement("div");
	category_container_short.style.display="none";
	category_container_short.className="categoryshort";
	document.body.appendChild(category_container_short);
	document.body.style.height="10000px";

	//category_container_short.style.display="none";
	var new_Element = document.createElement("div");
	//var new_Element = document.getElementById("newElement");
	new_Element.style.display="none";
	new_Element.className = "asphalt";
	new_Element.innerText = "крошкИ";
	var kp1=document.createElement("div");
	kp1.className = "asphalt-item";
	kp1.innerText = "Асфальтная крошка";
	new_Element.appendChild(kp1);
	var kp2=document.createElement("div");
	kp2.className = "asphalt-item";
	kp2.innerText = "Резиновая крошка";
	new_Element.appendChild(kp2);
	var kp3=document.createElement("div");
	kp3.className = "asphalt-item";
	kp3.innerText = "Хлебная крошка";
	new_Element.appendChild(kp3);


	category_container_short.appendChild(new_Element);
	addEventListener("scroll",function(event)
	{
		category_container_short.style.position="fixed";
		category_container_short.style.display="initial";
	});
	category_container_short.addEventListener("mouseenter",function(event)
	{
		new_Element.style.display="initial";
	});
	category_container_short.addEventListener("mouseleave",function(event)
	{
		new_Element.style.display="none";
	});


	function displaychildren(ParentDiv)
	{
		for(var i=0;i<ParentDiv.children.length;i++)
		{
			ParentDiv.children[i].style.display="initial";
		}
	}
	function displayNONEchildren(ParentDiv)
	{
		for(var i=0;i<ParentDiv.children.length;i++)
		{
			ParentDiv.children[i].style.display="none";
		}
	}
	new_Element.addEventListener("mouseenter",function()
	{
		displaychildren(new_Element);
	});
	new_Element.addEventListener("mouseleave",function()
	{
		displayNONEchildren(new_Element);
	});


</script>


 </body>
</html>