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.
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.
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.
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
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.
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.
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
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!!
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
