auto object positioning (maybe artificial velocity?)

maxhudson · 12-22-2010, 06: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, 07:24 PM

Try using display instead of visibility.

So change this.

Code:

obj.style.visibility = "hidden";

To this.

Code:

obj.style.display = "none";

maxhudson · 12-23-2010, 05: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, 06: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, 03: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, 07:26 PM

Try this out it's just what you wanted.

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;}
  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, 08: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, 08:26 PM

Quote:

Originally Posted by Old Pedant

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, 10: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, 08:21 PM

Just Change this line

Code:

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

To this

Code:

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

DJCMBear · 12-24-2010, 08:38 PM

In the javascript change this

Code:

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

To this

Code:

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

DJCMBear · 12-24-2010, 08: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, 09: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, 09: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, 03:07 AM

How did it mess it up?