API tools faq
paste
tvilling53

bruger_view

tvilling53
Nov 27th, 2021 (edited)
47
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 6.87 KB | None | 0 0
raw download clone embed print report
  1. bruger_view.php
  2.  
  3. <!DOCTYPE html>
  4. <html>
  5. <head>
  6. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" >
  7. <title><?=$header_title;?></title>
  8. <meta name="viewport" content="width=device-width, initial-scale=1">
  9. <!--<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">-->
  10. <link rel="stylesheet" href="css/init.css">
  11. <link rel="stylesheet" href="css/farver.css">
  12. <link rel="stylesheet" href="css/slider.css">
  13. <style>
  14. img{ width: 100%; z-index: -10;}
  15.  
  16. .box1{width:100%;max-width:700px; margin: 0 auto;}
  17. .footer{margin-top:-30px;z-index: 25; color:#ffffff;}
  18. a{color:#ffffff;}
  19. </style>
  20. <script>
  21. var str = sessionStorage.getItem('soegeOrd'); <!--viser billeder i den valgte kategori-->
  22. var data = [];
  23.  
  24. function showCustomer(str) {
  25. var xhttp;
  26. if (str == "") {
  27. document.getElementById("demo").innerHTML = "Tom";
  28. return;
  29. }
  30. xhttp = new XMLHttpRequest();
  31. console.log(str);
  32. xhttp.open("GET", "sql/bruger_view_sql.php?q="+str, true);
  33. xhttp.onreadystatechange = function()
  34. { if (this.readyState == 4 && this.status == 200)
  35. { //console.log(this.responseText);
  36. data = JSON.parse(this.responseText);
  37. //console.log(data);
  38. vis_1_billeder(0);
  39. // var x, txt='', id;
  40. // for (x =0, lng=data.length; x<lng; x++)
  41. // { txt +='gallery/'+ data[x].name + "<br>";
  42. // }
  43. // document.getElementById("demo2").innerHTML = txt;
  44.  
  45. }
  46. }
  47. xhttp.send();
  48. }
  49.  
  50. function vis_1_billeder(y){
  51. document.getElementById("prev").style.opacity = 1;
  52. document.getElementById("next").style.opacity = 1;
  53. document.getElementById("prev").style.color = "white";
  54. document.getElementById("next").style.color = "white";
  55. console.log(data.length);
  56. if(y == 0){ x = 0};
  57. if(y == 1){x--};
  58. if(y == 2){x++};
  59. if(x>(data.length-1))
  60. { x--;}
  61. if(x<=0)
  62. { document.getElementById("prev").style.opacity = 0;
  63. x=0;
  64. }
  65. if(x>=(data.length-1)){document.getElementById("next").style.opacity = 0;}
  66. console.log('X i linie 61 er = ' +x);console.log(data);
  67. var tekst = data[x].desc;
  68. var sti ='<img src="gallery/'+data[x].name+'"alt="'+data[x].alt+'"style="display:block;">';
  69. console.log('TEKST er = '+ tekst +' og X er '+x);
  70. document.getElementById("desc").innerHTML = tekst;
  71. document.getElementById("img").innerHTML = sti;
  72.  
  73. }
  74. showCustomer(str);
  75.  
  76.  
  77. </script>
  78. </head>
  79. <body >
  80. <div class="box1 ">
  81. <h1 class="fs20 header sr"><?=$header_text;?></h1>
  82. <div class="slider ">
  83. <div class="myslide fade " id="img"></div>
  84. <a class="prev" id="prev" onclick="vis_1_billeder(1)">&#10094;</a>
  85. <a class="next" id="next" onclick="vis_1_billeder(2)">&#10095;</a>
  86. <div class="desc fs18" id="desc"></div>
  87. <button class="afslut fs16" onClick="window.location='index.php'">Afslut</button><!-- &#8617;-->
  88. <div class="footer center fs16">
  89. <a href="mailto:admin@api-it.dk">Designet af API-IT.DK</a>
  90. </div>
  91. </div>
  92. </div>
  93. </body>
  94. </html>
  95.  
  96. slider.css
  97.  
  98. *{
  99. margin: 0;
  100. padding: 0;
  101. box-sizing: border-box;
  102. font-family: sans-serif;
  103. }
  104. .box1
  105. { width:100%;
  106. max-width:800px;
  107. margin: 0 auto;
  108. }
  109. .header
  110. { width: 100%;
  111. position: absolute;
  112. margin-top: 0px;
  113. z-index: 2;
  114. }
  115. .slider
  116. { position: relative;
  117. width: 100%;
  118. background: #efefef;
  119. }
  120. .myslide
  121. { top:0;
  122. height: auto;
  123. display: block;
  124. overflow: hidden;
  125. z-index: -1;
  126. }
  127. .prev, .next
  128. { position: absolute;
  129. top: 50%;
  130. transform: translate(0, +50%);
  131. font-size: 50px;
  132. padding: 0 5px;
  133. cursor: pointer;
  134. color: #fff;
  135. /*transition: 0.1s;*/
  136. user-select: none;
  137. background-color:transparent;
  138. }
  139. .next
  140. { right: 0;
  141. }
  142. .prev:hover, .next:hover
  143. { background-color:transparent;
  144. color: #000;
  145. font-size: 55px;
  146. }
  147. .desc
  148. { position: absolute;
  149. transform: translate(0, -50%);
  150. cursor: pointer;
  151. color: #fff;
  152. transition: 0.1s;
  153. background-color:transparent;
  154. bottom: 30px;
  155. border:none;
  156. width: 100%;
  157. text-align: center;
  158. margin:15px;
  159. }
  160. .afslut
  161. { position: absolute;
  162. transform: translate(0, -50%);
  163. font-size: 30px;
  164. cursor: pointer;
  165. color: #fff;
  166. transition: 0.1s;
  167. background-color:transparent;
  168. bottom: -10px;
  169. border:none;
  170. width:100%;
  171. margin:10px;
  172. }
  173. .afslut:hover
  174. { background-color: transparent;
  175. }
  176. .footer
  177. { color:#ffffff;
  178. margin-top:-30px;
  179. z-index: 2;
  180. }
  181. .footer a
  182. { color:#ffffff;
  183. background-color: transparent;
  184. }
  185.  
  186. init.css
  187. body
  188. { width: 100%;
  189. max-width:700px;
  190. margin:0px auto;
  191. }
  192. .box1 h1
  193. { width:100%;
  194. max-width:700px;
  195. margin: 0 auto;
  196. text-align:center;
  197. }
  198. .container h1
  199. { width:100%;
  200. max-width:700px;
  201. margin: 0 auto;
  202. text-align:center;
  203. }
  204. h1
  205. { margin-top:5%;
  206. font-size:50px;
  207. width:100px;
  208. text-align:center;
  209. margin: 0 auto;
  210. }
  211. .h2
  212. { text-align:center;
  213. margin-top:20px;
  214. }
  215. .fs64
  216. { font-size: 64px;
  217. }
  218. .fs48
  219. { font-size: 48px;
  220. }
  221. .fs36
  222. { font-size: 36px;
  223. }
  224. .fs30
  225. { font-size: 30px;
  226. }
  227. .fs25
  228. { font-size: 25px;
  229. }
  230. .fs22
  231. { font-size: 22px;
  232. }
  233. .fs20
  234. { font-size: 20px;
  235. }
  236. .fs18
  237. { font-size: 18px;
  238. }
  239. .fs16
  240. { font-size: 16px;
  241. }
  242. .fs14
  243. { font-size: 14px;
  244. }
  245. /*////BAGGRUNDSFARVER//////////////////////////////////////*/
  246. .farve
  247. { background-color: #efefef;
  248. }
  249. .farve2
  250. { background-color: #dddddd;
  251. }
  252. .groen
  253. { background-color: #00cc33;
  254. }
  255. .graa
  256. { background-color:#ccc
  257. }
  258. .hvid
  259. { background-color:#fff
  260. }
  261. /*//////TEKST FARVE///////////////////////////////////////*/
  262. .roed
  263. { color: #ff3333
  264. }
  265. .sort
  266. { color:black;
  267. }
  268. .blaa
  269. { color:blue;
  270. }
  271. .gul
  272. { background-color: #ffff99
  273. }
  274. /*///RAMMER////////////////////////////////////////////////////*/
  275. .gr
  276. { border: solid 2px green;
  277. }
  278. .rr
  279. { border: solid 1px red
  280. }
  281. .br
  282. { border:1px solid blue;
  283. }
  284. .yr
  285. { border:1px solid yellow;
  286. }
  287. .sr
  288. { border:1px solid black;
  289. border-radius:7px;
  290. }
  291. .sr2
  292. { border:2px solid black;
  293. border-radius:7px;
  294. }
  295. .fed
  296. { font-weight: bold;
  297. }
  298. .line1px
  299. { height:1px;
  300. border:none;
  301. width:99%;
  302. float:left;
  303. }
  304. .line2px
  305. { height:2px;
  306. border:none;
  307. width:99%;
  308. float:left;
  309. }
  310. .line5px
  311. { height:5px;
  312. border:none;
  313. width:99%;
  314. float:left;
  315. }
  316. .line10px
  317. { height:10px;
  318. border:none;
  319. width:99%;
  320. float:left;
  321. }
  322. .top
  323. { margin-top: 10px;
  324. }
  325. .bund
  326. { margin-bottom: 10px;
  327. }
  328. .center
  329. { text-align:center;
  330. }
  331.  
  332. a:link{color:black; text-decoration:none}
  333. a:visited{ color:white; text-decoration:none}
  334. a:hover{font-weight:bold; background-color: transparent;}
  335.  
  336.  
  337.  
Add Comment
Please, Sign In to add comment
Public Pastes
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!