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.
Page 1 of 2 12 LastLast
Results 1 to 15 of 18
  1. #1
    Banned
    Join Date
    Oct 2010
    Posts
    115
    Thanks
    30
    Thanked 0 Times in 0 Posts

    auto object positioning (maybe artificial velocity?)

    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?

  • #2
    Senior Coder DJCMBear's Avatar
    Join Date
    Mar 2010
    Location
    United Kindom
    Posts
    1,173
    Thanks
    14
    Thanked 136 Times in 136 Posts
    Try using display instead of visibility.

    So change this.
    Code:
    obj.style.visibility = "hidden";
    To this.
    Code:
    obj.style.display = "none";
    Official BinPress hand picked coder.
    For anyone worried about SQL injection go have a look at my small yet powerful script here.
    Go Pledge for Light Table, if it hit's $300,000 Python and other languages will get added.
    I am 1 of 65,608 people to get a Pebble Watch :P

  • #3
    Banned
    Join Date
    Oct 2010
    Posts
    115
    Thanks
    30
    Thanked 0 Times in 0 Posts
    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.

  • #4
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,602
    Thanks
    78
    Thanked 4,387 Times in 4,352 Posts
    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.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #5
    Senior Coder DJCMBear's Avatar
    Join Date
    Mar 2010
    Location
    United Kindom
    Posts
    1,173
    Thanks
    14
    Thanked 136 Times in 136 Posts
    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.
    Official BinPress hand picked coder.
    For anyone worried about SQL injection go have a look at my small yet powerful script here.
    Go Pledge for Light Table, if it hit's $300,000 Python and other languages will get added.
    I am 1 of 65,608 people to get a Pebble Watch :P

  • #6
    Senior Coder DJCMBear's Avatar
    Join Date
    Mar 2010
    Location
    United Kindom
    Posts
    1,173
    Thanks
    14
    Thanked 136 Times in 136 Posts
    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>
    Official BinPress hand picked coder.
    For anyone worried about SQL injection go have a look at my small yet powerful script here.
    Go Pledge for Light Table, if it hit's $300,000 Python and other languages will get added.
    I am 1 of 65,608 people to get a Pebble Watch :P

  • Users who have thanked DJCMBear for this post:

    maxhudson (12-23-2010)

  • #7
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,602
    Thanks
    78
    Thanked 4,387 Times in 4,352 Posts
    Well, I think you could have gotten rid of some of the <div>s, but yeah...that's what I meant.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #8
    Senior Coder DJCMBear's Avatar
    Join Date
    Mar 2010
    Location
    United Kindom
    Posts
    1,173
    Thanks
    14
    Thanked 136 Times in 136 Posts
    Quote Originally Posted by Old Pedant View Post
    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.
    Official BinPress hand picked coder.
    For anyone worried about SQL injection go have a look at my small yet powerful script here.
    Go Pledge for Light Table, if it hit's $300,000 Python and other languages will get added.
    I am 1 of 65,608 people to get a Pebble Watch :P

  • Users who have thanked DJCMBear for this post:

    maxhudson (12-24-2010)

  • #9
    Senior Coder DJCMBear's Avatar
    Join Date
    Mar 2010
    Location
    United Kindom
    Posts
    1,173
    Thanks
    14
    Thanked 136 Times in 136 Posts
    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.
    Official BinPress hand picked coder.
    For anyone worried about SQL injection go have a look at my small yet powerful script here.
    Go Pledge for Light Table, if it hit's $300,000 Python and other languages will get added.
    I am 1 of 65,608 people to get a Pebble Watch :P

  • Users who have thanked DJCMBear for this post:

    maxhudson (12-24-2010)

  • #10
    Senior Coder DJCMBear's Avatar
    Join Date
    Mar 2010
    Location
    United Kindom
    Posts
    1,173
    Thanks
    14
    Thanked 136 Times in 136 Posts
    Just Change this line
    Code:
    div.itemBox {padding:3px;margin:10px;}
    To this
    Code:
    div.itemBox {padding:3px;margin:10px;display:none;}
    Official BinPress hand picked coder.
    For anyone worried about SQL injection go have a look at my small yet powerful script here.
    Go Pledge for Light Table, if it hit's $300,000 Python and other languages will get added.
    I am 1 of 65,608 people to get a Pebble Watch :P

  • #11
    Senior Coder DJCMBear's Avatar
    Join Date
    Mar 2010
    Location
    United Kindom
    Posts
    1,173
    Thanks
    14
    Thanked 136 Times in 136 Posts
    In the javascript change this
    Code:
           if(box.style.display == 'none') {
    To this
    Code:
           if(box.style.display == 'none' | box.style.display === '') {
    Official BinPress hand picked coder.
    For anyone worried about SQL injection go have a look at my small yet powerful script here.
    Go Pledge for Light Table, if it hit's $300,000 Python and other languages will get added.
    I am 1 of 65,608 people to get a Pebble Watch :P

  • Users who have thanked DJCMBear for this post:

    maxhudson (12-24-2010)

  • #12
    Senior Coder DJCMBear's Avatar
    Join Date
    Mar 2010
    Location
    United Kindom
    Posts
    1,173
    Thanks
    14
    Thanked 136 Times in 136 Posts
    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.
    Official BinPress hand picked coder.
    For anyone worried about SQL injection go have a look at my small yet powerful script here.
    Go Pledge for Light Table, if it hit's $300,000 Python and other languages will get added.
    I am 1 of 65,608 people to get a Pebble Watch :P

  • Users who have thanked DJCMBear for this post:

    maxhudson (12-24-2010)

  • #13
    Senior Coder DJCMBear's Avatar
    Join Date
    Mar 2010
    Location
    United Kindom
    Posts
    1,173
    Thanks
    14
    Thanked 136 Times in 136 Posts
    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.
    Official BinPress hand picked coder.
    For anyone worried about SQL injection go have a look at my small yet powerful script here.
    Go Pledge for Light Table, if it hit's $300,000 Python and other languages will get added.
    I am 1 of 65,608 people to get a Pebble Watch :P

  • #14
    Senior Coder DJCMBear's Avatar
    Join Date
    Mar 2010
    Location
    United Kindom
    Posts
    1,173
    Thanks
    14
    Thanked 136 Times in 136 Posts
    set the class like this class="boxItem push20" and then in the css you put this div.push20 {margin:20px 0 0 0;}
    Official BinPress hand picked coder.
    For anyone worried about SQL injection go have a look at my small yet powerful script here.
    Go Pledge for Light Table, if it hit's $300,000 Python and other languages will get added.
    I am 1 of 65,608 people to get a Pebble Watch :P

  • Users who have thanked DJCMBear for this post:

    maxhudson (12-24-2010)

  • #15
    Senior Coder DJCMBear's Avatar
    Join Date
    Mar 2010
    Location
    United Kindom
    Posts
    1,173
    Thanks
    14
    Thanked 136 Times in 136 Posts
    How did it mess it up?
    Official BinPress hand picked coder.
    For anyone worried about SQL injection go have a look at my small yet powerful script here.
    Go Pledge for Light Table, if it hit's $300,000 Python and other languages will get added.
    I am 1 of 65,608 people to get a Pebble Watch :P


  •  
    Page 1 of 2 12 LastLast

    Posting Permissions

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