Hello,
I want text in a paragraph appears like a typewriter. A friend of mine is able to program Java.
But how to apply a java script on a paragraph? I saved a working snippet (tested successfully in the browser) in the snippet “window”. Then I made the paragraph active (clicked to it) and copied the text into the Java area. But nothing appears in the paragraph? What do I do wrong or what am I missing?
Below the snippet I want to integrate. (just to test the way to integrate a Java script)
Nothing showed up in the post;
Mark code as pre-formatted text (</> above where you type) for it to show up on your posts.
There is a free (donation-ware) stack that does this:
https://www.bigwhiteduck.com/stacks/typer/
Dear Dough,
I checked the stack. But I have much more specific requirements. But thank you.
Better to check what is available than to invent the wheel twice.
As my friend is able to program (But no experience with Apple and Rapidweaver)
my focus is to get script integrated. That is what RW claims to make it easy.
The topic is outlined only shortly in the introduction videos. But am I on the right track
with my procedure or what do I wrong?
This snippet, which is only a sample, testing snippet runs successfully. What is missing to run on RW?
Fritzr,
It’s very easy to include JavaScript within RapidWeaver.
I can’t really see what you are doing with the image of a script.
The script appears to have a hard coded Variable called typeString and then displays it one character at a time to an empty division with a delay between characters.
This script applies nothing to an existing paragraph like I think you are describing you want?
Perhaps if you would elaborate on what these requirements are someone can help you.
The script you are showing is pretty simple stuff and would be easy to apply to RapidWeaver, but you must have a basic understanding of basic coding.
Where did you put what inside of RW? Did you put the Javascript in the JavaScript area or in an HTML stack?
Did you include an empty division with an id of typing(<div id="typing">)?
Without knowing what code you put where, it’s hard to say what you might need to do to get it to work.
RapidWeaver is going to be more complicated than a snippet “window” in a browser. One thing you need to ensue that the DOM is loaded prior to executing any JavaScript that edit content.
Here is a similar effect you can get:
BTW:
If you want to include coding samples in a post on this forum when you paste them in, select them and mark them as Preformatted text </>
Dear Doug, the content of the snippet is intended only (!) to test and ensure integration. It will be modified later on due to my specifications.
Actually i found a workaround by using “HTML” element in the library. Java code pasted works and is displayed properly on the website.
However, I am irritated that tutorial videos mislead to copy a Java snippet in the main tab/ body/ head .
Right now my friend is about to try builder stack from stacks4stacks which hopefully gives even further options to implement ideas.
You can and often will place Javascript inside the Javascript tag area of either the page inspector (for a single page) or the site code section(for site wide).
These two defined areas will encapsulate the JavaScript within <script> tags for you (so you need to remove the tags from your code). RW will then insert all code right before the end body tag.
On any website, you can, of course, place JavaScript pretty much any place you like. There are no specifications on putting it there, but it is considered best practice for page load speed.
No matter where you place your code, the coder is still responsible for ensuring that the DOM is in the needed ”state” before the code is executed.
Processing snippets of code inside of a browsers console or using an online editor like CodePen is quite different in that respect.
Large websites often take time to load all of the content needed to complete the process of preparing the DOM. So the JavaScript to do something like this could start to execute before the Elements on the page, you’re changing have loaded.
JQuery’s most used function is called $( document ).ready() or shorthand $(), for this reason.
If you aren’t using jQuery for the typewriter effect, you will need to do a similar function in pure JavaScript, or the code won’t work for you.
The builder stack doesn’t ensure the ready state you will need unless you code for it.
It’s simple code to add and there are some examples here:
https://codetonics.com/javascript/detect-document-ready/
Dear Mr. Doug, thanks. Your comment helps me to proceed. Will study your recommendations and your link.
This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.
