Dynamic text preview

Discussion in 'JavaScript' started by asgsoft, Feb 25, 2010.

0
  1. #1
    Hey everyone

    I am working on this form which I am trying to get to preview dynamically. A bit like the process of setting up google adsense ads.

    So I have several textboxes, and a button that I can click which will show a palette of colours.

    Now when a user enters some text in a textbox it would automatically update the "holder" with that text. And the same would be with the colours.

    How can I go about starting something like that?

    Thanks everyone in advance :)
     
    asgsoft, Feb 25, 2010 IP
  2. mps705

    mps705 Peon

    Messages:
    55
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #2
    Try this:

    <html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>New Page 1</title>
<script>

	function updatePreview() {
		document.getElementById('preview').innerHTML = document.getElementById('inputtext').value;
	}
</script>
</head>

<body>
<input id="inputtext" name="inputtext" onkeyup="updatePreview();">
<div id="preview" style="width:100px;height:100px;border:1px #333 solid;">preview</div>
</body>

</html>
    Code (markup):
     
    mps705, Mar 8, 2010 IP
  3. asgsoft

    asgsoft Well-Known Member

    Messages:
    1,737
    Likes Received:
    34
    Best Answers:
    0
    Trophy Points:
    160
    #3
    OK cool!!!

    that's part of what I needed!!!

    Now, is it possible to alter the id of a div tag such that it's style would change onscreen??

    So basically there is a drop down menu with three options, each of these options would have a different styling attached to it, and as you change the selected option, the style changes automatically and accordingly.

    Is that possible?

    Thanks in advance!
     
    asgsoft, Mar 8, 2010 IP
  4. mps705

    mps705 Peon

    Messages:
    55
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #4
    You don't have to change the id of the div. All you need is to change its className. I added a simple one to the code:

    <script>

	function updatePreview() {
		//alert ('keyup');
		//document.getElementById('preview').innerText = document.getElementById('inputtext').value;
		document.getElementById('preview').innerHTML = document.getElementById('inputtext').value;
	}
	
	function changeColor() {
		var obj = document.getElementById('bordercolor');
		document.getElementById('preview').className = obj.options[obj.selectedIndex].value;
	}
</script>
<style>

.blue {width:100px;height:100px;border:1px #00f solid;}
.green {width:100px;height:100px;border:1px #0f0 solid;}
.red {width:100px;height:100px;border:1px #f00 solid;}

</style>
</head>

<body>
<input id="inputtext" name="inputtext" onkeyup="updatePreview();">
<div id="preview" class="red">preview</div>
Border color <select name="bordercolor" id="bordercolor" onchange="changeColor();">
<option value="red">Red</option>
<option value="green">Green</option>
<option value="blue">Blue</option>
</select>
</body>
    Code (markup):
    You need to define the different styles you need, and change the className of the div when the option is selected.
     
    mps705, Mar 8, 2010 IP