<p id="phonenumber">Tap to call 0800 151 3325</p>
Please refer the above code snippet.This is my HTML tag in which I am displaying a number to let the user know to call on this.
I haven't used any javascript on this element to make a call but still in the UI when I tap on the number it is getting called.
I am unable to understand why this is happening.
Try to place this meta tag inside your head tag.
The "telephone-no" means that telephone numbers in the html should not appear as a link.
<meta name="format-detection" content="telephone=no"/>
Related
So basically as the title suggests. I have a react-native-webview component in my app and I want it to show a SoundCloud player via the SoundCloud widget. I also want to use the available methods exposed by the widget API (for example getDuration), add listeners to events, etc. I have tried 2 approaches to accomplish this, but each approach ends with a different issue that I haven't been able to resolve.
Option 1:
The source prop that I pass to the WebView is a static HTML string:
<html>
<head>
<script src="https://w.soundcloud.com/player/api.js"></script>
</head>
<body>
<iframe
id="sound-cloud-iframe"
src="${finalUri}"
>
</iframe>
</body>
</html>
That works well with the API and everything, but I can't seem to make it look good on-screen. It looks like this:
The red border marks the WebView component. I want the video to take up that entire space, which I can do with setting the width & height attributes of the iframe to 100%. The problem is, that when I do that, the elements inside the iframe retain their size (e.g the track/artist name, the progress bar at the bottom, etc). See here:
If I could somehow make it all scale by the same proportions, that would be amazing. Injecting JS scripts that scale each and every element individually seems like a bad solution.
Option 2:
The source prop that I pass to the WebView is a SoundCloud link, for example:
source={{uri: https://w.soundcloud.com/player/?visual=true&url=https%3A%2F%2Fapi.soundcloud.com%2Ftracks%2F94546771&show_artwork=true}}
That makes the video player look just right:
But, it won't allow me to use the API exposed by SoundCloud. The reason is that, as mentioned in their API reference, there needs to be some iframe element that I need to to pass into SC.Widget in order to be able to use all the methods and listeners that I need. There is no iframe here! The HTML content that renders inside the WebView is actually the exact inner document that would render inside the iframe if I used the static HTML that I put in Option 1. If I could make the API work like that somehow, that would be amazing.
So, basically, I'm wondering which option presents the more-easily-solved issue, if they're solvable at all. Any help would be much appreciated.
Solved, used this static HTML:
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://w.soundcloud.com/player/api.js"></script>
</head>
<body>
<iframe
id="sound-cloud-iframe"
src="${finalUri}"
scrolling="no"
style="width: 100%; height: 100%;"
>
</iframe>
</body>
</html>
The meta tag was the key to success here (https://www.w3schools.com/css/css_rwd_viewport.asp)
I have an "embed" field used by my users for transform a simple link to a rich content link (link with image, title, description, etc.).
Example:
Note: I use this library to get all link information: oscarotero/Embed
As you can see, when you provide an url (a twitter tweet by example), the "code" parameter contain the HTML and script tags to include on my frontend:
<blockquote class="twitter-tweet"><p lang="en" dir="ltr">I am so hopelessly in love with #ChucklefishLTD ‘s spooky logo pic.twitter.com/2KtjCNOOUl</p>— Tom Slayed 🔪😱 (#TomJamesSlade) October 12, 2020</blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
The problem is with VueJs and the script tag. When my ajax call is OK, I store all embed informations like that:
this.preview = response.embed
And inside my component, I display the html code with the "v-html" VueJs directive
<div v-if="preview['code']" v-html="preview['code']"></div>
The html is displayed :
The script tag is visible inside the code inspector :
But the script is not loaded :
I have the same problem with all oembed url who provide a javascript tag inside the response.
Note: If I try to load the script directly inside the component, VueJs return this error:
VueCompilerError: Tags with side effect ( and ) are ignored in client component templates
A solution on google is to use the "mounted" event, but it's not compatible with my context.
Because the script I have to load is received from an api and can be different each time depending of the link.
it's bit late but here is an option: The api gives you the possibility to not send the script tag, so you can include it on your own in the html before. Add to the url a omit_script=true and it's gone in the result.
Then you can insert the twitter block. Maybe you have to call twttr.widgets.load() to initialize the tweet.
Edit: Since you're using the plugin, this should be working
$embed = new Embed();
$result = $embed->get('https://www.instagram.com/p/B_C0wheCa4V/');
$result->setSettings([
'oembed:query_parameters' => ['omit_script' => true]
]);
$oembed = $info->getOEmbed();
I do have problems understand the tag </main>.
The project im looking at only has one </main> closing tag at the end, it has no opening tag of <main> which confuses me in the first place. It also has main {} in CSS. In order to try to understand what it does, I have played around with it a little.
As I comment out the </main> in html, absolutely nothing changes, which I understand if it has only informativ character, but the part where I get confused is, what is the main {....} in the CSS referring to, since when I comment this out, it will mess up the styling of the hole page.
edit: Since it seems to be unclear what my problem is: The problem is, that main {.....} in CSS does (!) influence the styling of the site, even without an opening <main> tag in html, and even without ANY <main> tag in html (for example if I remove the </main> tag in html.
How can a main {....} in CSS have influence on the styling, if there isn t even any <main> tag in the html whatsoever?
main{...} in css reffers to the styling of the main tag.
More about the element css selector
https://www.w3schools.com/cssref/sel_element.asp
You can learn more about the main tag here
https://www.w3schools.com/TAgs/tag_main.asp
And more about css selectors here
https://www.w3schools.com/cssref/css_selectors.asp
Also note that the main tag must have opening amd closing tag
You have to either add a tag, or remove main{...}.
The tag specifies the main content of a document.
The content inside the element should be unique to the document. It should not contain any content that is repeated across documents such as sidebars, navigation links, copyright information, site logos, and search forms.
Note: There must not be more than one element in a document. The element must NOT be a descendant of an , , , , or element.
just refers to the main content of the page, it does nothing. Main{...} is styling in the CSS page.
To embed microdata that should be hidden or isn't provided as text you can use meta elements. Here is an example for non-visible properties using meta elements. Is there a similar way to hide instances of types?
For example I have a page with a table that lists events of a single performer. The performer is implicit and is not repeatedly shown for every entry, so I hide it in a meta element. The performer property should be of the type Person, which has additional attributes that I also want to hide. I'm trying to achieve something like this:
<meta itemprop="performer" itemscope itemtype="http://schema.org/Person">
<meta itemprop="name" content="Some performer"/>
</meta >
Of course this won't work, the meta element must be empty. Using other elements and hiding them with CSS would work but probably isn't very nice for screen readers. Is there any recommended way to do this?
In this case the person scope could be a <span> tag? That tag has no semantic value and if there are only meta tags inside it, it shouldn't be visible in your site.
You could also look into itemref and add the Person only once to the page and reference that id multiple times. However not all testing tools support itemref, so testing if it's correctly set up is quite hard at the moment.
Hello guys I have two small questions about my facebook application link and JS SDK. So let me explain:
1- Well as I understood from Facebook JS SDK, the should be left just empty. But still I am a little dizzy and I want to make sure whether we should put our page content into it or it should be left empty?
Please make me sure about it.
2- I have put some changes in my css and markup of my page but after one day I can not see some of the changes in my facebook application link.
How can I see the result of changes if there is such a way??
Thank you very much indeed.
Let me answer this for you:
1) Yes, It should be left empty and here's the info on why it's required quoted from JS SDK docs:
The JavaScript SDK requires the fb-root element in order to load properly and a call to
FB.init to initialize the SDK with your app ID correctly.
The fb-root element must not be hidden using display: none or
visibility: hidden, or some parts of the SDK will not work properly in
Internet Explorer.
The SDK inserts elements into fb-root which expect to be positioned
relative to the body or relative to an element close to the top of the
page. It is best if the fb-root element is not inside of an element
with position: absolute or position: relative. If you must place the
fb-root element inside of a positioned element, then you should also
give it a position close to the top of the body or some parts of the
SDK may not work properly.
2) It's most probably a cache problem, there's a similar question with an issue of css which has been answered previously: Caching for css content for iphone FB APP
Also to get your browser/visitors browser to re-fetch your CSS file, The trick is to pass a query param/variable at the end of the CSS file url like so: ?v=1
<link rel="stylesheet" href="css/style.css?v=1">
This will automatically make your browser or maybe even facebook to fetch your CSS file again with the new changes. Make sure to change the number everytime you update your files so you could see the changes instantly.