Html5 Renk Seçiçi Tablo Problemi

28/Kas/14 00:19

Kısayol

Şikayet

Özel Mesaj

DeepHouse

Kayıt Tarihi: 09/Ocak/2009

hocalar yarına getiştirmem gereken bi proje varda neresinde hata yaptıgımı bilmiyorum normalde renklerin olduğu tablo gelmesi lazım gelmedi bilen gören anlayan bi yardım edebilir mi kaydırma cubukları falan hersey tamam bi tek renk tablosu çıkmadı

<!DOCTYPE html>

<html>
<head>
<meta charset="utf-8"/>
<title>type="color"</title>
<script type ="text/css">
form
{
width: 400px;
position: relative;
}
form tr td:nth-of-type(1)
{
width: 150px;
color: crimson;
font-family: "Gill Sans MT Condensed";
font-size: 20px;
}
div#renk
{
width: 100px;
height: 118px;
position: absolute;
right: -100px;
top: 10px;
}
p#result
{
font-family: consolas;
font-size: 15px;
color: #11b0ee;
font-weight: bold;
}
</style>
<script type="text/javascript">
var ch= function () {
var hsl = document.querySelector("input[name'hue']");
var saturation = document.querySelector("input[name'saturation']");
var light = document.querySelector("input[name'light']");
var target = document.getElementById("renk");
var colorStr="hsl("+hsl.value+"," + saturation.value + "%," + light.value+ "%)";
target.style.backgroundColor = colorStr;
var sonucYaz= document.getElementById("result");
sonucYaz.innerHTML = colorStr;
var style = document.defaultView.getComputedStyle(target, null);
sonucYaz.innerHTML += " ,hex:" + style.getPropertValue("background-color");
}
</script>

</head>
<body>
<form action="" name="form1">
<fieldset>
<legend>Renk Seçiçi</legend>
<table>
<tr>
<td>Hue (Renk)</td>
<td>
<input type="range" name="hue" min="0" max="360"
step="1" onformchange="ch();" />
360<sup>0</sub>
</td>
</tr>
<tr>
<td>Saturation(Doygunluk)</td>
<td>
<input type="range" name="saturation" min="0" max="100"
step="1" onformchange="ch();" />
100%
</td>
</tr>
<tr>
<td>lightness(Aydınlık)</td>
<td>
<input type="range" name"light" min="0" max="100"
step="1" onformchange="ch();" />
%100
</td>
</tr>
</table>
<p if="result"></p>
</fieldset>
<div id="renk">
</div>
</form>
</body>
</html>

Bu işler zordur, özveri ister; hatta özveriden fazlasını, ruhunu ister...

Alıntı yap

28/Kas/14 00:48

Kısayol

Şikayet

Özel Mesaj

Cosmic

Kayıt Tarihi: 14/Haziran/2006

1. hata : css kısmını style değilde script diye başlatmışsın
2. hata : range inputlara onformchange eventi vermişsin. böyle bir event duymadım sen onları onmousemove yap.
3. hata : en alttaki inputun isminde = koymayı unutmuşsun.
4. hata : query selectorlerde name lerden sonra = koyman gerek name='hue' şeklinde

Cosmic tarafından 28/Kas/14 00:50 tarihinde düzenlenmiştir

Bittik biz bittik

Alıntı yap

28/Kas/14 01:01

Kısayol

Şikayet

Özel Mesaj

DeepHouse

Kayıt Tarihi: 09/Ocak/2009

Cosmic bunu yazdı

1. hata : css kısmını style değilde script diye başlatmışsın
2. hata : range inputlara onformchange eventi vermişsin. böyle bir event duymadım sen onları onmousemove yap.
3. hata : en alttaki inputun isminde = koymayı unutmuşsun.
4. hata : query selectorlerde name lerden sonra = koyman gerek name='hue' şeklinde

hocam cok teşekür ederim dediklerini tapınca bi boka benzedi ama hala renk tablom gelmedi :S

Bu işler zordur, özveri ister; hatta özveriden fazlasını, ruhunu ister...

Alıntı yap

28/Kas/14 01:02

Kısayol

Şikayet

Özel Mesaj

Cosmic

Kayıt Tarihi: 14/Haziran/2006

renk tablosu dediğin scrolları kaydırınca yanda çıkan renk şeysi değilmi? dediklerimi yaptığında o çıkıyor. en son yaptığın kodu paylaş bir eksik yapmışsındır mutlaka

Bittik biz bittik

Alıntı yap

28/Kas/14 01:04

Kısayol

Şikayet

Özel Mesaj

anarsistherif

Kayıt Tarihi: 27/Ağustos/2009

buyur hacı tamamlanmış hali. çok ilginç hatalar vardı :D

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title> color picker </title>
<style>
form
{
width: 400px;
position: relative;
}
form tr td:nth-of-type(1)
{
width: 150px;
color: crimson;
font-family: "Gill Sans MT Condensed";
font-size: 20px;
}
div#renk
{
width: 100px;
height: 118px;
position: absolute;
right: -100px;
top: 10px;
}
p#result
{
font-family: consolas;
font-size: 15px;
color: #11b0ee;
font-weight: bold;
}
</style>
<script type="text/javascript">
function ch() {
var hsl = document.querySelector("input[name='hue']");
var saturation = document.querySelector("input[name='saturation']");
var light = document.querySelector("input[name='light']");
var target = document.getElementById("renk");
var colorStr="hsl("+hsl.value+"," + saturation.value + "%," + light.value+ "%)";
target.style.backgroundColor = colorStr;
var sonucYaz= document.getElementById("result");
sonucYaz.innerHTML = colorStr;
var style = document.defaultView.getComputedStyle(target, null);
sonucYaz.innerHTML += " hex:" + style.getPropertyValue("background-color");
}
</script>

</head>
<body>
<form action="" name="form1">
<fieldset>
<legend>Renk Seçiçi</legend>
<table>
<tr>
<td>Hue (Renk)</td>
<td>
<input type="range" name="hue" min="0" max="360"step="1" onclick="javascript:ch();" />360<sup>0</sup>
</td>
</tr>
<tr>
<td>Saturation(Doygunluk)</td>
<td>
<input type="range" name="saturation" min="0" max="100" step="1" onclick="ch();" />
100%
</td>
</tr>
<tr>
<td>lightness(Aydınlık)</td>
<td>
<input type="range" name="light" min="0" max="100" step="1" onclick="ch();" />
%100
</td>
</tr>
</table>
<p id="result"> </p>
</fieldset>
<div id="renk"> </div>
</form>
</body>
</html>

anarsistherif tarafından 28/Kas/14 01:08 tarihinde düzenlenmiştir

=)

Alıntı yap

28/Kas/14 01:05

Kısayol

Şikayet

Özel Mesaj

DeepHouse

Kayıt Tarihi: 09/Ocak/2009

aynen dediğin gibi yanda renkleri görmem lazım ama göremiyorum

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>type="color"</title>
<style type ="text/css">
form
{
width: 400px;
position: relative;
}
form tr td:nth-of-type(1)
{
width: 150px;
color: crimson;
font-family: "Gill Sans MT Condensed";
font-size: 20px;
}
div#renk
{
width: 100px;
height: 118px;
position: absolute;
right: -100px;
top: 10px;
}
p#result
{
font-family: consolas;
font-size: 15px;
color: #11b0ee;
font-weight: bold;
}
</style>
<script type="text/javascript">
var ch= function () {
var hsl = document.querySelector("input[name'hue']");
var saturation = document.querySelector("input[name'saturation']");
var light = document.querySelector("input[name'light']");
var target = document.getElementById("renk");
var colorStr="hsl("+hsl.value+"," + saturation.value + "%," + light.value+ "%)";
target.style.backgroundColor = colorStr;
var sonucYaz= document.getElementById("result");
sonucYaz.innerHTML = colorStr;
var style = document.defaultView.getComputedStyle(target, null);
sonucYaz.innerHTML += " ,hex:" + style.getPropertValue("background-color");
}
</script>

</head>
<body>
<form action="" name="form1">
<fieldset>
<legend>Renk Seçiçi</legend>
<table>
<tr>
<td>Hue (Renk)</td>
<td>
<input type="range" name="hue" min="0" max="360"
step="1" onmousemove="ch();" />
360<sup>0</sub>
</td>
</tr>
<tr>
<td>Saturation(Doygunluk)</td>
<td>
<input type="range" name="saturation" min="0" max="100"
step="1" onmousemove="ch();" />
100%
</td>
</tr>
<tr>
<td>lightness(Aydınlık)</td>
<td>
<input type="range" name="light" min="0" max="100"
step="1" onmousemove="ch();" />
%100
</td>
</tr>
</table>
<p if="result"></p>
</fieldset>
<div id="renk">
</div>
</form>
</body>
</html>

Bu işler zordur, özveri ister; hatta özveriden fazlasını, ruhunu ister...

Alıntı yap

28/Kas/14 01:07

Kısayol

Şikayet

Özel Mesaj

anarsistherif

Kayıt Tarihi: 27/Ağustos/2009

style yerine script yazmissin.

javascript'de function'u yanlis sekilde tanimlamissin.

queryselector'da objeyi yanlis belirtmissin.

ve envai cesit html hatasi var. mesela: <p if="result"></p> degil <p id="result"></p> gibisinden.

=)

Alıntı yap

28/Kas/14 01:09

Kısayol

Şikayet

Özel Mesaj

DeepHouse

Kayıt Tarihi: 09/Ocak/2009

anarsistherif bunu yazdı

style yerine script yazmissin.

javascript'de function'u yanlis sekilde tanimlamissin.

queryselector'da objeyi yanlis belirtmissin.

ve envai cesit html hatasi var. mesela:

if="result">

degil

gibisinden.

üzerinden geçiyim bi kaç kere daha o zaman 200 sayfalık slayt olunca insan dalgınlasabilio hocam

Bu işler zordur, özveri ister; hatta özveriden fazlasını, ruhunu ister...

Alıntı yap

28/Kas/14 01:09

Kısayol

Şikayet

Özel Mesaj

anarsistherif

Kayıt Tarihi: 27/Ağustos/2009

calisanini verdim olm iste kurcuklama:)

=)

Alıntı yap

28/Kas/14 01:10

Kısayol

Şikayet

Özel Mesaj

Cosmic

Kayıt Tarihi: 14/Haziran/2006

anarsistherif bunu yazdı

style yerine script yazmissin.

javascript'de function'u yanlis sekilde tanimlamissin.

queryselector'da objeyi yanlis belirtmissin.

ve envai cesit html hatasi var. mesela:

if="result">

degil

gibisinden.

fonksiyon o şekilde de tanımlanabiliyor :) queryselector de eşittiri unutmuş yine

Bittik biz bittik

Alıntı yap

28/Kas/14 01:11

Kısayol

Şikayet

Özel Mesaj

anarsistherif

Kayıt Tarihi: 27/Ağustos/2009

javascripti php ustunden ogrendiimden olsa gerek sdfg asdg

=)

Alıntı yap