Solved

3 JavaScript Functions Needed,

Posted on 2004-04-22
17
657 Views
Last Modified: 2012-06-21
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>

0
Comment
Question by:GBLX-Bill
  • 10
  • 6
17 Comments
 
LVL 25

Accepted Solution

by:
devic earned 400 total points
Comment Utility
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
 
LVL 36

Expert Comment

by:Zyloch
Comment Utility
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
 

Author Comment

by:GBLX-Bill
Comment Utility
GREAT!!! Do you know of a way to auto resize the textboxes to fit the amount of the text inside? (Vert)
0
 

Author Comment

by:GBLX-Bill
Comment Utility
Last post was meant for devic
0
 
LVL 25

Expert Comment

by:devic
Comment Utility
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
 
LVL 25

Expert Comment

by:devic
Comment Utility
oops, style=width=100px; :)

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

Author Comment

by:GBLX-Bill
Comment Utility
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
 
LVL 25

Expert Comment

by:devic
Comment Utility
<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
How to improve team productivity

Quip adds documents, spreadsheets, and tasklists to your Slack experience
- Elevate ideas to Quip docs
- Share Quip docs in Slack
- Get notified of changes to your docs
- Available on iOS/Android/Desktop/Web
- Online/Offline

 

Author Comment

by:GBLX-Bill
Comment Utility
Thanks, you deserve every point!
0
 

Author Comment

by:GBLX-Bill
Comment Utility
Hey, major problem, when i put the textarea in the hidden (colapsed) area, when expanded its too small can you help?
0
 

Author Comment

by:GBLX-Bill
Comment Utility
Nevermind, Got it, thanks.
0
 

Author Comment

by:GBLX-Bill
Comment Utility
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
 
LVL 25

Expert Comment

by:devic
Comment Utility
GBLX-Bill, i am busy now, i lool it later.
0
 

Author Comment

by:GBLX-Bill
Comment Utility
Ok, Thank you
0
 

Author Comment

by:GBLX-Bill
Comment Utility
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
 
LVL 25

Expert Comment

by:devic
Comment Utility
hi GBLX-Bill,

add in style.css this:
p{margin:0px;}
0
 

Author Comment

by:GBLX-Bill
Comment Utility
Thanks very much!  This was a very big help!
0

Featured Post

What Security Threats Are You Missing?

Enhance your security with threat intelligence from the web. Get trending threat insights on hackers, exploits, and suspicious IP addresses delivered to your inbox with our free Cyber Daily.

Join & Write a Comment

Having worked on larger scale sites, we found out that you are bound to look at more scalable solutions to integrating widgets, code snippets or complete applications and mesh them into functional sites, in any given composition. To share some of…
JavaScript can be used in a browser to change parts of a webpage dynamically. It begins with the following pattern: If condition W is true, do thing X to target Y after event Z. Below are some tips and tricks to help you get started with JavaScript …
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

763 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

6 Experts available now in Live!

Get 1:1 Help Now