html,css,button,footer , How can I keep a group of buttons centralized on the right side of the footer?


How can I keep a group of buttons centralized on the right side of the footer?

Question:

Tag: html,css,button,footer

I've been trying to keep four buttons centralized on the right side of the footer, but it seems like the footer is set to percentage instead of pixels, I've tried to set it to percentage, but it ignores my "orders", how can I set the footer to 60px, and put the buttons on the right and centralize them vertically, I even have used flexbox, but due to my lack of knowledge on how to use it I have failed several times.

For example if you look my page on full screen, you'll notice that the buttons are not right on the vertical center, and that's what I want to do, the footer is not relevant but if you know how to set the footer to pixel, I will solve the problem of "centralizing" more easily.

If something is missing, comment, and I will provide it, whatever it is.

Thanks in advance.

$(function() {
  $("#btfirst").button({
    icons: {
      primary: "ui-icon-seek-first"
    },
    text: false
  });
  $("#btfirst").css({
    'height': '1.3em',
    'margin': '1px -1px 1px 0px'
  });

  $("#btprev").button({
    icons: {
      primary: "ui-icon-seek-prev"
    },
    text: false
  });
  $("#btprev").css({
    'height': '1.3em',
    'margin': '1px -1px 1px 0px'
  });


  $("#btnext").button({
    icons: {
      primary: "ui-icon-seek-next"
    },
    text: false
  });
  $("#btnext").css({
    'height': '1.3em',
    'margin': '1px -1px 1px 0px'
  });


  $("#btlast").button({
    icons: {
      primary: "ui-icon-seek-end"
    },
    text: false
  });
  $("#btlast").css({
    'height': '1.3em',
    'margin': '1px 1px 1px 0px'
  });

  $("body").css("overflow", "hidden");
});
html {
  width: 100%;
  height: 100%;
  overflow: hidden;
}
@font-face {
  font-family: 'agroverdanab';
  src: url('./fonts/agroverdanab.eot');
  src: local('agroverdanab'), url('./fonts/agroverdanab.ttf') format('truetype');
  font-family: 'agroverdana';
  src: url('./fonts/agroverdana.eot');
  src: local('agroverdana'), url('./fonts/agroverdana.ttf') format('truetype');
}
body {
  float: center;
  border: 1px solid #9BC2E6;
  box-sizing: border-box;
  width: 99.6%;
  height: 99.3%;
  font-family: 'agroverdana';
  font-size: 14px;
  margin: 3px;
}
.scrollingtable {
  box-sizing: border-box;
  display: inline-block;
  vertical-align: middle;
  overflow: hidden;
  width: auto;
  min-width: 100%;
  height: 98%;
  min-height: 95%;
  font-family: 'agroverdana';
  font-size: 16px;
  line-height: 20px;
  padding: 0 0 100px 0;
  text-align: left;
}
.scrollingtable * {
  box-sizing: border-box;
}
.scrollingtable > div {
  position: relative;
  border-top: 1px solid white;
  height: 100%;
  padding-top: 20px;
}
.scrollingtable > div:before {
  top: 0;
  background: #9BC2E6;
}
.scrollingtable > div:before,
.scrollingtable > div > div:after {
  content: "";
  position: absolute;
  z-index: -1;
  width: 100%;
  height: 100%;
  left: 0;
}
.scrollingtable > div > div {
  min-height: 0;
  max-height: 100%;
  overflow: scroll;
  overflow-x: hidden;
  border: 1px solid white;
}
.scrollingtable > div > div:after {
  background: white;
}
/*match page background color*/

.scrollingtable > div > div > table {
  width: 100.085%;
  border-spacing: 0;
  margin-top: -20px;
  margin-right: 1px;
}
.scrollingtable > div > div > table > caption {
  font-size: 15px;
  position: absolute;
  top: -20px;
  margin-top: -1px;
  width: 100%;
  font-weight: bold;
  text-align: center;
}
.scrollingtable > div > div > table > * > tr > * {
  padding: 0;
}
.scrollingtable > div > div > table > thead {
  vertical-align: bottom;
  white-space: nowrap;
  text-align: center;
}
.scrollingtable > div > div > table > thead > tr > * > div {
  display: inline-block;
  padding: 0 6px 0 6px;
}
.scrollingtable > div > div > table > thead > tr >:first-child:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  height: 20px;
  border-left: 1px solid #9BC2E6;
}
.scrollingtable > div > div > table > thead > tr > * > div[label]:before,
.scrollingtable > div > div > table > thead > tr > * > div > div:first-child,
.scrollingtable > div > div > table > thead > tr > * +:before {
  position: absolute;
  top: 0;
  white-space: pre-wrap;
  color: black;
}
.scrollingtable > div > div > table > thead > tr > * > div[label]:before,
.scrollingtable > div > div > table > thead > tr > * > div[label]:after {
  content: attr(label);
}
.scrollingtable > div > div > table > thead > tr > * +:before {
  content: "";
  display: block;
  min-height: 20px;
  padding-top: 1px;
  border-left: 2px solid white;
}
.scrollingtable .scrollbarhead {
  float: right;
}
.scrollingtable .scrollbarhead:before {
  position: absolute;
  width: 110px;
  top: 1px;
  background: #9BC2E6;
}
.scrollingtable > div > div > table > tbody > tr:after {
  content: "";
  display: table-cell;
  position: relative;
  padding: 0;
  border-top: 1px solid white;
  top: -1px;
}
.scrollingtable > div > div > table > tbody {
  vertical-align: top;
}
.scrollingtable > div > div > table > tbody > tr {
  background: white;
}
.scrollingtable > div > div > table > tbody > tr > * {
  border-bottom: 1px solid white;
  padding: 0 6px 0 6px;
  height: 20px;
}
.scrollingtable > div > div > table > tbody:last-of-type > tr:last-child > * {
  border-bottom: none;
}
.scrollingtable > div > div > table > tbody > tr:nth-child(even) {
  background: #DDEBF7;
}
.scrollingtable > div > div > table > tbody > tr > * + * {
  border-left: 2px solid white;
}
.scrollingtable > div:before {
  top: 0;
  background:
  /*#b4d3ed*/
  #9fc7e8
  /*#9BC2E6*/
  ;
}
.footerButton {
  width: 60px;
  height: 25px;
  margin: 3px 10px 1px 0;
  font-family: 'agroverdana';
  background-color: #D0E5F5;
  border: 1px solid #79B7E7;
  cursor: pointer;
  border-radius: 3px;
}
.footerButton:hover {
  border-width: 2px;
}
.thead_prop,
.tbody_prop {
  font-family: 'agroverdana';
  font-size: 13px;
}
#content {
  left: 1px;
  border-top: solid 1px #9BC2E6;
  border-bottom: solid 1px #9BC2E6;
  flex: 1;
}
#navbar {
  padding: 3px 4px 4px 2px
}
#navbutton {
  float: right;
}
#vpad-pesq {
  float: left;
  border: 2px solid #9BC2E6;
  padding: 1px;
}
#searching {
  font-family: 'agroverdana';
  background-color: #E1F0FD;
  border: 1px solid #C5DBEC;
  border-radius: 3px;
  padding: 2px 1px 0 1px;
}
#searching:hover {
  background-color: #D0E5F5;
  border: 1px solid #79B7E7;
  cursor: pointer;
}
#msgbar {
  border-top: solid 1px #9BC2E6;
  border-bottom: solid 1px #9BC2E6;
  height: 20px;
  background-color: #dae9f6;
}
#footer {
  text-align: right;
  border-top: solid 1px #9BC2E6;
  border-top: 0;
  max-height: 60px;
}
<!DOCTYPE html>
<!--[if lte IE 9]>
<style>.scrollingtable > div > div > table {margin-right: 17px;}</style>
<![endif]-->
<html manifest="wpadco.appcache">

<head>
  <meta content="text/html; charset=utf-8" http-equiv="Content-Type">
  <meta http-equiv="X-UA-Compatible" content="IE=Edge">
  <title>Central de Controle da Engenharia</title>
  <link rel="stylesheet" href="http://code.jquery.com/ui/1.11.4/themes/redmond/jquery-ui.css">
  <script src="http://code.jquery.com/jquery-1.10.2.js"></script>
  <script src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>




</head>

<body>
  <header style="padding-bottom:5px;text-align:center; font-family:'agroverdana';font-size:14px;">Central de Controle da Engenharia</header>

  <section id="content">
    <header id="navbar">

      <input type="text" id="vpad-pesq" />
      <select id="searching">
        <option>Código</option>
        <option>Nome</option>
      </select>

      <div id="navbutton">
        <button id="btfirst"></button>
        <button id="btprev"></button>
        <button id="btnext"></button>
        <button id="btlast"></button>
      </div>

    </header>
  </section>


  <div class="scrollingtable">
    <div>
      <div>
        <table>
          <thead>
            <tr>
              <th class="thead_prop">
                <div label="Código"></div>
              </th>
              <th class="thead_prop">
                <div label="Descrição"></div>
              </th>
              <th class="thead_prop">
                <div label="Valor1"></div>
              </th>
              <th class="thead_prop">
                <div label="Valor2"></div>
              </th>
              <th class="thead_prop">
                <div label="Valor3"></div>
              </th>
              <th class="thead_prop">
                <div label="Valor4"></div>
              </th>
              <th class="thead_prop">
                <div label="Valor5"></div>
              </th>
            </tr>
          </thead>
          <tbody>
            <tr class="tbody_prop">
              <td>001</td>
              <td>coxa c/sobrecoxa s/ osso s/ pele</td>
              <td>1.00</td>
              <td>5.00</td>
              <td>10.00</td>
              <td>10.00</td>
              <td>5.00</td>
            </tr>
            <tr class="tbody_prop">
              <td>001</td>
              <td>coxa c/sobrecoxa s/ osso s/ pele</td>
              <td>1.00</td>
              <td>5.00</td>
              <td>10.00</td>
              <td>10.00</td>
              <td>5.00</td>
            </tr>
            <tr class="tbody_prop">
              <td>001</td>
              <td>coxa c/sobrecoxa s/ osso s/ pele</td>
              <td>1.00</td>
              <td>5.00</td>
              <td>10.00</td>
              <td>10.00</td>
              <td>5.00</td>
            </tr>
            <tr class="tbody_prop">
              <td>001</td>
              <td>coxa c/sobrecoxa s/ osso s/ pele</td>
              <td>1.00</td>
              <td>5.00</td>
              <td>10.00</td>
              <td>10.00</td>
              <td>5.00</td>
            </tr>
            <tr class="tbody_prop">
              <td>001</td>
              <td>coxa c/sobrecoxa s/ osso s/ pele</td>
              <td>1.00</td>
              <td>5.00</td>
              <td>10.00</td>
              <td>10.00</td>
              <td>5.00</td>
            </tr>
            <tr class="tbody_prop">
              <td>001</td>
              <td>coxa c/sobrecoxa s/ osso s/ pele</td>
              <td>1.00</td>
              <td>5.00</td>
              <td>10.00</td>
              <td>10.00</td>
              <td>5.00</td>
            </tr>
            <tr class="tbody_prop">
              <td>001</td>
              <td>coxa c/sobrecoxa s/ osso s/ pele</td>
              <td>1.00</td>
              <td>5.00</td>
              <td>10.00</td>
              <td>10.00</td>
              <td>5.00</td>
            </tr>
            <tr class="tbody_prop">
              <td>001</td>
              <td>coxa c/sobrecoxa s/ osso s/ pele</td>
              <td>1.00</td>
              <td>5.00</td>
              <td>10.00</td>
              <td>10.00</td>
              <td>5.00</td>
            </tr>
            <tr class="tbody_prop">
              <td>001</td>
              <td>coxa c/sobrecoxa s/ osso s/ pele</td>
              <td>1.00</td>
              <td>5.00</td>
              <td>10.00</td>
              <td>10.00</td>
              <td>5.00</td>
            </tr>
            <tr class="tbody_prop">
              <td>001</td>
              <td>coxa c/sobrecoxa s/ osso s/ pele</td>
              <td>1.00</td>
              <td>5.00</td>
              <td>10.00</td>
              <td>10.00</td>
              <td>5.00</td>
            </tr>
            <tr class="tbody_prop">
              <td>001</td>
              <td>coxa c/sobrecoxa s/ osso s/ pele</td>
              <td>1.00</td>
              <td>5.00</td>
              <td>10.00</td>
              <td>10.00</td>
              <td>5.00</td>
            </tr>
            <tr class="tbody_prop">
              <td>001</td>
              <td>coxa c/sobrecoxa s/ osso s/ pele</td>
              <td>1.00</td>
              <td>5.00</td>
              <td>10.00</td>
              <td>10.00</td>
              <td>5.00</td>
            </tr>
            <tr class="tbody_prop">
              <td>001</td>
              <td>coxa c/sobrecoxa s/ osso s/ pele</td>
              <td>1.00</td>
              <td>5.00</td>
              <td>10.00</td>
              <td>10.00</td>
              <td>5.00</td>
            </tr>
            <tr class="tbody_prop">
              <td>001</td>
              <td>coxa c/sobrecoxa s/ osso s/ pele</td>
              <td>1.00</td>
              <td>5.00</td>
              <td>10.00</td>
              <td>10.00</td>
              <td>5.00</td>
            </tr>
            <tr class="tbody_prop">
              <td>001</td>
              <td>coxa c/sobrecoxa s/ osso s/ pele</td>
              <td>1.00</td>
              <td>5.00</td>
              <td>10.00</td>
              <td>10.00</td>
              <td>5.00</td>
            </tr>
            <tr class="tbody_prop">
              <td>001</td>
              <td>coxa c/sobrecoxa s/ osso s/ pele</td>
              <td>1.00</td>
              <td>5.00</td>
              <td>10.00</td>
              <td>10.00</td>
              <td>5.00</td>
            </tr>
            <tr class="tbody_prop">
              <td>001</td>
              <td>coxa c/sobrecoxa s/ osso s/ pele</td>
              <td>1.00</td>
              <td>5.00</td>
              <td>10.00</td>
              <td>10.00</td>
              <td>5.00</td>
            </tr>
            <tr class="tbody_prop">
              <td>001</td>
              <td>coxa c/sobrecoxa s/ osso s/ pele</td>
              <td>1.00</td>
              <td>5.00</td>
              <td>10.00</td>
              <td>10.00</td>
              <td>5.00</td>
            </tr>
            <tr class="tbody_prop">
              <td>001</td>
              <td>coxa c/sobrecoxa s/ osso s/ pele</td>
              <td>1.00</td>
              <td>5.00</td>
              <td>10.00</td>
              <td>10.00</td>
              <td>5.00</td>
            </tr>
            <tr class="tbody_prop">
              <td>001</td>
              <td>coxa c/sobrecoxa s/ osso s/ pele</td>
              <td>1.00</td>
              <td>5.00</td>
              <td>10.00</td>
              <td>10.00</td>
              <td>5.00</td>
            </tr>
            <tr class="tbody_prop">
              <td>001</td>
              <td>coxa c/sobrecoxa s/ osso s/ pele</td>
              <td>1.00</td>
              <td>5.00</td>
              <td>10.00</td>
              <td>10.00</td>
              <td>5.00</td>
            </tr>
            <tr class="tbody_prop">
              <td>001</td>
              <td>coxa c/sobrecoxa s/ osso s/ pele</td>
              <td>1.00</td>
              <td>5.00</td>
              <td>10.00</td>
              <td>10.00</td>
              <td>5.00</td>
            </tr>
            <tr class="tbody_prop">
              <td>001</td>
              <td>coxa c/sobrecoxa s/ osso s/ pele</td>
              <td>1.00</td>
              <td>5.00</td>
              <td>10.00</td>
              <td>10.00</td>
              <td>5.00</td>
            </tr>
            <tr class="tbody_prop">
              <td>001</td>
              <td>coxa c/sobrecoxa s/ osso s/ pele</td>
              <td>1.00</td>
              <td>5.00</td>
              <td>10.00</td>
              <td>10.00</td>
              <td>5.00</td>
            </tr>
            <tr class="tbody_prop">
              <td>001</td>
              <td>coxa c/sobrecoxa s/ osso s/ pele</td>
              <td>1.00</td>
              <td>5.00</td>
              <td>10.00</td>
              <td>10.00</td>
              <td>5.00</td>
            </tr>
            <tr class="tbody_prop">
              <td>001</td>
              <td>coxa c/sobrecoxa s/ osso s/ pele</td>
              <td>1.00</td>
              <td>5.00</td>
              <td>10.00</td>
              <td>10.00</td>
              <td>5.00</td>
            </tr>
            <tr class="tbody_prop">
              <td>001</td>
              <td>coxa c/sobrecoxa s/ osso s/ pele</td>
              <td>1.00</td>
              <td>5.00</td>
              <td>10.00</td>
              <td>10.00</td>
              <td>5.00</td>
            </tr>
            <tr class="tbody_prop">
              <td>001</td>
              <td>coxa c/sobrecoxa s/ osso s/ pele</td>
              <td>1.00</td>
              <td>5.00</td>
              <td>10.00</td>
              <td>10.00</td>
              <td>5.00</td>
            </tr>
            <tr class="tbody_prop">
              <td>001</td>
              <td>coxa c/sobrecoxa s/ osso s/ pele</td>
              <td>1.00</td>
              <td>5.00</td>
              <td>10.00</td>
              <td>10.00</td>
              <td>5.00</td>
            </tr>
            <tr class="tbody_prop">
              <td>001</td>
              <td>coxa c/sobrecoxa s/ osso s/ pele</td>
              <td>1.00</td>
              <td>5.00</td>
              <td>10.00</td>
              <td>10.00</td>
              <td>5.00</td>
            </tr>
            <tr class="tbody_prop">
              <td>001</td>
              <td>coxa c/sobrecoxa s/ osso s/ pele</td>
              <td>1.00</td>
              <td>5.00</td>
              <td>10.00</td>
              <td>10.00</td>
              <td>5.00</td>
            </tr>
            <tr class="tbody_prop">
              <td>001</td>
              <td>coxa c/sobrecoxa s/ osso s/ pele</td>
              <td>1.00</td>
              <td>5.00</td>
              <td>10.00</td>
              <td>10.00</td>
              <td>5.00</td>
            </tr>
            <tr class="tbody_prop">
              <td>001</td>
              <td>coxa c/sobrecoxa s/ osso s/ pele</td>
              <td>1.00</td>
              <td>5.00</td>
              <td>10.00</td>
              <td>10.00</td>
              <td>5.00</td>
            </tr>
            <tr class="tbody_prop">
              <td>001</td>
              <td>coxa c/sobrecoxa s/ osso s/ pele</td>
              <td>1.00</td>
              <td>5.00</td>
              <td>10.00</td>
              <td>10.00</td>
              <td>5.00</td>
            </tr>
            <tr class="tbody_prop">
              <td>001</td>
              <td>coxa c/sobrecoxa s/ osso s/ pele</td>
              <td>1.00</td>
              <td>5.00</td>
              <td>10.00</td>
              <td>10.00</td>
              <td>5.00</td>
            </tr>
            <tr class="tbody_prop">
              <td>001</td>
              <td>coxa c/sobrecoxa s/ osso s/ pele</td>
              <td>1.00</td>
              <td>5.00</td>
              <td>10.00</td>
              <td>10.00</td>
              <td>5.00</td>
            </tr>
            <tr class="tbody_prop">
              <td>001</td>
              <td>coxa c/sobrecoxa s/ osso s/ pele</td>
              <td>1.00</td>
              <td>5.00</td>
              <td>10.00</td>
              <td>10.00</td>
              <td>5.00</td>
            </tr>
            <tr class="tbody_prop">
              <td>001</td>
              <td>coxa c/sobrecoxa s/ osso s/ pele</td>
              <td>1.00</td>
              <td>5.00</td>
              <td>10.00</td>
              <td>10.00</td>
              <td>5.00</td>
            </tr>
            <tr class="tbody_prop">
              <td>001</td>
              <td>coxa c/sobrecoxa s/ osso s/ pele</td>
              <td>1.00</td>
              <td>5.00</td>
              <td>10.00</td>
              <td>10.00</td>
              <td>5.00</td>
            </tr>
            <tr class="tbody_prop">
              <td>001</td>
              <td>coxa c/sobrecoxa s/ osso s/ pele</td>
              <td>1.00</td>
              <td>5.00</td>
              <td>10.00</td>
              <td>10.00</td>
              <td>5.00</td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
    <section id="msgbar"></section>
    <footer id="footer">
      <button class="footerButton">Salvar</button>
      <button class="footerButton">Alterar</button>
      <button class="footerButton">Excluir</button>
      <button class="footerButton">Voltar</button>
    </footer>
  </div>
</body>

</html>


Answer:

I didn't actually test any of this, but in theory, these are possible solutions.

So as not to mess up the CSS you have working on the set of buttons, Wrap the set of buttons in a div and apply one of these classes to the div.

.footerButtonWrapper {
  margin: auto;
  position: absolute;
  top: 0; bottom: 0; right: 0;
}

and this as an alternate (adjust for row height)

.footerButtonWrapper {
   padding-top: 10px;
   padding-bottom: 10px;
}

And if push comes to shove, as long as the footer row will always be consistent in height, you could try using a simple margin-top or padding-top and "eyeball" center.


Related:


Dynamically resize side-by-side images with different dimensions to the same height


javascript,html,css,image
I have two images side-by-side within a block-level container with arbitrarily different dimensions (as in, they could be any two images) that I want to dynamically adjust the width of so that the overall height of the two images is the same. I don't think this can be done in...

bootstrap - dynamically changing jumbotron background image


javascript,jquery,html,css,bootstrap
I'm trying to change the background image of the jumbotron div with jQuery when a new tab is clicked, like this: $(".about").click(function(){ $('.active').toggleClass('active'); $('.about').toggleClass('active'); $('.jumbotron').fadeOut(500); //change background image $('.jumbotron').fadeIn(500); }); I tried using $('.jumbotron').css('background-image',url('/path/to/new/image')); but when I include that line, the jumbotron background image doesn't display at all even before...

Adding horizontal space between 2 buttons using javascript


javascript,jquery,html,css
I am dynamically creating submit buttons using javascript. I wanted to know how to introduce horizontal spacing between every other button in the process. My code is var allFields = commonButtons.concat(extraFields); for (var i = 0; i < allFields.length; i++) { var node = document.createElement("input"); var btName = document.getElementById("submit-buttons"); node.setAttribute('data-value',...

copy last column of one table to another table based on some condition


jquery,html
I have two tables. I want to take last column of table3 and put in to table4 eg:- table3 Names Process_id total construction 1 1111 construction_1 1 0000 engineering 1 2222 permitting 1 3333 eg:- table4 Names Process_id construction 1005 engineering 1005 permitting 1005 final result of table4 output will...

How to set DIV's width based on CSS indexes


html,css
I have 6 floated DIVs in two rows. I use PocketGrid as CSS framework (in particular its "automatic rows" feature) and I would like to size each one using CSS indexes and not specific class name. I tried it in this jsFiddle but even if first 3 blocks (first row)...

Automatically calling server side class without


javascript,html,ajax
I have an anchor which calls a server side class when clicked, but I want to modify it so that the class is called as soon as the page loads, without having to click an anchor. <a href="#" class="_repLikeMore" data-id="1234" data-type="pid" data-app="forums"> ...

HTML elements in Angular bindings expression


html,angularjs
Is that possible to insert HTML elements in an Angular expression ? Let's take a few example. I would like to do something like this: <table> <tr ng-repeat="employee in employees"> <td>{{employee.firstname ? employee.firstname : '<p style="color:red">No name</p>'}}</td> <td>{{employee.job}}</td> </tr> </table> In our controller, we have: $scope.employees = [{firstname:'Bob', job:'Developer'}, {firstname:'Paul',...

How to remove unmatched row in html table using jquery


jquery,html
I have two tables. I want to delete unmatching rows. Compare with first column in Table1 and compare with first column in Table2. Table1 111 aaa 222 bbb 333 ccc Table2 333 xxx 444 zzz 111 vvv result of Table2 333 xxx 111 vvv I tried some thing here Please...

Target next instance of an element/div


javascript,jquery,html
I have the following HTML structure and JavaScript file: .html <li> <button class="show-more"></button> some more elements <div class="hidden"></div> </li> JavaScript $( ".show-more" ).click(function() { event.preventDefault(); $( this ).next().slideToggle( "fast", function() { }); }); I need the click event to toggle the next first instance of .hidden, however the click event...

show div only when printing


javascript,html,css
Let's say that I have <div id="printOnly"> <b>Title</b> <p> Printing content </p> </div> Is it possible to hide this div when page rendering and to show only when printing this div?...

How do I display my mysql table column headers in my php/html output?


php,html,mysql,table,data
2 Questions... Scenario: I would like to query my database table via a form and then display the results that occur(if there are results) and my current situation is that it does work but it clears the form completely and leaves my to an empty page with just the results...

Centering navbar pills vertically within the navbar using flexbox


html,css,twitter-bootstrap,flexbox
I am terrible at CSS so I am having trouble centering my <li> (navbar pills) vertically for my navbar. This navbar is from twitter bootstrap Here is the HTML for my navbar: <div class="container"> <nav class="navbar navbar-default navbar-fixed-top"> <ul id="nav_pills" class="nav nav-pills" role="tablist"> <li role="presentation"> <a href="/">About</a> </li> <li role="presentation">...

Setting radio button checked true on button click


javascript,jquery,html
I have a table cell that lights up when selected. There will be many buttons on the page but only one choice can be made at a time. How can I make them mutually exclusive using hidden input radio tags? (in order to handle the group later) <td class="choice-option"> <input...

Dynamically select from a dynamically generated dropdown


php,html,select,drop-down-menu
I have a dynamically generated dropdown list - list of course identifiers and names. On the basis of a variable, “assigned_course_id”, I would like to preselect the appropriate value from the dropdown list. My best attempt is as follows. Thanks in advance for your assistance. <select name="course_id" id="course_id"> <?php $assigned_course_id...

Div with the form of a pencil [duplicate]


html,css,css-shapes
This question already has an answer here: CSS triangle custom border color 2 answers How can i create a div with the form of a pencil, just like this: It seems a basic thing but im trying to do it since some time ago and still couldnt do it....

Changing font-size of
  • on wordpress

  • css,wordpress,html-lists
    I am adding some pages on a wordpress themed website. There is a table with 3 columns: 1st column will be the title (larger font). Since it looks better and editing is easier, I started using <ul> instead of <td> Even though it works fine on JSFIDDLE font-size on the...

    Top header 100% of screen, but body only 70%?


    html,css
    Pretty new to CSS and just having quite a bit of trouble, I've tried everything, searched here, but can't seem to make it work. Right now my header/body are both 70% of the screen. However I want my top header (.mainheader) to be 100% of the screen, but have the...

    Detect when the jQuery UI slider is being moved?


    jquery,html,css,jquery-ui
    I have this custom video time UI slider to change the time of the YouTube video when scrubbed. My problem is that when the video is trying to load when the user is moving the slider, it causes the handle to jerk around and flip around. What I'm trying to...

    How to remove all the borders of a selectbox?


    jquery,html,css,drop-down-menu
    How can I remove the all the borders of the selectbox using css or Jquery ? My code, <select id="doctor_ch"> <option value="1" selected>One</option> <option value="2">Two</option> </select> CSS #doctor_ch{ background-color: #88AFF2; color:#fff; margin-top: 15px; } When I use this code it only changes the arrow style. I want to remove the...

    Google map infowindow position on custom marker


    javascript,css,google-maps,google-maps-api-3
    I'm not using the Markers in Google Maps because I wish to render custom text and images on my marker, so what I did is a custom marker using Overlays. The Overlay position is not exactly like the marker so I played a bit with it and now it is...

    HTML CSS Two 2-column tables side by side with same height and width


    html,css
    I'm quering a MySQL database and use a script to put results into an automatically generated HTML-file. I have two tables with 2 columns and 4 rows each that need to be put side-by-side. I have put my html & css in fiddle. http://jsfiddle.net/mika6891/7b0k049r/1/ My HTML code: <!-- gene description...

    tag in HAML


    html,css,haml
    How do I create a I-tag in haml? Example: <i class="fa fa-search"></i> ...

    Background-image style with JS not working in ie9


    javascript,jquery,html,internet-explorer
    I'm working on a site and im having some issues with my slider in IE9. What I've done is that I've made a div that gets the background image changed every few seconds depending on the img tags within. You can see it in function here: http://diakondk.quine.pil.dk/ It works wonders...

    why i don't get return value javascript


    javascript,jquery,html,json,html5
    When i debug my code i can see i have value but i don't get value to createCheckBoxPlatform FN function createCheckBoxPlatform(data) { var platform = ""; $.each(data, function (i, item) { platform += '<label><input type="checkbox" name="' + item.PlatformName + ' value="' + item.PlatformSK + '">' + item.PlatformName + '</label>' +...

    Website showing differently in windows xp and mobile


    html,css
    I made a website for one of my clients, and I change the background and font color. Now on windows xp and smartphones the background changed color to the default color and the fonts remained the same. The website is simfest.ro I don't know what to do to make it...

    show/hide an overflow div on anchor


    javascript,jquery,html,scroll
    I'm trying to make a div appear (if not already visible) and be scrolled to a specific anchor. I found this answer and try to use it but it looks like it doesn't work well... http://stackoverflow.com/a/7513110/3703099 My code : http://jsfiddle.net/0sq2rfcx/9/ As you can see, when you click on button it...

    Click on link next link should be display on same page


    javascript,php,jquery,html,css3
    I have a single page website and need to link the navigation to IDs in the page. I have three links: "About us", "Our Project", "contact". So if user clicks on "About ", the About section will be displayed, same with other links. Inside Our project there is Two buttons...

    How To Check Value Of String


    javascript,css,string,numeric
    <span id='amount'>0.00000000</span> <a class='button-withdraw' id='tombolco' href='#'>Checkout</a> <script> var amount = document.getElementById("amount").innerHTML; if (amount >= 0.001) { document.GetElementById("tombolco").style = "display:block"; } else { document.GetElementById("tombolco").style = "display:none"; } </script> Why my code doesn't work? What's wrong with it and how to solve it?...

    submitting form then showing loading image by javascript


    javascript,html
    I am submitting a form and loading loading gif in the same div by replacing html of form by html of loading image. I am first submitting the form then loading gif, because I have to replace the content of div(in which form exist) with loading image. Logs 1,2,3 are...

    How to make background body overlay when use twitter-bootstrap popover?


    html,css,twitter-bootstrap
    Currently I used this twitter-bootstrap popover: <button type="button" class="btn btn-default" style="margin-top:11px; padding-bottom:4px; padding-top:4px;" data-container="body" data-toggle="popover" data-trigger="focus" data-placement="left" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus."> Upgrade The output: How I can make the background overlay like bootstrap modal? My expected output I use this jquery to popover $(function(){ $('[data-toggle="popover"]').popover({ placement...

    Get elements containing text from array


    javascript,jquery,html,arrays,contains
    I want to search all the elements containing any string in the array. For example I have following list of items <ul> <li>cricket bat</li> <li>tennis ball</li> <li>golf ball</li> <li>hockey stick</li> </ul> and this array var arr = ['bat', 'ball']; It should select all the elements having text bat and ball....

    CSS - Linear Gradient Background Color no-repeat is not working for if it has multiple tds


    html,css,css3
    I want to apply css3 gradient (left and right transparent) background color for a TR element like below. Below code is working fine if it has only one TD element, where as more than one td, background gradient started repeating for each td... Am I missing something? Online Demo CSS...

    CSS :hover that shows more than one image


    html,css,css3
    I have an icon on my website. I want to change the icon to 4 different images when ever I hover over the first one. So I know how to switch between the regilar image to yellow0.png, but how do I continue to the next one (after half a second...

    change css dynamically by selecting dropdown list item


    jquery,html,css,drop-down-menu
    I have the following Dropdownlist with yes or no options-:` <asp:DropDownList ID="ddlchangecss" runat="server"> <asp:ListItem Text="yes">yes</asp:ListItem> <asp:ListItem Text="no"></asp:ListItem> </asp:DropDownList> i want to add a css dynamically like that-: .imgFullWidth { width: 100%; height: auto; float: left; margin: 0px 0px 20px 0px; } when I select yes option in Dropdownlist. How can...