Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Page 2 of 2 FirstFirst 12
Results 16 to 27 of 27
  1. #16
    New Coder
    Join Date
    Sep 2013
    Posts
    18
    Thanks
    2
    Thanked 0 Times in 0 Posts
    oh ok I understand now. I didn't see the class attribute in the text area. Do you know how to make the text area fixed so that a user cant resize it?

  2. #17
    Supreme Master coder! glenngv's Avatar
    Join Date
    Jun 2002
    Location
    Philippines
    Posts
    10,968
    Thanks
    0
    Thanked 236 Times in 233 Posts
    Add this in the css:
    Code:
    textarea {
        resize: none;
    }
    That will prevent all textareas to be resized.

  3. #18
    New Coder
    Join Date
    Sep 2013
    Posts
    18
    Thanks
    2
    Thanked 0 Times in 0 Posts
    its interesting to point out that when i go to the link you have given me for the updated code it works as expected but hosting it on my local server seems to open the text area as soon as i open the page. it also doesnt seem to work on IE. do i need to clear cache maybe?

  4. #19
    Supreme Master coder! glenngv's Avatar
    Join Date
    Jun 2002
    Location
    Philippines
    Posts
    10,968
    Thanks
    0
    Thanked 236 Times in 233 Posts
    Post your code.

  5. #20
    New Coder
    Join Date
    Sep 2013
    Posts
    18
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Code:
    <!doctype html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>Untitled Document</title>
    
    <link href="Style.css" rel="stylesheet" type="text/css">
    </head>
    <body>
    <form  action="test.html" method="post" title="Post Comment"  >
      <a id="CmtBox" onClick="link" href="#" class="CmtBtn">Show Comment</a>
        <br/>
        <br/>
      
      <textarea wrap="hard" class="comment" id="comment"></textarea>
    
    </form>
    <script>
    document.getElementById("CmtBox").onclick = function () {
        var comment = document.getElementById("comment");
        if ((/\bhide\b/).test(comment.className)) {
            comment.className =  comment.className.replace(/\bhide\b/, '');
            this.innerHTML = 'Hide Comment';
        }
        else {
            comment.className += ' hide';
            this.innerHTML = 'Show Comment';
        }
        return false; //cancel default link action
    };
    
    </script>
    
    </body>
    </html>
    this is the css that i have

    Code:
    @charset "utf-8";
    /* CSS Document */
    
    .hide { 
        display: none;
    }
    .comment {
    	margin-left: 30px;
    	margin-bottom: 30px;
    	height: 63px;
    	width: 548px;
    	min-width: 548px;
    	min-height: 63px;
    	resize:none; 
    }
    .CmtBtn {
    	background-color: silver;
    	
    	
    	   
    	   }

  6. #21
    Supreme Master coder! glenngv's Avatar
    Join Date
    Jun 2002
    Location
    Philippines
    Posts
    10,968
    Thanks
    0
    Thanked 236 Times in 233 Posts
    1. Remove the inline onClick="link"

    Code:
    <a id="CmtBox" onClick="link" href="#" class="CmtBtn">Show Comment</a>
    2. You didn't add the 'hide' class to the textarea.

    Code:
    <textarea wrap="hard" class="comment" id="comment"></textarea>
    3. Make sure the path to the included css is correct.

  7. #22
    New Coder
    Join Date
    Sep 2013
    Posts
    18
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Code:
    <!doctype html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>Untitled Document</title>
    
    <link href="Style.css" rel="stylesheet" type="text/css">
    </head>
    <body>
    <form  action="test.html" method="post" title="Post Comment"  >
      <a id="CmtBox" href="#" class="CmtBtn">Show Comment</a>
        <br/>
        <br/>
      
      <textarea wrap="hard" class="comment" id="comment" class="hide"></textarea>
    
    </form>
    <script>
    document.getElementById("CmtBox").onclick = function () {
        var comment = document.getElementById("comment");
        if ((/\bhide\b/).test(comment.className)) {
            comment.className =  comment.className.replace(/\bhide\b/, '');
            this.innerHTML = 'Hide Comment';
        }
        else {
            comment.className += ' hide';
            this.innerHTML = 'Show Comment';
        }
        return false; //cancel default link action
    };
    
    </script>
    
    </body>
    </html>
    still doesnt hide it when you load the page and doesnt work in IE at all.

  8. #23
    New Coder
    Join Date
    Sep 2013
    Posts
    18
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Code:
    <!doctype html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>Untitled Document</title>
    
    <link href="Style.css" rel="stylesheet" type="text/css">
    </head>
    <body>
    <form  action="test.html" method="post" title="Post Comment"  >
      <a id="CmtBox" href="#" class="CmtBtn">Show Comment</a>
        <br/>
        <br/>
      
      <textarea wrap="hard" class="hide" id="comment"></textarea>
    </form>
    <script>
    document.getElementById("CmtBox").onclick = function () {
        var comment = document.getElementById("comment");
        if ((/\bhide\b/).test(comment.className)) {
            comment.className =  comment.className.replace(/\bhide\b/, '');
            this.innerHTML = 'Hide Comment';
        }
        else {
            comment.className += ' hide';
            this.innerHTML = 'Show Comment';
        }
        return false; //cancel default link action
    };
    
    </script>
    
    </body>
    </html>
    fixed the hide issue but doesnt seem to work in IE still.

  9. #24
    New Coder
    Join Date
    Sep 2013
    Posts
    18
    Thanks
    2
    Thanked 0 Times in 0 Posts
    also seems to change the size of the box in both chrome and firefox.

  10. #25
    New Coder
    Join Date
    Sep 2013
    Posts
    18
    Thanks
    2
    Thanked 0 Times in 0 Posts
    oh i forgot to mention it makes the box so that you can resize it and i added reize: none; to hide to see if that would help but it did not help at all.

  11. #26
    Supreme Master coder! glenngv's Avatar
    Join Date
    Jun 2002
    Location
    Philippines
    Posts
    10,968
    Thanks
    0
    Thanked 236 Times in 233 Posts
    Try this. This is not using an external css. But you can worry about that later. Just make sure this works first.

    Code:
    <!doctype html>
    <html>
    <head>
    <meta charset="utf-8" />
    <title>Untitled Document</title>
    <style>
    .hide { 
        display: none;
    }
    .comment {
        margin-left: 30px;
        margin-bottom: 30px;
        height: 63px;
        width: 548px;
        min-width: 548px;
        min-height: 63px;
        resize:none; 
    }
    .CmtBtn {
        background-color: silver;     
    }
    </style>
    </head>
    <body>
    <form  action="test.html" method="post" title="Post Comment">
      <a id="CmtBox" href="#" class="CmtBtn">Show Comment</a>
        <br/>
        <br/>
      
      <textarea wrap="hard" class="hide comment" id="comment"></textarea>
    </form>
    <script>
    document.getElementById("CmtBox").onclick = function () {
        var comment = document.getElementById("comment");
        if ((/\bhide\b/).test(comment.className)) {
            comment.className =  comment.className.replace(/\bhide\b/, '');
            this.innerHTML = 'Hide Comment';
        }
        else {
            comment.className += ' hide';
            this.innerHTML = 'Show Comment';
        }
        return false; //cancel default link action
    };
    
    </script>
    
    </body>
    </html>
    I have tested this works in Chrome, Firefox, IE7 to IE10.

    If you are running this locally, IE will prompt you if you want to allow to run the script or not. You should allow it. I think that's what's got you thinking that it does not work.

  12. Users who have thanked glenngv for this post:

    bojak (09-26-2013)

  13. #27
    New Coder
    Join Date
    Sep 2013
    Posts
    18
    Thanks
    2
    Thanked 0 Times in 0 Posts
    works perfectly I haven't tested in firefox or chrome but I will later. IE works great though.


 
Page 2 of 2 FirstFirst 12

Tags for this Thread

Posting Permissions

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