Click to call moves with page when it should be fixed.

[theremotedr]

Hi,
Here is an example page.
http://www.theremotedoctor.co.uk/accaudi.html?scrollto=selection

At the bottom of the page is a click to call me option.
It should stay in the same place when scrolling up/down then page on iPhone but it actually moves with the page instead.
Strange because I've used it in another place and it works as it should.
Apart from renaming a couple of items I can't see why it don't work the same.
I positioned the code in a couple different places but no joy.
I've also checked the code and looks spot on.

Could you spot the fault.
Thanks.

[molendijk]

It doesn't have position: fixed, apparently

[theremotedr]

Hi,
But it does.
Check out the code below.


.callme {display:none;}
@media screen and (min-width:300px){
@media screen and (max-width:1024px){
.callme {
display:block;
background: #0099ff;
border-top:2px solid #FFFFFF;
padding: 7px;
height:100px;
position:fixed;
right: 9px;
left: 9px;
bottom:-20px;
text-align:center;
center 5px:
no-repeat #0099ff;
text-decoration:none;
}

[molendijk]

That's weird. Try to remove the errors on your page first (w3c validator) and see what happens.

[theremotedr]

That validator used to give you an insight on the correct code etc.
Now I don't see that option.

[molendijk]

The reason I mentioned it is that your <div class="callme"> is located beneath the closing body tag, which is wrong and might explain the problem.

[theremotedr]

Ok
Will look again tomorrow.
I think I was trying it in a few different places and just left it there for others to see.
If you want to see the way it should work click the link then select Item Description.

http://www.ebay.co.uk/ulk/itm/111863783578

[Beverleyh]

That validator used to give you an insight on the correct code etc.
Now I don't see that option.

The validator does still tell you what and where the errors are https://validator.w3.org/nu/?doc=http%3A%2F%2Fwww.theremotedoctor.co.uk%2Faccaudi.html%3Fscrollto%3Dselection

[theremotedr]

Sorry,
When I say correct code it would as you whether you wanted to see how it should be done.

[Beverleyh]

I don't understand what you're saying. The output content of the validator looks very much the same to me as it always has done - an error/warning, explanation and line number - just slightly different formatting (a new look).

[molendijk]

The validator does not correct invalid code, it just points out where the errors are in order to allow you to correct them. But yes, you can only correct them if you understand the code you're using. That might be the issue here (?).

[theremotedr]

There was a box which you could tick to show you how to write it correctly.
If you didn't tick the box then the screen would just show line error etc.

[Beverleyh]

Can't say I ever saw that option, although I did/do use the tick box for showing the source so that you can pinpoint errors more easily.

[molendijk]

Beverleyh, I agree. That option isn't there.

[theremotedr]

Correct.
Isn't there now but it used to be.

[Beverleyh]

I think you might be referring to the HTML Tidy option that is still available for the old HTML4/XML validator. It isn't included in the HTML5 validator - this explanation from the History section of the HTML Tidy website (http://www.htacg.org/tidy-html5/) sheds some light as to why;

In 2015 a group of concerned developers, users, and software integrators formed HTACG with the goal of revitalizing Tidy, which had fallen into a non-maintained state. As a W3C Community Group, HTACG was deemed worthy by the W3C, and W3C passed ownership of their project to HTACG, where it is currently being developed and prepped for a new, stable, and modern release.So a version for "modern code" has passed ownership and is currently in development. Maybe it will be (re)integrated into the W3C validator for HTML5 sometime in the future. In the meantime, there are other online tidy-up services for HTML5 so hit Google to find one you like.

[coothead]

Hi there theremotedr,


this...


</body>
</html>
<div class="callme">
<a href="tel:07899827427"><img src="http://www.theremotedoctor.co.uk/m-images/dr-phone-logo.png" width="750" height="80" ></a>
</div>
...should be...


<div class="callme">
<a href="tel:07899827427"><img src="http://www.theremotedoctor.co.uk/m-images/dr-phone-logo.png" alt=""></a>
</div>
</body>
</html>
...and this...


@media screen and (min-width:300px){
@media screen and (max-width:1024px){
.callme {
display:block;
background: #0099ff;
border-top:2px solid #FFFFFF;
padding: 2px;
height:80px;
position:fixed;
right: 1px;
left: 1px;
bottom:-5px;
text-align:center;
center 5px:
no-repeat #0099ff;
text-decoration:none;
}
...should be...


@media screen and (max-width:300px){
.callme {
display:block;
background:#09f;
border-top:2px solid #fff;
padding:2px;
position:fixed;
right:1px;
left:1px;
bottom:0;
}
}
...and this...


<a href="tel:07899827427">
...I don't know what it should be, but it is obviously not an href.


coothead

[styxlawyer]

... and, despite all the previous posts I have made on this, your page still contains two calls to different jQuery libraries! One on line 33 and one on line 319.

You really need to decide which jQuery library you actually want to use and delete the other call.

[theremotedr]

I now have it working with a bit of help from you all.
Beverleyh,iI will look at that later.

Styxlawyer,As the site is working how i would like it i dont wish to delete the jQuery you mention.
1, Because i dont know which one to delete.
2, Site is working ok with both there.
3, Dont wish to rectify a fault not knowing where to start.
I know this is the wrong approach but its working so i would like to leave it how it is.

Coothead, I used a little of the code you advise nut no all of it.
I dont wish to see the blue phone call me bar on the pc only phones / tablets.
The a href you mention is my contact number.
When the call me is clicked my phone number is then called.
I didnt know another way for it to work, also hence why i dont want the call me to be shown on the pc and it wont phone me.

Thanks for all the help.

[Beverleyh]

FYI - There's a problem with the syntax of your phone number
<a href="tel:07899827427">

All web pages are international so it should start with the county code dialling prefix, minus leading zeros. For the UK that's +44

[theremotedr]

Thanks,
An oversight by me.
Tel number has now been corrcted.

Thanks