I want to load content in the iframe and make it resize its height according to the content. All the pages are in the same domain. I tried some scripts I found, but nothing worked. Most of the times, it just opens the loaded content in a new tab.
HTML:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>index</title>
<link href="styles.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="container">
<div id="header"></div>
<div id="nav">Home The Band
News Gallery
Contact</div> <div id="content"></div>
<iframe id="frame"></iframe>
<div id="footer"></div>
</div>
</body>
</html>
CSS:
div#container {
height: 100%;
width: 100%;
}
div#header {
top: 0px;
width: 100%;
height: 80px;
position: fixed;
background-color: transparent;
text-align: center;
}
div#nav {
font-family: MgSouvenirLight;
font-size: 18pt;
color: #FF0;
top: 120px;
width: 100%;
height: 40px;
position: fixed;
text-decoration: none;
font-weight: bolder;
font-variant: normal;
}
div#footer {
font-family: Arial, Helvetica, sans-serif;
font-size: 9px;
bottom: 0px;
position: fixed;
height: 30px;
width: 100%;
text-align: center;
color: #fff;
}
#frame {
position: absolute;
top: 200px;
bottom: 40px;
width: 800px;
border: none;
left: 120px;
height: auto;
}
a:link {
font-family: MgSouvenirLight;
font-size: 18pt;
color: #FF0;
}
a:visited {
font-family: MgSouvenirLight;
font-size: 18pt;
color: #FF0;
}
a:hover {
font-family: MgSouvenirLight;
font-size: 18pt;
font-style: italic;
color: #FC0;
}
you could try to get the height after iframe is loaded , and change it with jquery
$('iframe').load(function() {
setTimeout(iResize, 50);
// Safari and Opera need a kick-start.
var iSource = document.getElementById('your-iframe-id').src;
document.getElementById('your-iframe-id').src = '';
document.getElementById('your-iframe-id').src = iSource;
});
function iResize() {
document.getElementById('your-iframe-id').style.height =
document.getElementById('your-iframe-id').contentWindow.document.body.offsetHeight + 'px';
}
Related
I am trying to make my form div disappear when I click away from it. The function for this action was working fine until I also added another div to create an overlay of subtle opacity underneath the form after clicking on the add book button to make it appear. Is there a way to have both events happening without causing one of them to no longer work?
Thank you in advance.
HTML
<link rel="stylesheet" href="https://use.typekit.net/jmq2vxa.css">
<link rel="stylesheet" href="styles.css">
<link rel="icon" type="image/png" href="images/open-book.png"/>
<title>My Library</title>
</head>
<body>
<div class="head-box">
<h1>My Library</h1>
</div>
<div class="body-box">
<button id="addBook">Add Book</button>
</div>
<!-----Form information----->
<div class="form-popup">
<div class="form-content"
<form action="example.com/path" class="form-container" id="popUpForm">
<h3>add new book</h3>
<input type="text" id="title" placeholder="Title">
<input type="author" id="author" placeholder="Author">
<input type="pages" id="pages" placeholder="Pages">
<div class="isRead">
<label for="readOption">Have you read it?</label>
<input type="checkbox" id="readOption" name="readOption">
</div>
<button type="submit" id="submit">Submit</button>
</form>
</div>
</div>
<div id="invisibleDiv"></div>
<div id="overlay"></div>
</body>
</html>
CSS
* {
margin:0;
padding:0;
}
h1 {
font-family: ohno-blazeface, sans-serif;
font-weight: 100;
font-style: normal;
font-size: 8vh;
color: #001D4A;
}
.head-box {
background-color: #9DD1F1;
display: flex;
align-items: center;
justify-content: center;
height: 20vh;
border-bottom: 2px solid #e0f3ff;
}
h2 {
font-family: poppins, sans-serif;
font-weight: 300;
font-style: normal;
font-size: 5vh;
color: #001D4A;
}
h3 {
font-family: ohno-blazeface, sans-serif;
font-weight: 100;
font-style: normal;
font-size: 4vh;
color: #001D4A;
}
button {
height: 10vh;
width: 20vh;
font-size: 3vh;
background-color: #27476E;
border-radius: 22px;
border-style: none;
font-family: poppins, sans-serif;
font-weight: 300;
font-style: normal;
color:#ffffff;
}
button:hover {
background-color: #192c44;
}
body {
min-height: 100vh;
background: linear-gradient(180deg,#d0edff,#9DD1F1) no-repeat;
}
.body-box {
margin: 10vh;
display: flex;
justify-content: center;
}
/* The pop up form - hidden by default */
.form-popup {
display: none;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 9;
}
.form-content {
display: flex;
border-radius: 20px;
width: 35vh;
height: 45vh;
border: 3px solid #001D4A;
padding: 20px;
background-color: #9DD1F1;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 17px;
gap: 10px;
}
.isRead{
display: flex;
height: 60px;
width: 100%;
align-items: center;
justify-content: center;
}
label {
font-family: poppins, sans-serif;
font-weight: 600;
font-style: normal;
font-size: 2.5vh;
}
input {
border-radius: 10px;
height: 80px;
margin: 3px;
width: 100%;
background-color: #d0edff;
border: none;
font-family: poppins, sans-serif;
font-weight: 300;
}
#submit {
margin: 4px;
height: 70px;
width: 100%;
border-radius: 15px;
color: #ffffff;
border: none;
}
input[type=checkbox] {
width: 20px;
margin: 10px;
}
#invisibleDiv {
height: 100%;
width: 100%;
}
#overlay {
position: fixed;
top: 0;
left: 0;
display: none;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
}
JS
const popUpForm = document.querySelector(".form-popup");
const button = document.querySelector("#addBook");
const overlay = document.getElementById('overlay');
document.getElementById('invisibleDiv').onclick = function()
{
popUpForm.style.display = "none";
overlay.style.display = "none";
};
button.addEventListener("click", () => {
popUpForm.style.display = "block";
overlay.style.display = "block";
});
This happen because the overlay is place on top of the invisibleDiv. So you click event on the invisibleDiv is not triggering.
When you add css position other then static, they will have this stacking context apply to them, refer to the link below
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context
You can just add the click event on the overlay.
I want to make something like - When I press on About, so there will show overlay over the main div with text about. Now when I click, so that div will show, but it will move down that particles-js div. And I don't want to move that div, but I want to make about to show over that particle (fullscreen overlay with 50% opacity)
$(".about").click(function() {
$(".main").fadeToggle('500');
$(".aboutText").fadeToggle('500');
});
#import url('https://fonts.googleapis.com/css?family=Open+Sans:400,800');
body {
background: #1d1d1d;
font-family: 'Montserrat', sans-serif;
font-size: 100%;
margin: 0 auto;
padding: 0;
overflow-x: hidden;
}
.container {
width: 100%;
margin: 0 auto;
padding: 0;
}
#particles-js {
height: 100vh;
width: 100%;
background-color: green;
}
#about {
height: 100vh;
background-color: beige;
}
h1.main {
color: white;
position: absolute;
padding: 0;
margin: 0 auto;
top: 50%;
display: inline-block;
left: 50%;
text-align: center;
font-size: 4.5em;
transform: translate(-50%, -50%);
}
h2 {
color: white;
position: absolute;
top: 60%;
left: 5%;
font-size: 2em;
}
a.logo {
text-decoration: none;
color: #2ecc71;
}
span.home {
position: absolute;
top: 50%;
right: 1%;
transform: rotate(90deg);
color: #fff;
font-size: 1em;
}
a.about {
position: absolute;
top: 50%;
left: 1%;
transform: rotate(270deg);
color: #fff;
font-size: 1em;
}
a.about {
text-decoration: none;
color: #fff;
}
#media only screen and (max-width: 500px) {
.site-nav a {
padding: 2em;
font-size: 1.5em;
}
}
.text {
color: #fff;
position: relative;
top: 50%;
left: 10%;
background-color: #000;
display: none;
}
a.about:hover {
color: #2ecc71;
}
.aboutText {
background-color: #000;
width: 100%;
height: 100vh;
background-size: cover;
opacity: 0.5;
position: relative;
display: none;
}
.aboutText--open {
background-color: #000;
width: 100%;
height: 100vh;
background-size: cover;
opacity: 0.5;
position: relative;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta charset="UTF-8">
<meta name="description" content="Doplniť neskôr">
</head>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="normalize.css">
<body>
<div class="aboutText">
<div class="text">
<p>sssss</p>
</div>
</div>
<div id="particles-js">
<h1 class="main">Text</h1>
</div>
<span class="home">Home</span>
About
<div id="about">
</div>
<div id="portfolio"></div>
<div id="contact"></div>
<script src="https://code.jquery.com/jquery-3.3.1.js" integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60=" crossorigin="anonymous"></script>
<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<script src="js/particles.js"></script>
<script src="app.js"></script>
</body>
</html>
Is this what you are trying to do? Show the about text when clicked?
$(".about").click(function() {
$("#particles-js").toggleClass("hide")
$(".aboutText").toggleClass("hide")
});
#import url('https://fonts.googleapis.com/css?family=Open+Sans:400,800');
body {
background: #1d1d1d;
font-family: 'Montserrat', sans-serif;
font-size: 100%;
margin: 0 auto;
padding: 0;
overflow-x: hidden;
}
.container {
width: 100%;
margin: 0 auto;
padding: 0;
}
#particles-js {
height: 100vh;
width: 100%;
background-color: green;
}
#about {
height: 100vh;
background-color: beige;
}
h1.main {
color: white;
position: absolute;
padding: 0;
margin: 0 auto;
top: 50%;
display: inline-block;
left: 50%;
text-align: center;
font-size: 4.5em;
transform: translate(-50%, -50%);
}
h2 {
color: white;
position: absolute;
top: 60%;
left: 5%;
font-size: 2em;
}
a.logo {
text-decoration: none;
color: #2ecc71;
}
span.home {
position: absolute;
top: 50%;
right: 1%;
transform: rotate(90deg);
color: #fff;
font-size: 1em;
}
a.about {
position: absolute;
top: 50%;
left: 1%;
transform: rotate(270deg);
color: #fff;
font-size: 1em;
}
a.about {
text-decoration: none;
color: #fff;
}
#media only screen and (max-width: 500px) {
.site-nav a {
padding: 2em;
font-size: 1.5em;
}
}
.text {
color: #fff;
position: relative;
top: 50%;
left: 10%;
background-color: #000;
}
a.about:hover {
color: #2ecc71;
}
.aboutText {
background-color: #000;
width: 100%;
height: 100vh;
background-size: cover;
opacity: 0.5;
position: relative;
}
.hide {
display: none;
}
.aboutText--open {
background-color: #000;
width: 100%;
height: 100vh;
background-size: cover;
opacity: 0.5;
position: relative;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta charset="UTF-8">
<meta name="description" content="Doplniť neskôr">
</head>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="normalize.css">
<body>
<div class="aboutText hide">
<div class="text">
<p>sssss</p>
</div>
</div>
<div id="particles-js">
<h1 class="main">Text</h1>
</div>
<span class="home">Home</span>
About
<div id="about">
</div>
<div id="portfolio"></div>
<div id="contact"></div>
<script src="https://code.jquery.com/jquery-3.3.1.js" integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60=" crossorigin="anonymous"></script>
<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<script src="js/particles.js"></script>
<script src="app.js"></script>
</body>
</html>
When window is in full screen it shows like this:
When I tried to make it mobile friendly or window shrink the h1 tag is overflow the image:
I also tried with overflow property but it didn't work. Also I want that my h1 and img must that particular position which one I did but also want it must be mobile friendly. If there any CSS or JavaScript I need to use, please suggest it.
Here is my code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>test video</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" type="text/css">
<link href="https://fonts.googleapis.com/css?family=Butcherman&subset=latin-ext" rel="stylesheet">
<style type="text/css">
html,body{
margin: 0;
padding: 0;
font-size: 100%;
}
#stripe img{
position: absolute;
top: 0;
left: 40%;
margin-left: 5px;
margin-top: 0;
margin-bottom: 0;
margin-right: 5px;
overflow: inherit;
}
h1{
position: fixed;
left: 45%;
top: 20px;
color: white;
font-size: 2em;
font-family: 'Butcherman', cursive;
font-weight: normal;
text-align: center;
margin-left: 5px;
margin-top: 0;
margin-bottom: 0;
margin-right: 0;
text-transform: uppercase;
overflow: inherit;
}
#stripe{
position : relative;
background: #404040;
height: 70px;
text-align: center;
overflow: hidden;
right: 0;
}
</style>
</head>
<body>
<div id="stripe">
<img src="logo/mask.png">
<h1>My Website</h1>
</div>
</body>
</html>
Try this:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>test video</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" type="text/css">
<link href="https://fonts.googleapis.com/css?family=Butcherman&subset=latin-ext" rel="stylesheet">
<style type="text/css">
html,body{
margin: 0;
padding: 0;
font-size: 100%;
}
#stripe img{
display: inline-block;
}
h1{
color: white;
font-size: 2em;
font-family: 'Butcherman', cursive;
font-weight: normal;
text-align: center;
margin-left: 5px;
margin-top: 0;
margin-bottom: 0;
text-transform: uppercase;
display: inline-block;
}
#stripe{
background: #404040;
height: 70px;
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
}
</style>
</head>
<body>
<div id="stripe">
<img src="http://via.placeholder.com/50x50">
<h1>My Website</h1>
</div>
</body>
</html>
I think You should add the following CSS to your div and img styles.
#stripe{
position: relative;
}
#stripe img{
position: absolute;
}
and you not need to give h1 tag position: fixed style. remove it.
I suggest you to consider using flexboxes:
#stripe {
display: flex;
justify-content: center;
align-items: center;
background: #404040;
color: white;
height: 70px;
overflow: hidden;
}
img {
width: 50px;
height: 50px;
margin-right: 10px;
}
<div id="stripe">
<img src="https://cdn.pixabay.com/photo/2012/04/15/21/38/skull-35404_960_720.png" />
<h1>Someone's Website</h1>
</div>
Finally, I've solved my problem with this CSS:
html,body{
margin: 0;
padding: 0;
font-size: 100%;
}
#stripe img{
margin-left: 0;
margin-top: 0;
margin-bottom: 15px;
margin-right: 0;
}
h1{
color: white;
font-size: 2em;
font-family: 'Butcherman', cursive;
font-weight: normal;
text-align: center;
text-transform: uppercase;
}
img + h1{
display: inline-block;
}
#stripe{
position: relative;
background: #404040;
height: 70px;
text-align: center;
right: 0;
}
I'm having a weird issue that I've never experienced before. I have jQuery loaded correctly, but I can't seem to get it to do anything.
I'm trying to use jQuery to quickly fade in a series of text elements on my sites initial wrapper. My JavaScript is functioning expected on the main page, so I'm thinking it's an issue with my CSS?
Code sample:
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script type="text/javascript" src="effects.js"></script>
<script type="text/javascript" src="main.js"></script>
</head>
The overlay in question...
<body>
<div id="wrapper">
<div id="overlay">
<h1 id="overlaytext1">Fade this in</h1>
<h1 id="overlaytext2">Then this</h1>
<h1 id="overlaytext3">then this</h1>
<h1 id="overlaytext4">then this.</h1>
<div id="overlaycontent">
<h1>Compelling paragraph.</h1>
<h1 id="overlaytext">Credit</h1>
</div>
</div>
<-- Main Page Content -->
</div>
</body>
My CSS
#overlay {
background-color: rgba(0,0,0,0.90);
position: fixed;
height: 100%;
width: 100%;
z-index:1;
}
#overlaycontent {
padding-top: 20%;
width: 50%;
color: #ffffff;
margin: auto;
text-align: center;
font-size: 26px;
letter-spacing: -1px;
}
#overlaytext {
margin-top: 20px;
font-size: 22px;
}
#overlaytext1 {
display: none;
position: fixed;
color: rgba(255,255,255,0.20);
font-family: 'Kaushan Script', cursive;
font-size: 40px;
margin-left: 5%;
margin-top: 5%;
}
#overlaytext2 {
position: fixed;
color: rgba(255,255,255,0.20);
font-family: 'Kaushan Script', cursive;
font-size: 40px;
right: 5%;
bottom: 5%;
}
#overlaytext3 {
position: fixed;
color: rgba(255,255,255,0.20);
font-family: 'Kaushan Script', cursive;
font-size: 40px;
margin-top: 10%;
margin-left: 1%;
}
#overlaytext4 {
position: fixed;
color: rgba(255,255,255,0.20);
font-family: 'Kaushan Script', cursive;
font-size: 40px;
right: 1%;
bottom: 15%;
}
Contents of effects.js
$(function() {
setTimeout(function() {
$('#overlaytext1').show();
}, 1000);
}};
To me, everything looks okay. The only thing I can think of is something with the z-index or position causing a problem?
Any thoughts?
Here's a fiddle with css class to hide your overlay text and javascript to show it 1 second after each other: https://jsfiddle.net/stevenng/0n52dajm/1/
CSS:
.hide {
display: none;
}
#overlay {
background-color: rgba(0,0,0,0.90);
position: fixed;
height: 100%;
width: 100%;
z-index:1;
}
#overlaycontent {
padding-top: 20%;
width: 50%;
color: #ffffff;
margin: auto;
text-align: center;
font-size: 26px;
letter-spacing: -1px;
}
#overlaytext {
margin-top: 20px;
font-size: 22px;
}
#overlaytext1 {
display: none;
position: fixed;
color: rgba(255,255,255,0.20);
font-family: 'Kaushan Script', cursive;
font-size: 40px;
margin-left: 5%;
margin-top: 5%;
}
#overlaytext2 {
position: fixed;
color: rgba(255,255,255,0.20);
font-family: 'Kaushan Script', cursive;
font-size: 40px;
right: 5%;
bottom: 5%;
}
#overlaytext3 {
position: fixed;
color: rgba(255,255,255,0.20);
font-family: 'Kaushan Script', cursive;
font-size: 40px;
margin-top: 10%;
margin-left: 1%;
}
#overlaytext4 {
position: fixed;
color: rgba(255,255,255,0.20);
font-family: 'Kaushan Script', cursive;
font-size: 40px;
right: 1%;
bottom: 15%;
}
HTML:
<div id="wrapper">
<div id="overlay">
<h1 id="overlaytext1" class="hide">Fade this in</h1>
<h1 id="overlaytext2" class="hide">Then this</h1>
<h1 id="overlaytext3" class="hide">then this</h1>
<h1 id="overlaytext4" class="hide">then this.</h1>
<div id="overlaycontent">
<h1>Compelling paragraph.</h1>
<h1 id="overlaytext">Credit</h1>
</div>
</div>
</div>
JS:
$(function(){
setTimeout(function(){ $('#overlaytext1').fadeIn('slow'); }, 1000);
setTimeout(function(){ $('#overlaytext2').fadeIn('slow'); }, 2000);
setTimeout(function(){ $('#overlaytext3').fadeIn('slow'); }, 3000);
});
Got it to work. Few comments. You're missing an '!' at:
</div>
<-- Main Page Content -->
</div>
You also need to specify the correct syntax for the setTimeout function:
var timeOut = window.setTimeout(function() {
$('#overlaytext1').show();
}, 1000);
or:
$(function() {
setTimeout(function() {
$('#overlaytext1').show();
}, 1000);
});
(You were missing the parenthesis - you had a brace)
Working fiddle at: https://jsfiddle.net/dhqdt3vk/
I can't seem to able to figure this out using javascript, I want to dynamically add an 'ok' button to my custom alertbox but, it seems that when it is called, it does not appear. I am at a lost. I am unsure as to what I am doing wrong:
Here is the HTML markup:
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
/*--------------------------------------------------------------------------------------------------
CUSTOM ALERT BOX
--------------------------------------------------------------------------------------------------*/
#alertBox {
height: 100px;
width: 500px;
bottom: 50%;
right: 50%;
position: absolute;
font-family: tahoma;
font-size: 8pt;
visibility: hidden;
}
#alertBox_container {
background: rgb(212,208,200);
left: 50%;
padding: 10px;
top: 50%;
margin: 0;
padding: 0;
height: 100%;
border: 1px solid rgb(128,128,128);
height: 100%;
position: relative;
}
#alertBox_titlebar {
height: 22px;
width: 100%;
filter: progid:DXImageTransform.Microsoft.gradient(startColorStr=#0A246A, endColorStr=#A6CAF0, GradientType=1);
color: white;
line-height:22px;
font-weight: bold;
}
#alertBox_close {
line-height: 10px;
width: 18px;
font-size: 10px;
font-family: tahoma;
margin-top: 1px;
margin-right: 2px;
position:absolute;
top:0;
right:0;
font-weight: bold;
}
#alertBox_text {
width: 100%;
height: auto;
text-align: center;
margin-top:27px;`
}
#alertBox_div_btn {
position: relative;
height: auto;
text-align: center;
border: none;
margin-top: 7px;
visibility: hidden;
}
#button_ok {
border: 1px solid rgb(88,88,88);
font-family: tahoma;
font-size: 8pt;
height: 22px;
width: 35px;
}
</style>
<script type="text/javascript">
//alertBox('text','ok')
function alertBox(text,x) {
if (x == 'ok') {
document.getElementById('alertBox_div_btn').innerHTML = '<input id="button_ok" type="button" value="OK" onclick="alertBox_hide()">'
}
document.getElementById('alertBox_text').innerHTML = text
document.getElementById('alertBox').style.visibility = 'visible'
}
function alertBox_hide() {
document.getElementById('alertBox_container').style.visibility = 'hidden'
}
</script>
</head>
<body onload="alertBox('this is a test','ok')">
<div id="alertBox">
<div id="alertBox_container">
<div id="alertBox_titlebar"><span style="padding-left: 3px;">IMTS</span></div>
<div><input id="alertBox_close" type="button" value="X" onclick="alertBox_hide()"></div>
<div id="alertBox_text">This is some sample text that will appear here</div>
<div id="alertBox_div_btn"></div>
</div>
</div>
</div>
</body>
</html>
Your css, specifically #alertBox_div_btn, is setting the visibility of the div that contains the button to hidden.