I'm using the code generated from the Facebook code generator here https://developers.facebook.com/docs/plugins/comments/ and as instructed I've created a HTML file with the following code in it.
<html lang="en">
<head>
<title>Home</title>
</head>
<body>
<div id="fb-root"></div>
<script async defer crossorigin="anonymous" src="https://connect.facebook.net/en_US/sdk.js#xfbml=1&version=v11.0" nonce="PMiduXpV"></script>
<div class="fb-comments" data-href="https://developers.facebook.com/docs/plugins/comments#configurator" data-width="1" data-numposts="1"></div>
</body>
</html>
however, nothing is displayed on the UI. I can only access the comments if I manually inspect the page and manually navigate through the loaded Iframe.
Any ideas why this might be happening?
Related
I've attached copies of the code below. Only two files in my project now, app.js and index.html. When I go to google developers' tool and console, the log statement isn't going through. When I type react or react-dom into console I am told Reference Error: React is not defined. This is what a Udemy tutorial has told me to do last updated 5/19 so this should work. I have tried putting import React from "react"; in the top of the files but that doesn't work either. Any suggestions?
//app.js
console.log("App.js is running!)
//index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Indecision App</title>
</head>
<body>
<script src="https://unpkg.com/react#16.0.0/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom#16.0.0/umd/react-dom.development.js"></script>
<script src="/scripts/app.js"></script>
</body>
</html>
Looks like you'll need to also specify the crossorigin attribute on the scripts as per the react CDN-links docs.
<script crossorigin src="https://unpkg.com/react#16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom#16/umd/react-dom.development.js"></script>
I want to see how some changes in my Django app will interact with an HTML page, but I don't want to deploy them until I test.
Here's my naive attempt, which doesn't render anything inside the iframe, even though that link works in its own tab.
HTML file:
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="stylesheet.css">
<link rel="stylesheet" type="text/css" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
</head>
<body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js">
</script>
<div class="frame">
<img id="logo" src="images/Logo.png"/>
<iframe id="primaryVideo" src="http://127.0.0.1:8000/app/1/">
<p> Your browser does not support iframes. </p>
</iframe>
</body>
</html>
Cross-origin resource sharing was the problem. You can check if this affects you by checking the console or network tab.
All I had to do was add my localhost address to the ALLOWED-HOSTS field in settings.py of my Django app.
I am making a website and my client wants what he refers to as a "Eraser file" to be on the top section of the site. Here is a example website that uses this feature http://flashpoint.gatech.edu/
How can I use this file and implement it in html? I have searched for eraser and zap file answers, but could not find anything on them.
This is very easy because it is actually a jQuery plugin...
(I did not find any viable CDN for that library, so I cannot give you the live example in a JSFiddle. Please download this in a file called "eraser.js" and put it in the same directory as this HTML file. You should be able to erase the Stack Overflow logo.)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Eraser</title>
</head>
<body>
<img src="https://cdn.sstatic.net/Sites/stackoverflow/img/apple-touch-icon#2.png?v=73d79a89bded">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="eraser.js"></script>
<script>$('img').eraser();</script>
</body>
</html>
I am developing a website , I have an html page which has some contents, have also made a signUp modal in the same page, but the code is getting longer, I just want to know if I keep the code of sign up modal in another file with .html/.htm extension, and on button click that modal is displayed on the same page, not to be redirected to another page, like it is displaying on the home.
I don't want the home contents to be shattered , just the modal to be displayed on above.
You can use jquery to accomplish this task:
Just create a new file "modal.html" and write code for popup there.
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script>
$(function(){
$("#header").load("modal.html");
});
</script>
</head>
<body>
<div id="header"></div>
<!-- other code -->
</body>
Use w3data and include your file where ever you want. In blow i included signup.html file.
<!DOCTYPE html>
<html>
<script src="http://www.w3schools.com/lib/w3data.js"></script>
<body>
<div w3-include-html="signup.html"></div>
<script>
w3IncludeHTML();
</script>
</body>
</html>
Simple Method to load Html File to main
$(function(){
$('#which').load('test.html');
});
you can write inside document.ready also
Simply use an iframe (inline frame) to load the external webpage. You can style the size of the iframe like you normally would with any HTML element.
<DOCTYPE html>
<html>
<head>
...
</head>
<body>
<iframe src="/your-signup-page.html"></iframe>
</body>
</html>
More information on the iframe element.
i have a profile page and in that i have included a master page welcome.jsp . when i go to the profile page the CSS for the welcome page template is running fine but as i update the user, the user is updated correctly and requestDispatcher is running fine but the CSS for the welcome.jsp is not running fine
code: profile.jsp
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Profile Page</title>
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="//malsup.github.com/jquery.form.js"></script>
<script>
<jquery code>
</script>
</head>
<body>
<%# include file="welcome.jsp"%>
<center><h1>User Profile</h1></center><br><br>
<form action="/devilmaycry/register?action=updateuser" method="post">
<html code>
</form>
</body>
</html>
`request dispatcher code`
rd=req.getRequestDispatcher("/Register/profile.jsp");
rd.include(req, res);
pw.println("<h3>Record Updated !!!<h3>");
can someone tell me why the CSS gets disabled
cant post images because of low reputation :(
the path i gave for CSS file was relative , so when the requestDispatcher ran it changed the directory so the relative path didnt work
resolution --> always try to give absolute path to external files( .css , .jsp etc)