Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 15 of 15
  1. #1
    New Coder
    Join Date
    Aug 2002
    Location
    Louisville, Ky
    Posts
    64
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Press Key to Add/Change Text

    I need a script that will insert text into a div when a key is pressed.
    32 ( Spacebar ).
    I have been playing around with a few scripts but I have been unable to get them to do what I want.

    Link1 ( Description on Spacebar ) Site Rating
    Link2 ( Description on Spacebar ) Site Rating
    Link3 ( Description on Spacebar ) Site Rating

    But it should only appear when the Spacebar is pressed. Anything will do as long as its compatible with IE4.0+ or something.

    Any help would be appreciated. =)
    Last edited by esntric; 04-08-2003 at 06:46 AM.

  • #2
    Regular Coder
    Join Date
    Mar 2003
    Posts
    176
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Just to clarify: The three hyperlinks...

    Link1 ( Description on Spacebar ) Site Rating (etc etc)

    are visible on the page. When the user presses the spacebar, then a div appears with the appropriate text for the appropriate link?

    Also, is IE4+ compatibility or most 4+ browsers (including Netscape 4+ etc etc)

  • #3
    New Coder
    Join Date
    Aug 2002
    Location
    Louisville, Ky
    Posts
    64
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Yes. That is correct. =)

  • #4
    Regular Coder
    Join Date
    Mar 2003
    Posts
    176
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Try this and see how it goes. I haven't got it working for NN4 yet (maybe some here knows how).
    It works in IE 5 (using document.all so it should be ok for IE4) and Mozilla 1.0.
    As for the rest: test it.
    Code:
    <html>
    <head>
    <title>Keypress</title>
    <script type="text/jav&#97;script" language="jav&#97;script">
    <!--;
    function keypress(e,param) {
    var theKey,theDiv;
    var dom = (document.getElementById && !document.all);
    var ie4 = (document.all);
    //text for the div
    var txt1 = "Super Site!!!";
    var txt2 = "...hmmm...pretty good";
    var txt3 = "Absolute bunkum!!!";
    	// get keyCode
    	if (dom){
    		document.addEventListener("keyup",keypress,true);
      		theKey = e.keyCode;
              theDiv=document.getElementById('divLink')
    	}else if(ie4){
    		theKey=window.event.keyCode;
              theDiv = document.all.divLink
    	}
    	// if spacebar
    	if (theKey == 32) {
    	theDiv.style.visibility = "visible";    
    		switch(param){
              	case "x":
    				theDiv.innerHTML = txt1;
                        break;
                    	case "y":
                                  theDiv.innerHTML = txt2;
     			break;
    			case "z":
                      
    				theDiv.innerHTML = txt3;
    			break;
    			case "clear":
    				theDiv.style.visibility = "hidden";
                                  theDiv.innerHTML = '';
    			break;
              }                                                           	                             
    	}
    }
    //-->
    </script>
    </head>
    <body>
    <a href="jav&#97;script: void(0)" 
    onkeydown="keypress(event,'x')" 
    accesskey="x">alt+x then Spacebar</a>
    <br />
    <a href="jav&#97;script: void(0)"
    onkeydown="keypress(event,'y')"
    accesskey="y">alt+y then  Spacebar</a>
    <br />
    <a href="jav&#97;script: void(0)"
    onkeydown="keypress(event,'z')"
    accesskey="z">alt+z then Spacebar</a>
    <br />
    <a href="jav&#97;script: void(0)" 
    onkeydown="keypress(event,'clear')"
    accesskey="k">alt+k then Spacebar to Clear the Div</a>
    
    <div id="divLink"
    style="position:relative;visibility:hidden;
    top:50px;left:0px;width:200px;height:200px;
    color:red"></div>
    </body>
    </html>
    Last edited by HairyTeeth; 04-09-2003 at 04:45 AM.

  • #5
    New Coder
    Join Date
    Aug 2002
    Location
    Louisville, Ky
    Posts
    64
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Wow, thats great. =D

    I didnt even know you could use "ALT"...



    Perhaps this would be something good for me to disect and use to learn a few things.


    Thank you. Much appreciated. =D

  • #6
    New Coder
    Join Date
    Aug 2002
    Location
    Louisville, Ky
    Posts
    64
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Could you help me just once more, HairyTeeth? I was playing around with the coding you gave me and apparently I didnt understand it completely.
    Or perhaps it's something I just did wrong; as this was my first attempt using Arrays.
    Could you look over this and see if you can find what I did wrong? I dont even know if I'm using the Arrays right.

    <html>
    <head>
    <script>
    function keypress(e,param) {

    var time = new Array(3)
    descr[0] = "i really liked this site"
    descr[1] = "this site is lacking"
    descr[2] = "this site is alright";
    var which = new Array(3)
    which[0] = document.getElementById('dec1')
    which[1] = document.getElementById('dec2')
    which[2] = document.getElementById('dec3');
    var theKey;
    var ie4 = (document.all);
    // get keyCode
    if (dom){
    document.EventListener("keyup",keypress,true);
    theKey = e.keyCode;
    }else if(ie4){
    theKey=window.event.keyCode;
    }
    // if spacebar
    if (theKey == 32) {
    which[0].innerHTML = "descr[0]";
    which[1].innerHTML = "descr[1]";
    which[2].innerHTML = "descr[2]"; }
    }
    </script>
    </head>
    <body>

    <a href="#">This is link 1</a><span id="dec1"></span>4 out of 5 stars<br>
    <a href="#">This is link 2</a><span id="dec2"></span>2 out of 5 stars<br>
    <a href="#">This is link 3</a><span id="dec3"></span>3 out of 5 stars<br>

    </body>
    </html>

    Thank you for helping me before. If you dont feel like it this time I understand. Won't hold it against ya. =)

  • #7
    Regular Coder
    Join Date
    Mar 2003
    Posts
    176
    Thanks
    0
    Thanked 0 Times in 0 Posts
    lol, no prob, i like doing this stuff (i must be craaazy!). There's a few things here...i'll get back to you.

  • #8
    New Coder
    Join Date
    Aug 2002
    Location
    Louisville, Ky
    Posts
    64
    Thanks
    0
    Thanked 0 Times in 0 Posts
    ...Yes. You must be crazy. =D

  • #9
    Regular Coder
    Join Date
    Mar 2003
    Posts
    176
    Thanks
    0
    Thanked 0 Times in 0 Posts
    What sort of event (keypress, onclick etc etc) do you want to use to call the function?
    Do you still want to use the spacebar idea, or is it a click event on a link?

  • #10
    New Coder
    Join Date
    Aug 2002
    Location
    Louisville, Ky
    Posts
    64
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Spacebar.

    I want when the Spacebar is pressed for several span's to be wrote to.

    A really good example would be AIM. In an AIM IM if you press F2 a time appears next to a persons S/N; showing what time that message was sent.

    Before F2
    esntric: hello..

    After F2
    esntric (9:57:20 PM): hello..

    The very same concept. =)

    I hope that this is what you needed to know.
    Last edited by esntric; 04-14-2003 at 04:01 AM.

  • #11
    Regular Coder
    Join Date
    Mar 2003
    Posts
    176
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Originally posted by esntric
    I want when the Spacebar is pressed for several span's to be wrote to.
    At once?

    Anyway, have a go at this:
    Code:
    <html>
    <head>
    <title>Keypress Demo</title>
    
    <script type="text/jav&#97;script" language="jav&#97;script">
    <!--;
    
    var msie = (document.all)?1:0;
    
    var descr = new Array(3);
    descr[0] = "i really liked this site! ";
    descr[1] = "this site is lacking. ";
    descr[2] = "this site is alright. ";
    
    function keypress(e, selectedObj){
    var browserObj,theKey;
    var arrNumb = selectedObj.substring(3);
    	
        for(i=0;i<descr.length;i++){
    		if(!msie){
    			document.getElementById('dec'+i).innerHTML = ""                       
    			browserObj = document.getElementById(selectedObj);
    			document.addEventListener("keyup",keypress,true);                     
                        theKey = e.keyCode;
    		}else{
        		document.all('dec'+i).innerHTML = ""    
    			browserObj = document.all(selectedObj);
                        theKey=window.event.keyCode;
    		}
    	}          
    	
        if(theKey == 32){             
    		if(browserObj.innerHTML=='')
    			browserObj.innerHTML= descr[arrNumb] 
    		else
    			browserObj.innerHTML = ""
    	}                    	                      
    } 
    		
    //-->
    </script>
    </head>
    <body>
    
    <p>
    
    <a href="jav&#97;script:void(0)"
    onkeydown="keypress(event,'dec0')">This is link 1</a>
    <span id="dec0"></span>4 out of 5 stars
    <br />
    
    <a href="jav&#97;script:void(0)"
    onkeydown="keypress(event,'dec1')">This is link 2</a>
    <span id="dec1"></span>2 out of 5 stars
    <br />
    
    <a href="jav&#97;script:void(0)" 
    onkeydown="keypress(event,'dec2')">This is link 3</a>
    <span id="dec2"></span>3 out of 5 stars
    <br />
        
    </p>
    
    </body>
    </html>
    Last edited by HairyTeeth; 04-14-2003 at 07:33 AM.

  • #12
    New Coder
    Join Date
    Aug 2002
    Location
    Louisville, Ky
    Posts
    64
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Yes. All at once.

    Again, you have given me a wonderful script. Perhaps some day I'll be able to write such scripts. As of right now the most I can do are alerts and prompts...

    Thank you once again for taking the time to help me. You are very kind.
    Last edited by esntric; 04-14-2003 at 05:32 PM.

  • #13
    New Coder
    Join Date
    Aug 2002
    Location
    Louisville, Ky
    Posts
    64
    Thanks
    0
    Thanked 0 Times in 0 Posts
    <script language="JavaScript1.2">

    var spacebar=32

    if (document.layers)
    document.captureEvents(Event.KEYPRESS)
    function text(e){
    if (document.layers){
    if (e.which==spacebar)
    document.all.e_1.innerHTML = "text";
    document.all.e_2.innerHTML = "text";
    document.all.e_3.innerHTML = "text";
    document.all.R_1.innerHTML = "text";
    document.all.R_2.innerHTML = "text";
    document.all.R_3.innerHTML = "text";
    document.all.R_4.innerHTML = "text";
    }
    else if (document.all){
    if (event.keyCode==spacebar)
    document.all.e_1.innerHTML = "text";
    document.all.e_2.innerHTML = "text";
    document.all.e_3.innerHTML = "text";
    document.all.R_1.innerHTML = "text";
    document.all.R_2.innerHTML = "text";
    document.all.R_3.innerHTML = "text";
    document.all.R_4.innerHTML = "text";
    }
    }
    document.onkeypress=text

    </script>


    There's nothing wrong with the above, right? It works fine for me. Would work with other browsers and such?

  • #14
    Regular Coder
    Join Date
    Mar 2003
    Posts
    176
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I'd be very surprised if that script worked in Netscape Navigator(Nav) versions 4. It doesn't understand either 'document.all' or 'innerHTML'. Nav4x references divs and spans differently.
    Code:
    //if Nav 4x;
    if(document.layers){
       document.e_1.document.write(txt);
       document.e_1.document.close();
    }
    If a div or span is enclosed within another div or span, the refrence gets even longer:
    Code:
    //if Nav 4x;
    if(document.layers){
       document.outerDiv.document.innerSpan.document.write(txt);
       document.outerDiv.document.innerSpan.document.close();
    }
    Normally though, you can use a variable that shortens the reference:
    Code:
    var dynLayer;
    if(document.layers){
       dynLayer = document.outerDiv.document.innerSpan;
       dynLayer.document.write(txt);
       dynLayer.document.close();
    }
    The thing about naming spans or divs with the same or similar names, is that you can use a loop to iterate through their properties. Using your example spans:
    Code:
    <html>
    <head>
    <title>Demo</title>
    <script type="text/jav&#97;script" language="jav&#97;script">
    <!--;
    
    function writeToSpans(){
    var txt = "Foo Bar Bar";
    var ind=0; //index value;
    var len=4; //number of spans;
    var dynLayer; //shortcut name to span onjects;
    
      for(i=0;i<len;i++){
      ind = (i+1);
        // if Nav 4x;
        if(document.layers){
          dynLayer =eval("document.e_"+ind);
          dynLayer.document.write("<font color='white'>" + txt + "</font>");    
          dynLayer.bgColor = "blue";       
          dynLayer.document.close();
        //else if ie 4x;                   
        }else if(document.all & ! document.getElementById){
          dynLayer = eval("document.all('e_" + ind + "')");
          dynLayer.style.color="white";
          dynLayer.style.backgroundColor = "blue";
          dynLayer.innerHTML = txt;
        // else Moz 1x,Netscape 6x, 7x, IE 5x,6x etc;
        }else if(document.getElementById){
          dynLayer = eval("document.getElementById('e_" + ind + "')");   
          dynLayer.style.color="white";
          dynLayer.style.backgroundColor = "blue";                               
          dynLayer.innerHTML = txt;            
        }//end if
      }//end for loop
    }//end function
    //-->
    </script>
    </head>
    <body>
    <a href="jav&#97;script: void writeToSpans()">Write To Spans</a>
    <span id="e_1"
    style="position:absolute;top:35px;left:10px;">
    e_1
    </span>
    <span id="e_2"
    style="position:absolute;top:55px;left:10px;">
    e_2
    </span>
    <span id="e_3"
    style="position:absolute;top:75px;left:10px;">
    e_3
    </span>
    <span id="e_4"
    style="position:absolute;top:95px;left:10px;">
    e_4
    </span>
    </body>
    </html>
    Take a look at the ind=0 variable. It is a number variable. Immediately after the for...loop, we state that ind=(i+1). What we are doing is adding one to the value of i. So, the first time through the loop, ind=1.

    When the script branches for each browser object, each particular syntax for referencing objects is evaluated [eval()], which makes a valid object reference out of a string and variable values. Looking at the eval statement in the document.layers branch of the script we see:
    Code:
    dynLayer=eval("document.e_"+ind)
    Which evaluates as:

    1st loop iteration:
    Code:
    document.e_1
    2nd loop iteration:
    Code:
    document.e_2
    3rd loop iteration:
    Code:
    document.e_3
    4th loop iteration:
    Code:
    document.e_4
    The process is the same for the other script branches.
    IE4x
    Code:
    dynLayer =eval("document.all('e_"+ind+"')")
    ...which, on the first loop iteration returns:
    Code:
    dnyLayer = document.all('e_1')
    Moz 1x etc
    Code:
    dynLayer =eval("document.getElementById('e_"+ind+"')")
    ...which evaluates as:
    Code:
    dynLayer = document.getElementById('e_1')
    At each itereation, the span with id="e_whatever" is written to and ind is incremented by one.

    Personally, I find Nav4x a real pain in the butt and don't worry about it to much anymore insofar as it only gets plain style sheets and very little dhtml.

    I'd have a browse through http://www.javascriptkit.com/ and look for browser detection.

  • #15
    New Coder
    Join Date
    Aug 2002
    Location
    Louisville, Ky
    Posts
    64
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Yes, I have much learning to do. Off I go to javascriptkit.com!


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •