Forum PHP.pl > jqery zmiana szerokości DIV-a suwakiem

Pomoc - Szukaj - Użytkownicy - Kalendarz

Pełna wersja: jqery zmiana szerokości DIV-a suwakiem

Forum PHP.pl > Forum > Po stronie przeglądarki > JavaScript

david1990

11.05.2015, 14:22:25

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

[HTML] pobierz, plaintext 
<script>
onload = function() {
  var $ = function(id) { return document.getElementById(id); }; 
  $('one').oninput = function() 
  { 
  $('uno').innerHTML = this.value; 
  $('due').innerHTML = this.value;
 
  };
  $('one').oninput(); };
 
</script>
</head>
<body>
 
<div id="golden">
	GOLD
	<div id="uno"></div>
</div><div id="suwak"><input type="range" id="one" min="0" max="200" value="100"/></div>
<div id="credits">
CREDITS
	<div id="due">&nbsp;</div>
</div>  
 
<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

Kshyhoo

11.05.2015, 14:50:14

Może to Ci pomoże.

david1990

12.05.2015, 13:17:39

Dzięki wielkie, przyglądnąłem się temu ale dalej nie wiem jak podłączyć to pod suwak.

Kshyhoo

12.05.2015, 14:13:35

Zobacz, czy działa:

[HTML] pobierz, plaintext 
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<style type="text/css">
body {
font-family: Sans-Serif;
color:#333;
}
 
#chosen {
	border-radius: 10px;
	width: 45px;
	padding-top: 10px;
	padding-bottom: 10px;
	background-image: -webkit-linear-gradient(top, #ccc, #300);
	background-image: -o-linear-gradient(top, #ccc, #300);
	background-image: -moz-linear-gradient(top, #ccc, #300);
	text-align: center;
	color: #fff;
	font-weight :bold;
	font-size: large;
	margin-left: 40px;
}
 
#slider {
	margin-left:10px;
}
 
/*this is only for webkit, not opera*/
input[type='range'] {
	-webkit-appearance: none;
	padding-left: 2px;
	padding-right: 2px;
	-webkit-border-radius: 5px;  
	background-image: -webkit-linear-gradient(top, #000, #333, #0000;
}  
 
#picHolder {
	width: 250px;
	height: 240px;
	margin: 10px;
}
</style>
<script type="text/javascript">
function updateSlider(slideAmount) {
	//get the element
	var display = document.getElementById("chosen");
	//show the amount
	display.innerHTML=slideAmount;
	//get the element
	var pic = document.getElementById("pic");
	//set the dimensions
	pic.style.width=slideAmount+"%";
}
</script>
</head>
<body>
 
<div id="slider">0 <input id="slide" min="0" max="200" step="5" value="100" onchange="updateSlider(this.value)" type="range"> 200</div>
<br>
<div id="chosen">100</div>
 
<div id="picHolder">
	<div id="pic" style="height: 30px; border: 1px solid red;"></div>
</div>
 
</body>
</html>
[HTML] pobierz, plaintext

To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.