Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

 
 Reply to this topicStart new topic
> jqery zmiana szerokości DIV-a suwakiem
david1990
post
Post #1





Grupa: Zarejestrowani
Postów: 2
Pomógł: 0
Dołączył: 11.05.2015

Ostrzeżenie: (0%)
-----

Witam,
Chciał bym zmieniać szerokość diva za pomocą suwaka.
mam coś takiego:

[HTML] pobierz, plaintext 
  1. <script>
  2. onload = function() {
  3.   var $ = function(id) { return document.getElementById(id); }; 
  4.   $('one').oninput = function() 
  5.   { 
  6.   $('uno').innerHTML = this.value; 
  7.   $('due').innerHTML = this.value;
  8.  
  9.   };
  10.   $('one').oninput(); };
  11.  
  12. </script>
  13. </head>
  14. <body>
  15.  
  16. <div id="golden">
  17. 	GOLD
  18. 	<div id="uno"></div>
  19. </div><div id="suwak"><input type="range" id="one" min="0" max="200" value="100"/></div>
  20. <div id="credits">
  21. CREDITS
  22. 	<div id="due">&nbsp;</div>
  23. </div>  
  24.  
  25. <div id="div1" style="height:30px;border: 1px solid red;"></div>
[HTML] pobierz, plaintext


i chciał bym aby podczas przesuwania suwaka zmieniała się szerokość #div1. Nie mam pojęcia jak to zrobić.
Ktoś podpowie?
Pozdrawiam,
Dawid
Go to the top of the page
+Quote Post
Kshyhoo
post
Post #2





Grupa: Opiekunowie
Postów: 3 855
Pomógł: 317
Dołączył: 4.01.2005
Skąd: że
Może to Ci pomoże.
Go to the top of the page
+Quote Post
david1990
post
Post #3





Grupa: Zarejestrowani
Postów: 2
Pomógł: 0
Dołączył: 11.05.2015

Ostrzeżenie: (0%)
-----

Dzięki wielkie, przyglądnąłem się temu ale dalej nie wiem jak podłączyć to pod suwak.
Go to the top of the page
+Quote Post
Kshyhoo
post
Post #4





Grupa: Opiekunowie
Postów: 3 855
Pomógł: 317
Dołączył: 4.01.2005
Skąd: że
Zobacz, czy działa:
[HTML] pobierz, plaintext 
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  5. <style type="text/css">
  6. body {
  7. font-family: Sans-Serif;
  8. color:#333;
  9. }
  10.  
  11. #chosen {
  12. 	border-radius: 10px;
  13. 	width: 45px;
  14. 	padding-top: 10px;
  15. 	padding-bottom: 10px;
  16. 	background-image: -webkit-linear-gradient(top, #ccc, #300);
  17. 	background-image: -o-linear-gradient(top, #ccc, #300);
  18. 	background-image: -moz-linear-gradient(top, #ccc, #300);
  19. 	text-align: center;
  20. 	color: #fff;
  21. 	font-weight :bold;
  22. 	font-size: large;
  23. 	margin-left: 40px;
  24. }
  25.  
  26. #slider {
  27. 	margin-left:10px;
  28. }
  29.  
  30. /*this is only for webkit, not opera*/
  31. input[type='range'] {
  32. 	-webkit-appearance: none;
  33. 	padding-left: 2px;
  34. 	padding-right: 2px;
  35. 	-webkit-border-radius: 5px;  
  36. 	background-image: -webkit-linear-gradient(top, #000, #333, #0000;
  37. }  
  38.  
  39. #picHolder {
  40. 	width: 250px;
  41. 	height: 240px;
  42. 	margin: 10px;
  43. }
  44. </style>
  45. <script type="text/javascript">
  46. function updateSlider(slideAmount) {
  47. 	//get the element
  48. 	var display = document.getElementById("chosen");
  49. 	//show the amount
  50. 	display.innerHTML=slideAmount;
  51. 	//get the element
  52. 	var pic = document.getElementById("pic");
  53. 	//set the dimensions
  54. 	pic.style.width=slideAmount+"%";
  55. }
  56. </script>
  57. </head>
  58. <body>
  59.  
  60. <div id="slider">0 <input id="slide" min="0" max="200" step="5" value="100" onchange="updateSlider(this.value)" type="range"> 200</div>
  61. <br>
  62. <div id="chosen">100</div>
  63.  
  64. <div id="picHolder">
  65. 	<div id="pic" style="height: 30px; border: 1px solid red;"></div>
  66. </div>
  67.  
  68. </body>
  69. </html>
[HTML] pobierz, plaintext
Go to the top of the page
+Quote Post
« Następny starszy · JavaScript · Następny nowszy »
 

Reply to this topicStart new topic
2 Użytkowników czyta ten temat (2 Gości i 0 Anonimowych użytkowników)
0 Zarejestrowanych:

 

Tryb wyświetlania: Standardowy · Przełącz na: Linearny+ · Przełącz na: Drzewo

Śledź ten temat · Wyślij temat na e-mail · Wydrukuj ten temat · Subskrybuj to forum

RSS Aktualny czas: 23.08.2025 - 04:18
Powered By IP.Board © 2025  IPS, Inc.
All changes by PHP.pl Administrators
Hosting zapewnia NQ.pl hosting, trac, svn