[Pro] javascript date box - not playing ball!

I have added some javascript to a freeway page to send a form and one of the fields requires the input of a date box.
If i add the code - [insert HTML markup] at the top of the page, the date box appears next to the correct box when clicked. If i add the code further down the page as in the example here http://mka.nialtoservices.co.uk/4-yard-mini-skip.html the calendar box offsets itself further down the page in proportion to the placement of the script.
On this page, the form is at the top and all is well http://mka.nialtoservices.co.uk/test.html
To test this you need to select either Camden, Hackney or Islington council.
I tried Walters Crow Bar action, but i got similar results.
I’m no doubt doing something wrong so any advice here would be appreciated.

Thanks Al…


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

There is an action that will do this for you http://actionsforge.com/projects/view/70-calendarview

David


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

Well it would if he wasn’t using jQuery on this page. Alan, do you
have a link to the documentation for this date picker you’re using? I
am guessing that the issue you’re having is more to do with CSS than
anything else. Usually these sorts of tools attach themselves to their
parent picker, or a common ancestor. It’s hard to say based on your
page how the picker is supposed to relate to its parent input.

But in general, it should not matter one bit where you add this type
of JavaScript code to your page. The JavaScript creates what’s called
an “unobtrusive listener” function, which means it finds your date
input on the page, sets a listener function on it to react to any
clicks on that field, and that’s it – no step 3. The code doesn’t
have to move in order to make the calendar move on the screen, it’s
perfect right where it is on your working example page.

Walter

On Feb 14, 2011, at 3:57 PM, DeltaDave wrote:

There is an action that will do this for you http://actionsforge.com/projects/view/70-calendarview

David


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


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

Sure do have those links.
The files i have are as follows.
http://www.nialtoservices.co.uk/mka/date_input.css
http://www.nialtoservices.co.uk/mka/jquery.date_input.js
http://www.nialtoservices.co.uk/mka/jquery.js

If you could take a look for me and let me know what you think, that would be great.

Al…


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

It appears as though it’s just taking the x.y position of the element
that was clicked, and using that as the top,left of the calendar.
Doesn’t seem configurable, it should Just Work™.

What are you trying to accomplish with moving the script around in
your page? If you can tell me what your goal is, there might be some
extra CSS you could put into your page to make it happen.

The way this appears to be written, you shouldn’t need CrowBar to use
it at all, just put the script in the head of the page, the way you
have done on your “working” page.

Walter

On Feb 14, 2011, at 4:14 PM, Alan Herbert wrote:

Sure do have those links.
The files i have are as follows.
http://www.nialtoservices.co.uk/mka/date_input.css
http://www.nialtoservices.co.uk/mka/jquery.date_input.js
http://www.nialtoservices.co.uk/mka/jquery.js

If you could take a look for me and let me know what you think, that
would be great.

Al…


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


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

What I want is to have this page http://mka.nialtoservices.co.uk/4-yard-mini-skip.html work correctly. I just want the calendar to appear next to - or near enough to see - the date box when clicked.

As far as i can see, on both the pages i posted, i have added the same script in the head of each and the same bit of script on the body where i want the form to appear. The test page works nicely because the ‘body’ bit of script is at the top.
If i move the script down, even 1 inch say, the calendar will offset. I have just re-uploaded this page http://mka.nialtoservices.co.uk/test.html after having moved the ‘body’ script down an inch - Sometimes i think i’m going nut’s, but it definitely shifts the calendar Walter.
I have tried with Safari and Firefox and whilst there are some differences, it is still on the move.
What am i doing wrong. i have even tried squinting at the screen when i click reload, but that doesn’t help either :slight_smile:

Al…


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

Try adding one style to the head of your page. You can either do this
in the Styles palette, or more simply, just paste the following into
the Page / HTML Markup dialog, using the Before /HEAD section (before
end head) of the picker in the lower-left corner of that dialog.

<style type="text/css">
	div.date_selector { position: relative !important; }
</style>

Your script and CSS is making this position absolute, which would be
fine if the jQuery function to find the field’s position was sensitive
to where the nearest positioned ancestor was. Instead, it’s
calculating the correct top/left position based on the page corner.
Switching this to position: relative just makes the browser ignore the
top/left offset altogether. In my test here, it works fine then.

Walter

On Feb 14, 2011, at 4:40 PM, Alan Herbert wrote:

What I want is to have this page http://mka.nialtoservices.co.uk/4-yard-mini-skip.html
work correctly. I just want the calendar to appear next to - or
near enough to see - the date box when clicked.

As far as i can see, on both the pages i posted, i have added the
same script in the head of each and the same bit of script on the
body where i want the form to appear. The test page works nicely
because the ‘body’ bit of script is at the top.
If i move the script down, even 1 inch say, the calendar will
offset. I have just re-uploaded this page http://mka.nialtoservices.co.uk/test.html
after having moved the ‘body’ script down an inch - Sometimes i
think i’m going nut’s, but it definitely shifts the calendar Walter.
I have tried with Safari and Firefox and whilst there are some
differences, it is still on the move.
What am i doing wrong. i have even tried squinting at the screen
when i click reload, but that doesn’t help either :slight_smile:

Al…


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


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

Just added the extra style to the /HEAD section via page - HTML Markup.
Interestingly the form has expanded with some white space and the calendar is still low, much lower on the test.html page.
I tried removing the Relative Page Layout action, but it made no difference, other than the white background box did not grow - I love that Relative Page Layout.

OK, so apart from nursing a sore knee where I have slipped over on the icy decking rushing to shut the chickens away because i forgot how late it had got here whilst trying to sort this, I’m still stumped.
If i add the style via the styles pallet, will it make a difference. I’d have tried it but i don’t know how!!

Cheers for all your help with this.

Al…


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

I meant to mention I have uploaded the changes for you to see.

Al…


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

Okay, add a couple more attributes to your style that you added (which
you did fine, no worries).

div.date_selector {
	position: relative !important;
	top: 0 !important;
	left: 0 !important;
}

If that doesn’t do it, I’m not sure what else to try.

Walter

On Feb 14, 2011, at 5:25 PM, Alan Herbert wrote:

I meant to mention I have uploaded the changes for you to see.

Al…


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


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

HOOOOOOOOOOOOOORAY!

It works!!! Thank you so much for your help with this. I have even tried it in different browsers and they are all behaving themselves. It was 06:30 this morning when i tried it so i even checked i wasn’t dreaming.
Did I mention Thanks?
I can get this finished now - it’s only been sitting around for 2 weeks whilst i’ve been ‘trying’ to get this to work.
Walter you are a star! Long live the Freeway forum. Just hope I may be able to help someone on the forum at some stage too.
Thanks a million

Al…


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