CodingForums.com

CodingForums.com (http://www.codingforums.com/index.php)
-   JavaScript programming (http://www.codingforums.com/forumdisplay.php?f=2)
-   -   Need Help With a Small Javascript Project (http://www.codingforums.com/showthread.php?t=271368)

Pseudonym_ 08-25-2012 02:26 AM

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;
}


Logic Ali 08-25-2012 02:47 AM

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;
}


Pseudonym_ 08-25-2012 02:49 AM

Awesome! I can't thank you enough for that!

jmrker 08-25-2012 02:54 AM

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>


yoyodress 08-25-2012 10:42 AM

thanks for your help. i need this js also.:D

Pseudonym_ 08-26-2012 12:35 AM

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.

jmrker 08-26-2012 02:43 AM

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>


Pseudonym_ 08-26-2012 04:32 PM

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!

jmrker 08-26-2012 07:35 PM

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>


DaveyErwin 08-26-2012 08:35 PM

Quote:

Originally Posted by Pseudonym_ (Post 1264135)
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>


Pseudonym_ 08-28-2012 02:23 AM

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?

jmrker 08-28-2012 03:20 AM

Quote:

Originally Posted by Pseudonym_ (Post 1264663)
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?

:confused:

Pseudonym_ 08-29-2012 02:54 AM

Quote:

Originally Posted by jmrker (Post 1264679)
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?

:confused:

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"?

Pseudonym_ 08-31-2012 12:46 AM

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

jmrker 08-31-2012 03:55 AM

Quote:

Originally Posted by Pseudonym_ (Post 1265022)
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.

:confused:


All times are GMT +1. The time now is 05:48 AM.

Powered by vBulletin®
Copyright ©2000 - 2013, Jelsoft Enterprises Ltd.