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>
Related
I'm using Sublime Text 3 and have been attempting to make this range slider zoom in and out of a website to make it interactive to visitors. The code seems to work here, but not on Sublime Text 3.
Are there any tips on how to fix this?
var zoomer = document.getElementById('zoomer');
var spacepic = document.getElementById('spacepic');
function deepdive(){
zoomlevel = zoomer.valueAsNumber;
spacepic.style.webkitTransform = "scale("+zoomlevel+")";
pic.style.transform = "scale("+zoomlevel+")";
}
/*Image Test 1*/
#milkyway-container {
width: 100%;
font-size: 0;
border: 1px solid #111;
overflow: hidden;
margin: 0 auto;
margin-top: 2rem;
}
#spacepic {
width: 100%;
}
#zoomer {
display: block;
width: 30%;
margin: 7rem auto;
}
#media all and (max-width: 500px) {
#zoomer, #milkyway-container {
width: 85%;
}
}
<!DOCTYPE html >
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ORIGINS</title>
<link rel="stylesheet" href="style.css"
<base href="https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/">
<script>
<script src="app.js"></script>
</script>
</head>
<body>
</div>
<div id="milkyway-container">
<img src="https://images.pexels.com/photos/1252890/pexels-photo-1252890.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940" alt="Milkyway Photo" id="spacepic">
<input type="range" min="1" max="4" value="1" step="0.1" id="zoomer" oninput="deepdive()">
</div>
</body>
</html>
Can someone please look at this code and explain why this div is not resizable. I have stripped the code down to bare bones, looking for the error. There must be something obvious that I'm unaware of.
Desired Functionality:
The <div> needs to be resizable. It needs to be something a user can drag with a mouse to increase the width and height of the object.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0">
</head>
<body>
<style>
.Work{
position: relative;
width: 100%;
height: 10%;
top: calc(12.5% + 1vh);
}
.object{
position: absolute;
height: 3.7vh;
width: 12.75625vh;
border: 3px solid #4286f41a;
box-sizing: border-box;
margin-left: 1.5vh;
flex-shrink: 0;
}
</style>
<div class="Work">
<div class="object"></div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<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>>
<script>
$(document).ready(function(){
$(function(){
$(".object").resizable();
});
});
</script>
</body>
</html>
In order to make this work, you need to include jquery-ui.css as well. Also, there is no need to include two different versions of jQuery at the same time, so I will just include v3.5.1.
So your final code should be something like this:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0">
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
</head>
<body>
<style>
.Work {
position: relative;
width: 100%;
height: 10%;
top: calc(12.5% + 1vh);
}
.object {
position: absolute;
height: 3.7vh;
width: 12.75625vh;
border: 3px solid #4286f41a;
box-sizing: border-box;
margin-left: 1.5vh;
flex-shrink: 0;
}
</style>
<div class="Work">
<div class="object"></div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script>
$(document).ready(function() {
$(function() {
$(".object").resizable();
});
});
</script>
</body>
</html>
Consider the following code.
$(function() {
$(".object").resizable();
});
.Work {
position: relative;
width: 100%;
height: 10%;
top: calc(12.5% + 1vh);
}
.object {
position: absolute;
height: 3.7vh;
width: 12.75625vh;
border: 3px solid #4286f41a;
background-color: #ccc;
box-sizing: border-box;
margin-left: 1.5vh;
flex-shrink: 0;
}
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<div class="Work">
<div class="object"> </div>
</div>
You had a number of syntax errors and were missing the jQuery UI CSS. Once corrected, the code works as expected.
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
So I am trying to show some content that's inside of a div but for some reason when I use the chrome debug tools to inspect the code, it's just grayed out.
I can't see anything that's inside the class modal why is that?
#mainDiv {
margin: 10px;
}
.modal-bg {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100vh;
background-color: rgba(0, 0, 0, 0.5);
display: flex;
justify-content: center;
align-content: center;
}
.modal{
background-color: white;
width: 30%;
height: 30%;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>EasyModal</title>
<link rel="stylesheet" href="./style/styles.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
</head>
<body>
<div id="mainDiv">
<h1>Easy Modal</h1>
<Button id="modal-btn" type="button" class="btn btn-primary">Buy Now</Button>
</div>
<div class="modal-bg">
<div class="modal">
<h2>Hello World</h2>
<label for="email">Email: </label>
<input type="text">
<button>Subscribe</button>
</div>
</div>
</body>
</html>
This is due to modal class. If you inspect, you'll observe that there is a display: none; property in modal class, which i guess is default bootstrap .modal class.
To solve this, use a different name for .modal class.
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.