Dynamic text - complicated script with _y problem

[PaintedSwan]

Well, I headed over the Experts Exchange to receive an answer about something else I posted here, and I got one. But while I appreciated immensely the help, and this is really great script which is exactly what I was looking for, the expert told me that he's "too lazy" to fix the flaw which exists in it, and I'm "on my own". Being that I'm a newb to AS, that really doesn't help me much.

The following script loads dynamic text from a .txt file, and creates clickable headers which display the corresponding content below them. There is a _y issue here; the headers overlap and only when they are clicked is the space between them accounted for. I'll display the code as well as attach my files. Thanks immensely to anyone who can figure this out for me...I've been at it for days.


data_lv = new LoadVars();
data_lv.onLoad = function(ok) {
if (ok) {
delete this.onLoad;
// trace(unescape(this));
parseData(this);
createDropDownParagraph();
} else {
trace("Error loading data...");
}
};
data_lv.load("data.txt");
function parseData(d) {
data_arr = new Array();
for (var i = 0; i<parseInt(d.pNum); i++) {
// trace("Title = " + d["p" + (i + 1) + "Title"]);
// trace("Content = " + d["p" + (i + 1) + "Content"]);
data_arr.push({title:d["p"+(i+1)+"Title"], content:d["p"+(i+1)+"Content"]});
}
}
function createDropDownParagraph() {
title_tf = new TextFormat();
title_tf.bold = true;
title_tf.size = 16;
for (var i = 0; i<data_arr.length; i++) {
this.createEmptyMovieClip("p"+i+"_mc", 1000+i);
this["p"+i+"_mc"].id = i;
this["p"+i+"_mc"].status = false;
this["p"+i+"_mc"].createTextField("title_txt", 1000+i+100*i, 100, 0, 300, 10);
this["p"+i+"_mc"].title_txt.textColor = 0xFFFFFF;
this["p"+i+"_mc"].title_txt.autoSize = true;
this["p"+i+"_mc"].title_txt.multiline = true;
this["p"+i+"_mc"].title_txt.wordWrap = true;
//this["p" + i + "_mc"].title_txt.border = true;
this["p"+i+"_mc"].title_txt.html = true;
this["p"+i+"_mc"].title_txt.htmlText = data_arr[i].title;
this["p"+i+"_mc"].title_txt.setTextFormat(title_tf);
this["p"+i+"_mc"].onPress = function() {
DisplayText(this, this.id, this.status);
this.status = !this.status;
};
}
}
function DisplayText(loc, id, status) {
this = loc;
// trace(id + " : " + this + " : " + status + " : " + data_arr[id].content);
if (!status) {
// Closed, start opening the paragraph...
trace("Start opening ... "+id);
content_tf = new TextFormat();
//content_tf.bold = true;
content_tf.size = 12;
this.createTextField("content_txt", 1000+10+id*10, this.title_txt._x+20, this.title_txt._y+30, 475, 10);
this.content_txt.textColor = 0xFFFFFF;
this.content_txt.autoSize = true;
this.content_txt.multiline = true;
this.content_txt.wordWrap = true;
//this.content_txt.border = true;
this.content_txt.html = true;
this.content_txt.htmlText = data_arr[id].content;
this.content_txt.setTextFormat(content_tf);
} else {
// Opened, start closing the paragraph...
trace("\tStart closing ... "+this+" : "+id);
this.content_txt.removeTextField();
}
for (var i = id-1; i<data_arr.length; i++) {
this._parent["p"+i+"_mc"]._y = this._parent["p"+(i-1)+"_mc"]._y+this._parent["p"+(i-1)+"_mc"]._height;
}
}

[metatron]

I'm a very very actioscript newb (I didn't understand a lot of the code there) but after a few tries, the easiest way is this:

Open data.txt with notepad and just add some space (with ENTER) in the &p2 and &p3 parts, like this:



&x=x&
&pNum=3&
&p1Title=August Events&
&p1Content=Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Pellentesque dictum. Mauris tempus. Aliquam consectetuer. Nam elementum, massa ut viverra elementum, turpis dolor porta risus, nec rutrum wisi diam at diam. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Mauris dolor massa, semper euismod, consequat sit amet, ultricies vitae, tellus. Curabitur a pede sit amet lacus blandit scelerisque. Proin at urna ut nunc euismod malesuada. Ut varius pharetra lectus. Nulla sem. Quisque aliquam. Donec eget risus. Nunc magna nisl, convallis ac, condimentum quis, porttitor eu, mi. Aliquam sollicitudin lobortis mi. Vivamus ultricies massa ut metus. Nulla ligula orci, ultricies vel, cursus id, condimentum fringilla, nunc. Proin wisi. Donec dignissim imperdiet erat. Ut ligula turpis, tristique ac, dictum ac, mollis tincidunt, felis.\nVestibulum iaculis. Nulla sodales turpis gravida leo pharetra consectetuer. Praesent volutpat risus ut pede. Mauris placerat, sem placerat fermentum tristique, tortor nulla sollicitudin erat, ac dapibus sem tortor hendrerit nibh. Aliquam quis lorem. Etiam dolor quam, tincidunt eu, egestas vitae, fermentum quis, nisl. Vestibulum gravida. Sed in risus. Nunc vestibulum mauris sed odio. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.\nSuspendisse iaculis ante sed purus. Etiam faucibus. Etiam pellentesque. Morbi lacinia urna ut nunc. Quisque id nibh. Integer lobortis dignissim massa. Donec pretium orci ac turpis. Proin ligula nisl, vulputate at, laoreet dignissim, faucibus sit amet, nisl. Phasellus aliquam metus in lectus. Sed placerat lorem et sem. Morbi in pede ut mauris bibendum consequat.&
&p2Title=
September Events&
&p2Content=
Proin semper tristique turpis. Fusce nec nibh. Pellentesque pulvinar, massa sit amet volutpat iaculis, wisi est laoreet nisl, sit amet pulvinar dui nisl vitae wisi. Ut tincidunt. In varius dui non lacus. Integer nonummy. Phasellus dictum enim et neque. Quisque erat. Nunc pede. Sed nulla mauris, tincidunt in, hendrerit vitae, suscipit non, nisl. In dui velit, ullamcorper vel, hendrerit vel, pretium non, urna. Nulla lacus nibh, dapibus vitae, consequat ut, pharetra et, orci. Ut nisl nibh, lacinia nec, gravida vel, sagittis a, sem. Curabitur vehicula mauris ut ante. Nulla cursus quam a velit. Ut ac wisi. Ut orci.\nMorbi odio turpis, hendrerit quis, accumsan vel, mollis eget, diam. Aenean metus. In elementum lorem nec neque. Aenean fringilla. Vivamus commodo, arcu et lobortis laoreet, augue sapien vestibulum ante, nec vehicula risus risus sed purus. Duis adipiscing dui vitae arcu. Quisque in metus et sem interdum dignissim. Mauris ornare pretium dui. Aliquam facilisis. Sed vitae libero non magna ullamcorper aliquet. Suspendisse ac leo sed odio lobortis euismod. Nulla ac erat. Suspendisse potenti. Pellentesque nec justo et augue adipiscing semper. Morbi a sapien. Curabitur suscipit. Aenean at est in velit volutpat mattis.&
&p3Title=

October Events&
&p3Content=

Vivamus sit amet eros. Quisque tincidunt imperdiet sem. Ut ultricies, augue et laoreet convallis, odio ipsum varius wisi, in iaculis risus erat ut nunc. In risus. Praesent vulputate venenatis metus. Maecenas elementum tortor non neque. Suspendisse nonummy, orci vitae adipiscing facilisis, metus lacus ultrices nunc, quis mollis orci justo a libero. Nulla leo orci, vulputate ac, auctor sed, pretium sed, nisl. Vestibulum fermentum, massa at aliquet consequat, magna erat interdum urna, vitae ultrices lorem nisl quis sapien. Aliquam nunc. Etiam lobortis. Nulla justo. Suspendisse ut sem ac est cursus vestibulum. Donec eros enim, convallis at, laoreet at, sagittis ut, mi.\nMaecenas ut sapien sed dolor tincidunt gravida. Praesent hendrerit semper metus. Sed interdum, turpis ac egestas tincidunt, neque ipsum dignissim turpis, in scelerisque lectus sem non orci. Vestibulum dolor. Donec dapibus est sed massa. Vivamus rhoncus nonummy turpis. Nullam porttitor, sapien in placerat lacinia, massa purus luctus enim, in fermentum lacus nibh et sapien. Sed nonummy turpis a turpis porttitor interdum. Morbi vulputate, ante quis malesuada commodo, mi tortor pulvinar odio, pretium tincidunt ligula libero viverra nisl. Cras accumsan quam nec magna. Praesent justo nulla, consectetuer a, volutpat eu, rutrum blandit, metus. Nam leo. Fusce euismod cursus lorem. In libero. Ut sed eros ut ante bibendum tristique.&
&x=x&


That should separate them BUT there is a problem with the code. At first, if you click any link it will open ALWAYS the content of October Events. I thought i moved some code but no. It happened with the original files you send too. So there's another problem... go figure.

[PaintedSwan]

I appreciate the help, metatron. :) Actually, I can separate them by putting



this["p"+i+"_mc"].createTextField("title_txt", 1000+i+100*i, 100, 30*i, 300, 10);


instead of



this["p"+i+"_mc"].createTextField("title_txt", 1000+i+100*i, 100, 0, 300, 10);


and this way the correct content for whichever header you click comes up, but all that does is separate them before they are clicked. The issue is that they become further apart after clicking. :(

[metatron]

grrr I tried to get the solution but with my current AS skills its useless, sorry. ;(

[PaintedSwan]

grrr I tried to get the solution but with my current AS skills its useless, sorry. ;(
You're in the same boat that I am then, no need to apologize, I appreciate you trying. :) Anyone else figure it out?

[Macaroni Ted]

you need to add some spacing to the _y when the text is created

just copy paste this


spacing=0
function createDropDownParagraph() {
title_tf = new TextFormat();
title_tf.bold = true;
title_tf.size = 16;
for (var i = 0; i<data_arr.length; i++) {
this.createEmptyMovieClip("p"+i+"_mc", 1000+i);
this["p"+i+"_mc"].id = i;
this["p"+i+"_mc"].status = false;
this["p"+i+"_mc"].createTextField("title_txt", 1000+i+100*i, 100, spacing, 300, 10)
spacing+=69
this["p"+i+"_mc"].title_txt.textColor = 0xFFFFFF;
this["p"+i+"_mc"].title_txt.autoSize = true;
this["p"+i+"_mc"].title_txt.multiline = true;
this["p"+i+"_mc"].title_txt.wordWrap = true;
//this["p" + i + "_mc"].title_txt.border = true;
this["p"+i+"_mc"].title_txt.html = true;
this["p"+i+"_mc"].title_txt.htmlText = data_arr[i].title;
this["p"+i+"_mc"].title_txt.setTextFormat(title_tf);
this["p"+i+"_mc"].onPress = function() {
DisplayText(this, this.id, this.status);
this.status = !this.status;
};
}
}

[PaintedSwan]

you need to add some spacing to the _y when the text is created

just copy paste this


spacing=0
function createDropDownParagraph() {
title_tf = new TextFormat();
title_tf.bold = true;
title_tf.size = 16;
for (var i = 0; i<data_arr.length; i++) {
this.createEmptyMovieClip("p"+i+"_mc", 1000+i);
this["p"+i+"_mc"].id = i;
this["p"+i+"_mc"].status = false;
this["p"+i+"_mc"].createTextField("title_txt", 1000+i+100*i, 100, spacing, 300, 10)
spacing+=69
this["p"+i+"_mc"].title_txt.textColor = 0xFFFFFF;
this["p"+i+"_mc"].title_txt.autoSize = true;
this["p"+i+"_mc"].title_txt.multiline = true;
this["p"+i+"_mc"].title_txt.wordWrap = true;
//this["p" + i + "_mc"].title_txt.border = true;
this["p"+i+"_mc"].title_txt.html = true;
this["p"+i+"_mc"].title_txt.htmlText = data_arr[i].title;
this["p"+i+"_mc"].title_txt.setTextFormat(title_tf);
this["p"+i+"_mc"].onPress = function() {
DisplayText(this, this.id, this.status);
this.status = !this.status;
};
}
}


Thanks so much, Macaroni Ted, that helps immensely. Now the only issue I've been trying to get rid of is...after you click on a header, if you then collapse it, there is suddenly more space between the headers than you had to begin with. I just want the spacing to remain constant. Thanks again. :)

[Macaroni Ted]

yeah after posting i just had a look probably and u need to add a little more to make it work better.

for (var i = id-1; i<data_arr.length; i++) {
this._parent["p"+i+"_mc"]._y = this._parent["p"+(i-1)+"_mc"]._y+this._parent["p"+(i-1)+"_mc"]._height-20;
}
add the number -20 to the end and change this (it was 69)


spacing+=35

[PaintedSwan]

yeah after posting i just had a look probably and u need to add a little more to make it work better.

for (var i = id-1; i<data_arr.length; i++) {
this._parent["p"+i+"_mc"]._y = this._parent["p"+(i-1)+"_mc"]._y+this._parent["p"+(i-1)+"_mc"]._height-20;
}
add the number -20 to the end and change this (it was 69)


spacing+=35
Thanks Macaroni Ted! You saved me a lot of headaches, I'm very grateful. :) The changes you gave me worked perfectly...but once I put them into a scrollable movieclip (the one made by Claudio), the headers all jump back -20 in the scollbox and the first one can no longer be seen. It seems the scroller isn't reading the top _y position of the text correctly. Anyhow, I posted my files, if you could take a look I'd appreciate it a lot. :)

[Macaroni Ted]

hi
without changing all the code this is just a patch it works but i think it will create another problem first of all here is the code u need to change.

for (var i = id-1; i<data_arr.length; i++) {
if(i!==0){
this._parent["p"+i+"_mc"]._y = this._parent["p"+(i-1)+"_mc"]._y+this._parent["p"+(i-1)+"_mc"]._height-20;
}
}
}

it bascially tell it not to affect the top menu.

however like i said, it creates a small problem which is that it if you press october Events the text will open but u may not see it until u scroll down.
anyway for now take a look if this is a problem then give me a message and ill have another look later .

[PaintedSwan]

hi
without changing all the code this is just a patch it works but i think it will create another problem first of all here is the code u need to change.

for (var i = id-1; i<data_arr.length; i++) {
if(i!==0){
this._parent["p"+i+"_mc"]._y = this._parent["p"+(i-1)+"_mc"]._y+this._parent["p"+(i-1)+"_mc"]._height-20;
}
}
}

it bascially tell it not to affect the top menu.

however like i said, it creates a small problem which is that it if you press october Events the text will open but u may not see it until u scroll down.
anyway for now take a look if this is a problem then give me a message and ill have another look later .

You're my hero lol. :D This is perfect, thank you sooo much. I actually intend on making the scrollbox much bigger, so not seeing the text won't be an issue. Thanks again!

[Macaroni Ted]

no problem :} good luck!

[PaintedSwan]

no problem :} good luck!
Hi Ted, me again. :} There are a few issues I've run into, and I was wondering if I could yet again ask for your help.

First of all, I can't seem to get the scroller to recognize where the bottom of the text is. I'm not sure if this is because the text fields are appearing and disappearing when I click them, or what. But if I put a whole bunch more text in the data.txt, it stops scrolling before it hits the bottom. I assume it has to do with this code:




_root.bottom = this._y-this.content_txt._height+id-_root.space;



Any suggestions on this?

My second issue is, it would be ideal if the topmost header would display the content below it by default, so the user has some content displayed right away Also, the AS loads the data.txt in ascending numbers, when I really need to change it to descending numbers, since I'm going to be adding the most recent entry on the top. If I kept it how it is, I'd have to shift all the numbers underneath it each time I added a new 1Title. I want to be able to just add greater numbers each time I add a new entry on the top. So the AS needs to look for the highest number in data.txt, and display that one first.

And my final question is, would it be insanely difficult to add some type of rollover or onpress effect to change the text color of the headers, so it's not so confusing which header the user is on?

Anyhow, I realize these are pretty big requests, but any help you're able to offer would be greatly appreciated. Thanks so much. :)

[PaintedSwan]

Oh and, let me know if you need me to post any more files so you can see what I mean about the scrolling problem. Thanks. :D

[Macaroni Ted]

one question at a time;) lol.

im going out for a well earned beer now, even though there is a typhoon outside:jailbreak !

ill have a look tomorrow(well tomorrow for me).

but ill leave u with this.

you can change the colour on roll over easily put a rollOver & rollOut function in the main mc frame under the just onPress function's curly brace(}) like so

this["p"+i+"_mc"].onPress = function() {
DisplayText(this, this.id, this.status);
this.status = !this.status;
}
this["p"+i+"_mc"].onRollOver=function(){
this.title_txt.textColor = 0x4B85E4;
}
this["p"+i+"_mc"].onRollOut=function(){
this.title_txt.textColor = 0x000000;
}


this changes the text to blue on roll over and back to black again on roll off

[PaintedSwan]

one question at a time;) lol.

im going out for a well earned beer now, even though there is a typhoon outside:jailbreak !

ill have a look tomorrow(well tomorrow for me).

but ill leave u with this.

you can change the colour on roll over easily put a rollOver & rollOut function in the main mc frame under the just onPress function's curly brace(}) like so

this["p"+i+"_mc"].onPress = function() {
DisplayText(this, this.id, this.status);
this.status = !this.status;
}
this["p"+i+"_mc"].onRollOver=function(){
this.title_txt.textColor = 0x4B85E4;
}
this["p"+i+"_mc"].onRollOut=function(){
this.title_txt.textColor = 0x000000;
}


this changes the text to blue on roll over and back to black again on roll off

Thanks for the code to change the text color, it worked well. :) Sorry for all the questions lol...I wish I had a better way of repaying you than just 'thank you'. I realize how much you have to know and study to be able to answer these questions, so I'm just basically in awe, hoping that one day I'll be able to do this as well as you (or at least almost as well). :D

[PaintedSwan]

Just making sure this doesn't get totally lost in the shuffle...

[Macaroni Ted]

morning ps,
first to correct the bottom.

remove this from the main mc actionscript.


_root.bottom = this._y+_root.mask_mc._height-this.content_txt._height-_root.space;


then add these 2 lines after the last for statement right at the bottom of the script and before the last curley bracket(})



for (var i = id-1; i<data_arr.length; i++) {
if(i!==0){
this._parent["p"+i+"_mc"]._y = this._parent["p"+(i-1)+"_mc"]._y+this._parent["p"+(i-1)+"_mc"]._height-23;

}
}

msize=-this._parent["p"+2+"_mc"]._y-this._parent["p"+2+"_mc"].content_txt._height
_root.bottom=msize

actually u could just put _root.bottom=this._paren.....etc instead of making a variable first.

as i said last time this is move of a patch than anything else as it makes the scroll bar act a little different.

[PaintedSwan]

morning ps,
first to correct the bottom.

remove this from the main mc actionscript.


_root.bottom = this._y+_root.mask_mc._height-this.content_txt._height-_root.space;


then add these 2 lines after the last for statement right at the bottom of the script and before the last curley bracket(})



for (var i = id-1; i<data_arr.length; i++) {
if(i!==0){
this._parent["p"+i+"_mc"]._y = this._parent["p"+(i-1)+"_mc"]._y+this._parent["p"+(i-1)+"_mc"]._height-23;

}
}

msize=-this._parent["p"+2+"_mc"]._y-this._parent["p"+2+"_mc"].content_txt._height
_root.bottom=msize

actually u could just put _root.bottom=this._paren.....etc instead of making a variable first.

as i said last time this is move of a patch than anything else as it makes the scroll bar act a little different.

Hi Ted :D thanks so much for working on this for me. Unfortunately, the code only works if I click on the bottom-most header first. If I click on any of the others, the scrollbar doesn't scroll. Also, if I have more than 3 headers, say like 8, it seems that I'd have to change this part of the code each time I add a new entry. Let me know if I'm just doing something wrong...

[Macaroni Ted]

Hi Ted :D thanks so much for working on this for me. Unfortunately, the code only works if I click on the bottom-most header first. If I click on any of the others, the scrollbar doesn't scroll. Also, if I have more than 3 headers, say like 8, it seems that I'd have to change this part of the code each time I add a new entry. Let me know if I'm just doing something wrong...

the way the code should work is by checking the last title's _y+the size of the its text so if u have 8 then u will need to update this number in red to how many headers u have-1 so if headers =8 then u need to input 7
msize=-this._parent["p"+2+"_mc"].....

it works on the last example u sent so if this doesnt work
a: make sure after u click the header that u try to scroll down to check if it works or not
b: send me the most recent work.
c: i could be wrong.:ponder:

[PaintedSwan]

the way the code should work is by checking the last title's _y+the size of the its text so if u have 8 then u will need to update this number in red to how many headers u have-1 so if headers =8 then u need to input 7
msize=-this._parent["p"+2+"_mc"].....

it works on the last example u sent so if this doesnt work
a: make sure after u click the header that u try to scroll down to check if it works or not
b: send me the most recent work.
c: i could be wrong.:ponder:
Yes, I understood what I needed to change, I was just hoping that I wouldn't have to go into Flash every time I updated my .txt entries, and that it might be able to read dynamically how many there are? Let me know if I'm just asking too much lol. Although, you did say this was just a patch, so I'll understand if there are revisions to this in the future...

Here's my files. If you click on anything but the bottom entry, it doesn't scroll.

[Macaroni Ted]

ok so first add:
this["p"+i+"_mc"].onReleaseOutside = function() {
this.title_txt.textColor = 0xFFFFFF;
};
}
//add the line bellow here. this sets the last header
lastHeader=this["p"+(data_arr.length-1)+"_mc"]
}

and then this at the bottom where i i told you to put the last code change it to this.

if(lastHeader.content_txt._height>1){
msize = -lastHeader._y-lastHeader.content_txt._height;

} else{
msize= -lastHeader._y
}
_root.bottom = msize;

belore the last curly Brace.

[PaintedSwan]

ok so first add:
this["p"+i+"_mc"].onReleaseOutside = function() {
this.title_txt.textColor = 0xFFFFFF;
};
}
//add the line bellow here. this sets the last header
lastHeader=this["p"+(data_arr.length-1)+"_mc"]
}

and then this at the bottom where i i told you to put the last code change it to this.

if(lastHeader.content_txt._height>1){
msize = -lastHeader._y-lastHeader.content_txt._height;

} else{
msize= -lastHeader._y
}
_root.bottom = msize;

belore the last curly Brace.

Yayyy! You rock =) that works brilliantly, thank you. You deserve a beer :beer:

Now it's just being able to list the numbers in the opposite order and displaying the first content by default, and this thing should be complete. But, if you need to take your time with all that, I'll completely understand. As it is I'm in awe and extremely grateful. :D

[PaintedSwan]

Hi again, Ted. :) Well, there's one more small glitch in the scroller code. If I have so many headers that it goes beyond the box, they aren't scrollable from the get go. Put say, 20 headers in the data.txt - you only see about 12...the rest are hidden and you aren't able to scroll to them. Any ideas? Thanks so much once again.

-swan

[PaintedSwan]

I figured out how to reverse the order of the array, much simpler than I thought it would be:




data_arr.reverse();



:D Now it's just a matter of getting scrollbar to work properly. In addition to not being able to scroll the titles right away, the more text I put in the .txt file, the harder time the scollbar seems to have in finding the bottom of it. Even after I click on one of the headers, the scollbar only reaches the bottom of title number 15 out of 20. I'll attach my files so you can see what I mean. I appreciate your help immensely thus far. :)

-swan

[PaintedSwan]

Anyone?

[PaintedSwan]

So, I've taken this to 3 other forums, and no one answers, despite there being views to my files. Is this just too complicated? If anyone could throw me a lifeline, this project is important to me, and I've been trying to get it done for weeks now. Thanks.

[PaintedSwan]

Nevermind, folks. Ted was gracious enough to figure this out for me...he's my hero for the day...and week lol :D

**EDIT - Does anyone want me to post the solution?