...

View Full Version : auto object positioning (maybe artificial velocity?)



maxhudson
12-22-2010, 07:06 PM
Im not really sure how to go about this, but one idea that i had was artificial velocity. let me explain the problem first though before i see if my idea is feasible.

The problem:

I have 5 buttons, and 5 groups.

Each group has 8 objects (every group has the same essential objects that are the same sizes)

Basically, each button makes a group dissapear or appear.

If all the groups were visible, it would look like this:

group 1
group 2
group 3
group 4
group 5

But if just groups 1 & 5 were visible it would look like this:

group 1



group 5.

do you see my problem?

my idea to fix it was to make some kind of container around each group. the container would somehow move the whole group of objects as if it was one.

then, i was thinking of doing something like this:

if (container1's top isn't touching another container's bottom){
give container1 a negative, exponential velocity. //this way it would look very smooth
}
else{
dont move it
}

does this sound feasible or is there a better way?

DJCMBear
12-22-2010, 08:24 PM
Try using display instead of visibility.

So change this.

obj.style.visibility = "hidden";

To this.

obj.style.display = "none";

maxhudson
12-23-2010, 06:46 AM
The only thing is my positions are absolute instead of relative.

If I were to change them to relative, I think what I would do is try to make everything inside some kind of a frame.

How would I do that?

What i mean is make a box x pixels high and x pixels wide so that the box can just be posted into the middle another html file that has other things outside of the box.

Old Pedant
12-23-2010, 07:29 AM
Just use an outer <div> that you position absolutely and then the inner <div>s don't even need to be relatively positioned, at all. They can just "flow" naturally.

But if you won't show us code, all we can do is make general suggestions.

DJCMBear
12-23-2010, 04:32 PM
I don't see why you are posisioning them as p tags align themselves under eachother anyway. I would go with Old Pedant on this use an outer div to position the list on the page and then use display for show/hide toggles.

DJCMBear
12-23-2010, 08:26 PM
Try this out it's just what you wanted.



<!DOCTYPE html>
<html>
<head>
<title>Untitled Document</title>
<style type="text/css">
* {margin:0;padding:0;}
input[type="text"], textarea {outline:none;border:1px solid #999999;}
div#main {margin:5px auto;width:950px;font-family:arial;}
div#colLeft {width:70%;float:left;}
div#colRight {margin:13px 0 0 0;width:29.5%;float:right;}
div.clear {clear:both;}
div.itemBox {padding:3px;margin:10px;}
div.boxLeft {float:left;width:20%;}
div.boxRight {float:right;width:25%;padding: 0 0 0 10px;}
div.quantity {float:left;width:40%;}
div.formInput {float:left;width:53%;}
div.formInputR {float:right;width:50%;}
div.formInput input, div.formInputR input {margin:0 0 3px 0;padding:3px;width:100%;}
div.boxTitle{font-size:10pt;margin:5px 0 13px 0;display:block;word-break:break-all;}
div.boxLink {font-size:8pt;}
div.formPanel {width:150px;margin:50px auto;}
span.qTitle, span.qTotal {font-size:10pt;margin:3px 0 0 0;display:block;text-align:right;}
span.qTotal {margin:11px 0 0 0;}
input.typeList {border:1px solid #000000;background-color:#CCCCCC;float:right;
padding:5px;width:120px;margin:0 5px 5px 0;cursor:pointer;font-size:9pt;}
input.formButtons {border:1px solid #000000;background-color:#FFFFFF;padding:7px;
display:block;width:100%;font-size:15pt;margin:0 0 5px 0;cursor:pointer;}
textarea.budget {padding:3px;width:70px;height:16px;margin:0 auto 5px auto;display:block;}
</style>
<script type="text/javascript">
(function($){
$.toggle = function(id) {
var i,
box = document.getElementById('box_'+id),
fib = box.getElementsByTagName('input');
if(box) {
if(box.style.display == 'none') {
box.style.display = 'block';
for(i in fib) {
if(fib[i]) {
fib[i].value = '';
fib[i].disabled = false;
}
}
} else {
box.style.display = 'none';
for(i in fib) {
if(fib[i]) {
fib[i].value = '';
fib[i].disabled = true;
}
}
}
}
};
})(window);
</script>
</head>
<body>
<div id="main">
<div id="colLeft">
<form name="computerItems" method="get" action="">
<div class="itemBox" id="box_1">
<div class="boxLeft">
<div class="boxTitle">Motherboard:</div>
<div class="boxLink">Link:</div>
</div>
<div class="formInput">
<input type="text" name="computer[motherborad][name]" />
<input type="text" name="computer[motherborad][link]" />
</div>
<div class="boxRight">
<div class="quantity">
<span class="qTitle">Quantity:</span>
<span class="qTotal">$</span>
</div>
<div class="formInputR">
<input type="text" name="computer[motherborad][quantity]" />
<input type="text" name="computer[motherborad][price]" />
</div>
</div>
<div class="clear"></div>
</div>
<div class="itemBox" id="box_2">
<div class="boxLeft">
<div class="boxTitle">CPU:</div>
<div class="boxLink">Link:</div>
</div>
<div class="formInput">
<input type="text" name="computer[cpu][name]" />
<input type="text" name="computer[cpu][link]" />
</div>
<div class="boxRight">
<div class="quantity">
<span class="qTitle">Quantity:</span>
<span class="qTotal">$</span>
</div>
<div class="formInputR">
<input type="text" name="computer[cpu][quantity]" />
<input type="text" name="computer[cpu][price]" />
</div>
</div>
<div class="clear"></div>
</div>
<div class="itemBox" id="box_3">
<div class="boxLeft">
<div class="boxTitle">RAM:</div>
<div class="boxLink">Link:</div>
</div>
<div class="formInput">
<input type="text" name="computer[ram][name]" />
<input type="text" name="computer[ram][link]" />
</div>
<div class="boxRight">
<div class="quantity">
<span class="qTitle">Quantity:</span>
<span class="qTotal">$</span>
</div>
<div class="formInputR">
<input type="text" name="computer[ram][quantity]" />
<input type="text" name="computer[ram][price]" />
</div>
</div>
<div class="clear"></div>
</div>
<div class="itemBox" id="box_4">
<div class="boxLeft">
<div class="boxTitle">Video Card:</div>
<div class="boxLink">Link:</div>
</div>
<div class="formInput">
<input type="text" name="computer[video_card][name]" />
<input type="text" name="computer[video_card][link]" />
</div>
<div class="boxRight">
<div class="quantity">
<span class="qTitle">Quantity:</span>
<span class="qTotal">$</span>
</div>
<div class="formInputR">
<input type="text" name="computer[video_card][quantity]" />
<input type="text" name="computer[video_card][price]" />
</div>
</div>
<div class="clear"></div>
</div>
<div class="itemBox" id="box_5">
<div class="boxLeft">
<div class="boxTitle">Hard Drive:</div>
<div class="boxLink">Link:</div>
</div>
<div class="formInput">
<input type="text" name="computer[hard_drive][name]" />
<input type="text" name="computer[hard_drive][link]" />
</div>
<div class="boxRight">
<div class="quantity">
<span class="qTitle">Quantity:</span>
<span class="qTotal">$</span>
</div>
<div class="formInputR">
<input type="text" name="computer[hard_drive][quantity]" />
<input type="text" name="computer[hard_drive][price]" />
</div>
</div>
<div class="clear"></div>
</div>
<div class="itemBox" id="box_6">
<div class="boxLeft">
<div class="boxTitle">Power Supply:</div>
<div class="boxLink">Link:</div>
</div>
<div class="formInput">
<input type="text" name="computer[power_supply][name]" />
<input type="text" name="computer[power_supply][link]" />
</div>
<div class="boxRight">
<div class="quantity">
<span class="qTitle">Quantity:</span>
<span class="qTotal">$</span>
</div>
<div class="formInputR">
<input type="text" name="computer[power_supply][quantity]" />
<input type="text" name="computer[power_supply][price]" />
</div>
</div>
<div class="clear"></div>
</div>
<div class="itemBox" id="box_7">
<div class="boxLeft">
<div class="boxTitle">Case:</div>
<div class="boxLink">Link:</div>
</div>
<div class="formInput">
<input type="text" name="computer[case][name]" />
<input type="text" name="computer[case][link]" />
</div>
<div class="boxRight">
<div class="quantity">
<span class="qTitle">Quantity:</span>
<span class="qTotal">$</span>
</div>
<div class="formInputR">
<input type="text" name="computer[case][quantity]" />
<input type="text" name="computer[case][price]" />
</div>
</div>
<div class="clear"></div>
</div>
<div class="itemBox" id="box_8">
<div class="boxLeft">
<div class="boxTitle">Operating System:</div>
<div class="boxLink">Link:</div>
</div>
<div class="formInput">
<input type="text" name="computer[operating_system][name]" />
<input type="text" name="computer[operating_system][link]" />
</div>
<div class="boxRight">
<div class="quantity">
<span class="qTitle">Quantity:</span>
<span class="qTotal">$</span>
</div>
<div class="formInputR">
<input type="text" name="computer[operating_system][quantity]" />
<input type="text" name="computer[operating_system][price]" />
</div>
</div>
<div class="clear"></div>
</div>
<div class="itemBox" id="box_9">
<div class="boxLeft">
<div class="boxTitle">Other:</div>
<div class="boxLink">Link:</div>
</div>
<div class="formInput">
<input type="text" name="computer[other][name]" />
<input type="text" name="computer[other][link]" />
</div>
<div class="boxRight">
<div class="quantity">
<span class="qTitle">Quantity:</span>
<span class="qTotal">$</span>
</div>
<div class="formInputR">
<input type="text" name="computer[other][quantity]" />
<input type="text" name="computer[other][price]" />
</div>
</div>
<div class="clear"></div>
</div>
<div class="clear"></div>
</div>
<div id="colRight">
<input type="button" value="Hard Drive" onclick="toggle(5);" class="typeList" />
<input type="button" value="Motherboard" onclick="toggle(1);" class="typeList" />
<input type="button" value="Power Supply" onclick="toggle(6);" class="typeList" />
<input type="button" value="CPU" onclick="toggle(2);" class="typeList" />
<input type="button" value="Case" onclick="toggle(7);" class="typeList" />
<input type="button" value="Video Card" onclick="toggle(4);" class="typeList" />
<input type="button" value="Operating System" onclick="toggle(8);" class="typeList" />
<input type="button" value="RAM" onclick="toggle(3);" class="typeList" />
<input type="button" value="Other" onclick="toggle(9);" class="typeList" />
<div class="clear"></div>
<div class="formPanel">
<textarea name="budget" cols="5" rows="1" class="budget"></textarea>
<input type="button" value="Apply Budget" class="formButtons" />
<input type="submit" value="Done" class="formButtons" />
</div>
<div class="clear"></div>
</div>
</form>
</div>
</body>
</html>

Old Pedant
12-23-2010, 09:22 PM
Well, I think you could have gotten rid of some of the <div>s, but yeah...that's what I meant.

DJCMBear
12-23-2010, 09:26 PM
Well, I think you could have gotten rid of some of the <div>s, but yeah...that's what I meant.

Yeah it was a quick mock-up I wasn't really trying to make it small or large, I just coded lol.

DJCMBear
12-23-2010, 11:06 PM
Its just like the version you showed us in the image just with better usage.

You can hide any section you want by clicking the buttons on the side and once you hide a section it wont get sent when you submit the form. You just have to update my html with your codes so things such as add budget would need to be added etc.

DJCMBear
12-24-2010, 09:21 PM
Just Change this line

div.itemBox {padding:3px;margin:10px;}

To this

div.itemBox {padding:3px;margin:10px;display:none;}

DJCMBear
12-24-2010, 09:38 PM
In the javascript change this

if(box.style.display == 'none') {

To this

if(box.style.display == 'none' | box.style.display === '') {

DJCMBear
12-24-2010, 09:46 PM
Basicly it says if display is none or display is empty set display to block, now even though the display has been set to none in the css the javascript doesn't detect it as it is not on the html tag itself, so on page load all div's with class as boxItem will have no display so the display is empty until you click on the button and then the javascript adds the display style to the html tag dynamically so every time you click it the display gets changed.

DJCMBear
12-24-2010, 10:06 PM
Basicly all I did was use floats and clear:both these allow you to position elements on the page while keeping width's and height's intact.

DJCMBear
12-24-2010, 10:32 PM
set the class like this class="boxItem push20" and then in the css you put this div.push20 {margin:20px 0 0 0;}

DJCMBear
12-25-2010, 04:07 AM
How did it mess it up?

DJCMBear
12-26-2010, 02:50 AM
New Code...


<!DOCTYPE html>
<html>
<head>
<title>Untitled Document</title>
<style type="text/css">
* {margin:0;padding:0;}
input[type="text"], textarea {outline:none;border:1px solid #999999;}
div#main {margin:5px auto;width:950px;font-family:arial;}
div#colLeft {width:70%;float:left;}
div#colRight {margin:13px 0 0 0;width:29.5%;float:right;}
div.clear {clear:both;}
div.itemBox {padding:3px;margin:10px;display:none;}
div.boxLeft {float:left;width:20%;}
div.boxRight {float:right;width:25%;padding: 0 0 0 10px;}
div.quantity {float:left;width:45%;}
div.formInput {float:left;width:53%;}
div.formInputR {float:right;width:50%;}
div.formInput input, div.formInputR input {margin:0 0 3px 0;padding:3px;width:100%;}
div.boxTitle{font-size:10pt;margin:5px 0 13px 0;display:block;word-break:break-all;}
div.boxLink {font-size:8pt;}
div.formPanel {width:150px;margin:50px auto;}
span.qTitle, span.qTotal {font-size:10pt;margin:3px 0 0 0;display:block;text-align:right;}
span.qTotal {margin:11px 0 0 0;}
input.typeList {border:1px solid #000000;background-color:#FFFFFF;float:right;
padding:5px;width:120px;margin:0 5px 5px 0;cursor:pointer;font-size:9pt;}
input.typeListGray {border:1px solid #000000;background-color:#CCCCCC;float:right;
padding:5px;width:120px;margin:0 5px 5px 0;cursor:pointer;font-size:9pt;}
input.formButtons {border:1px solid #000000;background-color:#FFFFFF;padding:7px;
display:block;width:100%;font-size:15pt;margin:0 0 5px 0;cursor:pointer;}
textarea.budget {padding:3px;width:70px;height:16px;margin:0 auto 5px auto;display:block;}
textarea#output {margin:12px;width:646px;}
</style>
<script type="text/javascript">
(function($){
$.toggle = function(id,btn) {
var i,
box = document.getElementById('box_'+id),
fib = box.getElementsByTagName('input');
if(box) {
if(box.style.display == 'none' | box.style.display === '') {
box.style.display = 'block';
btn.className = "typeListGray";
for(i in fib) {
if(fib[i]) {
fib[i].value = '';
fib[i].disabled = false;
}
}
} else {
box.style.display = 'none';
btn.className = "typeList";
for(i in fib) {
if(fib[i]) {
fib[i].value = '';
fib[i].disabled = true;
}
}
}
}
};

/**
* @Function: finalize :: PUBLIC
* This is a shorter version of the codes you
* had before and also have a more faster speed
*/
$.finalize = function(s) {
var i,k,d,h,p,j,name,link,text,quantity,price,n=0,f=[]
o=document.getElementsByTagName('div'),
s=document.getElementById(s),
getName=function(o){
var i,n=['Motherboard','CPU','RAM','Video Card',
'Hard Drive','Power Supply','Case',
'Operating System','Other'];
for(i=0;i<n.length;i++){if(n[i].toLowerCase()==
o.toLowerCase().replace('_',' ')){return n[i];}}
};
for(i=0;i<o.length;i++) {
k = o[i].className.split(' ');
for(j=0;j<k.length;j++) {
if(k[j] == 'itemBox') {
d = document.getElementById(o[i].id);
if(d.style.display !== '' && d.style.display !== 'none') {
h = d.getElementsByTagName('input');
for(p=0;p<h.length;p++) {
if(h[p].name.indexOf('[name]') !== -1 && !h[p].disabled) {
name = getName(h[p].name.match(/computer\[(\w+)\]\[name\]/)[1]);
text = h[p].value;
} else if(h[p].name.indexOf('[link]') !== -1 && !h[p].disabled) {
link = h[p].value;
} else if(h[p].name.indexOf('[quantity]') !== -1 && !h[p].disabled) {
quantity = h[p].value;
} else if(h[p].name.indexOf('[price]') !== -1 && !h[p].disabled) {
price = h[p].value;
}
}
if(link !== '' && text !== '' && quantity !== '' && price !== '') {
f[n] = name+" - [URL="+link+"]"+text+"[\/URL] ("+quantity+") - $"+price;
n++;
}
}
}
}
}
if(s) {s.innerHTML = f.join("\n");}
};
})(window);
</script>
</head>
<body>
<div id="main">
<div id="colLeft">
<form name="computerItems" method="get" action="" onsubmit="finalize('output'); return false;">
<div class="itemBox" id="box_1">
<div class="boxLeft">
<div class="boxTitle">Motherboard:</div>
<div class="boxLink">Link:</div>
</div>
<div class="formInput">
<input type="text" class="js_name" name="computer[motherboard][name]" disabled="disabled" />
<input type="text" class="js_link" name="computer[motherboard][link]" disabled="disabled" />
</div>
<div class="boxRight">
<div class="quantity">
<span class="qTitle">Quantity:</span>
<span class="qTotal">$</span>
</div>
<div class="formInputR">
<input type="text" class="js_quantity" name="computer[motherboard][quantity]" disabled="disabled" />
<input type="text" class="js_price" name="computer[motherboard][price]" disabled="disabled" />
</div>
</div>
<div class="clear"></div>
</div>
<div class="itemBox" id="box_2">
<div class="boxLeft">
<div class="boxTitle">CPU:</div>
<div class="boxLink">Link:</div>
</div>
<div class="formInput">
<input type="text" class="js_name" name="computer[cpu][name]" disabled="disabled" />
<input type="text" class="js_link" name="computer[cpu][link]" disabled="disabled" />
</div>
<div class="boxRight">
<div class="quantity">
<span class="qTitle">Quantity:</span>
<span class="qTotal">$</span>
</div>
<div class="formInputR">
<input type="text" class="js_quantity" name="computer[cpu][quantity]" disabled="disabled" />
<input type="text" class="js_price" name="computer[cpu][price]" disabled="disabled" />
</div>
</div>
<div class="clear"></div>
</div>
<div class="itemBox" id="box_3">
<div class="boxLeft">
<div class="boxTitle">RAM:</div>
<div class="boxLink">Link:</div>
</div>
<div class="formInput">
<input type="text" class="js_name" name="computer[ram][name]" disabled="disabled" />
<input type="text" class="js_link" name="computer[ram][link]" disabled="disabled" />
</div>
<div class="boxRight">
<div class="quantity">
<span class="qTitle">Quantity:</span>
<span class="qTotal">$</span>
</div>
<div class="formInputR">
<input type="text" class="js_quantity" name="computer[ram][quantity]" disabled="disabled" />
<input type="text" class="js_price" name="computer[ram][price]" disabled="disabled" />
</div>
</div>
<div class="clear"></div>
</div>
<div class="itemBox" id="box_4">
<div class="boxLeft">
<div class="boxTitle">Video Card:</div>
<div class="boxLink">Link:</div>
</div>
<div class="formInput">
<input type="text" class="js_name" name="computer[video_card][name]" disabled="disabled" />
<input type="text" class="js_link" name="computer[video_card][link]" disabled="disabled" />
</div>
<div class="boxRight">
<div class="quantity">
<span class="qTitle">Quantity:</span>
<span class="qTotal">$</span>
</div>
<div class="formInputR">
<input type="text" class="js_quantity" name="computer[video_card][quantity]" disabled="disabled" />
<input type="text" class="js_price" name="computer[video_card][price]" disabled="disabled" />
</div>
</div>
<div class="clear"></div>
</div>
<div class="itemBox" id="box_5">
<div class="boxLeft">
<div class="boxTitle">Hard Drive:</div>
<div class="boxLink">Link:</div>
</div>
<div class="formInput">
<input type="text" class="js_name" name="computer[hard_drive][name]" disabled="disabled" />
<input type="text" class="js_link" name="computer[hard_drive][link]" disabled="disabled" />
</div>
<div class="boxRight">
<div class="quantity">
<span class="qTitle">Quantity:</span>
<span class="qTotal">$</span>
</div>
<div class="formInputR">
<input type="text" class="js_quantity" name="computer[hard_drive][quantity]" disabled="disabled" />
<input type="text" class="js_price" name="computer[hard_drive][price]" disabled="disabled" />
</div>
</div>
<div class="clear"></div>
</div>
<div class="itemBox" id="box_6">
<div class="boxLeft">
<div class="boxTitle">Power Supply:</div>
<div class="boxLink">Link:</div>
</div>
<div class="formInput">
<input type="text" class="js_name" name="computer[power_supply][name]" disabled="disabled" />
<input type="text" class="js_link" name="computer[power_supply][link]" disabled="disabled" />
</div>
<div class="boxRight">
<div class="quantity">
<span class="qTitle">Quantity:</span>
<span class="qTotal">$</span>
</div>
<div class="formInputR">
<input type="text" class="js_quantity" name="computer[power_supply][quantity]" disabled="disabled" />
<input type="text" class="js_price" name="computer[power_supply][price]" disabled="disabled" />
</div>
</div>
<div class="clear"></div>
</div>
<div class="itemBox" id="box_7">
<div class="boxLeft">
<div class="boxTitle">Case:</div>
<div class="boxLink">Link:</div>
</div>
<div class="formInput">
<input type="text" class="js_name" name="computer[case][name]" disabled="disabled" />
<input type="text" class="js_link" name="computer[case][link]" disabled="disabled" />
</div>
<div class="boxRight">
<div class="quantity">
<span class="qTitle">Quantity:</span>
<span class="qTotal">$</span>
</div>
<div class="formInputR">
<input type="text" class="js_quantity" name="computer[case][quantity]" disabled="disabled" />
<input type="text" class="js_price" name="computer[case][price]" disabled="disabled" />
</div>
</div>
<div class="clear"></div>
</div>
<div class="itemBox" id="box_8">
<div class="boxLeft">
<div class="boxTitle">Operating System:</div>
<div class="boxLink">Link:</div>
</div>
<div class="formInput">
<input type="text" class="js_name" name="computer[operating_system][name]" disabled="disabled" />
<input type="text" class="js_link" name="computer[operating_system][link]" disabled="disabled" />
</div>
<div class="boxRight">
<div class="quantity">
<span class="qTitle">Quantity:</span>
<span class="qTotal">$</span>
</div>
<div class="formInputR">
<input type="text" class="js_quantity" name="computer[operating_system][quantity]" disabled="disabled" />
<input type="text" class="js_price" name="computer[operating_system][price]" disabled="disabled" />
</div>
</div>
<div class="clear"></div>
</div>
<div class="itemBox" id="box_9">
<div class="boxLeft">
<div class="boxTitle">Other:</div>
<div class="boxLink">Link:</div>
</div>
<div class="formInput">
<input type="text" class="js_name" name="computer[other][name]" disabled="disabled" />
<input type="text" class="js_link" name="computer[other][link]" disabled="disabled" />
</div>
<div class="boxRight">
<div class="quantity">
<span class="qTitle">Quantity:</span>
<span class="qTotal">$</span>
</div>
<div class="formInputR">
<input type="text" class="js_quantity" name="computer[other][quantity]" disabled="disabled" />
<input type="text" class="js_price" name="computer[other][price]" disabled="disabled" />
</div>
</div>
<div class="clear"></div>
</div>
<div id="oContainer">
<textarea id="output" rows="12" cols="60"></textarea>
</div>
<div class="clear"></div>
</div>
<div id="colRight">
<input type="button" id="hd1button" value="Hard Drive" onclick="toggle(5,this);" class="typeList" />
<input type="button" id="motbutton" value="Motherboard" onclick="toggle(1,this);" class="typeList" />
<input type="button" id="psubutton" value="Power Supply" onclick="toggle(6,this);" class="typeList" />
<input type="button" id="cpubutton" value="CPU" onclick="toggle(2,this);" class="typeList" />
<input type="button" id="casbutton" value="Case" onclick="toggle(7,this);" class="typeList" />
<input type="button" id="rambutton" value="RAM" onclick="toggle(3,this);" class="typeList" />
<input type="button" id="opsbutton" value="Operating System" onclick="toggle(8,this);" class="typeList" />
<input type="button" id="gpubutton" value="Video Card" onclick="toggle(4,this);" class="typeList" />
<input type="button" id="othbutton" value="Other" onclick="toggle(9,this);" class="typeList" />
<div class="clear"></div>
<div class="formPanel">
<textarea name="budget" cols="5" rows="1" class="budget"></textarea>
<input type="button" value="Apply Budget" class="formButtons" />
<input type="submit" value="Done" class="formButtons" />
</div>
<div class="clear"></div>
</div>
</form>
</div>
</body>
</html>

DJCMBear
12-26-2010, 03:39 AM
The i's k's and all that are just variables that can be used as a global variable inside the function and the way I did the work around allowed me to use the form element name sections such as [name], [quantity] etc as a query identifier which allowed me to set the variables depending on what input its looking at. I also set all form elements to disabled so that even if you never open the hidden div if you submit the form the information will never get sent to the textarea.

Also wanted to add, when I say your codes you wrote this, var something = new Array([]);, you have combined two different types of arrays together first array would be this var something = new Array(); and the second type of array would be this var something = [];... you can also do this var something = {}; the last two are forms on objects as well as arrays.

DJCMBear
12-26-2010, 04:12 PM
It has been tested in all major browsers including
IE7,IE8,IE9,Firefox2,Firefox3,Firefox4,Safari [Latest Version] and Opera [Latest Version]
And works perfect in every browser.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum