I am trying to display some Hindi words using JQuery because these are the common content which should be display on each page of the web site.
Note - This is a static website only. Using HTML and JQuery/javascript.
My JS file is below -
include.js
$(document).ready(function(){
var text="<div class='header-main'>मुख्य पृष्ठ कुछ हिंदी के शब्द </div>";
$(".header__fixed").html(text);
});
my html file is -
index.html
<body>
<header class="header header__fixed">
</header>
</body>
But it is displaying something like -
????????? in the header div.
Please help me to solve this problem.
Here is the screen shot of the error when i am saving the .js file.
Please help me to get out this problem.
I already included the in my html file.
Add <meta charset="utf-8"> to the <head> of your HTML.
hi first off all you need to add this two things in to html tag encoding="UTF-8" charset="UTF-8" like..
<html encoding="UTF-8" charset="UTF-8">
and yes the second is the main thing that you need to save this html with Encoding in UTF-8 option this will make hindi characters available try this by creating example locally this will run
I got the answer of my problem... It is so simple.. Just save the file with Unicode character set. I am using dreamweaver and have changes the character type by saving as file.
<html encoding="UTF-8" charset="UTF-8">
Related
I have another interesting mystery for you to solve.
Situation
I basicly use a PowerShell script to generate HTML pages. A meanigful example for this Powershell script would be as following: (Please note this is not the real complete code, but to understand the problem it should be enough)
function New-HTMLPage {
$htmlexport = #"
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
<title>Test</title>
</head>
<body>
...further HTML code blabla
"#
return $htmlexport
}
$htmlexport = New-HTMLPage
$htmlexport | Out-File -FilePath "C:\Test.html"
Today i tried to implement a Side Navigationbar into my HTML Code. For this Navigation i used JavaScript in my HTML which i imported like so within the body tag:
<script src="assets/js/sidebar.js"></script>
This is how the Sidebar looks like without powershell:
But when i generate this HTML Page with my Powershell Script (like the example above) it looks completly shredded.
=> Now the interesting part is, that when i copy the generated Powershell HTML Output and paste it into a clean HTML file it looks perfectly fine (like the first picture). Nothing shredded ?!
So my conclusion is, that it is wether a general HTML syntax problem nor a issue in powershell.
Does anyone have an idea what i am missing out or maybe what i can try to solve the issue ?
P.S: If you require any further information please do not hesitate to ask. I have deliberately not included every detail here so there are not too much information.
Thank you very much for your help!
Thank you very much to #mkelement,#jdweng,#Theo for providing this answer.
Finally the paramter -Encoding from the Out-File helped to sove the problem.
To find out the right encoding it followed the instructions from #Theo's comment.
Finally the correct CMDLet was:
Out-File -Encoding utf8 -FilePath "$Filepath"
I am working on a project where I have to add external HTML files as a header and footer in the main (Index.html) page. I tried below script, but it didn't work
<!DOCTYPE html>
<html lang="en">
<head>
<title>sample test</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script>
$(document).ready(function(){
$('#header1').load("mainheader.html");
});
</script>
</head>
<body>
<div id="header1"></div>
</body>
</html>
You can use iframe tag to load another html file or url.
<iframe src="your-html-route/another.html"></iframe>
Use JavaScript and work with components. Then you can work with modules to import or export a component and add HTML with
document.queryselector('#header').innerHTML = '<header>content</header>';
PHP is better for such a thing if you ask me. Make you header and footer in another .php file and include them on every page where you want use them.
Your script $('#header1').load("mainheader.html"); is correct. The fact is that the load() method (just like ajax) works exclusively on the SERVER. In order to load an external page to your tag using the load() method, you need to put your project on the server, or deploy a local server on your computer. There are many programs for this, for example: OpenServer, Denwer, WampServer, XAMPP, etc. I advise you to use OpenServer. It's free and easy to use. After you deploy your local server, you push your project to your server and the load() method will load your external html file.
If it's only a short bit of code then you could use this:
<pre>
<code>
HTML code goes
here.
</code>
</pre>
When I check my url on open graph debugger and click on scrape again
https://developers.facebook.com/tools/debug/sharing/?q=https%3A%2F%2Fwww.tvsrbija.online%2Findex.php
I get an strange error
our page has meta tags in the body instead of the head. This may be because your HTML was malformed and they fell lower in the parse tree.
Please fix this in order for the tags to be usable.
But everything with my code is fine when you look into the source.
I tried scraping blank index.php file, and when i do, here is what Facebook sees
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/REC-html40/loose.dtd">
<html><head><meta http-equiv="content-type" content="text/html; charset=utf-8"></head></html>
But there is no such code, If i go to blank index.php page of my site and check the source it is blank...
BUT, when i use index.html instead of index.php Facebook sees no code as it should with an empty index.php
Problem is my script is php and not html so i can not use html extension to fix problem. I even tried rewriting .php extension to html because I thought maybe Facebook handles it differently but with no luck.
Also I try pausing Cloudflare for couple of days and the same thing...
What can it be?
EDIT: Here you can see how Facebook sees my source code https://developers.facebook.com/tools/debug/echo/?q=https%3A%2F%2Fwww.tvsrbija.online%2Findex.php
In the provided source link, your output does not have a page head. It must have a valid head and body node to be valid html markup. You can see this in the first three lines of the response body provided by facebook:
<!DOCTYPE html>
<html><body>
<p>
Facebook is likely converting your <head> tag into a <body> tag because your source does not contain a <body>. Your index.php page should scrape like this to be correct:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/REC-html40/loose.dtd">
<html><head><meta http-equiv="content-type" content="text/html; charset=utf-8"></head><body></body></html>
In the future, validate your html markup using the w3c validator to be sure it is correct:
https://validator.w3.org/
Try changing encoding to UTF8 without boom instead of just utf8. This has been a headache for many developers because utf8 adds info before file indicating file is utf8
I just started learning javascript about 30 minutes ago. I'm doing an online course and they gave me this code as an example. The person in the video did the exact same thing, but it only works for me when I do inline not external. My .js name is right and they're in the same folder.
The html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>JavaScript Basics</title>
<script src=“cripts.js”></script>
</head>
<body>
<div class="container">
<h1>Where to place your JavaScript code.</h1>
</div>
</body>
</html>
and the js:
alert("YOU");
Nothing appears for me. I've tried everything to make it work, including different browsers. Could it be my computer or did I make a simple mistake?
It looks like your quotes are invalid :') Good beginner move! But it will be a simple fix. Note the “ should be ", this usually happens when copying and pasting code!
<script src="cripts.js"></script>
Also make sure your path and file name is correct?! cripts.js sounds like it is suppose to be scripts.js
A beginner mistake I made was to use <script>...</script> tags in the external javascript file. From HTML if you use:
<script type="text/javascript" src="../myApp/myFile.js"></script>
Then the external js file should just contain just the code such as:
function myFunction {}
with no script tags. This is unlike linking to external css files which include the <style>...</style> tags.
my JS-File is UTF-8 encoded, my html document also.
I also have this in the head part of the HTML:
<!doctype html>
<html lang="de">
<head>
<meta charset="utf-8" />
Every umlaut that I typed in the HTML is displayed properly.
But if I try to set a new value with $('#test').text('Test öäü') I get Test öäü.
How is this possible? Even console.debug/log and alert() display the same.
I also tried to set the charset attribute on my script-tag, but nothing worked.
Can anybody help me with this issue?
I found the issue. I use minify to combine my css/js and minify had $min_serveOptions['contentTypeCharset'] set to iso-8859-1.