We Keep Coding

Iframe not loading within Jquery

first time posting,
So my problem is that I was creating a layout of tabs with jQuery widgets and in them, I created a flexbox layout filled with multiple iframes
the first tab worked really well, but when I moved on to the second one the flexbox layout still worked but the iframe wasn't showing. I don't know why, I think it could be something about the jQuery not letting the iframe on the other tabs load?
$(function() {
$("#tabs").tabs();
});
.context-content .h3,
.context-content h3 {
margin-top: 5px;
margin-bottom: 0px;
margin-left: -30px;
}
.panel .context-content ol,
.panel .context-content ul {
margin-top: 0px;
margin-bottom: 0px;
}
.context-content>:last-child {
margin-bottom: 0;
margin-left: -8px;
}
.ui-widget.ui-widget-content {
border: 0px !important;
}
.ui-widget-header {
border: 0px solid !important;
background: white !important;
color: #333333;
font-weight: bold;
}
.ui-tabs .ui-tabs-nav li {
font-size: 15px;
font-weight: 700;
padding: 13px 26px;
display: block;
background: #f6f6f6;
color: #6c6c6b;
border: 1px solid #eee;
position: relative;
}
.ui-tabs .ui-tabs-panel {
display: block;
border-width: 0;
padding: 1em 3em !important;
background: none;
margin-left: -17px !important;
}
#tabs-2.ui-tabs-panel {
display: block;
border-width: 0;
padding: 1em 3em;
background: none;
margin-left: -59px !important;
}
.ui-state-active,
.ui-widget-content .ui-state-active,
.ui-widget-header .ui-state-active,
a.ui-button:active,
.ui-button:active,
.ui-button.ui-state-active:hover {
border: 0px solid;
background: #757575 !important;
font-weight: normal;
color: #ffffff;
}
/* Start FlexBox */
.container {
display: flex;
flex-flow: row wrap;
justify-content: space-around;
padding: 0;
margin: 0;
list-style: none;
}
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<span style="color: #999999;">Select (+) for more product information. Please contact your Steelcase representative for pricing information.</span>
<div id="tabs" class="ui-tabs ui-widget">
<ul class="ui-tabs-nav">
<li>Lounge Chairs</li>
<li>Sofa and Loveseats</li>
<li>Metal-Framed Ganged Units</li>
<li>Wood-Framed Gange Units</li>
<li>Modular Lounge Systems</li>
<li>Benches and Ottomans</li>
</ul>
<div id="tabs-1">
<div class="container">
<div class="flex-item">
<h3>Await by Coalesse</h3>
<iframe src="https://www.thinglink.com/card/1428458712988647426" width="400" height="400" frameborder="0" scrolling="no" data-original-width="400" data-original-height="400"></iframe>
<script async src="//cdn.thinglink.me/jse/responsive.js"></script>
</div>
<div class="flex-item">
<h3>B-Free by Steelcase</h3>
<iframe src="https://www.thinglink.com/card/1428459923062128642" width="400" height="400" frameborder="0" scrolling="no" data-original-width="400" data-original-height="400"></iframe>
<script async src="//cdn.thinglink.me/jse/responsive.js"></script>
</div>
<div class="flex-item">
<h3>Bivi Rumble Seat with Hoodie</h3>
<iframe src="https://www.thinglink.com/card/1428481989148672002" width="400" height="400" frameborder="0" scrolling="no" data-original-width="400" data-original-height="400"></iframe>
<script async src="//cdn.thinglink.me/jse/responsive.js"></script>
</div>
<div class="flex-item">
<h3>Bix by Coalesse</h3>
<iframe src="https://www.thinglink.com/card/1428484701294690306" width="400" height="400" frameborder="0" scrolling="no" data-original-width="400" data-original-height="400"></iframe>
<script async src="//cdn.thinglink.me/jse/responsive.js"></script>
</div>
<div class="flex-item">
<h3>Bob by Coalesse</h3>
<iframe src="https://www.thinglink.com/card/1428485668257923074" width="400" height="400" frameborder="0" scrolling="no" data-original-width="400" data-original-height="400"></iframe>
<script async src="//cdn.thinglink.me/jse/responsive.js"></script>
</div>
<div class="flex-item">
<h3>Coupe by Coalesse</h3>
<iframe src="https://www.thinglink.com/card/1428488537619038210" width="400" height="400" frameborder="0" scrolling="no" data-original-width="400" data-original-height="400"></iframe>
<script async src="//cdn.thinglink.me/jse/responsive.js"></script>
</div>
</div>
</div>
<div id="tabs-2">
<div class="container">
<div class="flex-item">
<h3>Product Name</h3>
<img class="alignnone size-full wp-image-4838" src="https://srn-kaiser-temp.dealerwebadmin.com/wp-content/uploads/sites/1472/2021/02/greybox.jpg" alt="" width="293" height="220" />
</div>
<div class="flex-item">
<h3>Product Name</h3>
<img class="alignnone size-full wp-image-4838" src="https://srn-kaiser-temp.dealerwebadmin.com/wp-content/uploads/sites/1472/2021/02/greybox.jpg" alt="" width="293" height="220" />
</div>
<div class="flex-item">
<h3>Product Name</h3>
<iframe src="https://www.thinglink.com/card/1429150275620306946" width="400" height="400" frameborder="0" scrolling="no" data-original-width="400" data-original-height="400"></iframe>
<script async src="//cdn.thinglink.me/jse/responsive.js"></script>
</div>
<div class="flex-item">
<h3>Product Name</h3>
<img class="alignnone size-full wp-image-4838" src="https://srn-kaiser-temp.dealerwebadmin.com/wp-content/uploads/sites/1472/2021/02/greybox.jpg" alt="" width="293" height="220" />
</div>
</div>
</div>
<div id="tabs-3" style="display: none;">
<div class="container">
<div class="flex-item">
<h3>Product Name</h3>
<img class="alignnone size-full wp-image-4838" src="https://srn-kaiser-temp.dealerwebadmin.com/wp-content/uploads/sites/1472/2021/02/greybox.jpg" alt="" width="293" height="220" />
</div>
<div class="flex-item">
<h3>Product Name</h3>
<iframe src="https://www.thinglink.com/card/1429150275620306946" width="400" height="400" frameborder="0" scrolling="no" data-original-width="400" data-original-height="400"></iframe>
<script async src="//cdn.thinglink.me/jse/responsive.js"></script>
</div>
</div>
</div>
<div id="tabs-4" style="display: none;">
tabs-4 content
</div>
<div id="tabs-5" style="display: none;">
tabs-5 content
</div>
<div id="tabs-6" style="display: none;">
tabs-6 content
</div>
</div>
I have very little knowledge of javascript, any help would be appreciated, thanks!!
btw here's how it looks the second tab with the iframe
Iframe space
PS I just realized this after finishing the question if I put the id in the URL "/#tabs-2"
it will take me to that tab and the iframe will load and the page will keep loading
[enter image description here][2]
[2]: https://i.stack.imgur.com/nutip.png
I guess I really don't know what I'm doing, thank you for your help, also all of this is made on WordPress

Well it actually worked. Place the script only once on the body
Try to run this file and it worked
<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
rel="stylesheet"
href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"
/>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
</head>
<body>
<iframe
src="https://www.thinglink.com/card/1428458712988647426"
width="400"
height="400"
frameborder="0"
scrolling="no"
data-original-width="400"
data-original-height="400"
webkitallowfullscreen
mozallowfullscreen
allowfullscreen
></iframe>
<iframe
src="https://www.thinglink.com/card/1428459923062128642"
width="400"
height="400"
frameborder="0"
scrolling="no"
data-original-width="400"
data-original-height="400"
webkitallowfullscreen
mozallowfullscreen
allowfullscreen
></iframe>
<script async src="//cdn.thinglink.me/jse/responsive.js"></script>
</body>
</html>

Auto-sizing text to fit image container using JS in HTML

I am trying to autosize text (labelled: CONTENT) to fit in image containers (Dialogue4.png) using a JS script called textFit. The problem is I cannot get the JS script to run and am getting no change in text size.
My html is as follows:
<!DOCTYPE html>
<html>
<head>
<title> Home Page </title>
<meta charset="UTF-8">
<script src="textFit.js"></script>
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Quantico&display=swap" rel="stylesheet">
<link href="main.css" rel="stylesheet" type="text/css"/>
</head>
<body>
<div class="banner">
<video autoplay="" muted="false" loop="">
<source src="Media/BackgroundClip.mp4" type="video/mp4">
</video>
<div id="scrollarea" class="content">
<div class="content-wrapper">
<div class="textbox"> <img src="Media/Dialogue4.png"> </div>
<div class="text-wrapper">
<div id="container" style="width:100%;height:auto">
<p>
CONTENT CONTENT CONTENT
</p>
</div>
</div>
</div>
</div>
</div>
<script>
function doFit(){
textFit(document.getElementById('container'), {maxFontSize: 200});
}
</script>
</body>
</html>
Any advice would be seriously appreciated as I am at the bottom of a deep-dive trying to figure it out.
Thanks for your time and have a happy new year.
Betty.

Here is a demo:
(I simplified your HTML and made sure the element that contains the text has a defined width&height)
textFit(document.querySelector('.text-wrapper'), {
maxFontSize: 200,
alignHoriz: true,
alignVert: true
});
body {
font-family: sans-serif;
}
.content-wrapper {
background-size: cover;
background-position: center;
background-repeat: no-repeat;
border: 1px solid blue;
width: 60%;
height: 250px;
display: block;
}
.text-wrapper {
display: block;
width: 100%;
height: 100%;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/textfit/2.4.0/textFit.min.js"></script>
<div class="banner">
<div id="scrollarea" class="content">
<div class="content-wrapper" style="background-image: url('https://i2.wp.com/digital-photography-school.com/wp-content/uploads/2019/05/joseph-barrientos-49318-unsplash-e1558728034701.jpg')">
<div class="text-wrapper">
CONTENT CONTENT CONTENT
</div>
</div>
</div>
</div>

particle.js longer for fullpage.js scrolling

I got this problem that I've been trying to solve for quite a while. Ideally, I would love particles.js to have its "spawn box" stretch down to the bottom the page (7 x viewport as calculated by fullpage.js) so that when scrolling down with fullpage.js, the whole page's content just moves up one slide (hence having particles.js covering the entire height of the website from top to bottom)
This is what I got so far:
CODE
body, html {
margin: 0;
padding: 0;
}
#container {
max-width: inherit;
background: rgb(111, 210, 255);
}
#particles-js {
width: 100%;
height: 100%;
}
.logo {
position: absolute;
top: 50%;
left: 50%;
width: 256px;
height: 256px;
margin-top: -128px;
margin-left: -128px;
z-index: 2;
}
canvas {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1;
}
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="author" content="PachiSquid">
<title>PachiSquid</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<link href="https://raw.githubusercontent.com/alvarotrigo/fullPage.js/master/jquery.fullPage.css" rel="stylesheet" type="text/css">
<script src="https://raw.githubusercontent.com/alvarotrigo/fullPage.js/master/jquery.fullPage.js"></script>
<script src="https://raw.githubusercontent.com/VincentGarreau/particles.js/master/particles.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#fullpage').fullpage({
anchors: ['home', 'release', 'about', 'music', 'live', 'shop', 'contact'],
scrollingSpeed: 1000,
})
})
</script>
</head>
<body id="container">
<ul id="menu">
<li data-menuanchor="home">HOME</li>
<li data-menuanchor="release">RELEASE</li>
<li data-menuanchor="about">ABOUT</li>
<li data-menuanchor="music">MUSIC</li>
<li data-menuanchor="live">LIVE</li>
<li data-menuanchor="shop">SHOP</li>
<li data-menuanchor="contact">CONTACT</li>
</ul>
<div id="fullpage">
<div id="particles-js">
<canvas class="particles-js-canvas-el" style="width: 100%; height: 100%;"></canvas>
</div>
<div class="section active" id="section1">
<div class="intro">
<img class="logo" src="https://gdurl.com/7GCM">
</div>
</div>
<div class="section" id="section2">
<div class="intro">
<p>
Release
</p>
</div>
</div>
<div class="section" id="section3">
<div class="intro">
<p>
About
</p>
</div>
</div>
<div class="section" id="section4">
<div class="intro">
<p>
Music
</p>
</div>
</div>
<div class="section" id="section5">
<div class="intro">
<p>
Live
</p>
</div>
</div>
<div class="section" id="section6">
<div class="intro">
<p>
Shop
</p>
</div>
</div>
<div class="section" id="section7">
<div class="intro">
<p>
Contact
</p>
</div>
</div>
</div>
<script>
particlesJS("particles-js",{"particles":{"number":{"value":13,"density":{"enable":true,"value_area":1000}},"color":{"value":"#ffffff"},"shape":{"type":"image","stroke":{"width":0,"color":"#000000"},"polygon":{"nb_sides":5},"image":{"src":"https://gdurl.com/0VzA","width":100,"height":100}},"opacity":{"value":0.5,"random":false,"anim":{"enable":false,"speed":1,"opacity_min":0.1,"sync":false}},"size":{"value":41.6,"random":true,"anim":{"enable":false,"speed":40,"size_min":0.1,"sync":false}},"line_linked":{"enable":false,"distance":150,"color":"#ffffff","opacity":0.4,"width":1},"move":{"enable":true,"speed":0.6,"direction":"top","random":false,"straight":false,"out_mode":"out","bounce":false,"attract":{"enable":false,"rotateX":600,"rotateY":1200}}},"interactivity":{"detect_on":"window","events":{"onhover":{"enable":false,"mode":"grab"},"onclick":{"enable":false,"mode":"push"},"resize":true},"modes":{"grab":{"distance":400,"line_linked":{"opacity":1}},"bubble":{"distance":400,"size":40,"duration":2,"opacity":8,"speed":3},"repulse":{"distance":200,"duration":0.4},"push":{"particles_nb":4},"remove":{"particles_nb":2}}},"retina_detect":true});
</script>
</body>
</html>

Basically my idea is: height: 100% is not working due to FullPage.js, so let's set a fixed height.
Here's your JSFiddle: https://jsfiddle.net/MrMavin/0gop9xp9/
Thanks to #Nic from How to get height of entire document with JavaScript?

Float left menu, where am I wrong?

I am working on a 960 px-design at the moment, and I am trying to do a menu in where it is supposed to be 6 "buttons" with a 5 px margin between each one. I know how to do this, and I cannot seem to find what is wrong with my code. It would be very helpful if someone could look through my code with some fresh eyes and tell me where the issue is...
http://jsfiddle.net/9tx8v/
HTML:
<!doctype html>
<html>
<head>
<title> ----- </title>
<link href="index.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="wrapper">
<header>ASDER</header>
<nav>
<div id="ett"> <img src="menu.jpg"/>
<div id="två"> <img src="menu.jpg"/>
<div id="tre"> <img src="menu.jpg"/>
<div id="fyra"> <img src="menu.jpg"/>
<div id="fem"> <img src="menu.jpg"/>
<div id="sex"> <img src="menu.jpg"/>
</nav>
<article class="art-1"> </article>
<footer> - - - - - - - - - - - - - - </footer>
</div>
</body>
</html>
CSS:
header {
width: 100%;
height: 60px;
margin-bottom: 10px;
background-color: white;
float: left;
}
nav {
width: 100%;
height: 60px;
float: left;
}
article {
width: 462px;
height: 300px;
float: left;
margin-top: 10px;
}
footer{
width: 100%;
height: 60px;
float: left;
margin-top: 10px;
}
#ett, #två, #tre, #fyra, #fem, #sex {
width: 130px;
height: 60px;
margin-left: 5px;
}
Sorry for include a shitload of unnecessary code, but I'm so fed up atm I might just include the whole thing...
Thanks in advance

How about closing your DIV's? And you need a float:left for any DIV
HTML
<nav>
<div id="ett">
<img src="menu.jpg" />
</div>
<div id="två">
<img src="menu.jpg" />
</div>
<div id="tre">
<img src="menu.jpg" />
</div>
<div id="fyra">
<img src="menu.jpg" />
</div>
<div id="fem">
<img src="menu.jpg" />
</div>
<div id="sex">
<img src="menu.jpg" />
</div>
</nav>
CSS
nav div {
float:left;
width:130px;
height:60px;
margin-left:5px;
}

First at all as a better practice keep the closing tags for </div> elements.
<div id="ett"> <img src="menu.jpg"/></div>
<div id="två"> <img src="menu.jpg"/></div>
...
Then just float each element you don't need to float the nav:
#ett, #två, #tre, #fyra, #fem, #sex {
width:130px;
height:60px;
margin-left:5px;
float:left; /* Add this*/
}
Check this Demo Fiddle

First, close your divs:
<div id="två"><img src="menu.jpg"/></div>
<div id="tre"><img src="menu.jpg"/></div>
<div id="fyra"><img src="menu.jpg"/></div>
<div id="fem"><img src="menu.jpg"/></div>
<div id="sex"><img src="menu.jpg"/></div>
Add float: left in you css:
#ett, #två, #tre, #fyra, #fem, #sex {
width:130px;
height:60px;
margin-left:5px;
float: left;
}

<nav> should contains <a> , else it is not a <nav>.
Do not forget to close your tags and adapt their display if needed on a row , sized or on top of each others :)

show-hide image onmouseover

I have 3 images on top of each other. The first one is a normal .jpg image, the second a greyscale version and the 3rd is some kind of effect i add with a transparent .png
Now what i want is that, if i move the mouse over those images, the greyscale image is hidden or replaced by another image and afterwards visible again.
The problem here is that i am a js noob, so it's kind of hard for me to find a solution ^^
my code looks something like this:
<html>
<head>
<style type="text/css">
<!--
ul li{
display: inline-table;
}
.frame{
position: relative;
height: 110px;
width: 110px;
}
.frame div{
position: absolute;
top:0px;
left:0px;
}
.effect{
background:url(images/effect.png) no-repeat;
height:110px;
width: 110px;
}
.image{
height:100px;
width:100px;
border: 1px solid red;
margin:4px;
}
.greyscale{
height:100px;
width:100px;
border: 1px solid red;
margin:4px;
}
-->
</style>
</head>
<body>
<ul>
<li>
<div class="frame">
<div class="image"><img src="images/pic1.jpg" height="100" width="100"></div>
<div class="greyscale"><img src="images/grey1.jpg" height="100" width="100"></div>
<div class="effect">qwert</div>
</div>
</li>
<li>
<div class="frame">
<div class="image"><img src="images/pic2.jpg" height="100" width="100"></div>
<div class="greyscale"><img src="images/grey2.jpg" height="100" width="100"></div>
<div class="effect">qewrt</div>
</div>
</li>
</ul>
</body>
</html>
would be super-awesome if someone can help me out :)

Try this:
.frame:hover .greyscale { display: none; }

Try adding this to you're css:
div.greyscale:hover img { display: none; }
This will hide you're image if you hover over the greyscale div.

Look into this example,
Here I have a big image on the top and 3 images below.
On mouse hover sll 3 images they will replace big one. on mouse out old image will come back
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title><br />
</head>
<body>
<p>
<script type="text/javascript" language="javascript">
function changeImage(img){
document.getElementById('bigImage').src=img;
}
</script>
<img src="../Pictures/Bigcircle.png" alt="" width="284" height="156" id="bigImage" />
<p> </p>
<div>
<p>
<img src="../Pictures/lightcircle1.png" height=79 width=78 onmouseover="changeImage('../Pictures/lightcircle2.png')" onmouseout="changeImage('../Pictures/Bigcircle.png')"/>
</p>
<p><img src="../Pictures/lightcircle2.png" alt="" width="120" height="100" onmouseover="changeImage('../Pictures/lightcircle.png')" onmouseout="changeImage('../Pictures/Bigcircle.png')"/></p>
<p><img src="../Pictures/lightcircle3.png" alt="" width="78" height="79" onmouseover="changeImage('../Pictures/lightcircle2.png')" onmouseout="changeImage('../Pictures/Bigcircle.png')"/></p>
<p> </p>
</br>
</div>
</body>
</html>
You cam modify it in the way you need it.
Cheers..