The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

2 Pages V  1 2 >  
Reply to this topicStart new topic
> Java script type effect
asmith
post Jun 5 2008, 11:38 AM
Post #1


Advanced Member
****

Group: Members
Posts: 198
Joined: 26-December 07
Member No.: 4,586



Hey guys

I'm searching for some JAVA script code, which make my HTML paraghraph appear on the page like "typing" , meaning characters of the paragraph appear on the page one by one, exactly like someone is typing them.

any idea ?

thanks in advance
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Frederiek
post Jun 5 2008, 12:10 PM
Post #2


Programming Fanatic
********

Group: Members
Posts: 5,146
Joined: 23-August 06
From: Europe
Member No.: 9



Like this: http://www.javascriptkit.com/script/cut136.shtml?
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Jun 5 2008, 12:47 PM
Post #3


Don't like donuts. Don't do MySpace.
********

Group: WDG Moderators
Posts: 18,435
Joined: 9-August 06
Member No.: 6



http://www.scintilla.utwente.nl/frederiek biggrin.gif
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
asmith
post Jun 5 2008, 01:16 PM
Post #4


Advanced Member
****

Group: Members
Posts: 198
Joined: 26-December 07
Member No.: 4,586



xD yea both link are almost what i wanted. (exactly i wanted a delay between some characters, just like someone types).

thanks a lot.

the thing on my mind is i want to put them on that nicol stu tabbed pages.
wanna check it if i click on each tab , the content would be shown like this typing thing.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Frederiek
post Jun 5 2008, 03:36 PM
Post #5


Programming Fanatic
********

Group: Members
Posts: 5,146
Joined: 23-August 06
From: Europe
Member No.: 9



QUOTE(pandy @ Jun 5 2008, 07:47 PM) *

biggrin.gif biggrin.gif
ha, ha, how the did you find that, Pandy?
Apparently, there are other women in the Netherlands with the same name as mine, I only have seen that once in a magazine.
Anyway, thanks for a good laugh tonight!
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Frederiek
post Jun 5 2008, 03:42 PM
Post #6


Programming Fanatic
********

Group: Members
Posts: 5,146
Joined: 23-August 06
From: Europe
Member No.: 9



QUOTE(asmith @ Jun 5 2008, 08:16 PM) *

xD yea both link are almost what i wanted. (exactly i wanted a delay between some characters, just like someone types).

thanks a lot.

the thing on my mind is i want to put them on that nicol stu tabbed pages.
wanna check it if i click on each tab , the content would be shown like this typing thing.


Slow down the speed then, as hardly anyone types as fast as that.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Jun 5 2008, 03:50 PM
Post #7


.
********

Group: WDG Moderators
Posts: 8,246
Joined: 10-August 06
Member No.: 7



QUOTE(Frederiek @ Jun 5 2008, 10:36 PM) *

QUOTE(pandy @ Jun 5 2008, 07:47 PM) *

biggrin.gif biggrin.gif
ha, ha, how the … did you find that, Pandy?
Apparently, there are other women in the Netherlands with the same name as mine, I only have seen that once in a magazine.
Anyway, thanks for a good laugh tonight!

http://www.scintilla.utwente.nl/pandy tongue.gif
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Jun 5 2008, 04:01 PM
Post #8


Don't like donuts. Don't do MySpace.
********

Group: WDG Moderators
Posts: 18,435
Joined: 9-August 06
Member No.: 6



Aw, did you have to spoil the fun? ninja.gif
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Frederiek
post Jun 5 2008, 04:01 PM
Post #9


Programming Fanatic
********

Group: Members
Posts: 5,146
Joined: 23-August 06
From: Europe
Member No.: 9



Alright, here you go… http://www.scintilla.utwente.nl/christian laugh.gif

Pandy, no, it was fun anyway.
How did you know?

This post has been edited by Frederiek: Jun 5 2008, 04:03 PM
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
asmith
post Jun 7 2008, 03:43 PM
Post #10


Advanced Member
****

Group: Members
Posts: 198
Joined: 26-December 07
Member No.: 4,586



i put the
http://www.scintilla.utwente.nl/frederiek

in ncol stu tabbed pages, it is not working, should i add something more to it ?

(i want when i click on a tab , it show its content like this typing effect then stop when it get finish , not repeating)

User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Frederiek
post Jun 8 2008, 05:20 AM
Post #11


Programming Fanatic
********

Group: Members
Posts: 5,146
Joined: 23-August 06
From: Europe
Member No.: 9



Can you show us a page (url) that demonstates your attempt?
For the typing to stop, you need to alter the script.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Jun 8 2008, 06:00 AM
Post #12


Don't like donuts. Don't do MySpace.
********

Group: WDG Moderators
Posts: 18,435
Joined: 9-August 06
Member No.: 6



Oops! I'm not sure that script is up for grabs.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
asmith
post Jun 9 2008, 12:13 AM
Post #13


Advanced Member
****

Group: Members
Posts: 198
Joined: 26-December 07
Member No.: 4,586



QUOTE(Frederiek @ Jun 8 2008, 05:20 AM) *

Can you show us a page (url) that demonstates your attempt?




I have a tab page like the nicol stu's. In each tab there's an image float left and some text beside it and under it. (again like Nicol's).

I want it to when i click on a tab title, it shows the content like that typing effect.

Again when the tab is clicked, it shows the image, and began to type the text (next and under the image) like the typing and stop when it finishes the end of the paraghraph.


@pandy, yea i faced that , My FF showed it quick then gave " page not found" , but IE opened the page fine.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Frederiek
post Jun 9 2008, 02:42 AM
Post #14


Programming Fanatic
********

Group: Members
Posts: 5,146
Joined: 23-August 06
From: Europe
Member No.: 9



I understand what you want, I know Stu Nicholls' tabbed pages. But I'd rather not have to put everything together, as I personally don't have any use for it, thinking you already did that. Do you have it working now? If not, can you post an url of a test page? Make sure you haven't forgotten to put the type_text() function in the body onload.

As for the text to stop typing, try this:
CODE
function type_text() {
    contents='';
    row=Math.max(0,index-7);
    while(row<index)
    contents += tl[row++] + '\r\n';
    document.forms[0].elements[0].value = contents + tl[index].substring(0,text_pos) + "_";
    if(text_pos++==str_length) {
        text_pos=0;
        index++;
            if(index!=tl.length) {
                str_length=tl[index].length;
                setTimeout("type_text()",1500);
            }
      } else {
        setTimeout("type_text()",speed);
    }
}



User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
asmith
post Jun 10 2008, 02:06 AM
Post #15


Advanced Member
****

Group: Members
Posts: 198
Joined: 26-December 07
Member No.: 4,586



As it types the string in a form textarea. So i guess i have to put this textarea in every div (every tab content). and as the strings are stored in an array, each line goes to each array value, so i did put all the contents in the array, so the main array consist of smaller arrays which are tab pages content.

i uploaded them here :

http://www.dpxclan.com/example/type.html

still it has work.
this image inside (like float left) has made this thing a little harder. as i guess i have to put 2 textareas, one on the left of the image and a bigger one at its bottom.

and i guess i have to put onclick event for each tab.

That's all i know to do. :/

Thanks for taking time


P.S : tabs are not working now :s

This post has been edited by asmith: Jun 10 2008, 02:07 AM
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Frederiek
post Jun 10 2008, 07:50 AM
Post #16


Programming Fanatic
********

Group: Members
Posts: 5,146
Joined: 23-August 06
From: Europe
Member No.: 9



The javascripts in the page itself need to be thoroughly tweaked.

You can't write arrays like you did and the type_text() function only calls upon one array, while in your case the correct array should be called upon depending on the tab clicked. Even the onload call is out of the question here.

So, you'll need a solid knowledge of javascript to accomplish that. Are you up to that?

The onclick on tabs, btw, are ruled by the tabbed_pages.js.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
asmith
post Jun 10 2008, 09:13 AM
Post #17


Advanced Member
****

Group: Members
Posts: 198
Joined: 26-December 07
Member No.: 4,586



the array i made, is from what i know from PHP language, unfortunately I can understand Javascript good, but almost i know nothing more.


"Are you up to that?" , don't know what you mean by this. I'm up to learn everything. I never copy paste codes on my page, i have a rule, first i figure it all out, then i use it somewhere.

If you just help me, i'll go through it. The thing is i really really want to do it.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Frederiek
post Jun 10 2008, 10:14 AM
Post #18


Programming Fanatic
********

Group: Members
Posts: 5,146
Joined: 23-August 06
From: Europe
Member No.: 9



QUOTE
he array i made, is from what i know from PHP language, unfortunately I can understand Javascript good, but almost i know nothing more.

"Are you up to that?" , don't know what you mean by this. I'm up to learn everything. I never copy paste codes on my page, i have a rule, first i figure it all out, then i use it somewhere.

So you *are* up to it, since you more or less understand javascript and are willing to learn more. That's what I meant or it's at least a good starting point.

You'll need to create a new array for each (in this case) painter. Then you'll need to use a function argument parameter (in fact some sort of variable), which changes the value, which call the corresponding array, depending on which tab is clicked.

That's the basic idea. I might look into it, but I won't promess anything, as I don't have the time for it. Besides, I don't write that much javascript anymore as I used to.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
asmith
post Jun 10 2008, 10:34 AM
Post #19


Advanced Member
****

Group: Members
Posts: 198
Joined: 26-December 07
Member No.: 4,586



thanks, well i will do this :

i split that big array, and make different arrays for each tab content.

now i uess by clicking each tab link i activate type_text(), but as onclick is used by tab, maybe i put the type_text() IN THE tab java code function. so that when the tab function has run , it run the type_text() too.

it is just theory, i go try it. But please help me with the changes i have to make in the java codes!
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
asmith
post Jun 17 2008, 01:41 PM
Post #20


Advanced Member
****

Group: Members
Posts: 198
Joined: 26-December 07
Member No.: 4,586



ok, i did the changes, i put the text_type function in the tabbed_pages.js file instead of onload for body.

i made 5 different array for each tab page with the artist name.

now when i click on the one tab , it starts to type the content.

I don't know the java syntax to tell him , when the tab x is selected , put array x content in the textarea, can you give me a hand ? smile.gif

i uploaded that here :
http://www.dpxclan.com/tabWithType/tabbed_pages.html

P.S it also do not type the second line, don't know why :/
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post

2 Pages V  1 2 >
Reply to this topicStart new topic
1 User(s) are reading this topic (1 Guests and 0 Anonymous Users)
0 Members:

 



- Lo-Fi Version Time is now: 20th November 2019 - 10:25 PM