Static dropdown-menu doesn't work in Bootstrap - javascript

I would like to have a menu on my admin panel to navigate through the different functionalities an admin has on my website. I am using bootstrap and I found a static menu code snippet (so no dropdown) in the documentation: https://getbootstrap.com/docs/4.4/components/dropdowns/#menu-items
I am pretty sure my jquery, popper and boostrap js files work because my navbar works flawlessly. Am I doing something totally wrong here? You'll find the exact snippet of the bootstrap documentation in the body of my html.
Thanks
<!DOCTYPE html>
<html lang="nl">
<head>
<!-- Required meta tags -->
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
<!-- Bootstrap CSS -->
<link rel="stylesheet" href=./../dependencies/bootstrap/css/bootstrap.css />
<!-- Custom CSS (always after bootstrap) -->
<link rel="stylesheet" href=./../dependencies/css/style.css />
<title>Admin - Paneel</title>
</head>
<body>
<div class="dropdown-menu">
<span class="dropdown-item-text">Dropdown item text</span>
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
<script src=./../dependencies/jquery/jquery-3.4.1.js></script>
<script src=./../dependencies/bootstrap/js/bootstrap.bundle.js></script>
</body>
</html>


your dropdown-menu div should wrap in a
dropdown div
having a button 🔳
<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenu2" data-toggle="dropdown">
Dropdown
</button>
<!-- your drop down gose here -->
</div>
<div class="dropdown">
<button class="dropdown-item" type="button">Action</button>
<button class="dropdown-item" type="button">Another action</button>
<button class="dropdown-item" type="button">Something else here</button>
</div>

Related

Bootstrap 5: Error when showing dropdown via JavaScript

I'm trying to show a dropdown via JS. Unfortunately it seems like there's a bug in Bootstrap 5.
In this example code, showing the modal works, but showing the dropdown throws an exception: Uncaught TypeError: Cannot read property 'classList' of undefined at _e.show (dropdown.js:140)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta3/dist/css/bootstrap.min.css">
</head>
<body>
<div id="testDropdown" class="dropdown">
<button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown">
Dropdown button
</button>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
</ul>
</div>
<div id="testModal" class="modal" tabindex="-1">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Modal title</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal"></button>
</div>
<div class="modal-body">
<p>Modal body text goes here.</p>
</div>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta3/dist/js/bootstrap.bundle.min.js"></script>
<script>
let testModal = document.getElementById("testModal");
//new bootstrap.Modal(testModal).show(); //works
let testDropdown = document.getElementById("testDropdown");
new bootstrap.Dropdown(testDropdown).show(); //doesnt work
</script>
</body>
</html>
Am I doing something wrong or is this a bug?
Thanks in advance.

The element should be the dropdown-trigger instead of the parent dropdown...
<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle" id="testDropdown" type="button" data-bs-toggle="dropdown"> Dropdown button </button>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
</ul>
</div>
Demo
Note: Bootstrap 5 includes a new auto-close option. This must be set to false in order to programmatically trigger the dropdown from outside the dropdown's parent.

I got it working without using a button:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Dropdown Test</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons#1.4.1/font/bootstrap-icons.css">
</head>
<body>
<div class="container-fluid">
<div class="row justify-content-center">
<div class="w-75 mt-2">
<div class="input-group">
<span class="input-group-text"><i class="bi bi-search"></i></span>
<input type="text" class="form-control" placeholder="Search for something">
<button class="btn btn-primary" type="button">Search</button>
</div>
<div class="dropdown">
<div data-bs-toggle="dropdown" id="DROPDOWN_SEARCH"></div>
<div class="dropdown-menu w-100">
<a class="dropdown-item" href="#">Result 1</a>
<a class="dropdown-item" href="#">Result 2</a>
<a class="dropdown-item" href="#">Result 3</a>
</div>
</div>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/js/bootstrap.bundle.min.js"></script>
<script>
let searchDropdown = new bootstrap.Dropdown("#DROPDOWN_SEARCH");
searchDropdown.show();
</script>
</body>
</html>

bootrap down button does not work even though I included all files in it

My bootstrap drop down button does not work properly even I included all libraries javascript and popper files which I downloaded through npm.
<!DOCTYPE html>
<html lang="en">
<head>
<title>three grid </title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no">
<link rel="stylesheet" type="text/css" href="css/bootstrap.css">
<link rel="stylesheet" href="css/bootstrap.min.css">
</head>
<body>
<div class="container">
<br><br><br>
<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle" type="button" data-toggle="dropdown">
Dropdown button
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</div>
</div>
<script src="js/jquery.min.js type=text/javascript"></script>
<script src="popper/popper.min.js type=text/javascript"></script>
<script src="js/bootstrap.min.js type=text/javascript"></script>
</body>
</html>

check your Js or jQuery file it will fix your problem.
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<link rel="stylesheet" href="style.css">
<title>three grid </title>
</head>
<body>
<div class="container">
<br><br><br>
<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle" type="button" data-toggle="dropdown">
Dropdown button
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</body>
</html>

it works here my guess is there might be some error in the linking of the downloaded files try linking bootstrap through CDN and try again.

How to initialize tooltip with popper.js and bootstrap

I am using bootstrap tooltip as explained # https://getbootstrap.com/docs/4.3/components/tooltips/
I have successfully created tooltip but tooltip is appearing un-formatted. I believe this is because the tooltip is not getting initialized. I have the code added as shown on the page below.Tried initialization code at different places on page as well.
<!-- # TBD - Make this page look like https://getbootstrap.com/docs/4.0/examples/sign-in/ -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="">
<meta name="author" content="Martious">
<link rel="shortcut icon" href="/static/favicon.ico">
<title>Start Your Data Science Journey Here...</title>
<!-- Bootstrap Core CSS -->
<link href="/static/css/bootstrap.min.css" rel="stylesheet">
<!-- Additional Custom Style CSS -->
<link href="/static/css/starter-template.css" rel="stylesheet">
<link href="/static/open-iconic/font/css/open-iconic-bootstrap.css" rel="stylesheet">
</head>
<body>
<!--
<nav class="navbar navbar-expand-md navbar-dark bg-dark fixed-top">
-->
<nav class="navbar navbar-expand-md navbar-dark fixed-top" style="background-color: #00aeef;">
<a class="navbar-brand" href="/"> Martious Data Science Hub </a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExampleDefault" aria-controls="navbarsExampleDefault" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarsExampleDefault">
<ul class="navbar-nav mr-auto">
<li class="nav-link inactive">
&nbsp
</li>
<!--
<li class="nav-link inactive">
|
</li>
<li class="nav-item active">
<a class="nav-link" href="#"><i class="fa fa-minus-circle"></i> Score Card</a>
</li>
-->
</ul>
<ul class="navbar-nav navbar-right">
<li class="nav-item active">
<a class="nav-link" href="#">Welcome, "Test User!"<span class="sr-only">(current)</span></a>
</li>
<li class="nav-link inactive">
|
</li>
<!--
<li class="nav-item active">
<a class="nav-link" href="#"> <i class="fa fa-user"></i> My Profile <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item active">
<a class="nav-link" href="#"> <i class="fa fa-user"></i> My Team <span class="sr-only">(current)</span></a>
</li>
-->
<li class="nav-item active">
<a class="nav-link" href="/authorization/logout/"> <i class="fa fa-sign-out"></i> Logout <span class="sr-only">(current)</span></a>
</li>
</ul>
</div>
</nav>
<script>
$(function () {
$('[data-toggle="tooltip"]').tooltip()
});
</script>
<div class="mx-auto" style="max-width: 70%">
<div class="container text-center text-muted">
<div class="container align-middle">
<BR><BR><BR>
<div class="display-4">Sentiment Analysis
<!-- <span class="text-warning"><small>ⓘ</small></span>-->
<button type="button" class="btn btn-secondary" data-toggle="tooltip" data-html="true" data-placement="right" title="<b>Upload a text (*.txt) file to analyze sentiment using Vader algorithm</b>">
<span class="oi oi-info" aria-hidden="true"></span>
</button>
</div>
</div>
</div>
</div>
<!-- https://www.npmjs.com/package/bs-custom-file-input -->
<script src="/static/js/bs-custom-file-input.min.js"></script>
<script>
bsCustomFileInput.init();
</script>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
crossorigin="anonymous"></script>
<!--
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"
integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1"
crossorigin="anonymous"></script>
-->
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.bundle.min.js"
integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM"
crossorigin="anonymous"></script>
</body>
</html>
Tooltip style is not picked up as shown on bootstrap page.
Tooltip Rendered
Expected Tooltip
I cannot find what is wrong with code. Looking for help...

I was able to fix this issue by adding bootstrap import in head
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="">
<meta name="author" content="Martious">
<link rel="shortcut icon" href="/static/favicon.ico">
<title>Start Your Data Science Journey Here...</title>
<!-- Bootstrap Core CSS -->
<link href="/static/css/bootstrap.min.css" rel="stylesheet">
<!-- Additional Custom Style CSS -->
<link href="/static/css/starter-template.css" rel="stylesheet">
<link href="/static/open-iconic/font/css/open-iconic-bootstrap.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
This is NOT as per bootstrap recommendation (https://getbootstrap.com/docs/4.3/getting-started/introduction/#starter-template), but it works.
The fix came from code described # https://www.w3schools.com/bootstrap4/bootstrap_tooltip.asp

I suggest you to just use the bundle Popper + Bootstrap: bootstrap.bundle.min.js or bootstrap.bundle.js. That should bypass any problem you may have with correct file order initialization. I mean, whether you place your files in header and/or body (in my case, it worked after placing the bundle at the bottom of the body, before closing the body tag).
https://getbootstrap.com/docs/5.1/components/tooltips/#overview
And remember to initialize the tooltips correctly from your local scripts:
https://getbootstrap.com/docs/5.1/components/tooltips/#example-enable-tooltips-everywhere
This Vanila JS code should be enough for that:
var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'))
tooltipTriggerList.map(function (tooltipTriggerEl) {
return new bootstrap.Tooltip(tooltipTriggerEl)
})
By the way, I placed this code after the aforementioned bundle.

Howto get content displayed in main section of html5 page using Bootstraps navbar

after spending days of my life searching a solution for problem above I try to ask here my first question hoping somebody could help me.
I am a newbie using bootstrap 4.0 which is normal quite easy ;-) but I am also a newbie in Javascript, however I like to develop my first own webpage in HTML5 with a simple layout like
- Header
- Main
- Footer
My decision was to use native Bootstrap no php, Typo3, Wordpress or anything else and I like DRY (Don't Repeat Yourself). If necessary for the solution my sample problem below maybe JS, jquery, ajax ... could be used but if possible no solution like using php etc. And I would no switch back to nav-tabs.
The main problem I have is how could I get the content of a external html-file loaded into the main area of the index.html file depending in the navbar items ? Means if I click in the navbar on Blog I would like to load the content from html/blog.html same for Action 1..3
Please notice html import is also not possible because Firefox has no plans to support it
Here is the simple coding with modification used from a original bootstrap example
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>My Testpage</title>
<!-- Bootstrap core CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
</head>
<header>
<!-- A header picture here -->
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<!-- <a class="nav-item active nav-link" href="#">Home <span class="sr-only">(current)</span></a>
<a class="nav-item nav-link" href="#" id="id_blog">Blog</a> -->
<a class="nav-item active nav-link" href="#" id="home" data-src="html/home.html">Home <span class="sr-only">(current)</span></a>
<a class="nav-item nav-link" href="#" id="blog" data-src="html/blog.html">Blog</a>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Dropdown </a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<!-- <a class="dropdown-item" href="#" id="id_action1">Action1</a>
<a class="dropdown-item" href="#" id="id_action2">Action2</a>
<a class="dropdown-item" href="#" id="id_action3">Action3</a>
-->
<a class="dropdown-item" href="#" id="act1" data-src="html/act1.html">Action1</a>
<a class="dropdown-item" href="#" id="act2" data-src="html/act2.html">Action2</a>
<a class="dropdown-item" href="#" id="act3" data-src="html/act3.html">Action3</a>
</div>
</li>
</ul>
</div>
</nav>
</header>
<body>
<main>
<div class="container-fluid">
<h1>My Testpage</h1>
<section id="content">
<!-- Content from other pages below html/ like loadpage.html should go in here -->
</section>
</main>
<footer class="footer" id="footer">
<!-- Some footer stuff here -->
</footer>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<script>
// Initial load of the home content refrehed after each user action on url reload page action
$("#content").load("html/home.html");
// Pages to Load on click on Navbar menu
$("a").map( function(index, element) {
// console.log( index + " " + $(this).attr('id') + " " + $(this).attr('data-src') );
$(this).on("click", function() {
if( $(this).attr('data-src') !== undefined ) {
$("#content").load($(this).attr('data-src'));
}
});
});
</script>
<!-- Optional Solution, but more work, need to maintain each menu entry
<script>
$("#home").on("click", loadContent);
$("#blog").on("click", loadContent);
$("#act1").on("click", loadContent);
$("#act2").on("click", loadContent);
$("#act3").on("click", loadContent);
function loadContent(index, value){
$("#content").load($(this).attr('data-src'));
};
</script>
-->
</body>
</html>
Help is much appreciated

did you want this? try to click the home,blog and dropdown buttons.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>My Testpage</title>
<!-- Bootstrap core CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
</head>
<header>
<!-- A header picture here -->
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<a class="nav-item active nav-link" href="#" data-src="https://cn.bing.com/images/discover?form=Z9LH">Home <span class="sr-only">(current)</span></a>
<a class="nav-item nav-link" href="#" id="id_blog" data-src="https://www.bing.com/translator/">Blog</a>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Dropdown </a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#" data-src="https://outlook.live.com/owa/?WT.mc_id=O16_BingHP?mkt=en-US">Action1</a>
<a class="dropdown-item" href="#" data-src="https://cn.bing.com/videos/trending" id="id_action2">Action2</a>
<a class="dropdown-item" href="#" data-src="https://www.office.com/?WT.mc_id=O16_BingHP">Action3</a>
</div>
</li>
</ul>
</div>
</nav>
</header>
<body>
<main>
<div class="container-fluid">
<h1>My Testpage</h1>
<section id="content">
<!-- Content from other pages below html/ like loadpage.html should go in here -->
<iframe id="iframe" frameborder="0" width="100%" height="1000px" seamless scrolling="no"></iframe>
</section>
</div>
</main>
<footer class="footer" id="footer">
<!-- Some footer stuff here -->
</footer>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<script>
window.onload = function() {
let frame = document.getElementById('iframe');
let frameSrc = document.querySelectorAll('a[data-src]');
frameSrc.forEach(function(ele) {
ele.addEventListener('click', function(event) {
console.log(event.target.getAttribute('data-src'));
frame.src = event.target.getAttribute('data-src');
}, false);
});
};
</script>
</body>
</html>

If you want to integrate three complete different websites/ webapps into one webpage you either need to use iframes or search for a complete other solution.
Using iframes is possible so it has some drawbacks. and that should not be security. That can be secured, especially within the same domain. You even can change the size of the iframe from within the iframe (you need some JS to exchange information to the outer page), so even a window resizing could be responsive up to the iframe.
The drawbacks of iframes are: no deep-links and during a page change within the iframe the scroll position of the outer page stay the same (so you will not start at the top of the iframe/ the top of the new loaded page, which is very irritating for greater forms.
I would prefer other solutions: where you can integrate all your functionality into one CMS. This should be easier to configure, update, maintain.

$(document).ready firing before the DOM is loaded

I'm working on a nav bar using Bootstrap 4.0. I have a pillbox nav bar and I wrote a javascript function to automatically detect the current page and add the active class to the right pillbox. I set the function to run when the DOM is ready but it runs before any of the HTML in the BODY is loaded. Essentially the script fails to find any elements with the 'nav-link' class at runtime and does nothing. If I add the async attribute to the script however, it works as expected.
function main () {
$nav = $('nav-link');
$('.nav-link').each( function () {
var currentPage = location.href.split("/").slice(-1);
var currentLink = $(this).attr('href').slice(2);
console.log(currentPage);
console.log(currentLink);
if (currentLink == currentPage) {
$(this).addClass('active');
} else {
$(this).removeClass('active');
}
});
}
$(document).ready(main());
This is my HTML file.
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Home</title>
<!-- Library CDNs -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script>
<!-- Custom JS -->
<script async type="text/javascript" src='checkNavActive.js'></script>
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">
<!-- Custom CSS -->
<link rel="stylesheet" href="./wikiCSS.css">
</head>
<body>
<div>
<ul class="nav nav-pills">
<li class="nav-item">
<a class="nav-link" href=".\Home.html">Home</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href=".\DryLab.html" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">DryLab</a>
<div class="dropdown-menu">
<a class="dropdown-item" href=".\DryLab.html" >DryLab</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link" href=".\WetLab.html">WetLab</a>
</li>
</ul>
</div>
<div class="container title">
<div class="row">
<div class="col text-center">
<h1>Home</h1>
</div>
</div>
</div>
</body>

Using $(document).ready(main()) calls the main() function then and there. You should be using $(document).ready(main)
function main() {
$nav = $('nav-link');
$('.nav-link').each(function() {
var currentPage = location.href.split("/").slice(-1);
var currentLink = $(this).attr('href').slice(2);
console.log(currentPage);
console.log(currentLink);
if (currentLink == currentPage) {
$(this).addClass('active');
} else {
$(this).removeClass('active');
}
});
}
$(document).ready(main);
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Home</title>
<!-- Library CDNs -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script>
<!-- Custom JS -->
<script async type="text/javascript" src='checkNavActive.js'></script>
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">
<!-- Custom CSS -->
<link rel="stylesheet" href="./wikiCSS.css">
</head>
<body>
<div>
<ul class="nav nav-pills">
<li class="nav-item">
<a class="nav-link" href=".\Home.html">Home</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href=".\DryLab.html" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">DryLab</a>
<div class="dropdown-menu">
<a class="dropdown-item" href=".\DryLab.html">DryLab</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link" href=".\WetLab.html">WetLab</a>
</li>
</ul>
</div>
<div class="container title">
<div class="row">
<div class="col text-center">
<h1>Home</h1>
</div>
</div>
</div>
</body>

You should just use $(main), which is a shorthand for $(document).ready(main).
Your syntax is executing the main function instead of passing it, that's why you experience your problem.

Categories