3 JavaScript Functions Needed,

Hello, If you copy and paste the following code in FrontPage, you can see what i need.  I need to find 3 functions that i can use, one is copy to memory, the next is unhide a table and hide it again based upon the checkbox.  The third function will be to select all the check boxes as if someone clicked them, it will call the same onclick as if they were checking the main checkbox.

Thanks.

My goal is i want to keep the javascript simple, and not re-create any javascript as i add new nodes.

The last thing i do need is to have the textfield box to autosize if possible

=====================================
<html>

<head>
<title>New Page 1</title>
</head>

<body>

    <p>
    <input type="button" value="Select All" name="B3"><input type="button" value="Deselect All" name="B3"></p>

    <p>Start of Node 1<br>
    ===============<br>
    <input type="button" value="Copy" name="B3"><input type="checkbox" name="C1" value="ON">Node
    Number 1</p>

  <blockquote>
    <table border="1" width="80%" cellspacing="0" cellpadding="0">
      <tr>
        <td width="100%">&nbsp;
          <blockquote>
            <p><textarea rows="21" name="S1" cols="59">1.  Both the First Button and the Second Button would copy the text that is in the text box to the clipboard.

2.  The Check Mark box would un-hide the table that contains this textbox.

=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-

The thing i want to do most, is i want to be able to add several of these "Nodes" and use just one script for each the copy function and on script for the drop down.  This way i can just copy several of these and change the table names.</textarea><br>
            <input type="button" value="Copy" name="B4"></p>
          </blockquote>
          <p>&nbsp;</td>
      </tr>
    </table>
  </blockquote>
  <p>===========<br>
  End of Node 1</p>
 
 
      <p>Start of Node 2<br>
    ===============<br>
    <input type="button" value="Copy" name="B3"><input type="checkbox" name="C1" value="ON">Node
    Number 1</p>

  <blockquote>
    <table border="1" width="80%" cellspacing="0" cellpadding="0">
      <tr>
        <td width="100%">&nbsp;
          <blockquote>
            <p><textarea rows="21" name="S1" cols="59">1.  Both the First Button and the Second Button would copy the text that is in the text box to the clipboard.

2.  The Check Mark box would un-hide the table that contains this textbox.

=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-

The thing i want to do most, is i want to be able to add several of these "Nodes" and use just one script for each the copy function and on script for the drop down.  This way i can just copy several of these and change the table names.</textarea><br>
            <input type="button" value="Copy" name="B4"></p>
          </blockquote>
          <p>&nbsp;</td>
      </tr>
    </table>
  </blockquote>
  <p>===========<br>
  End of Node 2</p>
</body>

</html>

GBLX-BillAsked:
Who is Participating?
 
devicConnect With a Mentor Commented:
hi GBLX-Bill, try this:
==============
<html>

<head>
<title>New Page 1</title>
<script>
function chck(obj,st)
{
      var i=1;var j=0;
      while(el=obj.form.elements["C"+i])
      {
            while(p=el[j])
            {
                  p.checked=st;
                  qst=st?"":"none";
                  p.parentNode.nextSibling.style.display=qst;
                  j++;
            }
            i++;
      }
}
function chck2(obj)
{
      var st=obj.checked?"":"none";
      obj.parentNode.nextSibling.style.display=st;
}

function CopyToClipboard(sContents)    
{
      window.clipboardData.setData("Text", sContents)
}
</script>
</head>

<body>
<form>
   <p>
   <input type="button" value="Select All" name="B3" onclick=chck(this,true)><input type="button" value="Deselect All" name="B3" onclick=chck(this,false)></p>

   <p>Start of Node 1<br>
   ===============<br>
   <input type="button" value="Copy" name="B3" onclick=CopyToClipboard(this.parentNode.nextSibling.getElementsByTagName("textarea")[0].value)><input type="checkbox" name="C1" value="ON" onclick=chck2(this)>Node
   Number 1</p>

 <blockquote id=Z1 style=display:none>
   <table border="1" width="80%" cellspacing="0" cellpadding="0">
     <tr>
       <td width="100%">&nbsp;
         <blockquote>
           <p><textarea rows="21" name="S1" cols="59">1.  Both the First Button and the Second Button would copy the text that is in the text box to the clipboard.

2.  The Check Mark box would un-hide the table that contains this textbox.

=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-

The thing i want to do most, is i want to be able to add several of these "Nodes" and use just one script for each the copy function and on script for the drop down.  This way i can just copy several of these and change the table names.</textarea><br>
           <input type="button" value="Copy" name="B4" onclick=CopyToClipboard(this.parentNode.getElementsByTagName("textarea")[0].value)></p>
         </blockquote>
         <p>&nbsp;</td>
     </tr>
   </table>
 </blockquote>
 <p>===========<br>
 End of Node 1</p>
 
 
     <p>Start of Node 2<br>
   ===============<br>
   <input type="button" value="Copy" name="B3" onclick=CopyToClipboard(this.parentNode.nextSibling.getElementsByTagName("textarea")[0].value)><input type="checkbox" name="C1" value="ON" onclick=chck2(this)>Node
   Number 1</p>

 <blockquote id=Z2 style=display:none>
   <table border="1" width="80%" cellspacing="0" cellpadding="0">
     <tr>
       <td width="100%">&nbsp;
         <blockquote>
           <p><textarea rows="21" name="S1" cols="59">1.  Both the First Button and the Second Button would copy the text that is in the text box to the clipboard.

2.  The Check Mark box would un-hide the table that contains this textbox.

=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-

The thing i want to do most, is i want to be able to add several of these "Nodes" and use just one script for each the copy function and on script for the drop down.  This way i can just copy several of these and change the table names.</textarea><br>
           <input type="button" value="Copy" name="B4" onclick=CopyToClipboard(this.parentNode.getElementsByTagName("textarea")[0].value)></p>
         </blockquote>
         <p>&nbsp;</td>
     </tr>
   </table>
 </blockquote>
 <p>===========<br>
 End of Node 2</p>
</body>
</form>
</html>
0
 
ZylochCommented:
Well, first of all, it may be better if you not have three buttons with the same name. Make them B1, B2, and B3 or something like that. I do not have Frontpage (regrettably as I am cheap and poor), but I can make the scripts for you.

If you can go in and manually change the source, it may do better to enclose the table that you want to hide in either <span> or <div> tags. I recommend DIV unless it messes with your layout. For example:

[Note that each node needs a DIFFERENT id. For the first table, make the <DIV> have ID="node1". The second table would have a <DIV ID="node2"> etc.etc.]

<div id="node1" style="display:none;">
<blockquote>
    <table border="1" width="80%" cellspacing="0" cellpadding="0">
      <tr>
        <td width="100%">&nbsp;
          <blockquote>
            <p><textarea rows="21" name="S1" cols="59"></p>
          </blockquote>
        </td>
     </tr>
    </table>
</blockquote>
</div>

Another note is, in the <DIV> (or <SPAN>), I've put style="display:none;" This means that the things inside the <DIV> will not show. If you want them to show in the beginning, leave the style="display:none;" out or put style="display:block;".

Note also that display:none makes it so that the table takes no room as long as it is invisible. When it is visible, it will cause text or whatnot below the table to jump down. If you want the table to take room yet remain invisible until checkbox is checked, put this <div style="visiblility:hidden;"> Once again, if you wish the checkbox to be checked at the beginning, leave out the style="visibility:hidden;".

Finally, if you wish the checkbox to be checked at the beginning, (maybe since you had value="ON"), do this:

<input type="checkbox" name="C1" value="ON" CHECKED> [Capitalized just to show what is new. You can uncapitalize if you wish]

Furthermore, since you wish to display the table when the checkbox is checked, put this inside the checkbox: [The brackets are there for optional values. Please remove them.]

<input type="checkbox" name="C1" value="ON" checked [if you want] onClick="if(this.checked){document.node1.style.display='block';} else{document.node1.style.display='none';}">

This example is for the first node. For every checkbox, you add the onClick code. Then, the only thing you have to change is the two parts where it says node1 to node2 or node3 or whatever. This also assumes that you are using display, if you are using in your div tags style="visibility:hidden", change the thing that says document.node#.style.display='block' to document.node#.style.visibility='visible' and change document.node#.style.display='none' to document.node#.style.visibility='hidden'.

This is not a function, but it is the most effective way, I believe. This is not really recreating JavaScript, because you can just copy and paste into each new checkbox that you make and only change small factors. If you make a function, you would still have to put that function in an onClick into each checkbox with different values as parameters.

For your copy button, each copy button needs to have a different name. Make your first button name Copy1, your second one Copy2, etc.

For the copy function, in each of your copy buttons, put this code:
[Make all your textareas names in context with copy. So the textarea for Copy1 would be named S1, and Copy2 would be named S2.]

<input type="button" value="Copy" name="Copy1" onClick="copy(this.name,1)">
<textarea rows="21" name="S1" cols="59">Some text</textarea>

Then, in the <HEAD> put this this:

<script>
<!--
function copy(sel,flag) {
if (flag) {
var tarea=sel.substr(4,sel.length);
tbox="S"+tarea;
document.all.holdText.innerHTML=document.all[tbox].innerHTML;
}
else {
document.all.holdText.innerHTML=document.all[sel].innerHTML;
}
Copied = document.all.holdText.createTextRange();
Copied.select();
Copied.execCommand("Copy");
}
// -->
</script>

Then, inside your HTML code somewhere, put this:
<textarea name="holdText" style="display:none;"></textarea>

The only problem with this code is that your textboxes must be named S1, S2, etc. and your copy buttons Copy1,Copy2,etc. Also, this code only works in Internet Explorer. If you wish to have two buttons all copy the same textarea, make both buttons have the same name.

For Netscape, this may help you: http://www.experts-exchange.com/Web/Web_Languages/JavaScript/Q_20843237.html
but it is much more difficult and is confusing.

For your Select All buttons, follow the same as The copy buttons and name them B1,B2,B3,etc.
Then, put this code:

<input type="button" value="Select All" name="B1" onClick="selectAll(1,this.name);"><input type="button" value="Deselect All" name="B1" onClick="selectAll(0,this.name);">

In your script section add this:

function selectAll(way,identifier) {
var sub=identifier.substr(1,identifier.length);
var txtname="S"+sub;
if (way) {
document.all[txtname].select();
}
else {
document.all[txtname].innerHTML=document.all[txtname].innerHTML;
}
}

This also only works in IE because of the document.all. A simpler way would involve doing this in every copy button:

<input type="button" value="Copy" name="Copy1" onClick="copy(document.all.THE NAME OFTHE TEXTAREA,0)">

This gives you freedom of naming the copy button and the textareas.
For the select, it would be easier just to do this: In every Select All button, add this:

onClick="document.all.THE NAME OFTHE TEXTAREA.select()"

and in every Deselect All button, add this:

onClick="document.all.THE NAME OFTHE TEXTAREA.innerHTML=document.all.THE NAME OFTHE TEXTAREA.innerHTML"

This would only work in Internet Explorer because of document.all. The way to make this cross browser would be to enclose your Frontpage buttons and textarea in a form, where you can call the things document.formname.elementname instead of document.all.elementname

I deliberately tried to help you with the fact that you are using Frontpage in mind by making two functions with you only having to change the names, but I also included what would be simpler and work better if you would go into your source code.

--Zyloch







0
 
GBLX-BillAuthor Commented:
GREAT!!! Do you know of a way to auto resize the textboxes to fit the amount of the text inside? (Vert)
0
The new generation of project management tools

With monday.com’s project management tool, you can see what everyone on your team is working in a single glance. Its intuitive dashboards are customizable, so you can create systems that work for you.

 
GBLX-BillAuthor Commented:
Last post was meant for devic
0
 
devicCommented:
GBLX-Bill, text box vertical? maybe do you mean textarea?

<textarea style=width=100px;height:23px onkeyup="this.style.height=this.scrollHeight+5"></textarea>
0
 
devicCommented:
oops, style=width=100px; :)

this correct:
<textarea style=width:100px;height:23px onkeyup="this.style.height=this.scrollHeight+5"></textarea>
0
 
GBLX-BillAuthor Commented:
Well devic, that almost works, it only works when you start typing, but what can you do when the page starts up?  Is there somthing possible?
0
 
devicCommented:
<textarea id=a1 onkeyup="this.style.height=this.scrollHeight+5">Well devic, that almost works, it only works when you start typing, but what can you do when the page starts up?  Is there somthing possible? </textarea>
<script>
window.onload=mkHeight;
function mkHeight()
{
      with(document.getElementById("a1"))style.height=scrollHeight+5;
}
</script>
0
 
GBLX-BillAuthor Commented:
Thanks, you deserve every point!
0
 
GBLX-BillAuthor Commented:
Hey, major problem, when i put the textarea in the hidden (colapsed) area, when expanded its too small can you help?
0
 
GBLX-BillAuthor Commented:
Nevermind, Got it, thanks.
0
 
GBLX-BillAuthor Commented:
devic,

to http://www.clear100.com/gblx/ How can i get it so there is less space between node 1 and node 2?  I have tried everything.  I just want it to be right next to eachother, but it messes up.
0
 
devicCommented:
GBLX-Bill, i am busy now, i lool it later.
0
 
GBLX-BillAuthor Commented:
Ok, Thank you
0
 
GBLX-BillAuthor Commented:
devic, it seams as if it could be pretty easy to take that extra space out, but i can't figure it out, and thankfully that is all i have left to do on this project.  If i had more points for you for your extra help, i would give them to ya.
0
 
devicCommented:
hi GBLX-Bill,

add in style.css this:
p{margin:0px;}
0
 
GBLX-BillAuthor Commented:
Thanks very much!  This was a very big help!
0
All Courses

From novice to tech pro — start learning today.