How do I create href for mobile dialing screen?

Question

I have this html:

<div class="awpcp-subtitle">Contact Information</div>
<a href="https://adsler.co.uk/wp-user-test-dashboard- 
2/awpcp-reply-to-ad/13/madame-bovary/">Contact 
Anonymous</a>
<div class="phone"><label>Phone:</label> 
7576XXXXXX</div>
<div class="location"><label>Location:</label> London, 
UK</div>

</div>

Price: £ 3.00

<div class="fixfloat"></div>

I want to take the div class.phone, and make it into a button which links to mobile dialing screen.

Html and CSS options are welcome. The thing is, where do I insert the link in the html order, is it a href link, what's it's generic url?

Each number is different, according to the person who posted the ad, and number is only visible to logged in users. Therefore, '7576XXXXXX' is just an example of one of the numbers, in a logged out view. So how do I configure this with html? Because if I use:

</label>7576XXXXXX

... and this links to dialing screen, the phone will be literally trying to dial '7576XXXXXX,' and this for every ad. Each ad will also display 7576XXXXXX as its contact number, when each ad has a different contact number.

Possible duplicate of [How to trigger a phone call when clicking a link in a web page on mobile phone](https://stackoverflow.com/questions/1608548/how-to-trigger-a-phone-call-when-clicking-a-link-in-a-web-page-on-mobile-phone) — Madhawa Priyashantha, Feb 23 '19 at 15:25
Please __add__ all context and sources related to your question __directly in your question__ via [edit]. So it's easier to answer than first read all your comments. — hc_dev, Feb 23 '19 at 16:40

score 1 · Answer 1 · answered Feb 23 '19 at 15:33

1

Most browser support it and works fine for me

<div class="phone"><label><a href="tel:999-999-9999">Phone:999-999-9999</a></label></div>

answered Feb 23 '19 at 15:33

Thomas_krk

214
1
8

Comments are not for extended discussion; this conversation has been [moved to chat](https://chat.stackoverflow.com/rooms/188928/discussion-on-answer-by-thomas-krk-how-do-i-create-href-for-mobile-dialing-scree). – Bhargav Rao Feb 23 '19 at 17:12

score 0 · Answer 2 · answered Feb 23 '19 at 15:27

0

With HTML 5 you can wrap an A Tag around a div so:

<a href="http://www.yourlink.com">
<div class="phone"><label>Phone:</label> 
7576XXXXXX</div>
</a>

Is that you meant, maybe not.

answered Feb 23 '19 at 15:27

ultrarun

274
1
13

You total pro. That's exactly what I mean. The question is, what's the link for mobile dialing screen so that, on pressing the button, your mobile will display the dialing screen with the number listed on its display, so all user has to do is press 'dial' button on dialing screen keypad? – user11074517 Feb 23 '19 at 15:38
It also has to be a generic link, and and generic number. Each number is different according to the number of the person who posted the ad. – user11074517 Feb 23 '19 at 15:43

score 0 · Accepted Answer · answered Feb 23 '19 at 17:19

0

Final version:

 <a href="tel:$adcontactphone"> <div class="phone">$adcontactphone</div> </a>
<a href="sms:$adcontactphone"> <div class="phone">$adcontactphone</div> </a>

answered Feb 23 '19 at 17:19

Thomas_krk

214
1
8

Yes, great. Brilliant. Works. – user11074517 Feb 23 '19 at 17:20
I do have two more questions, if you wouldn't mind? The 'sms' link/element only displays the word 'Phone' and not 'SMS'. Is there a way to change this? The second question is why, in Apple mobiles, pressing the buttons for phone or sms does link to dialing screen/sms screen, but displays text 'call 7576XXXXXX' or something. Why is this? On android its fine, just links to screen and displays number to text or dial. – user11074517 Feb 24 '19 at 18:04
You should change the content in Phone to Sms, also in the do not use anything except the actual link . I saw in your code you have
and in the link which you do not need – Thomas_krk Feb 24 '19 at 19:00
Ok. At the moment though I don't have any labels in html I've added. It's just:
$adcontactphone
if i add label it becomes:
SMS: $adcontactphone
This has the effect of adding new word 'SMS', but keeps original word 'Phone' too. So how do get rid of original word phone from this element? – user11074517 Feb 24 '19 at 19:18
Also, in the html I've added, i haven't put br or label. That's the original html. That's more difficult to edit as original html seems encoded and spans over different files. I only have a small box to play around with, without getting to too complicated. That box now consists of.... – user11074517 Feb 24 '19 at 19:20
$ad_title

$featureimg
Contact Information
Contact $adcontact_name
$adcontactphone

$adcontactphone

Location: London, UK
$location $awpcpvisitwebsite
$aditemprice $awpcpextrafields
$showadsense1 – user11074517 Feb 24 '19 at 19:24
More Information
$addetails $showadsense2
$awpcpshowadotherimages
$tweetbtn $sharebtn $flagad $awpcpadviews $showadsense3 $edit_listing_link
– user11074517 Feb 24 '19 at 19:24
Your answer, is the only html I've added. – user11074517 Feb 24 '19 at 19:25
Sorry but thought the comment area is not very easy to read code... let me see if we can go to chat mode – Thomas_krk Feb 24 '19 at 19:29
I am new in Stackoverflow..do not know how to start a chat. let me check it – Thomas_krk Feb 24 '19 at 19:36
Have a look for the link. It's in this page – user11074517 Feb 24 '19 at 19:38
https://chat.stackoverflow.com/rooms/188928/discussion-on-answer-by-thomas-krk-how-do-i-create-href-for-mobile-dialing-scree – user11074517 Feb 24 '19 at 19:38

score 0 · Answer 4 · answered Dec 17 '21 at 17:54

0

You can use a <a href="tel:99999999">Phone 999999</a> or put a function OnClick in your DOM, your function must have a window.open('tel:999999','_system')

answered Dec 17 '21 at 17:54

Jonathan Güths

59
2

How do I create href for mobile dialing screen?

4 Answers4