Not sure what I am looking for...

**brad62** · Feb 6, 2013 07:58

I am looking for something that is updating live and I think it should be done with javascript. But I just don't know what to look for or search for.
There are probably a lot of already coded stuff that I can grab out there and use for this little thing, but what is it called?

I have a page with a form on the left side with three empty fields that are supposed to be filled in and then inserted into a MySQL db.
On the right side there is an empty page, formatted by me with something like a header, a content area and a footer.
The first field on the left side is a headline, the second a text area and the third field a footer text.

When the user is writing text in the fields I would like the text to be updated live on the right side, so the user can see how the text looks like when it's being placed where it's supposed to be.

What should I look for? Is it javascript? Then what is this function called?
Or should I look for something else to make it work?

I am playing around in Dreamweaver (not sure if there is already something I can use there).

**Pullo** · Feb 6, 2013 16:33

Hi there,

This is quite easy with a little bit of JavaScript (or jQuery in this case).

What I have done is created three text areas (header, content and footer).
There is a jQuery event listener that captures every "key up" even on any of these elements and copies the current value of the text field, to a correspondingly named element in the preview section of the page.

Here's the code:

HTML Code:

<!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>jQuery textarea preview</title>
    <script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
    <style>
      *{
        margin:0;
        padding:0;
      }
      
      h1{ margin-bottom:20px;}
      h2{ margin-bottom:15px;}
      p{ margin-bottom:10px;}
      
      textarea{
        width:99%; 
        margin-bottom:20px;
      }
      
      #form, #preview{
        width:46%;
        float:left;
        margin: 10px;
        padding:10px;
        border:solid 1px gray;
        font-size:18px;
        line-height:140%;
      }
      
      #form{ background:#CCC; }
      #preview{ background:yellow; }
      .clear{ clear:both; }
    </style>
  </head>
  
  <body>
    <div id="form">
      <h1>Input Area</h1>
      <label for="header">Header:</label><br />
      <textarea id="header" rows="5"></textarea>
      
      <label for="content">Content:</label><br />
      <textarea id="content" rows="15"></textarea>
      
      <label for="footer">Footer:</label><br />
      <textarea id="footer" rows="5"></textarea>
    </div>
    
    
    <div id="preview">
      <h1>Preview Area</h1>
      <h2 id="headerPreview"></h2>
      <p id="contentPreview"></p>
      <p id="footerPreview"></p>
    </div>
    
    <script>
      $(document).ready(function() {
        $("#header").keyup(function(){
          $("#headerPreview").text($(this).val());
        });
        $("#content").keyup(function(){
          $("#contentPreview").text($(this).val());
        });
        $("#footer").keyup(function(){
          $("#footerPreview").text($(this).val());
        });
      });
    </script>
  </body>
</html>

Hopefully it should be quite straight forward, but if you have any questions, just let me know.

**brad62** · Feb 7, 2013 12:45

Wow! Thanks. That is exactly what I'm looking for.
Can the same thing be done with a menu selection? If I had like colors in a list and the user is picking one from the list. Is it possible to make the color change as soon as one selection is made?

Maybe I should start looking at jQuery?
Is there a lot of things to use there?

**Pullo** · Feb 7, 2013 13:39

Do you mean a simple style sheet switcher?
Here's a tutorial I made about how to implement this.
There's a link to a demo at the bottom of the blog post, but I'll post it here in case you miss it.

If I misunderstood you, just let me know.
If this is what you were looking for, please leave a comment on the blog.

**brad62** · Feb 9, 2013 02:13

Well, almost what I'm looking for. But not to set cookies. In the first script you sent me things are happening on the right hand side. I would like the colours to change there as well. Just like in the first script you sent. But, when changing the color in the menu, like in the second script, the colours should change on the right frame.
Maybe to change the td tag or table background or something like that maybe?
So, it's actually very close to what you sent now.

**Pullo** · Feb 9, 2013 06:21

Hi,

So you would like to extend the first script I posted (the one with the input area and the preview area) with two drop-downs.
Using these drop-downs, you could then select the background colour and the text colour of the preview area.

Is this correct?

**brad62** · Feb 9, 2013 07:44

Yes. That is what I'm looking for! :-)

**brad62** · Feb 9, 2013 13:00

Is it possible to change the footer to a selection list that changes the background color? If I select black, red or green in the list and then the change is updated in the second area?

**Pullo** · Feb 9, 2013 13:34

Hi there,

This should do what you want:

Code:

<!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>Mirror Text</title>
    <!--http://www.sitepoint.com/forums/showthread.php?970534-Not-sure-what-I-am-looking-for-->
    <script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
    <style>
      *{
        margin:0;
        padding:0;
      }
      
      h1{ margin-bottom:20px;}
      h2{ margin-bottom:15px;}
      p{ margin-bottom:10px;}
      
      textarea{
        width:99%; 
        margin-bottom:20px;
      }
      
      fieldset{
        padding:8px;
        margin-bottom:10px;
      }
      
      fieldset div:first-child{margin-bottom: 10px;}
      
      #form, #preview{
        width:46%;
        float:left;
        margin: 10px;
        padding:10px;
        border:solid 1px gray;
        font-size:18px;
        line-height:140%;
      }
      
      #form{ background:#CCC; }
      .clear{ clear:both; }
    </style>
  </head>
  
  <body>
    <div id="form">
      <h1>Input Area</h1>
      <label for="header">Header:</label><br />
      <textarea id="header" rows="5"></textarea>
      
      <label for="content">Content:</label><br />
      <textarea id="content" rows="15"></textarea>
      
      <label for="footer">Footer:</label><br />
      <textarea id="footer" rows="5"></textarea>
    </div>
    
    
    <div id="preview">
      <h1>Preview Area</h1>
      
      <fieldset> 
        <div>  
          <label for="bg">Select the background colour:</label> 
          <select class="selector" id="bg" data-property="background">
            <option value="white">Default</option>
            <option value="blue">Blue</option>
            <option value="green">Green</option>
            <option value="red">Red</option>          
          </select>  
        </div>
        
        <div>  
          <label for="col">Select the background colour:</label> 
          <select class="selector" id="col" data-property="color">
            <option value="black">Default</option>
            <option value="yellow">Yellow</option>
            <option value="white">White</option>
            <option value="purple">Purple</option>          
          </select>  
        </div>
      </fieldset>
      
      <h2 id="headerPreview"></h2>
      <p id="contentPreview"></p>
      <p id="footerPreview"></p>
    </div>
    
    <script>
      $(document).ready(function() {
        function mirrorText(e, m){
          e.keyup(function(){
            m.text(e.val());
          });
        }
        
        var pre = $("#preview");
        
        $(".selector").change(function(){
          pre.css( $(this).attr("data-property"), $(this).val());
        });
        
        mirrorText($("#header"),$("#headerPreview"));
        mirrorText($("#content"),$("#contentPreview"));
        mirrorText($("#footer"),$("#footerPreview"));
      });
    </script>
  </body>
</html>

Please note that I have refactored the initial code I gave you, as it was querying the DOM every time a key was pressed.
Caching your selectors (like I have done here), is a much better practice.

HTH

**brad62** · Feb 9, 2013 16:07

Great. I will try that!

User Tag List

Thread: Not sure what I am looking for...

Thread Tools

Display

Not sure what I am looking for...

Bookmarks

Bookmarks

Posting Permissions