I am trying to read content of a .txt file, loop through the lines & display them as multiselect/ options with combobox. I have 0 knowledge in html, css & js. Please help.
This is what i have built, after googling. But I don't need an i-frame. I need multi select options.
<html>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<head>
<title>Trigger</title>
<style>
#target {
width: 300px;
height: 200px;
overflow-y: auto;
overflow-x: auto;
resize: both;
position: relative;
z-index: 2;
}
iframe {
width: 100%;
height: 100%;
border: auto;
}
</style>
</head>
<body>
<h1 style="background-color:MediumSeaGreen; border:2px solid Black; font-family:verdana;">Trigger Page</h1>
<p style="font-family:verdana;" >Please select from the below list:</p>
<iframe id='iframe' src = 'D:/allStories.txt' onload='readfile()'> </iframe>
</body>
</html>
I am expecting multiselect list
Related
I have a basic html document with a sticky header and footer. I also have a div below the header that sticks to the header because it will eventually contain some tabs above a form. I have tried to align the form below this vertically but they don't line up. The problem is the tab div does not have a scrollbar but the form does. This means the width of the form is different to the width of the tabs. I tried to set them to 70% of the width and center but, because of the scrollbar they don't line up. I've tried some javascript to get the width of the scrollbar and then add this to the current right margin but it doesn't work. You will see the form is not as wide as the tabs div. I have spent hours on this.
Also, I tried adding a margin-bottom to the form but no margin appears below the border.
$(document).ready(function () {
setFormsWidth();
});
function setFormsWidth() {
let scrollbox = document.createElement('div');
// Make box scrollable
scrollbox.style.overflow = 'scroll';
// Append box to document
document.body.appendChild(scrollbox);
// Measure inner width of box
scrollBarWidth = scrollbox.offsetWidth - scrollbox.clientWidth;
// Remove box
document.body.removeChild(scrollbox);
// Get current width of right margin, which should be 30% of the
// width of the form-panel parent (the content class).
var formPanel = document.getElementById("main-form");
// Get the current right margin and remove the px at end of number
var style = window.getComputedStyle(formPanel);
var marginRightString = style.getPropertyValue('margin-right');
var marginRight = marginRightString.slice(0,-2);
// now addthe scrollBarWidth to the right margin
var newMargin = marginRight + scrollBarWidth;
formPanel.style.marginRight = newMargin + "px";
}
html, body {
height: 100%;
margin: 0;
overflow:hidden;
}
.wrapper {
height: 100%;
display: flex;
flex-direction: column;
}
.header, .footer {
background: silver;
}
.page {
flex: 1;
overflow: auto;
background: pink;
}
.content {
background-color: green;;
}
.tabs {
width: 70%;
height: 50px;
background-color: aqua;
margin: 0 auto;
border-bottom: solid #FE6D73 7px;
}
.form-panel {
width: 70%;
height: 1000px;
background-color: #FFF;
margin: 0 auto;
overflow-y: auto;
border-bottom: solid #FE6D73 7px;
}
<!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>Document</title>
<link rel="stylesheet" href="style.css"/>
</head>
<body>
<div class="wrapper">
<div class="header">Header</div>
<div class="tabs">
THIS IS TAB
</div>
<div class="page" id="calculator">
<div style="height:1000px;">
<div class="content">
<form class="form-panel" id="main-form">THIS IS FORM</form>
</div>
</div>
</div>
<div class="footer">Footer</div>
</div>
<script type="text/javascript" src="script.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</body>
</html>
I suggest to show the scrollbar besides .form-panel element but not .page div, so it will not affect centering .form-panel element.
Here is how to change the css.
Set height to 100% for all elements between .page and .form-panel elements, including .form-panel itself, so that scrollbar for .page will not be shown
Set box-sizing: border-box; for .form-panel, so that the border is drawn inside .form-panel
move .footer outside .page element
If you would like to set a specific height for .form-panel, you can create a div inside it and set its height like below:
html, body {
height: 100%;
margin: 0;
overflow:hidden;
}
.wrapper {
height: 100%;
display: flex;
flex-direction: column;
}
.header, .footer {
background: silver;
}
.page {
flex: 1;
overflow: auto;
background: pink;
}
.content {
background-color: green;
height: 100%;
}
.tabs {
width: 70%;
height: 50px;
background-color: aqua;
margin: 0 auto;
border-bottom: solid #FE6D73 7px;
}
.form-panel {
width: 70%;
height: 100%;
background-color: #FFF;
margin: 0 auto;
overflow-y: auto;
border-bottom: solid #FE6D73 7px;
padding-bottom: 7px;
box-sizing: border-box;
}
<!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>Document</title>
<link rel="stylesheet" href="style.css"/>
</head>
<body>
<div class="wrapper">
<div class="header">Header</div>
<div class="tabs">
THIS IS TAB
</div>
<div class="page" id="calculator">
<div style="height:100%;">
<div class="content">
<form class="form-panel" id="main-form">
<div style="height:1000px">
THIS IS FORM
</div>
</form>
</div>
</div>
</div>
<div class="footer">Footer</div>
</div>
</body>
</html>
I am trying to label my picture inside a div container with a name in the h2 tag and health points on the bottom with a p tag, but its not working when I use .text. I am trying to insert the text in the js file, "Darth Vader" into the div h2 in the div container: charContainer
<!DOCTYPE html>
<html lang="en">
<head>
<title>Week 4 Game</title>
<link rel = "stylesheet" type = "text/css" href = "assets/css/reset.css">
<link rel="stylesheet" type="text/css" href="assets/css/style.css">
<!-- Added link to the jQuery Library -->
<script src="https://code.jquery.com/jquery-2.2.3.js" integrity="sha256- laXWtGydpwqJ8JA+X9x2miwmaiKhn8tVmOVEigRNtP4=" crossorigin="anonymous"></script>
<style type="text/css">
.characters
{
width: 100%;
overflow: auto;
margin-left: 50px;
}
.vade, .skywalker, .obi, .dmaul
{
width: 130px;
height: 100px;
margin-top: 30px;
margin-left: 35px;
}
.charContainer, .charContainer1, .charContainer2, .charContainer3
{
width: 200px;
height: 170px;
float: left;
border: solid;
border-color: green;
background-color: white;
}
h2
{
font-size: 50px;
width: 100%;
margin-left: 50px;
}
.your
{
width: 100%;
}
.enemies
{
width: 100%;
overflow: auto;
margin-top: 50px;
}
.c1
{
width: 100%;
font-size: 20px;
}
</style>
</head>
<body>
<div class = "characters">
<div class="charContainer">
<h2 id="c1"></h2>
<img class="vade" src="assets/images/vader.jpg">
<p class="c1hp"></p>
</div>
</div>
<div class="your">
<h2>Your Character</h2>
</div>
<div class="enemies">
<img class="dmaul" src="assets/images/maul.png">
</div>
</body>
</html>
JS File
$(document).ready(function(){
$('#c1').text("Darth Vader");
}
It's just a typo in your JS file.
Replace:
$(document).ready(function(){
$('#c1').text("Darth Vader");
}
with:
$(document).ready(function(){
$('#c1').text("Darth Vader");
});
Update 16 Oct 01:46
Your script import of the jQuery library contains an extra space between sha256- and laXWtGydpwqJ8JA+X9x2miwmaiKhn8tVmOVEigRNtP4=
You don't reference your JS file anywhere in index.html.
Add:
<script src="NAME-OF-JS-FILE.js"></script>
just before your closing </body> tag.
I've used a javaScript function to "build" a widget, call it on an HTML page and make it responsive using CSS.
Now, I've to use that same widget on an mvc.net application and i can't make it work like i want it. In the image shown bellow "aluger","venda", "compra" and "permuta" all show up in the same line, and I want them to show up on different lines. I've used display:block and nothing happend.
Those options are loaded automatic.
Can some one please help me?
CSS of DIV:
#div_maior {
display:block;
width: 100%;
height: 100%;
background-color: #ffffcc;
clear: both;
min-height: 50px;
max-height: 200px;
}
#div_global {
clear:left;
display:block;
float:left;
padding: .5%;
border-color: transparent;
height: 100%;
width: 30%;
// overflow: auto;
}
HTML OF THE WIDGET:
<html>
<head>
<title>TODO supply a title</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script type="text/javascript" src="javascript.js"></script>
<link rel="stylesheet" type="text/css" href="estilos.css"/>
</head>
<body id="body" onload="getFacetasAJAX()">
<label id="div_maior">
<label id="div_global" style="display: inline-block">
</label>
<label id="div_resultados" style="display: inline-block">
</label>
</label>
</body>
</html>
I would like to use the very excellent texteditor CodeMirror in fullscreen mode in a browser window and I would like to add a fixed header for some kind of menu - or at least space for a few buttons with some functionality.
So I've added a div with "position: fixed" to the top and added a padding-top to the div with the codemirror object. The problem comes up, when there's enough text that scrolling happens. After moving the cursor down/scrolling the content up and moving the cursor up again, the cursor goes behind the div but the content doesn't scroll fully down. Cursor is hidden, I cannot see the content. Only scrolling via scrollbar works.
Do I need to change the html/css with the fixed div?
Or do I need to check whether the cursor comes behind/under the div and I have to let CodeMirror scroll manually? I tried this but didn't manage to do it programmatically :-(
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link rel=stylesheet href="http://codemirror.net/doc/docs.css">
<link rel=stylesheet href="http://codemirror.net/lib/codemirror.css">
<script src=http://codemirror.net/lib/codemirror.js></script>
<script src=http://codemirror.net/mode/htmlmixed/htmlmixed.js></script>
<style type=text/css>
.CodeMirror {float: left; width: 100%; height: 100%; }
</style>
</head>
<body>
<div style="position: fixed; height: 28px; z-index:999; width: 100%; background: lightgray;">
<button>Some action</button>
</div>
<div style="padding-top: 23px">
<textarea id=content name="content"></textarea>
</div>
<script>
var editor = CodeMirror.fromTextArea(document.getElementById('content'), {
mode: 'application/x-httpd-php',
lineNumbers: true
});
</script>
</body>
</html>
check out here as well: http://jsfiddle.net/fxvef3bw/1/
I found a solution on my own.
Instead of two overlapping divs, I use two divs (non-overlapping), with style "position: absolute". They don't overlap, so scrolling is fine.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link rel=stylesheet href="http://codemirror.net/doc/docs.css">
<link rel=stylesheet href="http://codemirror.net/lib/codemirror.css">
<script src=http://codemirror.net/lib/codemirror.js></script>
<script src=http://codemirror.net/mode/htmlmixed/htmlmixed.js></script>
<style type=text/css>
.CodeMirror {float: left; width: 100%; height: 100%; }
</style>
</head>
<body>
<div style="padding: 1px; position: absolute; margin: 0px; top: 0px; bottom: auto; left: 0px; right: 0px; width: auto; height: 24px; background: lightgrey;">
<button>some action</button>
</div>
<div style="padding: 1px; position: absolute; margin: 0px; left: 0px; right: 0px; top: 28px; bottom: 0px; width: auto; height: auto; ">
<textarea id="content" name="content" style="display: none;"></textarea>
</div>
<script>
var editor = CodeMirror.fromTextArea(document.getElementById('content'), {
mode: 'application/x-httpd-php',
lineNumbers: true
});
</script>
</body>
</html>
Updated jsfiddle is here: http://jsfiddle.net/fxvef3bw/2/
I hope I can get some comments about possible side effects or drawbacks of the position absolute. Otherwise it seems to be fine for me.
I'm using the load method to load a webpage with in my website.
// main.js
$(document).ready(function ()
{
$("#content").html("<object data='http://tired.com/'>");
});
// index.html
<html>
<head>
<script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<script src="scripts/main.js"></script>
<style type="text/css">
#container{
width: 100%;
height: 100%;
}
#content{
margin-top: 10;
margin-left: 100;
margin-bottom: 10;
margin-right: 10;
width: 500px;
height: 500px;
}
</style>
</head>
<title>
Testing loading a html page into a div
</title>
<body>
<div id="container">
<div id="top">
<p> Top </p>
</div>
<div id="content">
</div>
<div id="bottom">
<p> Bottom </p>
</div>
</div>
</body>
</html>
In spite of giving the content div a height and width of 500px, the webpage still loads in it's original size.
How do I make it larger?
Thanks.
It does work, check this fiddle.
JSFiddle Demo Link
You also might want to add px to your margins.
#content{
margin-top: 10px;
margin-left: 100px;
margin-bottom: 10px;
margin-right: 10px;
background:skyblue;
width: 500px;
height: 500px;
padding:10px;
}
I would recommend trying to set style on the object tag itself:
#content object {
width: 500px;
height: 500px;
}