iframe not loading styles using srcdoc attribute - javascript

I am using an iframe in an Angular component, and while using the src attribute to load a site loads, the styles and content perfectly fine. When trying to load static html in as a string with the srcdoc attribute, only the HTML appears to be rendering. The following is a very basic example that I've reduced this to that still isn't loading the styles.
import {
Component,
OnInit,
ViewEncapsulation
} from '#angular/core';
#Component({
selector: 'app-newsletter-viewer',
templateUrl: './newsletter-viewer.component.html',
styleUrls: ['./newsletter-viewer.component.scss'],
encapsulation: ViewEncapsulation.ShadowDom
})
export class NewsletterViewerComponent implements OnInit {
newsletterSrcDoc: string;
constructor() {}
ngOnInit() {
this.newsletterSrcDoc = `
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css" />
<style>
p {
color: red;
font-size: 2em;
}
</style>
</head>
<body>
<div class="page">
<div id="template2">
<div class="section-cover-photo">
<div class="col">
<div class="container">
<img src="" class="cover-photo">
<div class="banner-template2">
<h1>Test Title</h1>
<p>This is a test document.</p>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
`;
}
}
.wrap {
width: 170px;
height: 220px;
padding: 0;
overflow: hidden;
}
.frame {
width: 8.5in;
height: 11in;
border: 0;
-ms-transform: scale(0.25);
-moz-transform: scale(0.25);
-o-transform: scale(0.25);
-webkit-transform: scale(0.25);
transform: scale(0.25);
-ms-transform-origin: 0 0;
-moz-transform-origin: 0 0;
-o-transform-origin: 0 0;
-webkit-transform-origin: 0 0;
transform-origin: 0 0;
}
<div class="wrap">
<iframe class="frame" [srcdoc]="newsletterSrcDoc"></iframe>
</div>

After taking a different approach in searching for related topics on Stack Overflow, the accepted answer on this topic seemed to work for me: iframe inside angular2 component, Property 'contentWindow' does not exist on type 'HTMLElement'
From what I can tell, the issue has to do with how/when Angular chooses to render the DOM in the iframe. If the iframe's document content is rendered after the View (specifically the iframe in the View) is initialized, then the iframe's <head> tag is no longer omitted from the complete DOM structure on the web page.

Related

overlay image on another image in html with bootstrap 4

I want to overlay image on another image and change the pixel(location) of it.
I search the google and wrote this code:
.background {
position: relative;
width: 100%;
top: 0;
left: 0;
z-index: 1;
}
.overlay {
position: absolute;
left: 0;
top: 0;
transform: translate(440px, 340px);
z-index: 2;
}
<div class="container-fluid">
<div class="row" style="margin-top:10px;">
<div class="col-md-10 col-lg-10 col-sm-10 col-xs-10 col-xl-10 " id="test">
<img src="static/overlay.png" id="image_master" class="background" style="border: 4px solid lightgrey;">
<img src="static/overlay.png" id="overlay2" class="overlay">
</div>
This code gives me the result I want, but the problem is when I resized the page, the image-overlay get out from the background image.
I want to preserve the proportion between them.
Hope this might help you.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
.image-container {
position: relative;
display: inline-block;
}
.image-overlay {
position: absolute;
left: 0;
top: 0;
opacity: 0.5;
background-repeat: no-repeat;
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<div class="image-container">
<img class="image-content" src="https://images.pexels.com/photos/1532771/pexels-photo-1532771.jpeg?auto=compress&cs=tinysrgb&h=350">
<img class="image-overlay" src="https://images.pexels.com/photos/33109/fall-autumn-red-season.jpg?auto=compress&cs=tinysrgb&h=350">
</div>
</body>
Reason
The reason why the image overlay is not responsive because you are giving a specific value translate(440px, 340px) for transform and this is applicable for all the devices.
How to fix it
Use media queries (#media) for each viewports/devices.
or
Make the overlay-image absolute position with respect to it's container #test.
I've used this approach to achieve the result. You can have a look at the working fiddle.
Link: https://jsfiddle.net/Baliga/fme12tby/22/

Vertical align my loader within app-root - Angular2+

I have implemented a simple spinner within my <app-root> of index.html such that it appears something is happening behind the scenes, rather than a blank white page until my app loads fully.
However, I cannot seem to get it vertically aligned in the centre of the page. I don't want to affect how the contents of my app are loaded as they themselves are vertically centred.
Is there something I'm missing?
I thought of nesting my spinner in another div and setting that to have a specific height, then centring within that, but it doesn't seem to be an elegant solution.
I have also thought about using:
display: inline-block;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
Codepen for this 'solution'
However, with how things are, it appears that it sets the positioning based on the top left corner of the overall div area, therefore appears offset to the left and the bottom by however large the spinner is.
Codepen for just centred horizontally
index.html
<!doctype html>
<html lang="en">
<head>
<style>
.loader {
border: 16px solid #f3f3f3;
border-radius: 50%;
border-top: 16px solid red;
width: 120px;
height: 120px;
animation: spin 1s linear infinite;
margin: auto;
}
#keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
</style>
<meta charset="utf-8">
<title>BettingUi</title>
<base href="./">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
<link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700|Roboto:400,500" rel="stylesheet">
</head>
<body>
<!--<app-root>-->
<!--
This will display a loader while the app is loading - in case of slow connection
We cannot use an Angular component here as it will only be displayed after loading
all component - so direct HTML here is the best case for this.
-->
<div class="loader"></div>
<!--</app-root>-->
</body>
</html>
UPDATE
I did manage to find a solution myself to this:
display: inline-block;
position: absolute;
top: calc(50% - 60px);
left: calc(50% - 60px);
Here I decided that, because the spinner was being centred based on the top left corner of the 'square' that defines the width/height of the element, it would make sense to simply edge back by half of the actual width & height.
Final codepen
.parent{
height:90vh;
display:flex;
postion:absolute;
}
.loader {
border: 16px solid #f3f3f3;
border-radius: 50%;
border-top: 16px solid red;
width: 120px;
height: 120px;
animation: spin 1s linear infinite;
margin: auto ;
}
#keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
.container {
background: grey;
margin: auto;
align-items: center;
}
body {
background: grey;
}
<div class="parent">
<div class="loader"></div>
</div>
This will achieve the desired effect, when doing a spinner my go to strategy is to first create a transparent container (in the example .parent) which will have the size of the visible area and position absolute (so that it overlays everything) and after that placing the spinner inside the container.
P.S. Believe me it's elegant enough, also a must to have (the container <div>), because no matter what you are doing you must have some kind of container, by which dimensions you spinner will be aligned. If you are using Angular2 you can place the spinner with the overlay and all related html and styles in separate component, so that in your root index.html it will look just like <spinner></spinner>

How to put a content inside the box after it has been hovered?

I'm planning to make a sticky note kind of style and I want to show the content inside the box without it being displayed first when the hover is not active. Like here in my code example: Please help!
body {
margin: 45px;
}
.box {
display:inline-block;
background-color: pink;
height: 200px;
width: 200px;
transition: transform 300ms ease-in-out;
pointer-events: none;
}
.container {
width: 200px;
height: 200px;
border: 20px solid grey;
background-color: violet;
}
.container:hover .box{
transform: translate(200px, 150px) rotate(20deg);
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="CSSTransitions.css">
<script src="jquery-3.2.1.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<title>CSS Transitions</title>
</head>
<body>
<div class="container">
<p>Hello</p>
<div class="box"></div>
</div>
</body>
</html>
fiddle
Hey guys, I'm sorry if my explanation of what I wanted to achieve wasn't clear. There's a pink box that is visible when not hovered and there's a violet box inside when it's hovered. I want the paragraph inside the violet box hidden when the pink box is not hovered. But my code shows here that even the pink box isn't hovered, the paragraph inside the violet box is already been displayed.
You have to set the position: absolute of the inside div i.e. .box to place it over the text. Remember to set position: relative to the parent div i.e. .container.
Absolute positioned element is removed from the normal document flow; no space is created for the element in the page layout. Instead, it is positioned
relative to its closest positioned ancestor if any; otherwise, it is
placed relative to the initial containing block. Its final position is
determined by the values of top, right, bottom, and left. This value
creates a new stacking context when the value of z-index is not auto.
Absolutely positioned boxes can have margins, and they do not collapse
with any other margins.
More help on position property
body {
margin: 45px;
}
.box {
display: inline-block;
background-color: pink;
height: 200px;
width: 200px;
transition: transform 300ms ease-in-out;
pointer-events: none;
position: absolute;
top: 0;
left: 0;
}
.container {
position: relative;
width: 200px;
height: 200px;
border: 20px solid grey;
background-color: violet;
}
.container:hover .box {
transform: translate(200px, 150px) rotate(20deg);
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="CSSTransitions.css">
<script src="jquery-3.2.1.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<title>CSS Transitions</title>
</head>
<body>
<div class="container">
<p>Hello</p>
<div class="box"></div>
</div>
</body>
</html>
I hope this will help you.

Click anywhere link

I have a splash page and want the user to be able to click anywhere on the page and send them to the main site. I've found close solutions on SO, but my issue is that my splash page has a floating div in the center, so using something like <body onclick="window.location.href='url'"> only works when clicking on the div, not anywhere else on the background. Here's the HTML:
<html>
<head>
<link rel="stylesheet" href="styles/layout.css" type="text/css" />
</head>
<body>
<div class="splash">
<h1>PM & ASSOCIATES</h1>
<p>Worldwide</p>
</div>
</body>
</html>
And the CSS:
.splash{
position: absolute;
top: 50%;
left: 50%;
-moz-transform: translateX(-50%) translateY(-50%);
-webkit-transform: translateX(-50%) translateY(-50%);
transform: translateX(-50%) translateY(-50%);
}
.splash p{
font-size:12pt;
font-family:Castellar, Garamond, "Times New Roman", Times, serif;
}
.splash h1{
font-size:32pt;
font-family:Castellar, Garamond, "Times New Roman", Times, serif;
}
At least historically, I had similar issues trying to get content to take up 100% height because the body is only like a div. It only takes up the space needed for its content. So, to fix this, you should be able to make your html and body both 100%:
html { width:100%;height:100%; }
body { width:100%;height:100%; }
Doing this should force the body tag to take up the entire window.
This is a rather simple solution, but this could work if you're able to modify the html:
<html>
<head>
<link rel="stylesheet" href="styles/layout.css" type="text/css" />
</head>
<body>
<div class="splash">
<h1>PM & ASSOCIATES</h1><p>Worldwide</p>
</div>
</body>
</html>
Insert your desired URL inside the link's href attribute.
Then these styles should be added:
body{
position: relative;
width: 100%;
height: 100%;
}
.fullPageLink{
position: absolute;
display: block;
z-index: 10;
width: 100%;
height: 100%;
}

I want to display different images OnMouseOver and OnMouseOut

I have a JS function for highlighting Text in blue on mouseOver and where I am passing two parameters - id, action in my . I have written 2 simple css for mouseover to blue and mouseout to black.
I want to add code to display different images to onmouseover and onmouseout events.
The thing is - I have two different images in one location which displays accordingly when you mouseover and mouseout.
e.g. Onmouseover - image1........ Onmouseout- image2.
I want to make it generic.
CSS:
.AttachOnMouseOverText{
color: blue;
font-size: 10px;
text-align: center;
}
.AttachOnMouseOutText{
color: black;
font-size: 10px;
text-align: center;
}
JavaScript :
function highlightBG(id,action,img) {
if(action==0)
{
document.getElementById(id).className='AttachOnMouseOverText';
document.getElementById(img).src='#ContactsImagePath#'+ img+'_over.gif';
}
else
{
document.getElementById(id).className='AttachOnMouseOutText';
document.getElementById(img).src='#ContactsImagePath#'+ img+'.gif';
}
}
HTML :
<td align="center" class="AttachOnMouseOutText" id="folderid" nowrap="nowrap" valign="top" onClick="go('addfolder');" onMouseOver=" highlightBG('folderid',0, 'icon_folder');this.style.cursor='hand'; return true;" onMouseOut="highlightBG('folderid',1, 'icon_folder'); return true;">
<p class="Margin"><img name="icon_folder" id="icon_folder" src="#ContactsImagePath#icon_folder.gif" alt="Add Folder" align="middle" border="0" ></p>
<span>Add Folder</span>
If you check I have added third parameter 'img' and making it generic by passing it in document.getElementById. #ContactsImagePath# is location where images are stored.
i have written _over.gif because all the images have this format. e.g. on mouseover "image_over.gif" will be called. hence i have written this.
But my problem is when the image name will change in that location, then my function would crash. any idea how to do it?
use css instead
.image_container{
background:url('image1.jpg');
}
.image_container:hover{
background:url('image2.jpg');
}
try this one this is the simplest
<img src="Images/search-btn.gif" onmouseover="this.src='Images/search-btn-over.gif'" onmouseout="this.src='Images/search-btn.gif'" />
Give background property in your CSS classes
.AttachOnMouseOverText{
color: blue;
font-size: 10px;
text-align: center;
background: url('image_mouseover.gif');
}
.AttachOnMouseOutText{
color: black;
font-size: 10px;
text-align: center;
background: url('image_mouseout.gif');
}
Hover on the div tag to change the image.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title></title>
<style>
#container {
position: absolute;
width: 50%;
height: 20%;
}
img {
width: 50%;
height: 100%;
backface-visibility: hidden;
-webkit-backface-visibility: hidden;
position: absolute;
left: 25%;
}
#right {
transform: rotateY(180deg);
-webkit-transform: rotateY(180deg);
}
#container:hover #info {
transform: rotateY(180deg);
-webkit-transform: rotateY(180deg);
}
#container:hover #right {
transform: rotateY(360deg);
-webkit-transform: rotateY(360deg);
}
</style>
</head>
<body>
<div id="container">
<img id="right" src="right.png" alt="icons" />
<img id="info" src="info.png" alt="icons" />
</div>
</body>

Resources