SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Enthusiast
    Join Date
    Jul 2007
    Posts
    44
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Dynamic grids inside input textarea?

    Hi, I want to create a way for users to get live feedback when creating layouts in an input form.

    So when they're making a div, I want to show borders around the <div> and </div>, so they can see where each one starts and where each ends.

    This is sorta almost like a WYSIWYG, except much simpler and suited only to one purpose. I'm not sure where to start on this, does anyone have any guidance?

    Thanks!

  2. #2
    SitePoint Wizard bronze trophy
    Join Date
    Jul 2008
    Posts
    5,757
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Maybe you could provide us with an image to demonstrate what you mean?

  3. #3
    SitePoint Enthusiast
    Join Date
    Jul 2007
    Posts
    44
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for your reply, I'm looking to enable users to type into an input field like this:


    Type some stuff:


    And for javascript to automatically grid the code like this:


    Thanks for your help!

  4. #4
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,729
    Mentioned
    104 Post(s)
    Tagged
    4 Thread(s)
    You can achieve the desired look with the following css and html

    Code css:
    .rendered {
    	margin: 0.5em;
    	padding: 0.5em;
    }
    .rendered div {
    	border: 1px solid black;
    	margin: 0.5em 0;
    	padding: 0.5em;
    	width: 10em;
    }

    Code html4strict:
    <div>&lt;div&gt;<br>
    Text here<br>
    some more stuff<br>
    &lt;/div&gt;</div>
    Some Misc Stuff<br>
    <div>&lt;div&gt;<br>
    Text here<br>
    &lt;/div&gt;</div>

    But converting the source code to the target code is something that I doubt will be easily achievable.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript


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
  •