Lite hjälp med webbprogrammering.

Forcevision · Inlägg av **Forcevision** » 20 okt 2010, 15:50

Tjabba !

Kollade runt lite och såg en väldigt smart grej som man kan fixa i en formulär. Med hjälp av radio button så kan man skrivskydda vissa textrutor i ett formulär. Någon som har en guide på hur man löser detta eller kan visa en kod för det ?

Mvh Force

ycc · Inlägg av **ycc** » 20 okt 2010, 17:07

Tjena Force,

Är detta i närheten?
http://e-dog.info/t/63/tst/hUyg5.htm

Måste sticka nu, tyvärr.

Kod: Markera allt

<form>
<input id=id1>
<input id=id2>
<br>
<input type="radio" name="group1" onclick="javascript:document.getElementById('id1').readOnly = true; javascript:document.getElementById('id2').readOnly = false;"> 
<input type="radio" name="group1" onclick="javascript:document.getElementById('id1').readOnly = false; javascript:document.getElementById('id2').readOnly = true;"> 
</form>

Forcevision · Inlägg av **Forcevision** » 21 okt 2010, 16:55

ja precis lysande.

kan man få så det textfältet som är skrivskyddat har en annan valfri färg ?

ycc · Inlägg av **ycc** » 21 okt 2010, 18:38

Exemplet uppdaterat. Din önskan är min lag

Mitt tips för att du själv skall göra detta är att läsa om två saker:
1. JavaScript: främst funktionen getelementbyid
2. DOM (dokumentobjektmodellen) så att man vet namnet för de egenskaperna som man vill påverka

Kod: Markera allt

<form>

<input id=id1>
<input id=id2>
<br>
<input type="radio" name="group1" onclick='document.getElementById("id1").readOnly = true; document.getElementById("id2").readOnly = false; document.getElementById("id1").style.background = "#a0a0ff"; document.getElementById("id2").style.background = "#ffffff";'> 
<input type="radio" name="group1" onclick='document.getElementById("id2").readOnly = true; document.getElementById("id1").readOnly = false; document.getElementById("id2").style.background = "#ffa0a0"; document.getElementById("id1").style.background = "#ffffff";'> 

</form>

Forcevision · Inlägg av **Forcevision** » 21 okt 2010, 19:24

Tackar för tipsen.

jens.tinfors · Inlägg av **jens.tinfors** » 21 okt 2010, 20:31

om man inte gillar inline javascript men är kompis med jQuery så kan kan göra såhär:

Kod: Markera allt

<!DOCTYPE html>
<html>
  <head>
    <title>title</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>
    <script type="application/javascript">
      $(document).ready(function() {
        $('input[name=kind]').live('click', function() {
          if($(this).attr('id') == 'text_radio') {
            $('#textfield').attr('readonly', '');
          } else {
            $('#textfield').attr('readonly', 'readonly');
          }
        });
      });
    </script>
  </head>
  <body>
    <form method="post" enctype="application/x-www-form-urlencoded" action="http://pizza.example.com/order.cgi">
      <fieldset>
        <legend>choose</legend>
        <p><label>text or passwd field: <input type="text" id="textfield"/></label></p>
        <p><label>text <input name="kind" type="radio" id="text_radio" value="text"/></label></p>
        <p><label>passwd: <input name="kind" type="radio" id="passwd_radio" value="passwd"/></label></p>
      </fieldset>
    </form>
  </body>
</html>

/jensa

Forcevision · Inlägg av **Forcevision** » 23 okt 2010, 09:49

Vad är jQuery ?

Vad är skillanden på inline javascript och jQuery ?

jens.tinfors · Inlägg av **jens.tinfors** » 24 okt 2010, 19:26

inline javascript betyder att man blandar dokumentet (html) med funktioner (javascript). I modern webutveckling separarer man dokumentet från funktionaliteten. På så vis ser man till att alla olika typer av webläsare kan läsa och tolka dokumentet (html) på rätt sätt och att det även fungerar för webläsare som saknar stöd för javascript. Inte minst för att se till att få rätt sökresultat då inga sökmotorer har stöd för javascript. Sidorna måste med andra fungera utan js! Sedan lägger man på javascript som extra funktionalitet för de klienter som har stöd. Detta kallas unobtrusive javascript.

jQuery är ett populärt javascript bibliotek.

ycc · Inlägg av **ycc** » 25 okt 2010, 02:52

Vill man ha sin JavaScript separat så flyttar man ju bara raderna dit, förstås. Jag använder gärna alla varianterna som diskuterats, jag tycker de brukar fungera bra i alla moderna webläsare. Har jag möjlighet brukar jag försöka testa från FF1, IE6, motsvarande och uppåt. Jag har inte märkt att t.ex. exemplet i tråden skulle indexeras på annat sätt av sökmotorer.

Personligen gillar jag bättre att använda JavaScript direkt istället för via ett bibliotek, men det som går snabbast praktiskt får avgöra, i mitt fall.

Så här kan man göra om man lägger JavaScript-koden separat:
http://e-dog.info/t/63/tst/hUyg6.htm

Kod: Markera allt

<head>

<script type="text/javascript">
function g(o) {
    return document.getElementById("id" + o);
}

function rd1f() {
    g("1").readOnly = true;
    g("2").readOnly = false;
    g("1").style.background = "#a0a0ff";
    g("2").style.background = "#ffffff";
}

function rd2f() {
    g("2").readOnly = true;
    g("1").readOnly = false;
    g("2").style.background = "#ffa0a0";
    g("1").style.background = "#ffffff";
}
</script>

</head>

<form>
    <input id=id1><input id=id2><br>
    <input type="radio" name="group1" id=rd1><input type="radio" name="group1" id=rd2> 
</form>

<script type="text/javascript">
document.getElementById("rd1").onclick = rd1f;
document.getElementById("rd2").onclick = rd2f;
</script>

Forcevision · Inlägg av **Forcevision** » 03 dec 2010, 10:19

Man tackar för svaren ovan.

En annan fråga:

Har en div som är kopplad till en css mall detta ser ut som följande:

Kod: Markera allt

<div id="main"></div>
#main {margin:0 auto; position: relative; width: 800px; height: 800px; border-right: 1px solid #000000; border-left: 1px solid #000000; font-family:Trebuchet MS, Helvetica, sans-serif; font-size: 16px; font-weight: bolder; color: #50453E; position: relative; top: 00px;}

Nu skulle jag vilja att en annan div ligger exakt brevid denna diven ovan på vänster sida. Hur löser jag detta ?

Väldigt tacksam för svar.

mvh Force

jens.tinfors · Inlägg av **jens.tinfors** » 05 dec 2010, 18:54

div är block element så de hamnar by default inte bredvid varandra.
Utan att veta riktigt hur du tänkt så föreslår jag att du float'ar dem. Typ såhär:

Kod: Markera allt

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN""
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <meta http-equiv="content-type" content="text/html; charset=utf-8">
  <title>Index</title>
  <style type="text/css" media="screen">
    div { float:left; position: relative; }
    #main { background-color: lightgrey; }
    #other { background-color: lightblue; }
  </style>
</head>
<body>
  <div id="other">other div</div>
  <div id="main">main div</div>
</body>
</html>

Forcevision · Inlägg av **Forcevision** » 05 dec 2010, 20:28

Ja så menade jag fast går det att lösa då min main div är centrerad

Kod: Markera allt

margin:0 auto;

?

Forcevision · Inlägg av **Forcevision** » 17 dec 2010, 12:15

Nu har jag ett exempel på hur jag gärna skulle vilja ha en div brevid min. http://www.oderland.se så som på denna hemsidan Men en main div och en div brevid på höger sida om main diven. Hur får jag till höger diven som på den sidan ?

Ubuntu Sverige

Lite hjälp med webbprogrammering.

Lite hjälp med webbprogrammering.

Re: Lite hjälp med webbprogrammering.

Re: Lite hjälp med webbprogrammering.

Re: Lite hjälp med webbprogrammering.

Re: Lite hjälp med webbprogrammering.

Re: Lite hjälp med webbprogrammering.

Re: Lite hjälp med webbprogrammering.

Re: Lite hjälp med webbprogrammering.

Re: Lite hjälp med webbprogrammering.

Re: Lite hjälp med webbprogrammering.

Re: Lite hjälp med webbprogrammering.

Re: Lite hjälp med webbprogrammering.

Re: Lite hjälp med webbprogrammering.