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>
Related
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 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.
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>
Below is the html code.
<html>
<head>
<style type="text/css">
.my {
border: 2px solid;
width: 414px;
height: 500px;
}
.right {
text-align: right
}
</style>
</head>
<body>
<h2>this is the ...</h2>
<div class="my">abc</div>
<div class="right">this is the right</div>
</body>
</html>
You can see the 414 pixel div is there
I know the devicePixelRatio is 3, so the actual pixel of width is about 414 * 3 pixel. But when I set width to 414 pixel in css, why it occupy about 2/5 of the width? How does the css pixel map to the actual pixel?
Another attached.
Why I need to set 960px to fill the width of iphone 6plus?
You have to use viewport metatag to control the layout on mobile devices.
<meta name="viewport" content="width=device-width, initial-scale=1.0">
For more help on viewport read this Using the viewport meta tag to control layout on mobile browsers
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style type="text/css">
.my {
border: 2px solid;
width: 414px;
height: 500px;
}
.right {
text-align: right
}
</style>
</head>
<body>
<h2>this is the ...</h2>
<div class="my">abc</div>
<div class="right">this is the right</div>
</body>
</html>
As far as I understood you need to use viewport meta tag,
<meta name="viewport" content="width=device-width, initial-scale=1.0">
I doubt you are missing this metatag
<meta name="viewport" content="width=device-width, initial-scale=1.0">
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.