Entering text into Form to scroll contents

JavaScript
1

I’m using a working js script where you enter text into the html file, upload the file and the entered text scrolls on the html page. I’d like to modify the code so that the text for scrolling can be entered directly into a text area form, then ‘submit’ shows the echoed text for scrolling (on mouseover). Here’s some of the file code:

<div id="marqueecontainer" onMouseover="copyspeed=pausespeed" onMouseout="copyspeed=marqueespeed">
<div id="vmarquee" style="position: absolute; width: 98%;">

<!--YOUR CONTENT HERE-->
<h4>add text here</h4>
<!--YOUR CONTENT HERE-->
</div>
</div>

I also have a separate working text-attributed-textarea-form, where text can be entered directly into the text area, then ‘submit’ shows the echoed text on the same page in an iFrame. (thanks again for the help on that)

<textarea name="comments" id="comments" minlength="20" maxlength="120" rows="14" cols="130" form="myForm">
Hey... say something!
</textarea><br>
<form action="/textArea1.php" target="processForm2" method="post" id="myForm">
<input type="submit" value="Submit">
</form>
<br><br><br><br>
<iframe name="processForm2" width="75%" height="70%"></iframe>

I tried substituting code between the two, to try to get the entered text to appear in the iFrame so it can scroll on mouseover, without success. Any guidance is appreciated.

2

You would need the scrolling code in the iframe page itself if I understand you correctly. Any hover actions on elements in the iframe need to be coded in the iframe page itself.

If I have understood correctly :slight_smile:

3

Thanks for your reply.
Reagrding “in the scrolling code in the iframe page”, currently the iFrame doesn’t appear to be it’s own page, but appears as a box below the textarea. Whatever gets typed into the etxarea and submitted appears in the iFrame box. So, I’d intially like to see if someone can help me have whatever is entered into , upon ‘submit’ have it appear in the marquee container (vmarquee?). Maybe providing the javascript might help?

var delayb4scroll=2000 //Specify initial delay before marquee starts to scroll on page (2000=2 seconds)
var marqueespeed=1 //Specify marquee scroll speed (larger is faster 1-10)
var pauseit=1 //Pause marquee onMousever (0=no. 1=yes)?

var copyspeed=marqueespeed
var pausespeed=(pauseit==0)? copyspeed: 0
var actualheight=''

function scrollmarquee(){
if (parseInt(cross_marquee.style.top)>(actualheight*(-1)+8)) //if scroller hasn't reached the end of its height
cross_marquee.style.top=parseInt(cross_marquee.style.top)-copyspeed+"px" //move scroller upwards
else //else, reset to original position
cross_marquee.style.top=parseInt(marqueeheight)+8+"px"
}

function initializemarquee(){
cross_marquee=document.getElementById("vmarquee")
cross_marquee.style.top=0

marqueeheight=document.getElementById("marqueecontainer").offsetHeight
actualheight=cross_marquee.offsetHeight //height of marquee content (much of which is hidden from view)

if (window.opera || navigator.userAgent.indexOf("Netscape/7")!=-1){ //if Opera or Netscape 7x, add scrollbars to scroll and exit
cross_marquee.style.height=marqueeheight+"px"
cross_marquee.style.overflow="scroll"
return
}
setTimeout('lefttime=setInterval("scrollmarquee()",30)', delayb4scroll)
}

if (window.addEventListener)
window.addEventListener("load", initializemarquee, false)
else if (window.attachEvent)
window.attachEvent("onload", initializemarquee)
else if (document.getElementById)
window.onload=initializemarquee

Any additional ideas/comments are welcomed

4

I’ve moved this thread to the JS forum as The JS is above my pay grade :slight_smile:

It would help though if you had a working demo of what you have so far achieved as I’m not sure how you are getting the content into the iframe.

5

Thanks for your message.
Currently I’m getting the ‘comments’ content into the iFrame via:

<?php
echo $_POST['comments'];
?>
6

May we see the entire html page and js from the working scrolling set up? (I don’t hold out much hope that I can help as I don’t know much js but I’m better at forms and PHP so you never know! And I am interested to see the code.)

7 
<!DOCTYPE html>
<html id="html">
<head>
<meta charset="UTF-8">
<title></title>
<meta name="title" content="">
<meta name="description" content="">
<meta name="keywords" content="">

<link rel="stylesheet" href="../css/main.css">

<style type="text/css">

#marqueecontainer{
position: relative;
width: 200px; /*marquee width */
height: 200px; /*marquee height */
background-color: white;
overflow: hidden;
border: 3px solid orange;
padding: 2px;
padding-left: 4px;
}
</style>

<script type="text/javascript">
var delayb4scroll=2000 //Specify initial delay before marquee starts to scroll on page (2000=2 seconds)
var marqueespeed=1 //Specify marquee scroll speed (larger is faster 1-10)
var pauseit=1 //Pause marquee onMousever (0=no. 1=yes)?

var copyspeed=marqueespeed
var pausespeed=(pauseit==0)? copyspeed: 0
var actualheight=''

function scrollmarquee(){
if (parseInt(cross_marquee.style.top)>(actualheight*(-1)+8)) //if scroller hasn't reached the end of its height
cross_marquee.style.top=parseInt(cross_marquee.style.top)-copyspeed+"px" //move scroller upwards
else //else, reset to original position
cross_marquee.style.top=parseInt(marqueeheight)+8+"px"
}

function initializemarquee(){
cross_marquee=document.getElementById("vmarquee")
cross_marquee.style.top=0
marqueeheight=document.getElementById("marqueecontainer").offsetHeight
actualheight=cross_marquee.offsetHeight //height of marquee content (much of which is hidden from view)
if (window.opera || navigator.userAgent.indexOf("Netscape/7")!=-1){ //if Opera or Netscape 7x, add scrollbars to scroll and exit
cross_marquee.style.height=marqueeheight+"px"
cross_marquee.style.overflow="scroll"
return
}
setTimeout('lefttime=setInterval("scrollmarquee()",30)', delayb4scroll)
}

if (window.addEventListener)
window.addEventListener("load", initializemarquee, false)
else if (window.attachEvent)
window.attachEvent("onload", initializemarquee)
else if (document.getElementById)
window.onload=initializemarquee
</script>

</head>
<body>

<div class="col-md-12">
<div class="row">

Comments:<br>
<textarea name="comments" id="comments" minlength="20" maxlength="120" rows="14" cols="130" form="myForm">
Hey... say something!
</textarea><br>

<form action="/textArea1.php" target="processForm2" method="post" id="myForm">
<input type="submit" value="Submit">
</form>
<br><br>

<iframe name="processForm2" width="75%" height="70%"></iframe>

<div id="marqueecontainer" onMouseover="copyspeed=pausespeed" onMouseout="copyspeed=marqueespeed">

<div id="vmarquee" style="position: absolute; width: 98%;">
<!--YOUR SCROLL CONTENT HERE-->
<h4>add text here</h4>
<!--YOUR SCROLL CONTENT HERE-->
</div>
</div>

</div>
</div>

</body>
</html>
8

And may we see the full code for that and for any associated .php files (although the php may be integral?)?

9

I have shown everything in my last posting, and the php is in the post before that

10

I don’t understand what the purpose of this but here I have replaced the form and its submit button with an ordinary button and added some JavaScript before the </body> tag. The JavaScript simply copies the text from the textarea to the scrolling <div>.

<!DOCTYPE html>
<html id="html">
<head>
<meta charset="UTF-8">
<title></title>
<meta name="title" content="">
<meta name="description" content="">
<meta name="keywords" content="">

<link rel="stylesheet" href="../css/main.css">

<style type="text/css">

#marqueecontainer{
position: relative;
width: 200px; /*marquee width */
height: 200px; /*marquee height */
background-color: white;
overflow: hidden;
border: 3px solid orange;
padding: 2px;
padding-left: 4px;
}
</style>

<script type="text/javascript">
var delayb4scroll=2000 //Specify initial delay before marquee starts to scroll on page (2000=2 seconds)
var marqueespeed=1 //Specify marquee scroll speed (larger is faster 1-10)
var pauseit=1 //Pause marquee onMousever (0=no. 1=yes)?

var copyspeed=marqueespeed;
var pausespeed=(pauseit==0)? copyspeed: 0;
var actualheight='';

function scrollmarquee(){
if (parseInt(cross_marquee.style.top)>(actualheight*(-1)+8)) //if scroller hasn't reached the end of its height
cross_marquee.style.top=parseInt(cross_marquee.style.top)-copyspeed+"px" //move scroller upwards
else //else, reset to original position
cross_marquee.style.top=parseInt(marqueeheight)+8+"px";
}

function initializemarquee(){
cross_marquee=document.getElementById("vmarquee");
cross_marquee.style.top=0;
marqueeheight=document.getElementById("marqueecontainer").offsetHeight;
actualheight=cross_marquee.offsetHeight; //height of marquee content (much of which is hidden from view)
if (window.opera || navigator.userAgent.indexOf("Netscape/7")!=-1){ //if Opera or Netscape 7x, add scrollbars to scroll and exit
cross_marquee.style.height=marqueeheight+"px";
cross_marquee.style.overflow="scroll";
return
}
setTimeout('lefttime=setInterval("scrollmarquee()",30)', delayb4scroll);
}

if (window.addEventListener)
window.addEventListener("load", initializemarquee, false);
else if (window.attachEvent)
window.attachEvent("onload", initializemarquee);
else if (document.getElementById)
window.onload=initializemarquee;
</script>

</head>
<body>

<div class="col-md-12">
<div class="row">

Comments:<br>
<textarea name="comments" id="comments" minlength="20" maxlength="120" rows="14" cols="130" form="myForm">
Hey... say something!
</textarea><br>

<button>Submit</button>
<br><br>

<iframe name="processForm2" width="75%" height="70%"></iframe>

<div id="marqueecontainer" onMouseover="copyspeed=pausespeed" onMouseout="copyspeed=marqueespeed">

<div id="vmarquee" style="position: absolute; width: 98%;">
<!--YOUR SCROLL CONTENT HERE-->
<h4>add text here</h4>
<!--YOUR SCROLL CONTENT HERE-->
</div>
</div>

</div>
</div>
<script>
var button = document.querySelector("button");
var textarea = document.querySelector("textarea");
var scroller = document.getElementById("vmarquee");
button.addEventListener("click", function(){scroller.innerHTML = textarea.value;});
</script>
</body>
</html>
2 Likes
11

Thank you Archibald, that works well. Much appreciated.
I’m not sure if I should start another posting for asking this related question:

Once the text is submitted to the scrolling box, how would it be possible to add the ability to specify the scroll speed, on the html page, which is currently in the javascript as:

var marqueespeed=1 //Specify marquee scroll speed (larger is faster 1-10)

any guidance with this is appreciated.

12

A basic way is to have an input field, which uses the blur event so that the scroll speed updates when you leave the field, or the input event so that the scroll speed updates as you type.

The event handler would then cancel any previous timer and start up a new timer with the updated value.

13

I think it would be better to give options such as slow, medium and fast rather than to allow a numeric value to be entered.

Some suggestions:

  • a group of radio buttons(<input> elements with type=“radio”) ;
  • a drop-down choice (<select> element with child <option> elements);
  • a slider (<input> element with type=“range”)
  • <button> elements with CSS outline used to highlight the currently selected speed.
14

Thanks for the replies.
I have tried this without success:

<div id="vmarquee" style="position: absolute; width: 98%; scrollamount="6"";>
<!--YOUR SCROLL CONTENT HERE-->
<h4>add text here</h4>
<!--YOUR SCROLL CONTENT HERE-->
</div>
</div>
   <input type="button" value="Slower" onClick="document.getElementById('vmarquee').setAttribute('marqueespeed', 1, 0);" />
   <input type="button" value="Medium" onClick="document.getElementById('vmarquee').setAttribute('marqueespeed', 5, 0);" />
  <input type="button" value="Faster" onClick="document.getElementById('vmarquee').setAttribute('marqueespeed', 10, 0);" />

any comments are welcomed

15

The scrollmarquee() function uses copyspeed which is a global variable declared near the top of the script, so this works:

<button onClick="copyspeed=1;">Slow</button>
<button onClick="copyspeed=2;">Medium</button>
<button onClick="copyspeed=10;">Fast</button>

The code police force around here will say that you should use addEventListener within the script instead of onclick so JavaScript is not mixed in with the HTML.

2 Likes
16

Yep, inline event attributes are what is called a “bad practice”.

From the MDN Intro to Events page, they have a section titled: Inline event handlers — don’t use these

2 Likes
17

Thanks again for all the help.
Maybe you can tell me, when I moved the text area & submit below the marqueecontainer, anything entered and submitted in the text area no longer appears in the vmarquee ?

I moved this below; the marquee:

Comments:<br>
<textarea name="comments" id="comments" minlength="20" maxlength="120" rows="14" cols="130" form="myForm">
Hey... say something!
</textarea><br>

<button>Submit</button>

Any help is appreciated

18

Move that after the closing tag of the <div> which has id="marqueecontainer".

19

Thank you, that worked.
However, it appears now that I when put this:

<button onClick="copyspeed=1;">Slow</button>
<button onClick="copyspeed=2;">Medium</button>
<button onClick="copyspeed=10;">Fast</button>

after the closing tag of the

which has `id=“marqueecontainer”, the submit no longer works.

any additional guidance is welcomed

20

We may need to see all your code to work out why your submit button is not working, but below is my current version.

<!DOCTYPE html>
<html id="html">
<head>
<meta charset="UTF-8">
<title>Scroller</title>

<link rel="stylesheet" href="../css/main.css">

<style type="text/css">

#marqueecontainer{
position: relative;
width: 200px; /*marquee width */
height: 200px; /*marquee height */
background-color: white;
overflow: hidden;
border: 3px solid orange;
padding: 2px;
padding-left: 4px;
}

#medium{
outline:2px solid red;
}
</style>

<script type="text/javascript">
var delayb4scroll=2000 //Specify initial delay before marquee starts to scroll on page (2000=2 seconds)
var marqueespeed=2 //Specify marquee scroll speed (larger is faster 1-10)
var pauseit=1 //Pause marquee onMousever (0=no. 1=yes)?

var copyspeed=marqueespeed;
var pausespeed=(pauseit==0)? copyspeed: 0;
var actualheight='';

function scrollmarquee(){
if (parseInt(cross_marquee.style.top)>(actualheight*(-1)+8)) //if scroller hasn't reached the end of its height
cross_marquee.style.top=parseInt(cross_marquee.style.top)-copyspeed+"px" //move scroller upwards
else //else, reset to original position
cross_marquee.style.top=parseInt(marqueeheight)+8+"px";
}

function initializemarquee(){
cross_marquee=document.getElementById("vmarquee");
cross_marquee.style.top=0;
marqueeheight=document.getElementById("marqueecontainer").offsetHeight;
actualheight=cross_marquee.offsetHeight; //height of marquee content (much of which is hidden from view)
if (window.opera || navigator.userAgent.indexOf("Netscape/7")!=-1){ //if Opera or Netscape 7x, add scrollbars to scroll and exit
cross_marquee.style.height=marqueeheight+"px";
cross_marquee.style.overflow="scroll";
return
}
setTimeout('lefttime=setInterval("scrollmarquee()",30)', delayb4scroll);
}

if (window.addEventListener)
window.addEventListener("load", initializemarquee, false);
else if (window.attachEvent)
window.attachEvent("onload", initializemarquee);
else if (document.getElementById)
window.onload=initializemarquee;
</script>

</head>
<body>

<div class="col-md-12">
<div class="row">

<div id="marqueecontainer" onMouseover="copyspeed=pausespeed" onMouseout="copyspeed=marqueespeed">

<div id="vmarquee" style="position: absolute; width: 98%;">
<!--YOUR SCROLL CONTENT HERE-->
<h4>add text here</h4>
<!--YOUR SCROLL CONTENT HERE-->
</div>
</div>
<br>
<button id="slow">Slow</button>
<button id="medium">Medium</button>
<button id="fast">Fast</button>
<br><br>
Comments:<br>
<textarea name="comments" id="comments" minlength="20" maxlength="120" rows="14" cols="130" form="myForm">
Hey... say something!
</textarea>

<br>
<button id="submit">Submit</button>
</div>

</div>
<script>
var textarea = document.querySelector("textarea");
var scroller = document.getElementById("vmarquee");

var submit = document.getElementById("submit");
var slow   = document.getElementById("slow");
var medium = document.getElementById("medium");
var fast   = document.getElementById("fast");

submit.addEventListener("click", function(){scroller.innerHTML = textarea.value;});

slow.addEventListener("click",speed);
medium.addEventListener("click",speed);
fast.addEventListener("click",speed);

function speed(event){
slow.style.outline   = "none";
medium.style.outline = "none";
fast.style.outline   = "none";

event.target.style.outline = "2px solid red";

if(event.target.id=="slow")   copyspeed = 1;
if(event.target.id=="medium") copyspeed = 2;
if(event.target.id=="fast")   copyspeed = 10;
}
</script>
</body>
</html>
3 Likes