Community resources
Community resources
- Community
- Products
- Confluence
- Questions
- html page with style tags and script tags for HTML Macro not loading as expected in confluence page
html page with style tags and script tags for HTML Macro not loading as expected in confluence page
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<style>
/* Remove the navbar's default margin-bottom and rounded borders */
.navbar {
margin-bottom: 0;
border-radius: 0;
}
/* Add a gray background color and some padding to the footer */
footer {
background-color: #f2f2f2;
padding: 25px;
}
.logoContainerCss{
cursor: pointer;
}
#myDIV {
display:none;
}
.hidingDiv{
width:90%;
padding: 50px 0;
text-align: center;
background-color: lightblue;
margin-top: 20px;
margin: 0 auto;
margin-bottom: 20px;
}
.file_multi_video{
margin: auto;
margin-top: 1%;
}
</style>
</head>
<body>
<div class="container-fluid bg-3 text-center">
<h3>Software Solutions Projects</h3><br>
<div class="row">
<div class="col-sm-3">
<p>Project1</p>
<img src="https://placehold.it/150x80?text=LOGO" onclick="myFunction()" class="img-responsive logoContainerCss" style="width:100%" alt="Image">
</div>
<div class="col-sm-3">
<p>Project2</p>
<img src="https://placehold.it/150x80?text=LOGO" onclick="myFunction()" class="img-responsive logoContainerCss" style="width:100%" alt="Image">
</div>
<div class="col-sm-3">
<p>Project3</p>
<img src="https://placehold.it/150x80?text=LOGO" onclick="myFunction()" class="img-responsive logoContainerCss" style="width:100%" alt="Image">
</div>
<div class="col-sm-3">
<p>Project4</p>
<img src="https://placehold.it/150x80?text=LOGO" onclick="myFunction()" class="img-responsive logoContainerCss" style="width:100%" alt="Image">
</div>
</div>
</div><br>
<div id="myDIV" style="text-align: center;">
<div class="hidingDiv" text-center>
<h4>Details About Project1</h4><div class="container" style="width:970px;">
<h2>List Group With Badges</h2>
<ul class="list-group">
<li class="list-group-item">New <span class="badge">12</span></li>
<li class="list-group-item">Deleted <span class="badge">5</span></li>
<li class="list-group-item">Warnings <span class="badge">3</span></li>
</ul>
</div>
<video width="400" controls>
<source src="mov_bbb.mp4" id="video_here">
</video>
<input type="file" name="file[]" class="file_multi_video" accept="video/*">
</div>
</div>
<script>
function myFunction() {
var x = document.getElementById("myDIV");
if (x.style.display == "none") {
x.style.display = "block";
} else {
x.style.display = "none";
}
}
$(document).on("change", ".file_multi_video", function(evt) {
var $source = $('#video_here');
$source[0].src=URL.createObjectURL(this.files[0]);
$source.parent()[0].load();
});
</script>
</body>
</html>
I used above html as a part of HTML Macro but i see bootstrap min.css is not loading
0 answers
- FAQ
- Community Guidelines
- About
- Privacy policy
- Notice at Collection
- Terms of use
- © 2024 Atlassian