The twitter timeline is not shown properly in the web browser even though it is the original code from the twitter publish website.
At first the timeline was shown as it should. Somehow after I refreshed the site with F5 it didn't work at all. Somehow at the X time I refreshed it worked. When I restarted my computer and wanted to work on the file again it didn't work. I'm not an expert on HTML but I think the problem may be in the script tag.
I looked up other questions here on stackoverflow but none of them helped me. My code had no problems before I tried out without the timeline.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>test</title>
</head>
<body>
<a class="twitter-timeline" href="https://twitter.com/ErinCorleyGray/lists/stackers?ref_src=twsrc%5Etfw">A Twitter List by ErinCorleyGray</a>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
</body>
</html>
A timeline of the twitter list should be displayed instead I get only the text: "A twitter list by ..."
I just pasted your code onto a new html document and viewed it on my Chrome browser and I did not have an issue with viewing the timeline. I have attached a screenshot of what I see. Maybe it is a browser issue? screenshot of the top of the page
Related
I am developing a HTML page. I have a book icon in the page under <h1> tag. File name is index.html. When I run the page directly by double clicking it... it displays the book icon on the browser. When I run the page by clicking Firefox icon from inside WebStorm IDE... it displays some symbols instead of book icon.
Is it because of WebStorm or did I miss anything in HTML??
Below are the screenshots:
WebStorm IDE screenshot with book icon
Output displayed on the browser
I tried to solve this by going through the JetBrains documentation. Couldn't find a solution.
My expected result is... the icons which are placed in the HTML file should be displayed properly in browser when running it from WebStorm IDE.
By directly using the html-code for the blue book emoji, we can achieve this effect:
<h1>📘 The Code Magazine</h1>
To the above-mentioned problem given below is the answer.
<head>
<meta charset="UTF-8"/>
<title>The Basic Language of the web: HTML</title>
</head>
I added the <meta charset="UTF-8"/> inside the head tag to mention the character set and it solved the problem.
They just stopped showing up randomly after a refresh. I got rid of all styling around the element and they are still not showing up. They also stopped showing up on a component I wasn't even working on. I checked on chrome and they were showing up, but then after a few refreshes (no changes, was just refreshing back and forth between browsers) they stopped appearing on chrome as well. I re-copied the CDN link from the website just to be sure and it still does not work.
I tried it on a starter file as well, not working on firefox or chrome:
<!DOCTYPE html>
<html>
<head>
<link rel='stylesheet' href='https://cdn-uicons.flaticon.com/uicons-regular-rounded/css/uicons-regular-rounded.css'>
</head>
<body>
<i class='fi fi-rr-angle-left'></i>
</body>
</html>
iOS Chrome seems to be calculating the html viewport incorrectly when a link is clicked externally (from iMessage, Twitter, Messenger, etc) to be opened in Chrome.
The html is a simple one:
<!DOCTYPE html>
<html lang="en" style="background: linear-gradient(#e66465, #9198e5)">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body></body>
</html>
Steps to reproduce:
Copy this link: https://alwyntan.github.io/test-page/, don't just click on it as it'll work fine.
Send the link to yourself (on iMessage, Messenger, or any messaging service you use).
Open the link that you just sent to yourself, on Chrome.
This issue is particularly problematic when developing pages that are meant to be shared with others and has a CTA button absolutely positioned at the bottom of the page (The button doesn't show as the user would have to scroll down to see it). Imagine an event page with a "Join Event" button absolutely positioned at the bottom of the page and the user can't see it immediately.
You'll see that the page is scrollable when it should not be. Try again by tapping on the address bar and hitting return, the page would revert back to its expected behavior (html takes up the available viewport correctly). Why does this happen and does anyone know how to fix it?
Thanks so much in advance.
So, I'm confused pretty severely... So I went to w3Schools iFrame page. Copy and pasted this code into codepen directly from w3schools...
<iframe src="https://www.w3schools.com"></iframe>
I also tried changing the URL a few times. Loading Google even didn't work... All that happens is a blank page with the same background color as the parent page. I dont understand why the iframe code even from w3schools doesn't work... Am i not loading a dependency? I'm using the latest version of chrome.
index.html
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Soundcloud Downloader</title>
</head>
<body>
<div class="container">
<iframe src="http://1stdibs.com/"></iframe>
<iframe src="http://soundtake.net/"></iframe>
<iframe src="https://www.w3schools.com"></iframe>
</div>
</body>
</html>
A working code pen:
https://codepen.io/anon/pen/GEePEK
My view (screenshot):
http://imgur.com/a/6bPWB
Check this one
Checking if a website doesn't permit iframe embed and this one too Certain websites won't appear with Iframe and .load() function.
I had same problem few year back then i came through these,some sites avoid iframe tag.
I am having trouble getting consistent behaviour from my Facebook Like button. I have created this example which I believe to be the simplest possible implementation...
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:fb="http://www.facebook.com/2008/fbml">
<head>
<title>Untitled Page</title>
<script src="http://connect.facebook.net/en_US/all.js#xfbml=1" type="text/javascript"></script>
</head>
<body>
<fb:like href="http://www.stackoverflow.com" layout="button_count" show_faces="false" width="450" font=""></fb:like>
</body>
</html>
I have saved this as an HTML file which I am serving from a webserver running on my machine (localhost - I assume this won't be a problem as the page I'm 'liking' in this example is public-facing).
If I try this in Google Chrome, it appears to work without a problem.
When I try it in IE9, the like button renders, but when I click it, a new IE window opens which is mostly blank apart from a blue Facebook header. The URL of this page is: http://www.facebook.com/connect/connect_to_external_page_widget_loggedin.php?social_plugin=like&external_page_url=http%3A%2F%2Fwww.stackoverflow.com%2F
This is really confusing me as the example is about as simple as it gets! Any help would be really appreciated!
EDIT: A little more information. If I go to Facebook in IE9 and log-out, then try my like button again, a new window still opens but this time I can login. After logging in, though, I still get taken to the same blank page.
In desperation, I tried accessing my local page from http://127.0.0.1 instead of http://localhost
This appears to have solved (or at least worked around) the problem.
I would love to hear from anyone who can explain what this is all about!!