SitePoint Sponsor

User Tag List

Page 1 of 2 12 LastLast
Results 1 to 25 of 47
  1. #1
    SitePoint Guru
    Join Date
    Nov 2004
    Location
    sweden
    Posts
    646
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)

    Not sure what I am looking for...

    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).

  2. #2
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,895
    Mentioned
    212 Post(s)
    Tagged
    12 Thread(s)
    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.

  3. #3
    SitePoint Guru
    Join Date
    Nov 2004
    Location
    sweden
    Posts
    646
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    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?

  4. #4
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,895
    Mentioned
    212 Post(s)
    Tagged
    12 Thread(s)
    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.

  5. #5
    SitePoint Guru
    Join Date
    Nov 2004
    Location
    sweden
    Posts
    646
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    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.

  6. #6
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,895
    Mentioned
    212 Post(s)
    Tagged
    12 Thread(s)
    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?

  7. #7
    SitePoint Guru
    Join Date
    Nov 2004
    Location
    sweden
    Posts
    646
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Yes. That is what I'm looking for! :-)

  8. #8
    SitePoint Guru
    Join Date
    Nov 2004
    Location
    sweden
    Posts
    646
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    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?

  9. #9
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,895
    Mentioned
    212 Post(s)
    Tagged
    12 Thread(s)
    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

  10. #10
    SitePoint Guru
    Join Date
    Nov 2004
    Location
    sweden
    Posts
    646
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Great. I will try that!

  11. #11
    SitePoint Guru
    Join Date
    Nov 2004
    Location
    sweden
    Posts
    646
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    I haven't been working on this page for a while now and I'm going back to fix some things.
    If I want to save the content from the header, content and footer in my db. How can I get the text that is written on the page?

  12. #12
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,895
    Mentioned
    212 Post(s)
    Tagged
    12 Thread(s)
    Hi,

    Quote Originally Posted by brad62 View Post
    If I want to save the content from the header, content and footer in my db. How can I get the text that is written on the page?
    With:

    Code:
    $("#header").text();
    $("#content").text();
    $("#footer").text();
    respectively.
    Last edited by Pullo; Aug 22, 2013 at 12:31.

  13. #13
    SitePoint Guru
    Join Date
    Nov 2004
    Location
    sweden
    Posts
    646
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Hmmm, I didn't understand that. How can I make these into a php string?
    I thought you meant:

    PHP Code:
    $header=$("#header").text();
    $content=$("#content").text();
    $footer=$("#footer").text(); 
    But that didn't work...

  14. #14
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,895
    Mentioned
    212 Post(s)
    Tagged
    12 Thread(s)
    Nah, that won't work, you're right.
    The reason is that PHP is interpreted server-side and has no concept of those variables.
    AFAIK, you'll need to do this via AJAX, as the contents of these three areas is added dynamically by your users.

  15. #15
    SitePoint Guru
    Join Date
    Nov 2004
    Location
    sweden
    Posts
    646
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    So, there is no way to save these inputs in a simple way. Either post them to the following page or anything that works.
    Or is it possible to use AJAX and then convert the input to a string or whatever? I don't know anything at all about AJAX.

    The page is working fine and the only thing I need now after a lot of work is to save the text that is being printed when the user is ready.

  16. #16
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,895
    Mentioned
    212 Post(s)
    Tagged
    12 Thread(s)
    It would be relatively trivial to add a "Save" button, which when clicked would gather the text from the appropriate sections and post it to a PHP script, which could then save it to a database.
    Would you like help implementing that?

    Otherwise, if you are trying to preserve state between pages, it might be better to go with another option - local storage, for example.

  17. #17
    SitePoint Guru
    Join Date
    Nov 2004
    Location
    sweden
    Posts
    646
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Just to add a link saying SAVE AND CONTINUE would be really great. And then pass on the three strings. Then I can continue using whatever is in those strings. I just didn't get it how to do it. But if you know a simple way... that would be great!

  18. #18
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,895
    Mentioned
    212 Post(s)
    Tagged
    12 Thread(s)
    Yeah, but the crux of the matter is why do you want to save it (i.e. for which purpose)?

    Do you just want to save it for the session (e.g. so the data is accessible on the next page) or do you want to save it so that the data is accessible at a later date (e.g. in a data base).

    It would be great if you could briefly describe what you are trying to do.

  19. #19
    SitePoint Guru
    Join Date
    Nov 2004
    Location
    sweden
    Posts
    646
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    I want to save it for later. A user should be able to write a headline, some short text and a footer. They can see all the text live on the page. When they are satisfied, they can go on to the next page. The next time they login they can continue working or use that text on my page.
    The code is so great, when a user can see the amount of text being placed on the page. So, I would like to save it in my MySQL db when they move on to the next page on my site.

  20. #20
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,895
    Mentioned
    212 Post(s)
    Tagged
    12 Thread(s)
    Ok then, MySQL it is.

    So, let's add some kind of button, e.g. "Save", then get it talking to a PHP script.

    That could look something like this:

    Code:
    <button id="save">Save!</button>
    
    $("#save").on("click", function(){
      var headerText = $("#header").text(), 
          contentText = $("#content").text(), 
          footerText = $("#footer").text();  
    
      $.ajax({
        type: "POST",
        url: "myScript.php",
        data: 'header=' + headerText + '&content=' + contentText + '&footer=' + footerText ,
        success: function(res) {
          console.log(res);
       }
      });
    });
    Then, you'd need to make a PHP file, name it myScript.php and place it in the same directory.

    This should just echo back the values we post to it, to make sure things are working (database will come later).

    Code:
    <?php
      $header = $_POST['header'];
      $content = $_POST['content'];
      $footer = $_POST['footer'];
    
      echo "You submitted: " . $header . ", " . $content . ", " . $footer;
    ?>
    Try that and let me know if it worked.
    I'm kind of busy on something else right now, so I didn't test this.
    If you can't get it to work, I'll set things up on my end so I can run it, too.

  21. #21
    SitePoint Guru
    Join Date
    Nov 2004
    Location
    sweden
    Posts
    646
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Ok, I will try this this weekend. I'm not at the same place as my code right now...

  22. #22
    SitePoint Guru
    Join Date
    Nov 2004
    Location
    sweden
    Posts
    646
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    I had a chance to try it now. But it didn't work.
    Well, nothing happens when I click the SAVE button.

    I placed your code after some of the other code. Like this:

    PHP Code:
        <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>
        
    <button id="save">Save!</button>

    <script>
    $("#save").on("click", function(){
      var headerText = $("#header").text(), 
          contentText = $("#content").text(), 
          footerText = $("#footer").text();  

      $.ajax({
        type: "POST",
        url: "myScript.php",
        data: 'header=' + headerText + '&content=' + contentText + '&footer=' + footerText ,
        success: function(res) {
          console.log(res);
       }
      });
    });
       </script> 

  23. #23
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,895
    Mentioned
    212 Post(s)
    Tagged
    12 Thread(s)
    So you entered something into all of the text areas, but when you press the "Save" button, nothing is logged to the console?

  24. #24
    SitePoint Guru
    Join Date
    Nov 2004
    Location
    sweden
    Posts
    646
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Well, when entering something, there is no reaction of the button. It's just dead.

  25. #25
    SitePoint Guru
    Join Date
    Nov 2004
    Location
    sweden
    Posts
    646
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Here is a test page.
    http://coverman.se/test.html


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •