show/hide on check box ticked

On 17 Nov 2014, 10:20 am, DeltaDave wrote:

And you are adding the action to the Cell and NOT the input field?

D

This…

You my friend, are a genius. Thank you so much for your help


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

So - had you added the action to the Input Field?

Rinse and repeat!

D


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

yep. I added the action to the cell and its working perfectly


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

ah just noticed a small issue…

The first check box will also show the fields that are hidden… then when unchecked, it hides all fields and shows when checked again…

https://dl.dropboxusercontent.com/u/433431/Test/test111.html


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

The first check box will also show the fields that are hidden…

That is because Walters script as written is set to reveal whatever comes after an enabled Checkbox in the same row.

What is the function of the initial checkbox in your example - does it have one? Is it necessary?

D


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

well ideally if it wasn’t checked the first set of fields in the row would be visible but greyed out/disabled…

So no I suppose it doesn’t have a function as of yet


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

There are lots of other ways to do this, the code that I wrote assumed that there was only the one checkbox in the middle of each row, it didn’t consider that there would be one at the beginning of the row.

I would duplicate the handler function (the part that begins with document.on('click', ... and ends with });) and modify the first one a little. This should get you a different behavior if the first checkbox is checked or the second one is.

// listen for the click on the td, not the checkbox
document.on('click', 'td:first-of-type', function(evt, td){
  var elm = td.down('input[type="checkbox"]');
  if(elm){
    td.nextSiblings().map(function (el) {
      if (elm.checked) {
        el.down('input, select').enable();
      } else {
        el.down('input, select').disable();
      }
    });
  }
});
// listen for the 8th td in the tr to be clicked
document.on('click', 'td:nth-of-type(8)', function(evt, td){
  var elm = td.down('input[type="checkbox"]');
  if(elm){
    td.nextSiblings().map(function (el) {
      if (elm.checked) {
        el.down('input, select').enable().show();
      } else {
        el.down('input, select').disable().hide();
      }
    });
  }
});

Note that this set of functions is predicated on your production layout being EXACTLY the same as your example. I have counted cells from the left, so your table really must be laid out this way, or you must change the function to reference the correct number of cells from the left…

Also, in order to have your inputs on the left set of fields initially in the disabled state, you need to use the same technique you used earlier (the Extended interface) but add a name/value pair of disabled / disabled.

Walter

PS: I have an Action called SemanticTable which can strip all of the P tags out of a drawn-in-place table: SemanticTable - ActionsForge


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Thanks walter, I haven’t had time to try that yet.

I have noticed that the code as it stands will only show/hide one item in each cell. If I put a second menu/list in the same cell for example, and do everything the same, it doesn’t show or hide.

Now sometimes I could make a new column, however I would ideally like them in the same cell as they come under the same heading.
It is basically a time drop down, one for hours and one for minutes (00,15,30,45) so ideally should be in the same column


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

I would ideally like them in the same cell as they come under the same heading. It is basically a time drop down, one for hours and one for minutes

You could use the Html5 Time Type (under the 3rd Tab in the Inspector) and then you only need 1

My example at http://deltadesign.co/FW7Test/table-test.html does that

D


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Hi Dave, that works brilliantly on my phone, however on my mac it is just a standard text entry field?


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

however on my mac it is just a standard text entry field?

This does depend on Browser support. And I assume that you are looking at the fields that are revealed on Check.

What Browser/OS doesn’t work for you?

D


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

safari on yosemite.

Chrome works but its not a drop down, just two sections of a text field with up/down arrows to adjust the time, ok but not great.

I’d love it to work well, its an amazing fix for it


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

safari on yosemite.

Interestingly in my old Safari 5.1.1 on Snow Leopard it works fine!

Yes there are limitations in Browser support - maybe you should stick to 2 fields as getting full cross browser support is tricky - probably not worth the benefits. As it is an HTML 5 standard support will come - but when?

It may be that using 2 fields will also make any js calculations that you use to add your hour totals will be easier as well.

D


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options