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 1 of 2 12 LastLast
Results 1 to 15 of 23
  1. #1
    New Coder
    Join Date
    Aug 2012
    Posts
    12
    Thanks
    3
    Thanked 0 Times in 0 Posts

    Need Help With a Small Javascript Project

    I am working on a small Javascript based project for someone, but I have come to a standstill. I need to find a way to add a scroll bar to my output boxes. I borrowed my output box function from my old JS teacher(And before anyone asks, I didn't steal it. He let me use it.), so I don't really how to mold it. It would help if I was better in this language, but I only had basic JS training. Any and all help is much appreciated.

    Code:
    function Createoutput(name, width, height) {
    	Print(name);
    	var e = document.createElement('div',);
    	e.style.width = width;
    	e.style.height = height;
    	e.style.border = 'black 1px solid';
    	document.body.appendChild(e,);
    	return e;
    }
    Last edited by Pseudonym_; 08-25-2012 at 02:29 AM. Reason: I needed to make the title a bit more descriptive.

  • #2
    Senior Coder Logic Ali's Avatar
    Join Date
    Sep 2010
    Location
    London
    Posts
    1,028
    Thanks
    0
    Thanked 207 Times in 202 Posts
    Try
    Code:
    function Createoutput(name, width, height) {
    	Print(name);
    	var e = document.createElement('div',);
    	e.style.width = width;
    	e.style.height = height;
    	e.style.border = 'black 1px solid';
            e.style.overflow = 'scroll';
    	document.body.appendChild(e);
    	return e;
    }

  • Users who have thanked Logic Ali for this post:

    Pseudonym_ (08-25-2012)

  • #3
    New Coder
    Join Date
    Aug 2012
    Posts
    12
    Thanks
    3
    Thanked 0 Times in 0 Posts
    Awesome! I can't thank you enough for that!

  • #4
    Senior Coder jmrker's Avatar
    Join Date
    Aug 2006
    Location
    FL
    Posts
    3,092
    Thanks
    38
    Thanked 498 Times in 492 Posts

    Lightbulb

    This is just a SWAG about what you are trying to do ...
    Code:
    <!DOCTYPE html>
    <html lang="en">
    <meta charset="utf-8" />
    <title> Untitled </title>
    <script type="text/javascript">
    function Createoutput(elemName, width, height) {
    //	Print(name);
    	var e = document.createElement('div');
            e.name = elemName;
            e.id = elemName;
    	e.style.width = width;
    	e.style.height = height;
    	e.style.border = 'black 1px solid';
            e.style.overflow = 'scroll';
            e.innerHTML = 'This is some sample display';
    	document.body.appendChild(e);
    //	return e;
    }
    function AddToOutput(IDS,msg) {
      document.getElementById(IDS).innerHTML += msg;
    }
    </script>
    
    <style type="text/css">
    
    </style>
    </head>
    <body>
    <button onclick="Createoutput('divBox','200px','100px')">Create Box</button>
    <button onclick="AddToOutput('divBox',
      '<p>This is some additional information<p>It should be long enough to cause a scroll arrow')">Add Info</button>
    </body>
    </html>
    Last edited by jmrker; 08-25-2012 at 02:55 AM. Reason: Looks like I type to slow ... AGAIN! Good Luck!

  • Users who have thanked jmrker for this post:

    Pseudonym_ (08-25-2012)

  • #5
    New to the CF scene
    Join Date
    Aug 2012
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts
    thanks for your help. i need this js also.

  • #6
    New Coder
    Join Date
    Aug 2012
    Posts
    12
    Thanks
    3
    Thanked 0 Times in 0 Posts
    Thanks for the help guys, I really needed to figure that out. But now I have a new problem.
    Code:
    function Write(output, text) {
    	output.innerHTML += text;
    }
    function WriteLine(output, text) {
    	Write(output, text + '<br>');
    }
    var area= {
    1 : "ExampleText",
    2 : "MoreExampleText",
    3 : "EvenMoreExampleText"
    }
    var aNumber = 1;
    function Examine() {
    	WriteLine(output,area.aNumber);
    }
    I'm trying to access the strings provided in the object by using a variable representing the specific number representing said string. I know this probably isn't possible, but if anyone knows a way to do this a different way, please tell me.
    Last edited by Pseudonym_; 08-26-2012 at 12:37 AM. Reason: There was a snippet of code I forgot to add.

  • #7
    Senior Coder jmrker's Avatar
    Join Date
    Aug 2006
    Location
    FL
    Posts
    3,092
    Thanks
    38
    Thanked 498 Times in 492 Posts

    Lightbulb

    I'm not sure why you would want to use an associated array for this task
    instead of just a normal array. There is more to be gained using a normal
    array than trying to bypass the element reference.

    But if you really must accomplish this task, you could do this,
    but it is not the most efficient way to do it.

    Code:
    <!DOCTYPE html>
    <html lang="en">
    <meta charset="utf-8" />
    <head>
    <title> Untitled </title>
    
    <script type="text/javascript">
    function Write(output, text) { document.getElementById(output).innerHTML += text; }
    function WriteLine(output, text) { Write(output, text + '<br>'); }
    function Examine(output,item) { WriteLine(output,area[item]); }
    
    var area= {
       'n1': "Example Text",
       'n2': "More Example Text",
       'n3': "Even More Example Text"
    }
    </script>
    
    </head>
    <body>
    <button onclick="Examine('divArea','n1')">Examine 1</button>
    <button onclick="Examine('divArea','n2')">Examine 2</button>
    <button onclick="Examine('divArea','n3')">Examine 3</button>
    <div id="divArea"></div>
    </body>
    </html>

  • #8
    New Coder
    Join Date
    Aug 2012
    Posts
    12
    Thanks
    3
    Thanked 0 Times in 0 Posts
    Well, I'm not a JavaScript genius. I only had a couple of semesters worth of basic JS in high school, so I was trying to use what I know. I guess that I should brush up on some other methods though... Thanks for the help!

  • #9
    Senior Coder jmrker's Avatar
    Join Date
    Aug 2006
    Location
    FL
    Posts
    3,092
    Thanks
    38
    Thanked 498 Times in 492 Posts

    Lightbulb

    Same idea, different execution ...
    Code:
    <!DOCTYPE html>
    <html lang="en">
    <meta charset="utf-8" />
    <head>
    <title> Untitled </title>
    
    <script type="text/javascript">
    function Write(output, text) { document.getElementById(output).innerHTML += text; }
    function WriteLine(output, text) { Write(output, text + '<br>'); }
    function Examine(output,item) { WriteLine(output,area[item]); }
    function showAll(IDS) {
      for (var i=0; i<area.length; i++) { WriteLine(IDS,'<br>'+area[i]); }
      Write(IDS,'<br>');
    }
    
    var area= [
       "Example Text",
       "More Example Text",
       "Even More Example Text"
    ]
    </script>
    
    </head>
    <body>
    <button onclick="Examine('divArea',0)">Examine 1</button>
    <button onclick="Examine('divArea',1)">Examine 2</button>
    <button onclick="Examine('divArea',2)">Examine 3</button>
    <button onclick="showAll('divArea')">Show all</button>
    <div id="divArea"></div>
    </body>
    </html>

  • #10
    Regular Coder
    Join Date
    Aug 2010
    Posts
    974
    Thanks
    19
    Thanked 212 Times in 210 Posts
    Quote Originally Posted by Pseudonym_ View Post
    Thanks for the help guys, I really needed to figure that out. But now I have a new problem.
    Code:
    function Write(output, text) {
    	output.innerHTML += text;
    }
    function WriteLine(output, text) {
    	Write(output, text + '<br>');
    }
    var area= {
    1 : "ExampleText",
    2 : "MoreExampleText",
    3 : "EvenMoreExampleText"
    }
    var aNumber = 1;
    function Examine() {
    	WriteLine(output,area.aNumber);
    }
    I'm trying to access the strings provided in the object by using a variable representing the specific number representing said string. I know this probably isn't possible, but if anyone knows a way to do this a different way, please tell me.

    from http://es5.github.com/x11.html#x11.1.5

    PropertyName :

    IdentifierName
    StringLiteral
    NumericLiteral


    so

    Code:
    <body>
    </body>
    <script>
    function Write(output, text) {
    	output.innerHTML += text;
    }
    function WriteLine(output, text) {
    	Write(output, text + '<br>');
    }
    var area= {
    1 : "ExampleText",
    2 : "MoreExampleText",
    3 : "EvenMoreExampleText"
    }
    var aNumber = 3;
    function Examine() {
    	WriteLine(document.body,area[aNumber]);
    }
    Examine()
    </script>
    Last edited by DaveyErwin; 08-26-2012 at 08:39 PM.

  • Users who have thanked DaveyErwin for this post:

    Pseudonym_ (08-26-2012)

  • #11
    New Coder
    Join Date
    Aug 2012
    Posts
    12
    Thanks
    3
    Thanked 0 Times in 0 Posts
    I really appreciate all of the help you guys have been giving me. I know that I have been asking for a lot of help, but this project was a bit harder than I anticipated. Now, is it possible to identify part of an input, rather that all of it? Also, is it possible to make the scrollbar I asked about above auto-scroll?
    Last edited by Pseudonym_; 08-28-2012 at 02:46 AM.

  • #12
    Senior Coder jmrker's Avatar
    Join Date
    Aug 2006
    Location
    FL
    Posts
    3,092
    Thanks
    38
    Thanked 498 Times in 492 Posts

    Question

    Quote Originally Posted by Pseudonym_ View Post
    I really appreciate all of the help you guys have been giving me. I know that I have been asking for a lot of help, but this project was a bit harder than I anticipated. Now, is it possible to identify part of an input, rather that all of it? Also, is it possible to make the scrollbar I asked about above auto-scroll?
    Your questions are a bit vague for me.

    What part of what input do you want to identify?

    What are you trying to do with the scrollbar? Can you be more specific?


  • #13
    New Coder
    Join Date
    Aug 2012
    Posts
    12
    Thanks
    3
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by jmrker View Post
    Your questions are a bit vague for me.

    What part of what input do you want to identify?

    What are you trying to do with the scrollbar? Can you be more specific?

    Well, for the scrollbar, you have to manually press the down arrow every time the text expands past it. IS there a way to make it auto scroll? And for the input problem, imagine the input was "eat watermelon" or something like that. IS it possible to just identify the words "eat" and "watermelon" separately? So that the program can execute something each time "eat" is used, not necessarily just for the word "watermelon"?

  • #14
    New Coder
    Join Date
    Aug 2012
    Posts
    12
    Thanks
    3
    Thanked 0 Times in 0 Posts
    Oh by the way, I'm sure you wanna know what I'm making. I'm working on a Text Game for someone. I'm not sure if that's relevant, but I hope explains my awkward requests

  • #15
    Senior Coder jmrker's Avatar
    Join Date
    Aug 2006
    Location
    FL
    Posts
    3,092
    Thanks
    38
    Thanked 498 Times in 492 Posts

    Exclamation

    Quote Originally Posted by Pseudonym_ View Post
    Well, for the scrollbar, you have to manually press the down arrow every time the text expands past it. IS there a way to make it auto scroll? And for the input problem, imagine the input was "eat watermelon" or something like that. IS it possible to just identify the words "eat" and "watermelon" separately? So that the program can execute something each time "eat" is used, not necessarily just for the word "watermelon"?
    What do you mean by "auto scroll"?
    Continuously scroll down to bottom? Then what? Stop? Scroll back to the top? Jump back to the top?
    What does the scrolling display contain? How big is the area to be scrolled? Does the scrolling action ever stop?

    The second part of splitting the input is possible. The following will split the string input into two elements of an array.
    You could test for either with: if (words[0] == ?????) { foundAction(); } else { notfoundAction(); }

    Code:
      var words = 'eat watermelon'.split(' ');
    However, once the word eat is identified, what is to happen then? What words beside "eat" are to be identified?
    What is to be executed when the identified words are found.

    What have you coded so far?
    Even if the game does not work, you could at least provide the layout and a general idea of the play.

    Need more information to be able to respond with a coherent voice.



  •  
    Page 1 of 2 12 LastLast

    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
    •