Develop Reference

How to position brackets and symbols relative to a form input grid?

So I'm fairly new to HTML and JS and i wanted to add some brackets and a equal sign around this grid of input forms in order to make it look more like a system of matrices. Idea: https://imgur.com/a/nH9xET2
I've tried positioning them on the CSS sheet with position absolute for each bracket but then if I change the matrix's size or resize the browser's window, it doesn't work. How would i do this in the CSS or in the HTML/Javascript file so the brackets rescale for bigger sizes and stay in the correct spot?
span {
font-family: 'Latin Modern Math';
position: absolute;
top: 228px;
vertical-align: text-top;
font-size: 56px;
}
.a1 {
position: absolute;
left: 40px;
}
.a2 {
position: absolute;
left: 618px;
}
.x1 {
position: absolute;
left: 679px;
}
.x2 {
position: absolute;
left: 780px;
}
.igual {
position: absolute;
left: 820px;
top: 220px;
vertical-align: text-top;
font-size: 58px;
}
.b1 {
position: absolute;
left: 882px;
}
.b2 {
position: absolute;
left: 982px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form action="/linear" method="post">
<div class="col-auto my-1">
<select style="margin: 15px 0px 20px;" id="dim_select" name="dim_select" class="custom-select largura" onchange="change()">
<option disabled selected>Dimension</option>
{% for i in range(3, 8) %}
<option>{{ i }}</option>
{% endfor %}
</select>
</div>
<!-- MATRIZ A GERADA POR JS -->
<div id="matrizAcontainer">
</div>
<script type="text/javascript">
$(document).ready(function() {
grid(3, 3);
});
function change() {
var select = document.getElementById("dim_select");
var index = select.selectedIndex
var n = parseInt(select.value);
grid(n, n);
};
function grid(rows, cols) {
var table = '<span class="a1">[</span>';
table += "<table>";
var size = ((screen.availWidth / 2.45) / rows) + "px";
for (i = 0; i < rows; i++) {
table += '<tr class="spacing-50">';
for (j = 0; j < cols; j++) {
table += '<td>' + '<input class="matrizA" name="A' + (i + 1) + (j + 1) + '" placeholder="a' + (i + 1) + (j + 1) + '"/>' + '</td>';
}
if (i == 0) {
table += '<span class="a2">]</span>';
table += '<span class="x1">[</span>';
table += '<span class="x2">]</span>';
table += '<div class="igual">=</div>';
table += '<span class="b1">[</span>';
}
table += '<td><input class="matrizX" placeholder="x' + (i + 1) + '" disabled/></td>';
table += '<td><input class="matrizB" name="B' + (i + 1) + '" placeholder="b' + (i + 1) + '"/></td>';
table += "</tr>";
}
table += "</table>";
table += '<span class="b2">]</span>';
$("#matrizAcontainer").empty();
$("#matrizAcontainer").append(table);
$("tr").css("height", 32 + "px");
$("input").css("width", size);
$(".matrizX").css("text-align", "center");
$(".matrizX").css("margin-left", 80 + "px").css("width", 80 + "px");
$(".matrizX").css("background", "#dedddf");
$(".matrizB").css("margin-left", 120 + "px").css("width", 80 + "px");
var bracket = (32 * (rows + 1));
$("span").css("transform", "scaleY(" + (bracket / 50) + ")");
}
</script>
<button style="margin: 20px 0px 20px; width: auto;" class="btn btn-primary btn-submit" type="submit"><b>Solve</b></button>
</form>

Based on this answer.
body{
display: flex;
}
#mainDiv {
height: 100px;
width: 8px;
position: relative;
border-bottom: 4px solid black;
border-top: 4px solid black;
background: transparent;
}
#borderLeft {
border-left: 4px solid black;
position: absolute;
top: 0;
bottom: 0;
}
#borderRight {
border-left: 4px solid black;
position: absolute;
top: 0;
bottom: 0;
margin-left : 4px;
}
#mainDivRight {
height: 100px;
width: 8px;
position: relative;
border-bottom: 4px solid black;
border-top: 4px solid black;
background: transparent;
margin-left:0;
}
<div id="mainDiv">
<div id="borderLeft"></div>
</div>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
</p>
<div id="mainDivRight">
<div id="borderRight"></div>
</div>
Different idea:
Size the width and height as you wish, or set it to auto.
Use an svg image for the background.
div{
width:200px;
height:100px;
background: lightblue url("https://cdn1.iconfinder.com/data/icons/mathematics-line-3/48/113-512.png");
background-size: 100% 100%;
background-repeat: no-repeat;}
<div id="brackets">
</div>

avoid displaying several divs each on a new line (IE11)

The user can save some pictures from a list that will be stored in a div containing the thumbnails of the saved pictures. I dynamically resize the containing div to be big enough to contain all the thumbnails. As long as I use an img tag to contain the thumbnails everything works fine, as in the following screenshot:
The code I use to build the div:
currentPictures.innerHTML += "<img class='preview' id='spic" + picId + "' " +
"onclick='showImageOnCanvas(\"" + sourceImg + "\", " + picId + ")' " +
"oncontextmenu='removeSavedPicture(\"spic" + picId + "\");' " +
"src='" + sourceImg + "'> ";
css for .preview:
.preview {
cursor: pointer;
width: 80px;
height: 54px;
border: black 2px solid;
}
This is the css of the containing div (some of this values are changed programmatically according to the number of thumbnails saved):
#currentPictures {
margin: auto;
position: absolute;
top: 38px;
left: 300px;
width: 300px;
height: 320px;
z-index: 16;
background-color: #DDDDDD;
border: 1px solid #999999;
padding: 16px 16px 16px 16px;
border-radius: 6px;
font-family: arial;
text-align: center;
vertical-align: middle;
font-size: 12px;
display: none;
overflow-y: none;
overflow-x: scroll;
-ms-user-select: none;
}
Now I want to put the img in a div, in order to add some text to the picture. The problem is that as soon as I wrap the img in a div, the divs are stacked and not put next to each other, as in this screenshot:
The code:
currentPictures.innerHTML += "<div><img class='preview' id='spic" + picId + "' " +
"onclick='showImageOnCanvas(\"" + sourceImg + "\", " + picId + ")' " +
"oncontextmenu='event.preventDefault(); removeSavedPicture(\"spic" + picId + "\");' " +
"src='" + sourceImg + "'></div> ";
I tried to use different display styles on the div but with no success.
I'm pretty sure I'm missing something obvious. Thanks!

How to build a complex HTML dynamically using jquery

I am tryin to build some HTML dynamically.The HTML as a div , within which there is a table and within one of the columns of the table , there is another table.
At present ,I am using .append method of jquery,which does not seem to be working. I am getting "unable to get property of childnodes of undefined".The application only makes use of IE. Could I be pointed in the right direction. What am I doing wrong here?
$("<div style='background-color: #757575 border: 1px solid gray; ").append("MainDiv");
$("<table style='width: 100%; height: 100%'>").append("MainDiv");
$("<tr>" + "<td>" +
"<table style='width: 100%; background-color: #757575; color: white" +
";border-bottom:1px solid black;height:25px;table-layout:fixed'>" +
"<tr>" +
"<td nowrap style='width: 70px; background-color: #999999; font-weight: bold; color: black'>ID</td>" +
"<td style='width:100px;background-color: #999999; font-weight: bold; color: black'>Name</td>" +
"<td style='text-align:left;width: 90px; background-color: #999999; font-weight: bold; color: black'>Status</td>" +
"</tr>" +
"</table></td></tr></table></div>").append("MainDiv");

You could use append() like :
var container_div = $("<div>", {"style" : "background-color: #757575;border: 1px solid gray;"});
var table = $("<table>", {"style" : "width: 100%; height: 100%"}).append("<tr><td><table style='width: 100%; background-color: #757575; color: white" +
";border-bottom:1px solid black;height:25px;table-layout:fixed'>" +
"<tr>" +
"<td nowrap style='width: 70px; background-color: #999999; font-weight: bold; color: black'>ID</td>" +
"<td style='width:100px;background-color: #999999; font-weight: bold; color: black'>Name</td>" +
"<td style='text-align:left;width: 90px; background-color: #999999; font-weight: bold; color: black'>Status</td>" +
"</tr>" +
"</table></td></tr>");
container_div.append(table);
$("#MainDiv").append(container_div);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="MainDiv"></div>
Hope this helps.
NOTE : I suggest to create a class for the shared style between all tds so the code will be more readable :
var container_div = $("<div>", {"style" : "background-color: #757575;border: 1px solid gray;"});
var table = $("<table>", {"style" : "width: 100%; height: 100%"}).append("<tr><td><table style='width: 100%; background-color: #757575; color: white" +
";border-bottom:1px solid black;height:25px;table-layout:fixed'>" +
"<tr>" +
"<td style='width:70px;' class='col' nowrap>ID</td>" +
"<td style='width:100px' class='col'>Name</td>" +
"<td style='width: 90px;text-align:left;' class='col'>Status</td>" +
"</tr>" +
"</table></td></tr>");
container_div.append(table);
$("#MainDiv").append(container_div);
.col{
background-color: #999999;
font-weight: bold;
color: black
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="MainDiv"></div>

You are close but not quite there.
$('MainDiv').append('some html here')
The .append method works in such a way that you have a selector:
$('MainDiv')
This selects some DOM element that you have available to work with, you then call the .append method on it:
$('Some Selector').append('Some HTML');
this inserts the html denoted by append() as the last child element of the selector $('Some Selector'), more on this can be found here.
You might also want to consider putting all the HTML you want to add into an array of strings that you can then loop through and append each of them to some element. This isn't the best way to achieve your goal but is a good way to understand jQuery and some of it's DOM manipulation methods.

Hover effect over <a> tag is hidden and doesn't work, how do i get it to work?

I am trying to add a hover over effect on my boxes but it doesn't seem to show when you add a background color. I have added a border to the a: hover tag and when you hover over any box it does something odd. I was told that it is working, but for some reason its just hidden. The problem seems to be in my onlineBorders() function or css code.
Here is the link: http://codepen.io/duel_drawer8/pen/QNxyNq?editors=0001
CSS:
body {
background-color: #FF7A5A;
}
#rectangles {
margin: 3px;
}
.container {
margin: 0px auto;
width: 700px;
}
.name {
width: 80px;
padding-top: 25px;
font-weight: bold;
color: #00AAA0;
}
.img-responsive {
height: 70px;
}
#rectangles img {
margin-left: -15px;
}
.description {
padding-top: 25px;
color: #FCF4D9;
}
.topHeader {
border: 2px solid black;
margin: 10px;
}
.topOnline #rectangles {
background: #FFB85F;
}
.middleOffline #rectangles {
background: #462066;
}
.bottomClosed #rectangles {
background: #462066;
}
#allTypes {
background:
}
a:hover{
border: 2px solid;
}
Javascript:
function onlineBorders(url, format, status, displayLogo, displayName, infoStreaming) {
$(format).append('<div id="profilePic" class="col-xs-2">' + '<img class="img-responsive" src=' + displayLogo + '>' + '</div><div class="col-xs-3 text"><p class="name">' + displayName + '</p>' + '</div>' + '<div class="description col-xs-7">' + infoStreaming + '</div></div>' + '')
}

So if you are just trying to add a hover to the rectangles all you need to do is replace
a:hover{
border: 2px solid;
}
with
#rectangles:hover{
background-color: white;
border: 2px solid blue;
box-sizing: border-box
}
You can check it out here: http://codepen.io/gogojojo/pen/aZoxYq
Also I would try avoiding using ids when you have more than one of type of whatever. It would make much more sense to add a class rectangles to all of the boxes instead of an id.

You weren't very clear about what is "weird," but I think you just need to add this to your CSS:
a {
display:block;
}
Anchors are inline elements, so you need to make then block or inline-block for the border to display properly.
To clean up the style a little more, you can try:
a {
display:block;
padding:5px;
}
a:hover{
border: 2px solid;
padding:3px;
}
As Joseph mentioned, you have the same ID used for several elements in your HTML, which is not valid markup. An ID must be unique for the page.
My CSS above works by selecting all the anchors to apply the style, but you may consider adding a new CSS class to apply the style with.

<!DOCTYPE html>
<html>
<title>W3.CSS</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">
<body class="w3-container">
<h2>Buttons</h2>
<input type="button" class="w3-btn w3-hover-aqua" value="Input Button">
<button class="w3-btn w3-hover-red">Button Button</button>
<a class="w3-btn w3-hover-blue" href="#">Link Button</a>
<h2>Links </h2>
Hover on the link
</body>
</html>

How to add tick marks along jQuery Mobile slider

I have found a similar question asked here:
Add tick marks to jQuery slider?
But this deals with the jQuery-UI library and not jQuery Mobile, I'm not sure how well it would crossover.
What I would like to do is to add 5 tick marks along the slider rail of my jQuery Mobile slider widgets- # 0%, 25%, 50 %, 75%, 100%
How would I go about doing this?
Edit:
I have implemented Sia's solution but now there are some weird line thickness issues I am noticing.
Here is a picture of my sliders with the ticks via Sia's solution:
As you can see, some of the ticks have varying thickness and they seem to repeat in this way for each slider... The css and html for these ticks is exactly the same as Sia's answer save for the inclusion of numbers below the ticks
Here is the relevant JS code:
$(document).on("pageinit",function(){
var ticks2 = "<div class='tick' id='ticka'></div>"
ticks2 += "<div class='tick' id='tickb'></div>";
ticks2 += "<div class='tick' id='tickc'></div>";
ticks2 += "<div class='tick' id='tickd'></div>";
ticks2 += "<div class='tick' id='ticke'></div>";
ticks2 += "<div class='tick' id='tickf'></div>";
ticks2 += "<div class='tick' id='tickg'></div>";
ticks2 += "<div class='tick' id='tickh'></div>";
$("div.ui-slider-track").append(ticks2);
...
}
And the CSS:
.tick {
width: 1px;
background-color:#3388cc;
height:100%;
position:absolute;
bottom:0px;
}
#ticka{
margin-left:11.1%;
}
#tickb{
margin-left:22.2%;
}
#tickc{
margin-left:33.3%;
}
#tickd{
margin-left:44.4%;
}
#ticke{
margin-left:55.5%;
}
#tickf{
margin-left:66.6%;
}
#tickg{
margin-left:77.7%;
}
#tickh{
margin-left:88.8%;
}

Sia has given you a nice solution. In addition, you can look at this blog entry for some ideas on enhancing the slider widget (full disclosure, I wrote it):
Fun with the Slider Widget
There is an example of adding tick marks and you could also consider the example of the color DIVs with labels in the slider track. Here is a fiddle with the 2 techniques included:
DEMO
<div id="tickMarks" >
<label for="theSlider2">Slider with Tick marks:</label>
<input type="range" name="theSlider2" id="theSlider2" min="0" max="100" value="60" />
</div>
<br /><br />
<div id="tickMarks2" >
<label for="theSlider3">Slider Background Ranges:</label>
<input type="range" name="theSlider3" id="theSlider3" min="0" max="100" value="55" />
</div>
The javascript dynamically creates the background DIVs and inserts them into the slider track:
$(document).on("pagecreate", "#page1", function () {
var ticks = '<div class="sliderTickmarks "><span>0%</span></div>';
ticks += '<div class="sliderTickmarks "><span>25%</span></div>';
ticks += '<div class="sliderTickmarks "><span>50%</span></div>';
ticks += '<div class="sliderTickmarks "><span>75%</span></div>';
ticks += '<div class="sliderTickmarks "><span>100%</span></div>';
$("#tickMarks .ui-slider-track").prepend(ticks);
var colorback = '<div class="sliderBackColor color1">0-24%</div>';
colorback += '<div class="sliderBackColor color2">25-50%</div>';
colorback += '<div class="sliderBackColor color3">50-75%</div>';
colorback += '<div class="sliderBackColor color4">75-100%</div>';
$("#tickMarks2 .ui-slider-track").prepend(colorback);
});
The CSS for tickmarks leaves the DIVs transparent and adds a right border to the middle DIVS for the vertical tick marks. The inner SPANS are moved using relative poritioning to below the track. For the color DIVs, we add background colors and some corner rounding to the first and last DIVs so they match the rounding of the track:
.sliderTickmarks{
-webkit-box-sizing: border-box;
box-sizing: border-box;
height: 100%;
width: 25%;
float: left;
border-right: 1px solid #888;
}
.sliderTickmarks span{
position: relative;
left: 100%;
top: 125%;
margin-left: -10px;
font-size: 12px;
font-weight: normal;
}
.ui-slider-track > div.sliderTickmarks:first-child{
border-right: 0;
width: 0;
}
.ui-slider-track > div.sliderTickmarks:first-child span{
margin-left: -5px;
}
.ui-slider-track > div.sliderTickmarks:last-of-type{
border-right: 0;
}
.sliderBackColor{
height: 100%;
width: 25%;
float: left;
color: white;
text-align: center;
font-size: 10px;
font-weight: normal;
text-shadow: 0px 1px 2px #333;
}
.color1 { background-color: #D6AA26;}
.color2 { background-color: #93A31C;}
.color3 { background-color: #408156;}
.color4 { background-color: #30374F;}
.ui-slider-track > div.sliderBackColor:first-child{
border-top-left-radius: 0.3125em;
border-bottom-left-radius: 0.3125em;
}
.ui-slider-track > div.sliderBackColor:last-of-type{
border-top-right-radius: 0.3125em;
border-bottom-right-radius: 0.3125em;
}

This is probably not the most elegant solution but I think it's what you are looking for
Example: http://jsfiddle.net/gravitybox/5tfPj/
js
$(document).ready(function() {
$("div.ui-slider").append("<div class='tick' id='percent25'></div><div class='tick' id='percent50'></div><div class='tick' id='percent75'></div><div class='number' id='number0'>0</div><div class='number' id='number25'>25</div><div class='number' id='number50'>50</div><div class='number' id='number75'>75</div><div class='number' id='number100'>100</div>");
});
css
.tick {
width: 1px;
background-color:#999999;
height:5px;
position:absolute;
bottom:0px;
}
#number0{
margin-left:0%;
}
#percent25, #number25{
margin-left:25%;
}
#percent50, #number50{
margin-left:50%;
}
#percent75, #number75{
margin-left:75%;
}
#number100{
margin-left:100%;
}
.number {
position:absolute;
top:18px;
left:-5px;
bottom:0px;
font-size:10px;
color:#999999;
}