I am trying to embed a tweet into my website through this method
But I am unable to get it right this is my HTML markup
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>
<body>
<blockquote class="twitter-tweet" lang="en">
<p lang="en" dir="ltr">Can you answer this? Tem como calcular a diagonal no Canvas? http://t.co/E8dD01jGKX #javascript</p>
— SO em Português (#StackOverflowPT) June 24, 2015</blockquote>
<script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script>
</body>
</html>
And all I am seeing in browser is this:
Merely just html, not style as Twitter embedded tweet box.
Please help.
The link to the Twitter's widgets.js is a so called protocol relative or scheme-less: it doesn't define its own URI scheme and uses whatever its host page happend to be opened on. This is useful to support both http and https schemes without changing the link in the source code.
Now, because you're testing with the local file, the scheme used is file, that is specifically created for files located on the same machine with browser. And so protocol-less //platform.twitter.com/widgets.js gets the file scheme and becomes a link to the local file widgets.js in the folder platform.twitter.com which probably you don't have on your machine.
To fix that, just add a scheme, http or https, like this:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>
<body>
<blockquote class="twitter-tweet" lang="en">
<p lang="en" dir="ltr">Can you answer this? Tem como calcular a diagonal no Canvas? http://t.co/E8dD01jGKX #javascript
</p>
— SO em Português (#StackOverflowPT) June 24, 2015
</blockquote>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
<!-- ^ -->
</body>
</html>
Related
I have a new project where I should implement a new application in an existing system. Users will be able to access my app through an existing login page. Once they log in I will have all information available in my session variables. Link for my app is available for the users based on their credentials. Now I want to organize my home page. My question is should I use iframe to be my home page? Should I place everything else inside of the iframe? I don't have experience working with iframes and I'm not sure if this is the best option. Here is example of what I have:
<iframe src="Home.cfm" name="homeFrame" id="homeframe" frameborder="0" scrolling="no"></iframe>
Here is my Home.cfm page:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=10; IE=11" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Home Page</title>
<script src="JQuery/jquery-3.2.1.min.js"></script>
</head>
<body>
<div class="mainpage">
</div>
</body>
</html>
Also i have included JQuery on my home page. I might have two more pages in this app. Is that the best place to include the library? Or that should be included on each page in the app?
If you add it in home page that is enough.Try like below:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=10; IE=11" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Home Page</title>
<script src="JQuery/jquery-3.2.1.min.js"></script>
<script src="default.js"></script>
</head>
<body>
<div class="mainpage">
//whatever you have already in this page.Using iframe you can display a separate document, including scrollbars and borders.
<iframe src="Home.cfm" name="homeFrame" id="homeframe" frameborder="0" scrolling="no"></iframe>
</div>
</body>
</html>
default.js:
$(function(){
alert('success');
//your stuff
});
I'm programming a C++ application which generates the report data in Javascript instead of CSV. I advocate that HTML and Javascript provides a powerful tool to generate and show reports. But generates the Javascript code in C++ it's a bit clunky.
I'm attempting to read a CSV from Javascript but I realise that it isn't possible owing to the cross-domain policy. I'd like to facilitate the client to see the report without obliging to disable the cross-domain security.
Code that works:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta charset="utf-8" />
<title>Read CSV from static file - Avoiding cross origin</title>
<script id="data" type="text/csv">
x, y
0, 0
1, 1
2, 4
</script>
</head>
<body>
<script type="text/javascript">
var data = document.getElementById('data');
alert(data.innerHTML);
</script>
</body>
</html>
Code that does not work:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta charset="utf-8" />
<title>Read CSV from static file - Avoiding cross origin</title>
<script id="data" type="text/csv" src="data.csv"></script>
</head>
<body>
<script type="text/javascript">
var data = document.getElementById('data');
alert(data.text);
</script>
</body>
</html>
Why using only an external plain text data does not show me anything? Can I solve this using <link> or <meta> tags? Thanks for your help!
i am failing to make the import function work, i am trying to import latestfeatures.html to Untitled Document.html here is my sample code can anyone check it and tell me what is wrong.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<link rel="import" href="/template/html/latestfeatures.html">
<script>
var link = document.querySelector('link[rel="import"]');
var content = link.import;
// Grab DOM from latestfeatures.html's document.
var el = content.querySelector('.latestfeatures');
document.body.appendChild(el.cloneNode(true));
</script>
</head>
<body>
<div id="includedContent"></div>
</body>
</html>
you can use html iframe as iframe. Here you can get details of iframe.
http://www.w3schools.com/html/html_iframe.asp
I've recently ran into a problem and I would really use a bit of help from the community. I'm trying to load a HTML file using jQuery load().
The index file:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Question</title>
<meta http-equiv="Content-Type" Content="text/html; charset=euc-kr" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script>
function restart(){
$("#wrap").load('new-content.html').hide().fadeIn('slow');
}
</script>
</head>
<body>
<div id="wrap">
<div id="content">Text before restart: 남성</div>
</div>
<br />
Restart
</body>
</html>
The new HTML file includes some simple HTML content and a call to a .js file (used for some animations). The new content file:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Question</title>
<meta http-equiv="Content-Type" Content="text/html; charset=euc-kr" />
<script src="main.js" language="javascript" type="text/javascript" />
</head>
<body>
<div id="contentInner">Text after restart: 여성</div>
</body>
</html>
As you can see I've included the correct encoding charsets (for both files) and I've double checked and I can confirm that every file used for this part of the code it's encoded as "KOREAN" (checked in different apps like Dreamweaver, Notepad++, Sublime Text 2).
Yet still once I load the content the characters are not encoded properly; question marks appearing instead of characters.
Of course I made some searching before posting and I found a few helpful topics about this called the PHP header solution, but this isn't an options since it need to use HTML/JS/CSS only.
The same behavior occurs when I'm using the Japanese language too. In other latin based languages everything is working perfectly fine of course.
Any sort of input/advice/help would be much much appreciated.
Thank you!
I have an XHTML 1.0 Strict document in which I'm trying to make Shadowbox work.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta name="Content-Type" content="text/html; charset=UTF-8" />
<title>Test page</title>
<link rel="stylesheet" type="text/css" href="shadowbox.css" />
<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="shadowbox.js"></script>
<script type="text/javascript">
Shadowbox.init();
console.log('Howdy there!'); // displays, so no JS error in Shadowbox.init
</script>
</head>
<body>
<p>
<a href="image.jpg" title="Howdy" rel="shadowbox">
<img src="image.jpg" alt="Click to zoom." />
</a>
</p>
</body>
</html>
This document is completely valid according to my Firefox extension.
For some reason Shadowbox seems to do nothing. When I click the image link, the browser just opens the image as usual. No box at all.
I've tried not loading JQuery and only load Shadowbox but that didn't help, so it's not JQuery's fault either. This is with Shadowbox 3.0b by the way. Any ideas?
EDIT: I just got thinking... Shadowbox does some internal magic to figure out the path to it. However, this page is completely static and loaded directly from file on disk. Could this be the problem? Looking in the DOM, I see that Shadowbox.path is correctly set to "file:///C:/..." so maybe not?
You need to have (nebo have to have) all directories from showbox.zip in the directory with the file showbox.js, because showbox adds other scripts to the page.