PHPhulp.nl PHPhulp.nl
35k+ leden Over PHPhulp Offerte opdracht Contact
H

Hulp met veranderen Div eigenschappen in Javascript.

Door Hendrik Wit op 13-01-2013 12:48 gewijzigd op 13-01-2013 12:49
2.147 views
Ik heb wat hulp nodig met een programmatje.
Het is de bedoeling om via een tabel met textfields de eigenschappen van een div aan te passen.
Denk aan hoogte,breedte,kleur etc.

Javascript is niet m'n sterkste kant dus ik vroeg me af of iemand me op weg kan helpen.

Dit is wat ik tot nu toe heb.



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Div aanpassen</title>
</head>

<body>
<form id="form2" name="form2" method="post" action="">
<table width="200" border="1">
  <tr>
    <td>Left:</td>
    <td>
      <label for="textfield"></label>
      <input type="text" name="left" id="textfield" />
      </td>
  </tr>
  <tr>
    <td>Top:</td>
    <td>
      <label for="textfield2"></label>
      <input type="text" name="top" id="textfield2" />
   </td>
  </tr>
  <tr>
    <td>Width:</td>
    <td><label for="textfield3"></label>
      <input type="text" name="width" id="textfield3" /></td>
  </tr>
  <tr>
    <td>Height:</td>
    <td><label for="textfield4"></label>
      <input type="text" name="height" id="textfield4" /></td>
  </tr>
  <tr>
    <td>Color:</td>
    <td><label for="textfield5"></label>
      <input type="text" name="color" id="textfield5" /></td>
  </tr>
  <tr>
    <td>Text:</td>
    <td><label for="textfield6"></label>
      <input type="text" name="text" id="textfield6" /></td>
  </tr>
   <tr>
    <td>&nbsp;</td>
    <td><label for="textfield6">
      <input type="submit" name="button" id="button" value="KLIK" />
    </label></td>
  </tr>
</table>
 </form>



</body>
</html>
B
Bo Ter Ham
13-01-2013 13:13 gewijzigd op 13-01-2013 13:14
met jQuery:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Div aanpassen</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
	$('.property').keyup(function() {
		var value = $(this).val();
		var property = this.id;
		if(property == 'width') {
			$('#testDiv').width(value);
		}
		else if(property == 'height') {
			$('#testDiv').height(value);
		}
		else {
			$('#testDiv').text(value);
		}
	});
});
</script>
</head>

<body>
<form id="form2" name="form2" method="post" action="">
<table width="200" border="1">
  <tr>
    <td>Left:</td>
    <td>
      <label for="textfield"></label>
      <input type="text" name="left" class="property" id="left" />
      </td>
  </tr>
  <tr>
    <td>Top:</td>
    <td>
      <label for="textfield2"></label>
      <input type="text" name="top" class="property" id="top" />
   </td>
  </tr>
  <tr>
    <td>Width:</td>
    <td><label for="textfield3"></label>
      <input type="text" name="width" class="property" id="width" /></td>
  </tr>
  <tr>
    <td>Height:</td>
    <td><label for="textfield4"></label>
      <input type="text" name="height" class="property" id="height" /></td>
  </tr>
  <tr>
    <td>Color:</td>
    <td><label for="textfield5"></label>
      <input type="text" name="color" class="property" id="color" /></td>
  </tr>
  <tr>
    <td>Text:</td>
    <td><label for="textfield6"></label>
      <input type="text" name="text" class="property" id="text" /></td>
  </tr>
   <tr>
    <td>&nbsp;</td>
    <td><label for="textfield6">
      <input type="submit" name="button" id="button" value="KLIK" />
    </label></td>
  </tr>
</table>
 </form>
<div id="testDiv" style="width: 100px; height: 100px; background-color: #ff0000"></div>
</body>
</html>


neem hier anders ff een kijkje: http://api.jquery.com/css/

Aanvulling: misschien is het geen slecht idee om de input van de gebruiker ook nog ff te valideren bijvoorbeeld of er bij width wel een getal is ingevuld enz..
H
Hendrik Wit
13-01-2013 13:28
Bedankt! Dat helpt al een hoop, waar ik alleen nog wat moeite mee heb is de kleur, moet je dan al een CSS bestand hebben of doe je dit alleen met Jquery?
H
Hendrik Wit
13-01-2013 14:03
Het is inderdaad de bedoeling om het met een kleurcode te doen, en dan nog kan je toch gewoon de engelse benamingen invoeren zoals Green etc?
H
Hendrik Wit
13-01-2013 14:28 gewijzigd op 13-01-2013 14:32
Heb nu het een en ander aangepast, en de breedte en hoogte en tekst werken nog, maar kleur krijg ik niet aan de praat. Het leek me dat het zoiets moest zijn, maar blijkbaar doe ik nog iets fout:


<script type="text/javascript">
$(document).ready(function() {
    $('.property').keyup(function() {
        var value = $(this).val();
        var property = this.id;
		var position = $(this).position();
        if(property == 'width') {
            $('#testDiv').width(value);
        }
        else if(property == 'height') {
            $('#testDiv').height(value);
        }
       
		  if(property == 'text') {
            $('#testDiv').text(value);
        }
		else if(property =='color'){
		$('#testDiv').css("background-color","value")	
		}
		
    });
});
</script>


Iemand een idee?

Edit: Ah ik zie het al, dit stukje:
$('#testDiv').css("background-color","value")


Moest zo:

$('#testDiv').css("background-color",(value))


[size=xsmall]Toevoeging op 13/01/2013 14:42:58:[/size]

Nou heb ik de positionering zo staan:


	 if(property == 'top') {
            $('#testDiv').css("top",(value))
        }
		else if(property == 'left') {
            $('#testDiv').css("left",(value))
        }


Maar die pakt hij niet, kan het zijn dat ik geen .css moet gebruiken? Zou wel raar zijn want het zijn toch CSS properties.

[size=xsmall]Toevoeging op 13/01/2013 15:15:28:[/size]

Iemand een idee?
Kris Peeters
14-01-2013 11:35 gewijzigd op 14-01-2013 11:36
Ja, okay, maar top en left kan je niet zomaar gebruiken.
Het is een combinatie van position: relative/absolute; en van z-index.

Test eerst een uit wat je wil bereiken, puur met css.
Als dat lukt, kan je die gegevens vertalen naar javascript.

Probeer dit eens (geef de container ook een width en height):
<style>
#container {
  position: relative;
}
#container {
  position: absolute;
  z-index: 10;
  top: 10px;
  left: 10px;
}
</style>
<div id="container">
  <div id="testdiv"></div>
</div>


Binnen deze situatie zou die javascript kunnen werken

Reageren

Inloggen om te reageren