Getting an iframe to align on a web page - javascript

I have two buttons set up as onclicks that use JS to connect to other pages that are internal to my website. These pages connected to only run php that is displayed in tables. This tanle data is then displayed in the iframe set up in the JS. My problem is I can't get the iframe to align using css or through styles in my html. I can move it around using css but I can't get it to line up either directly under the buttons, or in the center of the page.
<div class="center">
<button onclick="myFunction1()">Illustrators</button>
<button onclick="myFunction2()">Tech Writers</button>
</div>
<script>
var iframeExists = false;
function myFunction1() {
var x
if (!iframeExists) {
x = document.createElement("IFRAME");
iframeExists = true;
} else {
x = document.getElementsByTagName("IFRAME")[0];
}
x.setAttribute ("src", "http://www.oldgamer60.com/Project/Illustrators.php");
document.body.appendChild(x);
}
function myFunction2() {
var x;
if (!iframeExists) {
x = document.createElement("IFRAME");
iframeExists = true;
} else {
x = document.getElementsByTagName("IFRAME")[0];
}
x.setAttribute("src", "http://www.oldgamer60.com/Project/TechWriters.php");
document.body.appendChild(x);
}
</script>
CSS
iframe {
border: 0px solid #ffffff;
margin: auto;
width: 300px;
Height: 200px;}

Try this make few changes like
HTML
<button onclick="myFunction1()">Illustrators</button>
<button onclick="myFunction2()">Tech Writers</button>
<div id="myiframe-div">
</div>
</div>
and instead of
document.body.appendChild(x);
use
document.getElementById("myiframe-div").appendChild(x);

If you want the iframe and buttons to align in the center, then have this HTML and CSS (along with your already good JavaScript):
<div class="center">
<p>
<button onclick="myFunction1()">Illustrators</button>
<button onclick="myFunction2()">Tech Writers</button>
</p>
</div>
iframe {display: block; /*new*/
margin: auto;
border: none; /*revised*/
width: 300px;
height: 200px;}
div.center p {text-align: center;} /*new*/

Related

How do I stop the moving of a button while clicking another?

The following code contains 2 buttons and their respective drop-down contents.
When I click the first button, the other moves by itself. How do I stop this from happening?
var coll = document.getElementsByClassName("button");
var i;
for (i = 0; i < coll.length; i++) {
coll[i].addEventListener("click", function() {
this.classList.toggle("active");
var content = this.nextElementSibling;
if (content.style.display === "block")
content.style.display = "none";
else
content.style.display = "block";
});
}
.content {
display: none;
}
<button type="button" class="button" style="position: static; left: 100;">For Copper Rollers</button>
<div class="content" style=" width: 48%; background-color: lightblue; padding: 10px; border-radius: 10px; margin-right: 5px; ">
</div>
<button class="button" type="button" style="position: static; left: 175px; ">For Rubber Rollers</button>
<div class="content" style="margin-left:50%; float: left; width: 48%; background-color: lightblue; padding: 10px; border-radius: 10px;">
</div>
If you assign position:absolute you can do some rudimentary calculations in Javascript to determine the position the content should appear at. Is this more or less the desired effect?
document.querySelectorAll('button').forEach(( bttn, index )=>bttn.addEventListener('click',function(e){
this.classList.toggle("active");
// get the bounding box for the button so we can
// get a suitable height offset for content
let bb=this.getBoundingClientRect();
// find the content and toggle display state
let div=this.nextElementSibling;
div.style.display=div.style.display=='block' ? 'none' : 'block';
// find the current style properties for the content
let style=getComputedStyle( div );
let bbd=div.getBoundingClientRect();
// calculate x / y positions for content
let x=( Math.ceil( bbd.width ) + parseInt( style.paddingLeft ) - parseInt( style.marginLeft ) ) * index;
let y=Math.ceil( bb.height ) + Math.ceil( bb.bottom );
// apply those positions to the content
div.style.top=`${y}px`;
div.style.left=`${x}px`;
// identify content by parent
div.textContent=this.textContent.replace('For ','');
}));
body{
width:100%;
height:100vh;
}
button.button{
padding:0.25rem;
}
/*
assign the absolute position
to the content divs but let
javascript calculate x/y positions.
*/
.content {
position:absolute;
display: none;
width: calc( 50% - 3rem );
background-color:lightblue;
padding:1rem;
border-radius:10px;
border:1px solid grey;
float:none;
clear:none;
margin:0 0.25rem;
}
.content:first-of-type{
background:pink;
}
.active{
color:green
}
<!--
let css do the styling and positioning as `inline` styles
make updating a pain in the proverbial
-->
<button type="button" class="button">For Copper Rollers</button>
<div class="content"></div>
<button class="button" type="button">For Rubber Rollers</button>
<div class="content"></div>
I would go with making the dropdown content have a position: asolute (css), that way it won't affect any other elements on the page.
PS: make sure to keep accessibility in mind when making dropdowns, your current snippet unfortunately isn't.

Replicating nested and togglable <frameset> in HTML5

I'm given to understand that the <frameset> tag is deprecated as of HTML5. Thankfully, Chrome still supports rendering it, and unfortunately, it's currently the only thing I've found that fits my use case.
The important element of the <frameset> tag that other frame-like objects lack is draggable borders, which I haven't been able to get working with iframes even with a prohibitive amount of javascript assistance.
The other important thing in my case is that one of the frames contains a button/link that causes the other frame to disappear or reappear. When that happens, the frames should resize appropriately to fill the space.
My current HTML looks like the following MCVE:
index.html
<html>
<head>
<script language="javascript">
function toggleBottomFrame() {
var bottomFrame = document.getElementById("bottomFrame");
var horizFrameset = document.getElementById("horizFrameset");
if (bottomFrame.style.display == "none") {
bottomFrame.style.display = "";
horizFrameset.rows = "*,25%";
} else {
bottomFrame.style.display = "none";
horizFrameset.rows = "*,0px";
}
}
document.toggleBottomFrame = toggleBottomFrame;
</script>
</head>
<frameset id="horizFrameset" rows="*,0px">
<frameset id="vertFrameset" cols="300px,*">
<frame id="topLeftFrame" src="buttonpage.html"></frame>
<frame id="topRightFrame"></frame>
</frameset>
<frame id="bottomFrame" style="display:none"></frame>
</frameset>
</html>
buttonpage.html
<html>
<head></head>
<body>
<button onclick="parent.frameElement.ownerDocument.toggleBottomFrame();">
</body>
</html>
This works both in the IE11 that the code was initially written for (and needs to continue to support), as well as in Chrome.
How do I implement the exact same functionality (including, most importantly, the ability to drag around the borders of the frames with my mouse to expand or shrink one of the frames) using non-deprecated functionality?
If possible, I'd like a solution in standard client-side JS or HTML, without needing to import another library like resize.js. This is meant for a very lightweight frontend, and I don't want to bloat it down with libraries I don't need.
You should be able to achieve the shrink and grown functionality using the flex layout. Below 2 approaches may work. Both the approaches has the right section and bottom section as iframe and the left section has button to show and hide the right and bottom sections.
Option 1
Using flex and using the css resize property.
Drawback is that you will need to resize using the resize button shown at the bottom right corners. The left section's bottom right corner can be used for horizontal resizing and the right section's bottom right corner can be used for vertical resizing. Note that due to the iframe contents the right section's bottom right corner resize button may not be visible, but if you bring the cursor to the bottom right you will see the cursor changing to resize and allowing you to resize.
function toggleBottom() {
if (document.getElementById('bottomFrame').clientHeight > 0) {
document.getElementById('topFrame').style.height = '100%';
} else {
document.getElementById('topFrame').style.height = '80%';
}
}
function toggleRight() {
if (document.getElementById('topRightFrame').clientWidth > 0) {
document.getElementById('topLeftFrame').style.width = '100%';
} else {
document.getElementById('topLeftFrame').style.width = '50%';
}
}
html,
body {
height: 98%;
}
.page-container {
display: flex;
flex-direction: column;
}
.container {
display: flex;
flex-direction: row;
resize: vertical;
border: 1px solid #000;
overflow: hidden;
}
.container-top {
height: 80%;
}
.container-bottom {
flex: 1 1;
overflow: hidden;
}
.container-left {
width: 30%;
border: 1px solid #000;
resize: horizontal;
overflow: hidden;
}
.container-right {
flex: 1 1;
height: 100%;
border: 1px solid #000;
overflow: hidden;
display: flex;
}
.frame-right {
flex: 1 1;
}
.frame-bottom {
flex: 1 1 100%;
border: 1px solid #000;
}
<html>
<body class="page-container">
<div class="container container-top" id="topFrame">
<div class="container-left" id="topLeftFrame">
<button onclick="toggleBottom()">Toggle Bottom</button>
<button onclick="toggleRight()">Toggle Right</button>
</div>
<div class="container-right" id="topRightFrame" >
<iframe src="https://stackoverflow.com" class="frame-right">
</iframe>
</div>
</div>
<div class="container container-bottom" id="bottomFrame">
<iframe class="frame-bottom" src="https://stackoverflow.com"></iframe>
</div>
</body>
</html>
Option 2
Using flex and using some scripting we should be able to make the whole border draggable. This is inspired from the answer in https://stackoverflow.com/a/53220241/2772300
const topRightFrame = document.getElementById("topRightFrame");
const topLeftFrame = document.getElementById("topLeftFrame");
const bottomFrame = document.getElementById("bottomFrame");
const topFrame = document.getElementById("topFrame");
const borderSize = 4;
function toggleBottom() {
if (bottomFrame.clientHeight > borderSize) {
topFrame.style.height = '100%';
} else {
topFrame.style.height = '80%';
}
}
function toggleRight() {
if (topRightFrame.clientWidth > borderSize) {
topLeftFrame.style.width = '100%';
} else {
topLeftFrame.style.width = '50%';
}
}
let mousePosition;
function resizeHorizontal(e){
const dx = mousePosition - e.x;
mousePosition = e.x;
topLeftFrame.style.width = (parseInt(getComputedStyle(topLeftFrame, '').width) - dx) + "px";
}
topRightFrame.addEventListener("mousedown", function(e){
if (e.offsetX < borderSize) {
mousePosition = e.x;
document.addEventListener("mousemove", resizeHorizontal, false);
}
}, false);
document.addEventListener("mouseup", function(){
document.removeEventListener("mousemove", resizeHorizontal, false);
}, false);
function resizeVertical(e){
const dy = mousePosition - e.y;
mousePosition = e.y;
topFrame.style.height = (parseInt(getComputedStyle(topFrame, '').height) - dy) + "px";
}
bottomFrame.addEventListener("mousedown", function(e){
if (e.offsetY < borderSize) {
mousePosition = e.y;
document.addEventListener("mousemove", resizeVertical, false);
}
}, false);
document.addEventListener("mouseup", function(){
document.removeEventListener("mousemove", resizeVertical, false);
}, false);
html,
body {
height: 98%;
}
.page-container {
display: flex;
flex-direction: column;
}
.container {
display: flex;
flex-direction: row;
overflow: hidden;
}
.container-top {
height: 80%;
}
.container-left {
width: 50%;
overflow: hidden;
height: 100%;
}
.container-right {
flex: 1 1;
height: 100%;
overflow: hidden;
display: flex;
padding-left: 4px;
background-color: #ccc;
cursor: ew-resize;
}
.frame-right {
flex: 1 1;
}
.container-bottom {
flex: 1 1;
overflow: hidden;
padding-top: 4px;
background-color: #ccc;
cursor: ns-resize;
}
.frame-bottom {
flex: 1 1 100%;
}
iframe {
border: 0;
}
<html>
<body class="page-container">
<div class="container container-top" id="topFrame">
<div class="container-left" id="topLeftFrame">
<button onclick="toggleBottom()">Toggle Bottom</button>
<button onclick="toggleRight()">Toggle Right</button>
</div>
<div class="container-right" id="topRightFrame" >
<iframe src="https://stackoverflow.com" class="frame-right">
</iframe>
</div>
</div>
<div class="container container-bottom" id="bottomFrame">
<iframe class="frame-bottom" src="https://stackoverflow.com"></iframe>
</div>
</body>
</html>
Have you looked a Golden Layout to do the resizing? You could then place iframes inside to match the size of the containing div.
Sorry this not a more complete answer, but though this might be an area worth exploring that is not likely to come up.

How to adjust div height from auto to content height first and then fill it with content, not the other way around?

I am trying to transition the #two element from height: auto to its contents height.
Based on this, I have came up with the below code.
It works, but there is an unpleasant side-effect: the content will be created first and only then parent div will start to adapt its width.
How can I correct that? I am also open to pure CSS, non-JS solutions.
let fill_button = document.getElementById('fill')
let div_to_fill = document.getElementById('two')
fill.addEventListener('click', function() {
fill_parent_with_some_content(div_to_fill)
})
function fill_parent_with_some_content(parent) {
let content_height = '200px'
// create new element
let content = document.createElement('div')
content.style.margin = '0'
content.style.height = content_height
content.style.width ='300px'
content.style.background = 'orange'
// height transition from auto
parent.style.height = getComputedStyle(parent).height
parent.style.transition = 'height 2s ease-in-out'
parent.offsetHeight // force repaint
parent.style.height = content_height
parent.appendChild(content)
}
#one, #two, #three {
background: white;
border: 1px solid black;
margin-top: 10px;
padding: 0;
}
#one, #three {
height: 100px;
}
#two {
height: auto;
}
<!DOCTYPE HTML>
<html>
<head>
</head>
<style>
</style>
<body>
<button id="fill">Fill second div with some content</button>
<div id="one"></div>
<div id="two"></div>
<div id="three"></div>
</body>
</html>

Smooth scroll div id to div id not working?

Hi im building a website, now i am trying to make when u click on a div u smooth scroll to the other div but it is not working here is the code i am using:
<script>
$("#knop").click(function() {
$('html, body').animate({
scrollTop: $("#nieuws").offset().top
}, 2000);
});
</script>
The two divs:
<div class="nieuwsbrief" id="knop" style="text-align:center; cursor: pointer;">BLIJF OP DE HOOGTE<br> MET ONZE NIEUWSBRIEF</div>
<div id="nieuws"></div>
Thank you!
Here is an approach to vertically scrolling backwards and forwards between two divs, using plain vanilla javascript:
var div1 = document.getElementById('div1');
var div2 = document.getElementById('div2');
var verticalGapInPixels = 624;
var scrollIncrementInPixels = 2;
var numberOfIntervals = (verticalGapInPixels / scrollIncrementInPixels);
function scrollBetweenDivs() {
var i = 0;
var scrollIncrement = (this.id === 'div1' ? scrollIncrementInPixels : -scrollIncrementInPixels);
var scrollByInterval = setInterval(
function(){
window.scrollBy(0,scrollIncrement);
i++;
if (i >= numberOfIntervals) {clearInterval(scrollByInterval);}
},1
);
}
div1.addEventListener('click',scrollBetweenDivs,false);
div2.addEventListener('click',scrollBetweenDivs,false);
div {
width: 120px;
height: 120px;
margin: 12px auto 500px;
text-align: center;
border: 2px solid rgb(63,63,63);
cursor: pointer;
}
div p {
font-size: 12px;
}
#div1 {
background: rgb(191,191,191);
}
#div2 {
background: rgb(127,127,127);
}
<div id="div1">
<h2>Div 1</h2>
<p>Click to Scroll<br />Down to Div 2</p>
</div>
<div id="div2">
<h2>Div 2</h2>
<p>Click to Scroll<br />Up to Div 1</p>
</div>

Turning a div background image into a slideshow

i am trying to turn the background image of a div into a slideshow but obviously do not know how to, any help would be appreciated.
HTML:
<div class = 'Header'>
<h3>One of the UK's best <br> <span class = 'green'>paintball</span> destinations</h3>
<input type = 'button' class = 'Book_Here' value = 'Book Here'>
</div>
CSS:
.Header {
background-image: url(../IMG/Header.png);
background-size: cover;
width: 100%;
height: 720px;
text-align: center;
}
.Header h3 {
padding-top: 200px;
color: #ffffff;
font-size: 50pt;
font-style: italic;
margin-bottom: 50px;
}
Here's an example of a slideshow using the <img> HTML tag, instead of linking the image through CSS. This will require you to put an <img> tag in your .header <div> and link that tag to the first image in your slideshow img1.jpg
HTML:
<html>
<head>
<script src="slideshow.js" type="text/javascript"></script>
<script>
window.onload = auto;
</script>
</head>
<body>
<h3>One of the UK's best <br> <span class = 'green'>paintball</span> destinations</h3>
<input type = 'button' class = 'Book_Here' value = 'Book Here'>
<img class=".header" src="../IMG/Header.png" name="header">
</body>
</html>
CSS:
.book_here, h3 {
position: absolute;
}
JavaScript:
// Change Slide in Slideshow
var Image_Number = 0;
function change_image (num) {
var image = ["../IMG/Header.png", "../IMG/img2.png", "../IMG/img3.png"];
var Image_Length = image.length - 1;
console.log(Image_Length);
Image_Number = Image_Number + num;
console.log(Image_Number);
if (Image_Number > Image_Length) {
Image_Number = 0;
}
if (Image_Number < 0) {
Image_Number = Image_Length;
}
document.header.src=image[Image_Number];
return false;
}
// Change Slide Automatically - Interval Function
function auto () {
setInterval(function(){
change_image(1);
}, 3000);
}

Categories

Resources