I was trying to create a description with an image with Bootstrap in which if the width of the screen is 500px, I want to change the class of the image so that it gets centered (it is originally on the left of the screen).
Here is my code
const mediaQuery = window.matchMedia('(min-width: 768px)')
var toonImg = document.getElementById('toonImg');
function img(e) {
if (e.matches) {
toonImg.className("rounded mx-auto d-block")
}
}
mediaQuery.addListener(img)
img(mediaQuery)
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
<link rel="stylesheet" href="main.css">
<title>Seasons</title>
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-light bg-primary">
<div class="container-fluid">
<a class="navbar-brand" href="#">CartoonPalace</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNavAltMarkup">
<div class="navbar-nav">
<a class="nav-link active" aria-current="page" href="/">Home</a>
<a class="nav-link" href="#">Pokemon</a>
<a class="nav-link" href="#">P&F</a>
</div>
</div>
</div>
</nav>
<section class="cartoon-description container">
<div class="card mb-3 bg-primary" style="max-width: 700;">
<div class="row g-0">
<div class="col-md-4">
<img id="toonImg" src="pokemon.jpg" class="" style="width:185px; margin:0; padding:0;" alt="...">
</div>
<div class="col-md-8">
<div class="card-body" style="color: #14161a">
<h5 class="card-title">Pokemon</h5>
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
</div>
</div>
</div>
</div>
</section>
<script src="script.js">
</script>
</body>
</html>
I thought I was executing the media queries wrong but when I tried to console log when the width matched, it worked completely fine. What mistake am I making here?
Here I fixed it. You had to use .classList.add method. and passing the correct arguements in the img function made it work.
const mediaQuery = window.matchMedia('(min-width: 768px)')
var toonImg = document.getElementById('toonImg');
function img(mediaQuery){
if(mediaQuery.matches){
toonImg.classList.add("rounded", "mx-auto", "d-block");
console.log('triggered!');;
}
}
mediaQuery.addListener(img);
img(mediaQuery);
Related
Pardon me if I am missing something obvious. I am using WebStorm to write a website and wanted to experiment with Bootstrap. Now the problem is that I'm pretty sure the Bootstrap's JavaScript isn't working. For example, I can't toggle a div with a "collapse" class, the Navbar "active" class isn't working as well. Here is my code. UPDATE: updated code, I should also add my javascript is working, but the bootstrap javascript isn't
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Shachar's Website</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.1/dist/css/bootstrap.min.css" rel="stylesheet">
<!-- My StyleSheet -->
<link rel="stylesheet" href="stylesheet.css">
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-dark bg-dark sticky-top">
<a class="navbar-brand text-info " href="#">Logo</a>
<button class="navbar-toggler bg-info menu-icon-container" type="button" data-toggle="collapse" data-target="#navbar-info" onclick="animateMenu(this)">
<div class="menu-icon1"></div>
<div class="menu-icon2"></div>
<div class="menu-icon3"></div>
</button>
<div class="collapse navbar-collapse" id="navbar-info">
<ul class="navbar-nav mr-auto mt-2 mt-lg-0">
<li class="nav-item active">
<a class="nav-link" href="#">Home</a>
</li>
</ul>
</div>
</nav>
Test1
<div class="collapse" id="bonus">
Test2
</div>
<div id="homepage-body" class=""></div>
<!-- Bootstrap JavaScript -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-OERcA2EqjJCMA+/3y+gxIOqMEjwtxJY7qPCqsdltbNJuaOe923+ mo//f6V8Qbsw3" crossorigin="anonymous"></script>
<!-- My JavaScript -->
<script type="text/javascript" src="./myscript.js"></script>
</body>
<script> needs to be placed before </body> and add integrity and crossorigin. In general, like this:
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-OERcA2EqjJCMA+/3y+gxIOqMEjwtxJY7qPCqsdltbNJuaOe923+ mo//f6V8Qbsw3" crossorigin="anonymous"></script>
Here is the documentation.
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed last year.
Improve this question
I am have made dropdown using bootstarap. I have added onlcick funtions in my anchor tags in dropdown. I just want make my text box readonly if one of the link is clicked on. I have used js to make text boxes read only. Please Help me to solve my problem. Below is my code:
<%# page language="java" contentType="text/html; charset=ISO-8859-1"
pageEncoding="ISO-8859-1"%>
<!DOCTYPE html>
<html>
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap CSS -->
<link
href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3"
crossorigin="anonymous">
<title>Mole Calculator | Chemistry Calculator</title>
</head>
<body>
<nav class="navbar fixed-top navbar-expand-lg navbar-dark bg-black">
<div class="container-fluid">
<a class="navbar-brand" href="#"><h4>
<b>Chemistry Calculator</b>
</h4></a>
<button class="navbar-toggler" type="button"
data-bs-toggle="collapse" data-bs-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 text-uppercase">
<li class="nav-item"><a class="nav-link active"
aria-current="page" href="/Chemistry-Calculator/">Home</a></li>
<li class="nav-item"><a class="nav-link active"
aria-current="page" href="/Chemistry-Calculator/about">About</a></li>
</ul>
</div>
</div>
</nav>
<div class="container" style="padding-top: 5%;">
<div class="card px-4 py-5" style="width: 650px;">
<div class="card-block">
<form action="/Chemistry-Calculator/Number-Of-Moles">
<div class="mb-3">
<label for="givenMass" class="form-label">Given Mass of
Substance</label> <input type="text" class="form-control" id="givenMass"
aria-describedby="emailHelp" name="givenMass"
value="${givenMass}" style="width: 600px">
</div>
<div class="mb-3">
<label for="molarMass" class="form-label">Molar Mass</label> <input
type="text" class="form-control" id="molarMass" name="molarMass"
value="${molarMass}" style="width: 600px">
</div>
<div class="mb-3">
<label for="molarMass" class="form-label">Moles</label> <input
type="text" class="form-control"
id="molarMass" name="moles" value="${moles}" style="width: 600px">
</div>
<input class="btn btn-outline-success" type="submit"
value="Calculate">
<div class="btn-group">
<button type="button" class="btn btn-success dropdown-toggle"
data-bs-toggle="dropdown" aria-expanded="false">Choose what to calculate </button>
<ul class="dropdown-menu">
<li><a class="dropdown-item" onclick="readonlyForMoles()" href="/Chemistry-Calculator/Mole-Calculator">Calculate Moles</a></li>
<li><a class="dropdown-item" onclick="readonlyForMolarMass()" href="/Chemistry-Calculator/Mole-Calculator">Calculate Molar Mass</a></li>
<li><a class="dropdown-item" onclick="readonlyForGivenMass()" href="/Chemistry-Calculator/Mole-Calculator">Calculate Given mass</a></li>
</ul>
</div>
</form>
</div>
</div>
</div>
<script
src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.bundle.min.js"
integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p"
crossorigin="anonymous"></script>
<script type="text/javascript" src="../javascript/script.js"></script>
</body>
</html>
My Java Script File:
function readonlyForGivenMass() {
var x = document.getElementById("givenMass").readOnly;
}
function readonlyForMolarMass() {
var x = document.getElementById("molarMass").readOnly;
}
function readonlyForMoles() {
var x = document.getElementById("moles").readOnly;
}
Actually this is small part of java project. Hence I have used jsp and jstl.
My file structure:
you are just assigning but declaring it, just need to make it true, so given id would be readonly, please find below snippets
<!DOCTYPE html>
<html>
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap CSS -->
<link
href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3"
crossorigin="anonymous">
<title>Mole Calculator | Chemistry Calculator</title>
</head>
<body>
<nav class="navbar fixed-top navbar-expand-lg navbar-dark bg-black">
<div class="container-fluid">
<a class="navbar-brand" href="#"><h4>
<b>Chemistry Calculator</b>
</h4></a>
<button class="navbar-toggler" type="button"
data-bs-toggle="collapse" data-bs-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 text-uppercase">
<li class="nav-item"><a class="nav-link active"
aria-current="page" href="/Chemistry-Calculator/">Home</a></li>
<li class="nav-item"><a class="nav-link active"
aria-current="page" href="/Chemistry-Calculator/about">About</a></li>
</ul>
</div>
</div>
</nav>
<div class="container" style="padding-top: 5%;">
<div class="card px-4 py-5" style="width: 650px;">
<div class="card-block">
<form action="/Chemistry-Calculator/Number-Of-Moles">
<div class="mb-3">
<label for="givenMass" class="form-label">Given Mass of
Substance</label> <input type="text" class="form-control" id="givenMass"
aria-describedby="emailHelp" name="givenMass"
value="${givenMass}" style="width: 600px">
</div>
<div class="mb-3">
<label for="molarMass" class="form-label">Molar Mass</label> <input
type="text" class="form-control" id="molarMass" name="molarMass"
value="${molarMass}" style="width: 600px">
</div>
<div class="mb-3">
<label for="moles" class="form-label">Moles</label> <input type="text" class="form-control" id="moles" name="moles" value="${moles}" style="width: 600px">
</div>
<input class="btn btn-outline-success" type="submit"
value="Calculate">
<div class="btn-group">
<button type="button" class="btn btn-success dropdown-toggle"
data-bs-toggle="dropdown" aria-expanded="false">Choose what to calculate </button>
<ul class="dropdown-menu">
<li><a class="dropdown-item" onclick="readonlyForMoles()" href="/Chemistry-Calculator/Mole-Calculator">Calculate Moles</a></li>
<li><a class="dropdown-item" onclick="readonlyForMolarMass()" href="/Chemistry-Calculator/Mole-Calculator">Calculate Molar Mass</a></li>
<li><a class="dropdown-item" onclick="readonlyForGivenMass()" href="/Chemistry-Calculator/Mole-Calculator">Calculate Given mass</a></li>
</ul>
</div>
</form>
</div>
</div>
</div>
<script
src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.bundle.min.js"
integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p"
crossorigin="anonymous"></script>
<script type="text/javascript" src="../javascript/script.js"></script>
<script>
function readonlyForGivenMass() {
document.getElementById("givenMass").readOnly = true;
document.getElementById("molarMass").readOnly = false;
document.getElementById("moles").readOnly = false;
}
function readonlyForMolarMass() {
document.getElementById("givenMass").readOnly = false;
document.getElementById("molarMass").readOnly = true;
document.getElementById("moles").readOnly = false;
}
function readonlyForMoles() {
document.getElementById("givenMass").readOnly = false;
document.getElementById("molarMass").readOnly = false;
document.getElementById("moles").readOnly = true;
}
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap CSS -->
<link
href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3"
crossorigin="anonymous">
<title>Mole Calculator | Chemistry Calculator</title>
</head>
<body>
<nav class="navbar fixed-top navbar-expand-lg navbar-dark bg-black">
<div class="container-fluid">
<a class="navbar-brand" href="#"><h4>
<b>Chemistry Calculator</b>
</h4></a>
<button class="navbar-toggler" type="button"
data-bs-toggle="collapse" data-bs-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 text-uppercase">
<li class="nav-item"><a class="nav-link active"
aria-current="page" href="/Chemistry-Calculator/">Home</a></li>
<li class="nav-item"><a class="nav-link active"
aria-current="page" href="/Chemistry-Calculator/about">About</a></li>
</ul>
</div>
</div>
</nav>
<div class="container" style="padding-top: 5%;">
<div class="card px-4 py-5" style="width: 650px;">
<div class="card-block">
<form action="/Chemistry-Calculator/Number-Of-Moles">
<div class="mb-3">
<label for="givenMass" class="form-label">Given Mass of
Substance</label> <input type="text" class="form-control" id="givenMass"
aria-describedby="emailHelp" name="givenMass"
value="${givenMass}" style="width: 600px">
</div>
<div class="mb-3">
<label for="molarMass" class="form-label">Molar Mass</label> <input
type="text" class="form-control" id="moles" name="molarMass"
value="${molarMass}" style="width: 600px">
</div>
<div class="mb-3">
<label for="molarMass" class="form-label">Moles</label> <input
type="text" class="form-control"
id="molarMass" name="moles" value="${moles}" style="width: 600px">
</div>
<input class="btn btn-outline-success" type="submit"
value="Calculate">
<div class="btn-group">
<button type="button" class="btn btn-success dropdown-toggle"
data-bs-toggle="dropdown" aria-expanded="false">Choose what to calculate </button>
<ul class="dropdown-menu">
<li><a class="dropdown-item" onclick="readonlyForMoles(event)" href="/Chemistry-Calculator/Mole-Calculator">Calculate Moles</a></li>
<li><a class="dropdown-item" onclick="readonlyForMolarMass(event)" href="/Chemistry-Calculator/Mole-Calculator">Calculate Molar Mass</a></li>
<li><a class="dropdown-item" onclick="readonlyForGivenMass(event)" href="/Chemistry-Calculator/Mole-Calculator">Calculate Given mass</a></li>
</ul>
</div>
</form>
</div>
</div>
</div>
<script
src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.bundle.min.js"
integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p"
crossorigin="anonymous"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
function readonlyForGivenMass(event) {
event.preventDefault()
var x = document.getElementById("moles").readOnly= false;
var x = document.getElementById("givenMass").readOnly= true;
var x = document.getElementById("molarMass").readOnly= false;
}
function readonlyForMolarMass(event) {
event.preventDefault()
var x = document.getElementById("molarMass").readOnly = true;
var x = document.getElementById("moles").readOnly= false;
var x = document.getElementById("givenMass").readOnly= false;
}
function readonlyForMoles(event) {
event.preventDefault()
var x = document.getElementById("molarMass").readOnly = false;
var x = document.getElementById("moles").readOnly = true;
var x = document.getElementById("givenMass").readOnly= false;
}
</script>
</body>
</html>
if you want means you can remove event.preventDefault in each function and
I hope this code will works for you. Thank you
I keep getting an indexing error while trying to add TR tags to my HTML using the innerHTML attribute. This is what the JS script looks like.
var myTbody = document.querySelector(".table");
var button = document.querySelector(".add-stock");
var input = document.querySelector(".stock-input");
button.addEventListener("click", function () {
var td = document.querySelectorAll("td");
var row = myTbody.insertRow(td.length + 1);
var cell_univeral = row.insertCell(td.length - 1);
cell_univeral.innerHTML = input.value;
});
And this is the related html document:
<!DOCTYPE html>
<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>Technical</title>
<script
src="https://code.jquery.com/jquery-3.6.0.js"
integrity="sha256-H+K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk="
crossorigin="anonymous"
></script>
<link
rel="stylesheet"
href="{{url_for('static', filename='css/technical.css')}}"
/>
<link
href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3"
crossorigin="anonymous"
/>
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<div class="container-fluid">
<a class="navbar-brand" href="/">Home</a>
<button
class="navbar-toggler"
type="button"
data-bs-toggle="collapse"
data-bs-target="#navbarNavAltMarkup"
aria-controls="navbarNavAltMarkup"
aria-expanded="false"
aria-label="Toggle navigation"
>
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNavAltMarkup">
<div class="navbar-nav">
<a class="nav-link active" href="#">Technical</a>
<a class="nav-link" href="#">Alpha-Beta</a>
<a class="nav-link" href="#">Partition</a>
<a class="nav-link disabled">More</a>
</div>
</div>
</div>
</nav>
<div class="container">
<div class="content">
<div class="top-form">
<form action='#' method="post">
<div class="mb-3">
<label for="exampleInputEmail1" class="form-label"
>Ticker Symbols</label
>
<input
type="text"
class="form-control stock-input"
id="exampleInputEmail1"
aria-describedby="emailHelp"
name="nm"
/>
<div id="symbol" class="form-text">Add stocks one at a time</div>
</div>
<div class="buttons">
<div class="add-button">
<button type="button" class="btn btn-success add-stock">Add</button>
</div>
<div class="submit-button">
<button type="submit" class="btn btn-primary submit-btn">
Submit
</button>
<div class="spinner-border my-spinner hidden" role="status">
<span class="visually-hidden">Loading...</span>
</div>
</div>
</div>
</form>
</div>
<div class="bottom-from">
<table class="table table-hover">
<thead>
<th>Symbol <span class="counter"></span></th>
</thead>
<tbody class="table-body">
</tbody>
</table>
<div class="alert alert-warning" role="alert">
It may take longer for multiple stocks
</div>
</div>
</div>
</div>
<script src="{{url_for('static', filename='script/technical.js')}}"
/></script>
</body>
</html>
Note that for the first two click events i have no problems whatsoever though i get this error when i click again
Uncaught DOMException: Index or size is negative or greater than the allowed amount
It seems like I'm trying to change the innerHTML of an item that is out of range but i honestly don't know what the actual problem is and how to fix it. Thank you for your help
Somehow i cant figure that out.
Hello everyone.
Ive got a simple frontend with a navbar and 2 Cols underneath.
left col got fixed size of 80px, and the right one got an image inside (so this image is fluid / responsive).
To add an input field over the image isnt the problem at all, but here comes my blockade.
I cant get the inputfield to be responsive to the size of the image.
So my thoughts was, to get the scale of the image and downscale the input.
something like this in JS
$(window).resize(function() {
// 1192 is the original imagewidth
let scale = $(".step:visible").width() / 1192;
let inputposition = document.getElementById(testid);
inputposition .css('transform', 'scale(' + scale + ')');
inputposition .css('transform-origin', 'top left');
});
now i thought about transform: scale(scale); on but this downscales the image too.
maybe someone of you can give me some food for thoughts.
So my goal is, that the inputfield minimizes as well reposition if the window resizes.
heres the sample code im workin with:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
<title>Test</title>
<link rel="stylesheet" href="assets/bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Montserrat:400,400i,700,700i,600,600i">
<script src="assets/js/jquery.min.js"></script>
</head>
<body>
<nav class="navbar navbar-light navbar-expand-lg bg-danger clean-navbar">
<div class="container"><a class="navbar-brand logo" >Test</a><button class="navbar-toggler" data-toggle="collapse" data-target="#navcol-1"><span class="navbar-toggler-icon"></span></button>
<div class="collapse navbar-collapse" id="navcol-1">
<ul class="nav navbar-nav ml-auto">
</ul>
</div>
</div>
</nav>
<main class="page landing-page">
<section class="clean-block clean-info dark" style="padding: 0px;">
<div class="container" style="">
<div class="row align-items-start" style="">
<div id="sidebar" class="col-1 d-md-flex flex-grow-0 flex-shrink-0 bg-danger active" style="max-width: 80px;min-width: 80px;height: 100%;padding:0px">
<ul class="list-unstyled components" style="padding:0px">
<li class="active" id="page1_li" style="position: relative; padding: 10px;">
<a onclick="function(this);" id="page1">
<img src="thumb_page1.jpg" class="img-fluid" alt="Responsive image" style="width:100%">
<div class="overlay">
<i id="overlay_page<?= $i ?>" class=""></i>
</div>
</a>
</li>
</ul>
</div>
<div class="col text-center bg-primary" style="padding: 0px;">
<form class="form-horizontal form" action="submit.php" method="post">
<div class="step " id="page1">
<div class="fullpage" style="" data-fullpage="fullpage">
<img class="img-thumbnail align-items-center" src="page1.jpg" alt="" draggable="false" contenteditable="false">
<!-- input that needs to be scaled -->
<input type="textarea" id="testid" name="testid" value="" style="position:absolute;left:100px;top:150px;width:300px;height:100px">
</div>
</div>
</form>
</div>
</div>
</div>
</section>
</main>
<script src="assets/bootstrap/js/bootstrap.min.js"></script>
</body>
</html>
With best regards.
This is really simple. Don't add position:absolute to <input> but use <div> for that.
You need a <div> with position:relative as container. Add image with classes w-100 d-block to make it responsive. Create a <div> overlay and place content inside. <input> and <textarea> with class .form-control will have width:100% by default.
/*DEMO*/body{padding:3rem}
#overlay{
position:absolute;
top:50%;
right:3rem;
left:3rem;
transform:translateY(-50%);
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
<div class="position-relative">
<img class="w-100 d-block" src="https://via.placeholder.com/400x300/007bff/ffffff" alt="">
<div id="overlay">
<input class="form-control" placeholder="Lorem Ipsum">
<hr>
<textarea class="form-control" placeholder="Lorem Ipsum"></textarea>
</div>
</div>
I have a React application running where I am getting a page from an external ASP.NET app. I will like get just a section of the page and not the complete page. I do not know if it is possible to do that. My goal is to strip just the body of the page. My page goes as follows
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Privacy Policy - DotnetApp</title>
<link rel="stylesheet" href="/lib/bootstrap/dist/css/bootstrap.min.css" />
<link rel="stylesheet" href="/css/site.css" />
</head>
<body>
<header>
<nav class="navbar navbar-expand-sm navbar-toggleable-sm navbar-light bg-white border-bottom box-shadow mb-3">
<div class="container">
<a class="navbar-brand" href="/">DotnetApp</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target=".navbar-collapse" aria-controls="navbarSupportedContent"
aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="navbar-collapse collapse d-sm-inline-flex flex-sm-row-reverse">
<ul class="navbar-nav flex-grow-1">
<li class="nav-item">
<a class="nav-link text-dark" href="/">Home</a>
</li>
<li class="nav-item">
<a class="nav-link text-dark" href="/Home/Privacy">Privacy</a>
</li>
</ul>
</div>
</div>
</nav>
</header>
<div class="container">
<main role="main" class="pb-3">
<h1>Privacy Policy</h1>
<p>Use this page to detail your site's privacy policy.</p>
</main>
</div>
<footer class="border-top footer text-muted">
<div class="container">
© 2020 - DotnetApp - Privacy
</div>
</footer>
<script src="/lib/jquery/dist/jquery.min.js"></script>
<script src="/lib/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
<script src="/js/site.js?v=4q1jwFhaPaZgr8WAUSrux6hAuh0XDg9kPS3xIVq36I0"></script>
</body>
</html>
I will like to get everything inside the <body> </body> tag. Below is my app
import * as React from 'react';
import { render } from 'react-dom';
export function setup(app) {
const connect = app.createConnector(() => fetch('https://localhost:44393/Home/Privacy').then(res => res.text()));
app.registerPage('/mypage', connect(({ data }) => {
console.log(data)
const ref = React.useRef();
var tmp = document.createElement("div");
return (<div className="Container" dangerouslySetInnerHTML={{__html:
data}}></div>)
}));
}
the data object holds the HTML page above
You can use the DOMParser interface to parse html as a DOM tree. For example:
let html = '<!DOCTYPE html><html><!-- some html --></html>'
let doc = new DOMParser().parseFromString(html, 'text/html');
let bodyHtml = doc.body.innerHTML;