...

View Full Version : Javascript Question regarding CSS & Span classes



hrl2k
07-27-2010, 10:22 PM
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:



.formpad { padding:3px 3px 3px 3px; }


In my main .html, some of my javascript for my dynamic table contains lines like these:




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

disastro
07-27-2010, 10:38 PM
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:



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!

hrl2k
07-27-2010, 10:40 PM
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:



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.

disastro
07-27-2010, 10:54 PM
Happy to help.

hrl2k
07-28-2010, 12:04 AM
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!

disastro
07-28-2010, 12:43 AM
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.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum