Some Google Fonts don't work on iFrame innerHTML - javascript

it's really strange, but my iFrame innerHTML doesn't accept some fonts.
Here is an example of my code:
This font works:
Head:
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Comforter&display=swap" rel="stylesheet">
Body:
<iframe id="textBox" name="richTextFeld"></iframe>
<script type="text/javascript">
function onLoad() {
richTextFeld.document.designMode = 'On';
richTextFeld.document.body.style.fontFamily = "'Comforter', cursive";
richTextFeld.document.body.style.fontSize = "16px";
richTextFeld.document.body.style.color = "#ff0000";
richTextFeld.document.body.innerHTML = "Some Text";
}
</script>
And this font doesn't work (I have marked the two differences with two **):
Head:
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
**<link href="https://fonts.googleapis.com/css2?family=Raleway:wght#200&display=swap" rel="stylesheet">**
Body:
<iframe id="textBox" name="richTextFeld"></iframe>
<script type="text/javascript">
function onLoad() {
richTextFeld.document.designMode = 'On';
**richTextFeld.document.body.style.fontFamily = "'Raleway', sans-serif";**
richTextFeld.document.body.style.fontSize = "16px";
richTextFeld.document.body.style.color = "#ff0000";
richTextFeld.document.body.innerHTML = "Some Text";
}
</script>
I really don't understand why the font below doesn't work, do you have an idea?
Edit: In the inspector Raleway is displayed as font, but the displayed font on the site is different (see image below).
Image

Here is how you can change the font:
<iframe id="textBox" name="iFrameName"></iframe>
Import a font:
iFrameName.document.body.innerHTML = "<style>#import url('https://fonts.googleapis.com/css2?family=Raleway&display=swap');*{font-family:'Raleway',sans-serif;}</style>Some Text";
Use a installed font:
iFrameName.document.body.fontFamily = "Arial";

Related

Get SRC of Javascript image

I am creating an image gallery in javascript and I wrote some functions for it. When I click the "add" button, a window opens to select a file and a "<img>" tag is created in my relevant container, but how do I automatically put the src of the SELECTED image in my img tag?
my codes;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Roboto+Mono:ital#1&display=swap" rel="stylesheet">
<link rel="stylesheet" href="style.css">
<title>Gallery</title>
</head>
<body>
<div class="container">
<h1>Gallery</h1>
<button id="addButton">Add</button>
<div id="containerImage" class="container-image"></div>
</div>
<script src="app.js"></script>
</body>
</html>
let addButton = document.querySelector("#addButton");
let imageContainer = document.querySelector("#containerImage");
addButton.addEventListener('click', function () {
let input = document.createElement('input');
input.type = "file";
input.click();
});
addButton.addEventListener('click',function(){
let image = document.createElement('img');
imageContainer.appendChild(image);
image.className="resim";
});
Im new to javascript and I'm trying to do small small projects
i tried ;
image.src = URL.createObjectURL(image)
addButton.addEventListener('click', function () {
let input = document.createElement('input');
input.type = "file";
input.addEventListener('change', function () {
let image = document.createElement('img');
image.className = "resim";
image.src = URL.createObjectURL(input.files[0]);
imageContainer.appendChild(image);
});
input.click();
});

CSS not changing style of a button

I am trying to change the background color of a button in css. The CSS link is working fine, the button changes color when I try to apply bootstrap or use DOM to change the color, but not when I use CSS.
Here's the code:
// let sexybutton= document.querySelector('.sexy');
// sexybutton.style.backgroundColor="red";
// console.log(sexybutton.style);
//Currently commented it out because I do not want to do it this way. Put this here to inform that the button style changes using this method.
.body{
background-color:#CCD6A6
};
.sexy{
background-color: red
};
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://kit.fontawesome.com/fdee82af88.js" crossorigin="anonymous"></script>
<link rel="canonical" href="https://getbootstrap.com/docs/4.0/examples/album/">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Permanent+Marker&display=swap" rel="stylesheet">
<!-- Bootstrap core CSS -->
<link href="https://getbootstrap.com/docs/4.0/dist/css/bootstrap.min.css" rel="stylesheet">
<!-- Custom styles for this template -->
<link rel="stylesheet" href="style.css">
</head>
<body class="body" >
<button class="sexy" type="submit">Click this</button>
</body>
<script src="index.js"></script>
</html>
Your CSS syntax is wrong. The semi-colon ; must be placed after each CSS property, not after each CSS rule.
.body{
background-color:#CCD6A6;
}
.sexy{
background-color: red;
}
<!-- Bootstrap core CSS -->
<link href="https://getbootstrap.com/docs/4.0/dist/css/bootstrap.min.css" rel="stylesheet">
<body class="body" >
<button class="sexy" type="submit">Click this</button>
</body>
CSS isn't a C/C++ or anything else that requires semicolon. You can't type a semi-colon to end of the style.
You wrote;
.body{
background-color:#CCD6A6
};
.sexy{
background-color: red
};
but this is correct one;
.body{
background-color:#CCD6A6;
}
.sexy{
background-color: red;
}
You must to write semicolon to end of the line. As you can see, line ending with : red;. Not like };
it's unreadable, your semi-colon placement is not correct
.body{
background-color:#CCD6A6
};
.sexy{
background-color: red
};
correct
.body{
background-color:#CCD6A6;
}
.sexy{
background-color: red;
}

I have done all of my html code, but for some reason it's just showing a blank page

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Chat with ur friends!</title>
<!-- Boostrap links-->
<link rel="stylesheet"href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
<!-- font-family: 'Montserrat', sans-serif; basic -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Montserrat&display=swap"rel="stylesheet">
<!-- font-family: 'Open Sans', sans-serif; header -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Open+Sans&display=swap" rel="stylesheet">
<!-- Font awesome -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<!-- Firebase links -->
<script src="https://www.gstatic.com/firebasejs/7.6.2/firebase-app.js"></script>
<script src="https://www.gstatic.com/firebasejs/7.6.2/firebase-firestore.js"></script>
<script src="https://www.gstatic.com/firebasejs/live/3.1/firebase.js"></script>
<link rel = "stylesheet" href = "../css/chat.css">
</head>
<body>
<h2 id = "title"></h2>
<canvas width = "800" height = "800" id = "myCanvas"></canvas>
<div style = "display: flex;">
<label>Width:</label>
<input type = "number" id = "width" placeholder="Type in the width" class = "form-control">
<div id = "color">
<button id = "red" class = "square"></button>
<button id = "blue" class = "square"></button>
<button id = "green" class = "square"></button>
<button id = "black" class = "square"></button>
<button id = "pink" class = "square"></button>
<button id = "orange" class = "square"></button>
<button id = "yellow" class = "square"></button>
<button id = "purple" class = "square"></button>
</div>
</div>
<script src = "../js/chat.js"></script>
</body>
</html>
This is the code but it is showing me a blank page can someone please help me
I am trying to fix this problem but nothing is working please can someone explain.
My live reload on visual studio shows the same result, I have not done any Java script or css in this file.
Apparently, you don't have any "content" in your page. Only the #width input. I mean, you've created all your HTML links, tags, ids, classes... But you have any content in those tags.
In fact, if I preview your HTML code, the only content that I see is the #width input at the bottom of the page. Your width input field that I can see at the bottom of the page
Solution:
For example, try to add some text to the h2 tag. You can replace your <h2 id = "title"></h2> with <h2 id = "title">Some sample text!</h2> and you should be able to start seeing content on your page.
Might be of help, I've noticed on line 10 and 17 the following are not active:
<link rel="stylesheet"href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<link href="https://fonts.googleapis.com/css2?family=Montserrat&display=swap"rel="stylesheet">
Just add the space properly and providing you also have the other files on the server this should work. If it doesn't render properly after this find the other files and link their sources back.

Why would this not build on heroku?

Do you guys see any logical inconsistency here?
I made a few changes to this section in application.html.erb of a Ruby on Rails file and then when I deployed the new version, Heroku build keeps failing. It used to work just fine earlier, the build issue popped out recently (not sure after which step). Also, there is no explicit error code from Heroku (making it much harder to debug).
<head>
<meta charset="utf-8">
<title>ShopWithMe</title>
<!--Browser icon, not working yet -->
<link rel="icon" type="image/vnd.microsoft.icon"
href="images/favicon.ico" />
<!-- Connect to Bootstrap CSS -->
<link rel="stylesheet" href="/bootstrap/css/bootstrap.css" />
<!-- Connect to Font Awesome CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" />
<!-- Connect to our own additional CSS -->
<link rel="stylesheet" href="/product_modal_styles.css" />
<link rel="stylesheet" href="/additional_styles.css" />
<link rel="stylesheet" href="/main.css" />
<link rel="stylesheet" href="/searchpage.css" />
<style>
/* Only necessary if you are using navbar-fixed-top */
body {
padding-top: 60px;
}
</style>
<%= stylesheet_link_tag "application", :media => "all" %>
<%= javascript_include_tag "application" %>
<%= csrf_meta_tags %>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
/* social buttons */
<script type="text/javascript" src="//platform-api.sharethis.com/js/sharethis.js#property=596ffabf1328d800122d51d6&product=inline-share-buttons"></script>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script type="text/javascript">
var h = document.getElementsByTagName('head')[0];
(function(){
var fc = document.createElement('link'); fc.type = 'text/css'; fc.rel = 'stylesheet';
fc.href = 'https://product.feedbacklite.com/feedbacklite.css'; h.appendChild(fc);
})();
var fbl = {'campaign':{'id':2401, 'type':2, 'size':2, 'body':'666666', 'position':7, 'tab':1, 'control':1, 'auto':1, 'auto_delay':30000, 'auto_expiry':86400000, 'browser':'1234'}};
(function(){
var fj = document.createElement('script'); fj.type = 'text/javascript';
fj.async = true; fj.src = 'https://product.feedbacklite.com/feedbacklite.js'; h.appendChild(fj);
})();
</script>
<!-- from https://codepen.io/RetinaInc/pen/rxksh -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.js"></script>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
</head>

Javascript - Print Html Content not apply all CSS properly

I have implemented a print function that allow the user to print a portion of a page.
This is the code:
print(): void {
let printContents, popupWin;
printContents = document.getElementById('print-section').innerHTML;
popupWin = window.open('', '_blank', 'top=0,left=0,height=100%,width=auto');
popupWin.document.open();
popupWin.document.write(`
<html>
<head>
<title>Print tab</title>
<meta charset="utf-8">
<title>MegaMark - Reporting App</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" media='print,screen' type='text/css' href="./bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" media='print,screen' type='text/css' href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.5.0/css/font-awesome.min.css">
<link rel="stylesheet" media='print,screen' type='text/css' href="https://cdnjs.cloudflare.com/ajax/libs/ionicons/2.0.1/css/ionicons.min.css">
<link rel="stylesheet" media='print,screen' type='text/css' href="./plugins/jvectormap/jquery-jvectormap-1.2.2.css">
<link rel="stylesheet" media='print,screen' type='text/css' href="./distAdminLte2/css/AdminLTE.min.css">
<link rel="stylesheet" media='print,screen' type='text/css' href="./distAdminLte2/css/skins/_all-skins.min.css">
<link rel="stylesheet" media='print,screen' type="text/css" href="./node_modules/primeng/resources/themes/omega/theme.css" />
<link rel="stylesheet" media='print,screen' type="text/css" href="./node_modules/primeng/resources/primeng.min.css" />
<link rel="stylesheet" href="./css/style.css">
</head>
<body onload="window.print();">${printContents}</body>
</html>`
);
popupWin.document.close();
}
The function runs properly, It open a new window with the content properly rendered.
The problem is that when I save the content as PDF file using "Microsoft print to PDF" as printer or "PDF Creator" , the PDF is not applying all the css properly...
I don't know if it is an angular problem or css problem...
Thanks to support

Categories

Resources