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 6 of 6
  1. #1
    New to the CF scene
    Join Date
    Jul 2010
    Posts
    7
    Thanks
    3
    Thanked 0 Times in 0 Posts

    Javascript Question regarding CSS & Span classes

    Hey all, my first post here. I'm primarily a designer but need to get more into the code aspect of things (and will be getting jQuery asap), but at the moment i'm very behind on time on a project and could use some quick help.

    Basically, I'm making a dynamically loading text box input area for RMA returns for our products. But thats kind of irrelevant, here's my question:


    I have an external style sheet with only this in it (more will be added later for future sections, thats why im making it it's own "css-forms.css" file:

    Code:
    .formpad { padding:3px 3px 3px 3px; }
    In my main .html, some of my javascript for my dynamic table contains lines like these:


    Code:
    var esnImeiInput = "<INPUT type=\"text\" name=\"esn_imei[]\" size=\"20\">";
    var invoiceInput = "<INPUT type=\"text\" name=\"invoice[]\" size=\"8\">";
    var datePurchaseInput = "<INPUT type=\"text\" name=\"date_purchase[]\" size=\"8\">";
    var noteInput = "<INPUT type=\"text\" name=\"notes[]\" size=\"18\">";
    var trOpenTag = "<tr>";
    var trCloseTag = "</tr>";
    var tbOpenTag = "<table>";
    
    var formRows = modelInput + reasonInput + esnImeiInput + invoiceInput + datePurchaseInput + noteInput + "<br />";
    
    for(x=0;x<10;x++)
    {
    	formRows += modelInput + reasonInput + esnImeiInput + invoiceInput + datePurchaseInput + noteInput + "<br />";	
    }
    Where inside those vars (INPUT's) would i REFER to the 'class' of .formpad? Basically I just want to add cellpadding to the table that is being dynamically loaded. If anyone has time to help via IM that'd be cool too, this is pretty easy stuff for true coders.


    (the test page for all of this is currently at:

    http://planetcellinc.com/rma-rev726.html


    Any help appreciated, thanks!

    -Hrl2k
    Last edited by hrl2k; 07-27-2010 at 11:40 PM.

  • #2
    Regular Coder
    Join Date
    Jul 2010
    Posts
    185
    Thanks
    3
    Thanked 42 Times in 42 Posts
    I think I understand what you are asking. If not, feel free to correct me.

    In your javascript, when you are creating (or declaring) the input elements just add the class like so:

    Code:
    var esnImeiInput = '<input type="text" name="esn_imei" class="formpad" />';
    The class .formpad will be applied to that element.

    Also, for future reference, it makes your code much easier to read if you put it in [CODE] tags when you are writing your post.

    Like I said, I think this is what you are looking for, but I've been wrong before!
    Last edited by disastro; 07-27-2010 at 11:40 PM. Reason: Freaking typos. Need to hire a proofreader.

  • Users who have thanked disastro for this post:

    hrl2k (07-27-2010)

  • #3
    New to the CF scene
    Join Date
    Jul 2010
    Posts
    7
    Thanks
    3
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by disastro View Post
    I think I understand what you are asking. If not, feel free to correct me.

    In your javascript, when you are creating (or declaring) the input elements just add the class like so:

    Code:
    var esnImeiInput = '<input type="text" name="esn_imei" class="formpad" />';
    The class .formpad will be applied to that element.

    Also, for future reference, it makes you code much easier to read if you put it in [CODE] tags when you are writing your post.

    Like I said, I think this is what you are looking for, but I've been wrong before!
    thanks, ill see what i can do! & thx for tip.

  • #4
    Regular Coder
    Join Date
    Jul 2010
    Posts
    185
    Thanks
    3
    Thanked 42 Times in 42 Posts
    Happy to help.

  • #5
    New to the CF scene
    Join Date
    Jul 2010
    Posts
    7
    Thanks
    3
    Thanked 0 Times in 0 Posts
    I mostly figured it out except for one small thing. check it out:

    http://www.planetcellinc.com/rma-rev726.html


    All my padding only works *after* I press the "MORE" button. Does anyone have any advice for this? The first 10 boxes definitely need to line up too.

    thanks!

  • #6
    Regular Coder
    Join Date
    Jul 2010
    Posts
    185
    Thanks
    3
    Thanked 42 Times in 42 Posts
    I took a look. I'm not entirely sure what effect you're going for here.
    You are padding the spans, so the internal elements are 7px from the left,right,top and bottom of the span.

    By the way, everything looks fine (and aligned) in firefox (except the topmost textfields which you have positioned with non-breaking spaces).

    The first ten rows of inputs are displayed when the "More" button is pressed. One thing to watch out for is if the user has entered data in the first 10 rows and clicks the "More" button, all entered data is lost.


  •  

    Posting Permissions

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