I am working to add a Pardot Form Handler Form into an Elementor HTML Snippet as an iFrame and while it is showing up fine in Chrome(default browser) , when I switch to Firefox or Safari, the form only shows the top two fields, and the only way to get to the next level of fields is to TAB through. I have tried to clear and delete the cache but to no avail.
Here is the code snippet:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Pardot iFrame Resizing</title>
<meta name="description" content="iFrame message passing test">
<meta name="viewport" content="width=device-width">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<style type="text/css">
iframe {
border: 0;
border-color: rgba(0,0,0,0);
top: 0;
bottom: 0;
left: 0;
right: 0;
height: 100%;
width: 100%;
}
</style>
</head>
<body>
<iframe src="https://go.hisshosushi.com/l/895511/2021-01-16/3fnc" width="100%" scrolling="no"></iframe>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/iframe-resizer/4.2.11/iframeResizer.min.js"></script>
<script type="text/javascript">
iFrameResize({log:true});
</script>
</body>
</html>
I was having the same problem then I added a z-index: 10; and it showed up. No other z-index on the page.
Related
I'm trying to redirect website visitors to other websites through css onclick redirects.
Is it possible open new window ?
You can use "_blank" this opens the linked document in a new window.
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
html, body {
height: 100%;
margin: 0;
}
.full-height {
height: 100%;
}
</style>
</head>
<body >
<div class="full-height" onclick="window.open('http://www.google.com', '_blank')">
<p>page content</p>
</div>
</body>
</html>
I want to switch person1's image to person2's image when you hover over the background with your mouse. Ive tried to just switch the "right-bottom" code from the 2 images but I don't know how to do it and ive been searching google for the past hour now.
How do I change another element when one is touched?
This is my current code
.background
{
z-index: 1;
}
.person1
{
position: relative;
z-index: 2;
right: 251px;
bottom: 169px;
}
.person2
{
position: relative;
z-index: 2;
right: 749px;
bottom: 221px;
}
<!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>
<link href="assets-css/heads.css" rel="stylesheet" type="text/css">
</head>
<body>
<img src="assets-css/images/background.png" alt="background" class="background">
<img src="assets-css/images/person1.png" alt="personright" class="person1">
<img src="assets-css/images/person2.png" alt="personleft" class="person2">
</body>
</html>
I need to add the thumbnail before the video using Jquery. I have added the image but when I change the page size the thumbnail is should be centered of the place As per the below image,
But, My image is responsive as below,
My Jquery,
$(document).ready(function () {
$("body").prepend('<div id="thumbnailcontainer" class="container-fluid"><div class="row"><img id="llthumbnail" class="img-fluid" style = "position: fixed;width: 100%;height: 100%;top: 0;left: 0; right: 0;bottom: 0;cursor: pointer;background:black;padding:0px 100px 0px 100px;" src = "http://w3.org/Icons/valid-xhtml10" ></div></div>');
$('#thumbnailPlayIcon').on("click", function () {
thumbnailClick($(this));
});
$('#llthumbnail').on("click", function () {
thumbnailClick($(this));
});
});
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta charset="utf-8" />
<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.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
</head>
<body>
<div id="myDiv">
</div>
<div class="skycap-caption" style="display:none"></div>
</body>
</html>
can any one please help me to resolve the issue?
To position the image container in the middle of the page use following style (note that you need to remove position: fixed; from image).
#thumbnailcontainer {
position: relative;
transform: translateY(-50%);
top: 50%;
}
In the snippet (view in full screen) I added a <div style="height:100vh;">to emulate a larger page, which you should probably remove for your own page. Also you should keep the styles in a css file and HTML in html file, since it is hard to maintain a big blob in javascript.
$(document).ready(function () {
$("body").prepend('<div style="height:100vh;"><div id="thumbnailcontainer" class="container-fluid"><div class="row"><img id="llthumbnail" class="img-fluid" style = "width: 100%;height: 100%;top: 0;left: 0; right: 0;bottom: 0;cursor: pointer;background:black;padding:0px 100px 0px 100px;" src = "http://w3.org/Icons/valid-xhtml10" ></div></div></div>');
$('#thumbnailPlayIcon').on("click", function () {
thumbnailClick($(this));
});
$('#llthumbnail').on("click", function () {
thumbnailClick($(this));
});
});
#thumbnailcontainer {
position: relative;
transform: translateY(-50%);
top: 50%;
}
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta charset="utf-8" />
<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.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
</head>
<body>
<div id="myDiv">
</div>
<div class="skycap-caption" style="display:none"></div>
</body>
</html>
The background image in my react application is not showing!
I've applied it to the index.html file in this way:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>React and Webpack4</title>
<style type="text/css">
body {
background: url("background.png");
background-size: cover;
height: 100%;
width: 100%; /* For flexibility */
}
</style>
</head>
<body>
<section id="index"></section>
</body>
</html>
However, I get the following error:
GET http://localhost:8080/background.png 404 (Not Found)
I try to create a pdf file using phantomjs. This pdf contain multiple pages. I define this pages with the follwing css:
.page{
height: 210mm;
width: 297mm;
}
body{ margin: 0; padding: 0; }
And here is an example of html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=11" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.2/css/bootstrap.min.css" rel="stylesheet" />
<link href="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/themes/smoothness/jquery-ui.css" rel="stylesheet" />
<link href="{{ asset('/css/main.css') }}" rel="stylesheet" />
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.2/js/bootstrap.min.js"></script>
<script src="//code.highcharts.com/highcharts.js"></script>
<script src="//code.highcharts.com/highcharts-more.js"></script>
</head>
<body>
<div class='page'>page1</div>
<div class='page'>page2</div>
</body>
</html>
And following is config file for phantomjs:
var page = require("webpage").create();
page.open("http://site.local/pdf/2", function() {
page.paperSize = { format: "A4", orientation: "landscape" };
//page.paperSize = { width: "29cm", height: "21cm" };
//page.zoomFactor = 1.249;
page.render("example.pdf");
phantom.exit();
});
But my html pages never fit 100% in the pdf pages. They are every time smaller. If I set the zoomFactor to 1.249, then the page fit almost 100% inside. But somehow this solution is weird. How could I solve this problem?
You can write this:
page.paperSize = {
format: 'A4',
orientation: 'portrait',
margin: {
top: '1cm',
left: '1,6cm',
right: '1,6cm',
bottom: '1cm'
}
};
it helped me.