CODEWITHSUNDEEP
javascriptjquery
Michael Rader
Michael Rader

Reputation: 5957

Finishing my jQuery typing feature

Right now I have some code that generates <li> elements that have a height and width and has a certain background image applied. When a user presses a key, the matching css class is activated onto the created <li> creating a certain character on the screen.. I have two active problems...

  1. I want a space generated between the <li>'s when the spacebar is typed. To do this I created a blank <li> element that contains "  " with a class of "ejotyBlank". But for some reason this will not work for me!

  2. When a user clicks the backspace, the last <li> should be removed. I don't even know where to begin with this issue.

I am doing all this right now by creating an array and adding to it each time a key is pressed then using a for loop to generate all the <li>'s onto the page.

You can visit the page and its action on this page: ImASpy.com/Ejoty Click inside of Title: and start typing letters.

I am sure not all of it will apply, especially the CSS, but here is also my code....

Thank you so so much to the person who helps me finish this!

Here is my jQuery:

$(document).ready(function() {

var maxWidth = 0;
var titleArray = new Array;
var nameArray = new Array;
var i = 0;
var letterWidth;

$('#ejotyTitleInput').keypress(function(e)
{
    var letterValue = String.fromCharCode(e.which);

if (e.which == 8) {
                e.preventDefault();
                alert('back space');
            }   
    if(e.which==32){
        var newNode = document.createElement("li"); 
        $(newNode).addClass("ejotyBlank");
        newNode.appendChild(document.createTextNode("&nbsp;&nbsp;"));
        titleArray[i] = newNode;
    }


    if (letterValue.match(/[a-zA-Z\.]/))
    letterValue = letterValue.toUpperCase();
    letterValue = "ejoty" + letterValue;


    var newNode = document.createElement("li"); 
    $(newNode).addClass(letterValue);

    nameArray[i] = letterValue;
    titleArray[i] = newNode;
    i++;


    maxWidth = 0;
    letterWidth = 0;
    for(var x = 0;x<=titleArray.length;++x){
        var currentLI = titleArray[x];
        $("ul#ejotyTitle").append(currentLI);
        letterWidth += $("." + nameArray[x]).width() + 3;
        var currentLetterWidth = $("." + nameArray[x]).width();
        maxWidth = maxWidth + currentLetterWidth;
        $("ul#ejotyTitle").css("width", letterWidth)
    }
});

});

Here is my HTML code:

  <footer id="page1">
    <h2>Now you try!</h2>
    <form id="ejotyCreator">
        <table>
        <tr>
        <td>Title:</td>
        <td><input type="text" id="ejotyTitleInput" name="title" /></td>
        </tr>
        <tr>
        <td>Text:</td>
        <td><textarea name="ejotyText" cols="20" rows="2" id="ejotyText"></textarea></td>
        </tr>
        <tr>
        <td>Signed:</td>
        <td><input type="text" id="ejotySig" name="title"/></td>
        </tr>

        </table>
    </form>
  </footer><!-- end page1 footer -->


 <section id="rightPage" class="clearfix">

              <ul class="ejotyWriting clearfix">
                  <li class="ejotyT"></li>
                  <li class="ejotyH"></li>
                  <li class="ejotyI"></li>
                  <li class="ejotyS"></li>
                  <li>&nbsp;</li>
                  <li class="ejotyI"></li>
                  <li class="ejotyS"></li>
                  <li>&nbsp;</li>
                  <li class="ejotyE"></li>
                  <li class="ejotyJ"></li>
                  <li class="ejotyO"></li>
                  <li class="ejotyT"></li>
                  <li class="ejotyY"></li>
                  <li class="ejotyOther">-</li>
                  <li class="ejotyZ"></li>
                  <li>...</li>
              </ul>
                  <br />
                  <br />
              <div id="centerTitle">
              <ul class="ejotyWriting clearfix" id="ejotyTitle">
              </ul><!-- end title -->
              </div><!--end centerTitle -->
                   <br />
              <ul class="ejotyWriting clearfix" id="ejotyUserContent" >    
              </ul><!-- end ejotyContent -->
                  <br />

              <ul class="ejotyWriting clearfix" id="ejotySigniature"> 
              </ul><!-- end ejotyContent -->


      </section><!-- end rightPage -->

Here is my CSS:

    /************* EJOTYZ CONTENT *************/


section, footer {
    display: block;
}


table, tr, td {
    margin: 0;
    padding: 0;
}
form {
    padding: 0;
    margin: 0;
}
td.subtractMargin {
    margin-top: 15px;
}

h2 {
    color: #333;
    margin: 0 0 0 0px;
    padding: 0;
    text-decoration: underline;
}

textarea {
    resize: none;
    margin: 0 0 -6px 10px;
    padding: 5px;
}



input {
    margin: 0 0 0 10px;
    padding: 5px;
    color: #000;
}

footer#page1 {
    width: 260px;
    height: 80px;
    position: absolute;
    top: 350px;
    left: 45px; 
}

section#rightPage {
    width: 320px;
    height: 390px;
    position: absolute;
    top: 15px;
    left: 355px;
    overflow: auto; 
}


hr {
    border-top-width: 2px;
    border-top-style: dotted;
    border-right-style: none;
    border-bottom-style: none;
    border-left-style: none;
    border-top-color: #333;
    border-right-color: #333;
    border-bottom-color: #333;
    border-left-color: #333;
    width: 275px;
    margin: -1px 0 15px 10px;
}
footer#page2 {
    width: 270px;
    height: 80px;
    position: absolute;
    top: 405px;
    left: 395px;    
}

ul#ejoty {
    padding: 0;
    margin: 0 0 0 35px;
}

ul#ejoty li {
    list-style: none;
    display: block;
    float: left;
    color: #000;
    margin-right: 2px;
}

ul.ejotyWriting {
    padding: 0;
    margin: 0 0 0 5px;  
}

ul.ejotyWriting li {
    list-style: none;
    display: block;
    float: left;
    color: #000;
    margin-right: 2px;  
}

h1.bookTitle {
    color: #333;
    margin-left: 15px;
}

ul#ejotyUserContent {
 background: #3F9;  
 width: auto;
}


div#centerTitle {
 padding: 0px 5px 5px 5px;
 width: 300px;
 text-align: center;
 margin: 0 auto;
}

ul#ejotyTitle {
max-width: 300px;
margin: 0 auto; 
}




/************* EJOTYZ LETTERS *************/

.ejotyBlank {
height:12px;
width:43px;
margin-top: 5px;
}

.ejotyOther {
height:12px;
}


.ejotyB{
height:12px;
width:34px;
margin-top: 5px;
background:url(images/ejoty.png) -50px 1px no-repeat;
}

.ejotyC{
height:12px;
width:27px;
margin-top: 5px;
background:url(images/ejoty.png) -90px 1px no-repeat;
}

.ejotyD{
height:12px;
width:19px;
margin-top: 5px;
background:url(images/ejoty.png) -123px 1px no-repeat;
}

.ejotyE{
height:12px;
width:10px;
margin-top: 5px;
background:url(images/ejoty.png) -149px 1px no-repeat;
}

.ejotyF{
height:12px;
width:43px;
margin-top: 5px;
background:url(images/ejoty.png) -1px -20px no-repeat;
}

.ejotyG{
height:12px;
width:35px;
margin-top: 5px;
background:url(images/ejoty.png) -49px -20px no-repeat;
}

.ejotyH{
height:12px;
width:27px;
margin-top: 5px;
background:url(images/ejoty.png) -90px -20px no-repeat;
}

.ejotyI{
height:12px;
width:19px;
margin-top: 5px;
background:url(images/ejoty.png) -124px -20px no-repeat;
}

.ejotyJ{
height:12px;
width:14px;
margin-top: 5px;
background:url(images/ejoty.png) -150px -20px no-repeat;
}

.ejotyK{
height:12px;
width:45px;
margin-top: 5px;
background:url(images/ejoty.png) -1px -44px no-repeat;
}

.ejotyL{
height:12px;
width:36px;
margin-top: 5px;
background:url(images/ejoty.png) -50px -44px no-repeat;
}

.ejotyM{
height:12px;
width:28px;
margin-top: 5px;
background:url(images/ejoty.png) -92px -44px no-repeat;
}

.ejotyN{
height:12px;
width:20px;
margin-top: 5px;
background:url(images/ejoty.png) -125px -44px no-repeat;
}

.ejotyO{
height:12px;
width:16px;
margin-top: 5px;
background:url(images/ejoty.png) -150px -44px no-repeat;
}

.ejotyP{
height:12px;
width:44px;
margin-top: 5px;
background:url(images/ejoty.png) -1px -66px no-repeat;
}

.ejotyQ{
height:12px;
width:36px;
margin-top: 5px;
background:url(images/ejoty.png) -49px -66px no-repeat;
}

.ejotyR{
height:12px;
width:28px;
margin-top: 5px;
background:url(images/ejoty.png) -92px -66px no-repeat;
}

.ejotyS{
height:12px;
width:20px;
margin-top: 5px;
background:url(images/ejoty.png) -125px -66px no-repeat;
}

.ejotyT{
height:12px;
width:16px;
margin-top: 5px;
background:url(images/ejoty.png) -151px -66px no-repeat;
}

.ejotyU{
height:12px;
width:44px;
margin-top: 5px;
background:url(images/ejoty.png) -1px -88px no-repeat;
}

.ejotyV{
height:12px;
width:36px;
margin-top: 5px;
background:url(images/ejoty.png) -49px -88px no-repeat;
}

.ejotyW{
height:12px;
width:28px;
margin-top: 5px;
background:url(images/ejoty.png) -92px -88px no-repeat;
}

.ejotyX{
height:12px;
width:20px;
margin-top: 5px;
background:url(images/ejoty.png) -124px -88px no-repeat;
}

.ejotyY{
height:12px;
width:16px;
margin-top: 5px;
background:url(images/ejoty.png) -151px -88px no-repeat;
}

.ejotyZ{
height:12px;
width:16px;
margin-top: 5px;
background:url(images/ejoty.png) 0px -109px no-repeat;
}

.ejotyA{
height:12px;
width:43px;
margin-top: 5px;
background:url(images/ejoty.png) -1px 1px no-repeat;
}

Upvotes: 0

Views: 90

Answers (1)

Jake Feasel
Jake Feasel

Reputation: 16955

Okay, let's start this fun over again. I've done some debugging and stepping through your code, and I've found the real problem. You are not getting the "ejotyBlank" class applied to your new li element because on line 41 of ejotyz.html, you are blowing away the "newNode" value that you defined right above there. Change lines 40-48 to this:

if (letterValue.match(/[a-zA-Z\.]/))
{
    letterValue = letterValue.toUpperCase();
    letterValue = "ejoty" + letterValue;


    var newNode = document.createElement("li"); 
    $(newNode).addClass(letterValue);

}

Regarding your backspace problem, I think you're going to have to go about it a different way. The problem with your current ( initial starting ) approach is that you are basically assuming that the backspace is entered at the end of the string. That may not be a valid assumption. In that case, you can't just drop the last "character" - instead you have to rebuild the whole string. Also, keypress doesn't get triggered when you hit backspace, from what I can tell. So I would change it to keyup instead. Your keyup function should replace the whole UI section with a new list rebuilt from the current text. If you need help writing a function to do that, let me know.

And the full solution, as seen here http://jsfiddle.net/LcbQn/3/

$(document).ready(function() {

$('#ejotyTitleInput').keyup(function(e) {

var fullString = $(this).val();
var maxWidth = 0;
var titleArray = new Array;
var nameArray = new Array;
var i = 0;
var letterWidth;

$("ul#ejotyTitle").empty();
for (var k=0;k<fullString.length;k++)
{
    var letterValue = fullString.substr(k,1);

    if(letterValue == ' '){
        var newNode = document.createElement("li"); 
        $(newNode).addClass("ejotyBlank").html("&nbsp;&nbsp;");
        titleArray[i] = newNode;
        nameArray[i] = "ejotyBlank";
    } else if (letterValue.match(/[a-zA-Z\.]/))
    {
        letterValue = letterValue.toUpperCase();
        letterValue = "ejoty" + letterValue;


        var newNode = document.createElement("li"); 
        $(newNode).addClass(letterValue);
        nameArray[i] = letterValue;
        titleArray[i] = newNode;
    }
    i++;


    maxWidth = 0;
    letterWidth = 0;
    for(var x = 0;x<=titleArray.length;++x){
        var currentLI = titleArray[x];
        $("ul#ejotyTitle").append(currentLI);
        letterWidth += $("." + nameArray[x]).width() + 3;
        var currentLetterWidth = $("." + nameArray[x]).width();
        maxWidth = maxWidth + currentLetterWidth;
        $("ul#ejotyTitle").css("width", letterWidth)
    }


} });

});

Upvotes: 2

Related Questions