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

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>

Best How To :

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.

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

html,css,twitter-bootstrap

Posting some more code would be nice. This should work. Use some jQuery or AngularJs or any other framework to make the .overlay initially hidden, then to make it visible when needed. If you need help, comment. If it helps, +1. EDIT $(function() { $('[data-toggle="popover"]').popover({ placement: 'bottom' }); $("#buttonright").click(function() {...

show/hide an overflow div on anchor

javascript,jquery,html,scroll

I've just updated your jsfiddle: http://jsfiddle.net/0sq2rfcx/8/ This should work on all browsers included IE7 $('#b1').click(function () { $('#result').show(); $("#result").animate({ scrollTop:$('#a1').parent().scrollTop() + $('#a1').offset().top - $('#a1').parent().offset().top}, "slow"); }); $('#b2').click(function () { $('#result').show(); $("#result").animate({ scrollTop:$('#a2').parent().scrollTop() + $('#a2').offset().top - $('#a2').parent().offset().top}, "slow"); }); $('#b3').click(function () { $('#result').show();...

why i don't get return value javascript

javascript,jquery,html,json,html5

the first "A" in AJAX stands for "Asynchronous" that means, it is not executed right after it has been called. So you never get the value. Maybe you could first, get the os list and then output what you need, like this: function createCheckBoxPlatform(myDatas) { $.ajax({ url: "/QRCNew/GetOS", type: "post",...

How To Check Value Of String

javascript,css,string,numeric

document.GetElementById("tombolco").style = "display:block"; That's not the right way. This is document.getElementById("tombolco").style.display = 'block'; Also note that it is getElementById, not with a capital G. Same with 'none',Rest of your code is fine. Fiddle...

Adding horizontal space between 2 buttons using javascript

javascript,jquery,html,css

Use CSS instead of Javascript. Anyway, you're adding a class to all buttons. Use following code: .submitButton { margin: 0 10px; } ...

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

html,css

Put your header inside the body. And don't apply styles to the body but use a container. + You should have one single header in your page. <body> <header> <nav><ul> <li class="active"><a href="#">Home</a></li> <li><a href="#">Solutions & Services</a> <ul> <li><a href="#">Internet</a></li> <li><a href="#">Networking</a></li> <li><a href="#">Website</a></li> <li><a href="#">Home...

change css dynamically by selecting dropdown list item

jquery,html,css,drop-down-menu

I have created a working example for you. You can find the jsfiddle in here This piece of code uses JQuery. (Remember, for these type of tasks, JQuery is your friend =] ). HTML <select id="dropDownMenu"> <option value="option1" selected="selected">yes</option> <option value="option2">no</option> </select> <br> <img id="picture" src="https://upload.wikimedia.org/wikipedia/commons/thumb/f/f5/House_Sparrow_mar08.jpg/220px-House_Sparrow_mar08.jpg"> Javascript function changeStyle(){...

Get elements containing text from array

javascript,jquery,html,arrays,contains

You can use :contains selector. I think you meant either one of those values, in that case var arr = ['bat', 'ball']; var selectors = arr.map(function(val) { return ':contains(' + val + ')' }); var $lis = $('ul li').filter(selectors.join()); $lis.css('color', 'red') <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <ul> <li>cricket bat</li> <li>tennis ball</li> <li>golf ball</li>...

Changing font-size of
on wordpress

css,wordpress,html-lists

I think you have style inheritance from upper element, check it with dev. tools in browser. You can also try to set inline style for: <li style: "font-size: 22px;">Name 1</li> or add !important in your css file, like this: td > ul li { font-size: 22px !important;"> } ...

submitting form then showing loading image by javascript

javascript,html

Let suppose on button click you are calling ajax method <button onclick="LoadData();"/> before ajax call show image and onComplete ajax method hide this image function LoadData(){ $("#loading-image").show(); $.ajax({ url: yourURL, cache: false, success: function(html){ $("Your div id").append(html); }, complete: function(){ $("#loading-image").hide(); } }); } ...

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

javascript,html,css,image

If it's responsive, use percentage heights and widths: html { height: 100%; width: 100%; } body { height: 100%; width: 100%; margin: 0; padding: 0; } div.container { width: 100%; height: 100%; white-space: nowrap; } div.container img { max-height: 100%; } <div class="container"> <img src="http://i.imgur.com/g0XwGQp.jpg" /> <img src="http://i.imgur.com/sFNj4bs.jpg" /> </div>...

CSS :hover that shows more than one image

html,css,css3

Okay so I have got a probable solution, the catch is, you won't be able to use img tags. You can use images as background-image and animate background on :hover NOTE: Fade in effect can be removed by playing with animation. HTML <div class="image-box"></div> CSS .image-box { height: 200px; width:...

Setting radio button checked true on button click

javascript,jquery,html

Here is an example : http://jsfiddle.net/xhhLja7m/ $(".choice-option").click(function() { $(this).find('input[type=radio]').prop("checked", "true"); }) ...

Automatically calling server side class without

javascript,html,ajax

Trigger the click event like this: $('._repLikeMore').trigger('click'); ...

How to set DIV's width based on CSS indexes

html,css

If I understand this correctly,all you need to do is change your CSS to the following: .sintesi-offerta > .block:nth-child(3n+1) { width: 40%; } .sintesi-offerta > .block:nth-child(3n+2) { width: 20%; } .sintesi-offerta > .block:nth-child(3n+3) { width: 40%; } Side note: your br tags should be <br/> for jsfiddle to interpret them...

tag in HAML

html,css,haml

HAML equivalent is %i{class:"fa fa-search"} You can look at http://codepen.io/anon/pen/BNwbEP and see the compiled view ...

Website showing differently in windows xp and mobile

html,css

The background colour changes when the browser width is less than 1200px wide. You have specified the background-color for the selector .td-grid-wrap within a media query: What you need to do is move the background-color property to the non-media-queried selector .td-grid-wrap or perhaps .td-page-wrap. ...

Click on link next link should be display on same page

javascript,php,jquery,html,css3

Ok, so i tried to decypher what you meant with your Question. To Clarify: He has this one page setup. inside the div Our Project, there are two Buttons or links Visit more. When clicked, he wants the About Section to be shown. All in all it is impossible for...

How to remove unmatched row in html table using jquery

jquery,html

Try this solution: var notrem = []; $('#Table1 tr').each(function(){ var currentRowHTML = $(this).find("td:first").html(); $('#Table2 tr').each(function(i){ var c= $(this).find("td:first").html(); if(c == currentRowHTML ){ notrem.push(i); } }); }); $('#Table2 tr').each(function(i){ if(notrem.indexOf(i) < 0){ $(this).remove(); } }); Explanation: First gather all indexes of Table2 that are equal and are not to be removed....

Div with the form of a pencil [duplicate]

html,css,css-shapes

.pencil{ width: 200px; height: 40px; border: 1px solid #000; position: relative; } .pencil:before{ content: ''; display: block; margin: 10px 0; width: 100%; height: 10px; border: 6px solid #000; border-width: 6px 0; } .pencil:after{ content: ''; display: block; height: 10px; border: 1px solid #000; border-width: 1px 1px 0 0; width:...

Centering navbar pills vertically within the navbar using flexbox

html,css,twitter-bootstrap,flexbox

Set display: flex for the <ul class="nav">, not for items. Also use align-items: center for vertical aligment: .nav { height: 70px; display: flex; justify-content: center; align-items: center; } <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/> <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...

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

php,html,mysql,table,data

Note: You can just make a single file out of it to achieve your wanted output Use mysql_real_escape_string() to sanitize the passed-on value to prevent SQL injections You should use mysqli_* instead of the deprecated mysql_* API Form them in a single file like this (display.php): <html> <form method="post" name="display"...

Google map infowindow position on custom marker

javascript,css,google-maps,google-maps-api-3

Set the pixelOffset of the InfoWindow appropriately: From the documentation on InfoWindows pixelOffset | Type:Size | The offset, in pixels, of the tip of the info window from the point on the map at whose geographical coordinates the info window is anchored. If an InfoWindow is opened with an anchor,...

Target next instance of an element/div

javascript,jquery,html

nextAll and first: $(this).nextAll('.hidden').first().slideToggle(...); This question has more about this: Efficient, concise way to find next matching sibling?...

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

jquery,html

I modified your code based on your requirement.please check it once. rowCount = $('#table3 tr:last').index() + 1; table4rowCount = $('#table3 tr:last').index() + 1; row = rowCount + 1; var pivot_1 = 1001; var loop = 0 $("#table4 tr:eq(0)").find("th:last").after("<th>Total_col</th>"); for(i=1;i<row; i++) { var d = $('#table3 tr:eq(' + i + ')').find("td:eq(1)").text();...

How to remove all the borders of a selectbox?

jquery,html,css,drop-down-menu

Firefox has some problems with select-background. You can try this code - it'll remove the arrow, and then you can add a background image with your arrow (I took an icon from google search, just put you icon instead) I get this on FireFox (You can use any arrow icon...

HTML elements in Angular bindings expression

html,angularjs

You could use ng-show, it will show the paragraph if employee.firstname is null. <tr ng-repeat="employee in employees"> <td>{{employee.firstname }}<p ng-show="!employee.firstname" style="color:red">No name</p></td> <td>{{employee.job}}</td> </tr> ...

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

html,css

Okay so I have made a few assumptions to create this solution. Firstly, I'm guessing that as you are setting the headers of the tables as width:200px; that the width of the two columns are 100px. (This can be changed if need be). Secondly, these tables are not floated. This...

Background-image style with JS not working in ie9

javascript,jquery,html,internet-explorer

Your call of setTimeout fails in any browser, but in IE9 with an exception(what stops the further script-execution). It's a matter of time. At the moment when you call var timer = setTimeout(slideshow, 8000); slideshow is undefined , and undefined is not a valid argument for setTimeout. Wrap the call...

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

html,css,css3

table{border-collapse:collapse;width:100%} table tr td{padding:5px;border:1px solid #000; background:#FFF } table tr:hover td{padding:5px;border:1px solid #000; background:transparent } table{ background:...

bootstrap - dynamically changing jumbotron background image

javascript,jquery,html,css,bootstrap

You have some syntax errors otherwise everything is good!! keep url inside quotes as below: $('.jumbotron').css('background-image','url(/path/to/new/image)'); ...

Dynamically select from a dynamically generated dropdown

php,html,select,drop-down-menu

It is because you aren't ending the value attribute, so your selected option becomes <option value="optionvalueselected" -- 'optionvalue' being the value of your selected option, and 'selected' being the attribute you want to set, but won't be set because you never ended value The following should work: <select name="course_id" id="course_id">...

show div only when printing

javascript,html,css

You need some css for that #printOnly { display : none; } @media print { #printOnly { display : block; } } ...

Detect when the jQuery UI slider is being moved?

jquery,html,css,jquery-ui

You can use 3-Events: - Start (Start-Sliding) -> Stop Player - End (End-Sliding) -> Start Player - Slide (Sliding) -> Move Player-Position $("#range").slider({ range: "min", start: function(event, ui) { player.pauseVideo(); }, stop: function(event, ui) { player.playVideo(); }, slide: function(event, ui) { player.seekTo(ui.value,true); return false; } }); Demo: http://codepen.io/anon/pen/EjwMGV...