How to check Field Value already exist in database with bootstrap validator

There are different validator available in bootstrap library . To check field value already exist in database or not . We can use remote validator of Bootstrap . Please check the following code of  sample registration form validate by bootstrap validator

By default, it is set to { fieldName: fieldValue } where fieldName and fieldValue are replaced with the field name and current value, respectively.

In some cases, you might want to send more fields with dynamic values to the back-end. For instance, the registration form need to validate both the username and emails.

The following sample code uses the data option showing how to do this:

<form id="registrationForm" class="form-horizontal">
    <div class="form-group">
        <label class="col-lg-3 control-label">Username</label>
        <div class="col-lg-5">
            <input type="text" class="form-control" name="username" />
        </div>
    </div>
    <div class="form-group">
        <label class="col-lg-3 control-label">Email</label>
        <div class="col-lg-5">
            <input type="text" class="form-control" name="email" />
        </div>
    </div>
    <div class="form-group">
        <label class="col-lg-3 control-label">Password</label>
        <div class="col-lg-5">
            <input type="password" class="form-control" name="password" />
        </div>
    </div>
</form>
<script>
$(document).ready(function() {
    $('#registrationForm').bootstrapValidator({
        fields: {
            username: {
                message: 'The username is not valid',
                validators: {
                    remote: {
                        url: '/path/to/backend/',
                        data: function(validator) {
                            return {
                                email: validator.getFieldElements('email').val()
                            };
                        },
                        message: 'The username is not available'
                    }
                }
            },
            email: {
                validators: {
                    remote: {
                        url: '/path/to/backend/',
                        data: function(validator) {
                            return {
                                username: validator.getFieldElements('username').val()
                            };
                        },
                        message: 'The email is not available'
                    }
                }
            }
        }
    });
});
</script>

Centering (horizontally and vertically) an image in a box

The problem

We want to center an image inside a container, bigger than the image and with assigned dimensions. The image is not a background one, it’s a true <img> element.

Any image has well defined dimensions, so the easiest and most reliable way to solve the problem is:

  • make the image display:block
  • assign to the image the needed left and top margins to get it centered in the container. Each of this margin value is obviously half the difference between a dimension of the container and that of the image.

For example if you have images of two different sizes, like in a photo gallery with “landscape” and “portrait” images, to be centered in fixed size containers, then assigning to each <img> one of two classes (with different margins) will solve the problem.

But there are cases when one does not want to use the previous method. For example when many images, all with different dimensions are involved and it is not practical to assign different margins to each of them, or when the dimensions of the container and those of the image are not expressed in the same units (px, em, %, …) hence the difference cannot be computed. It’s useful to have a different solution, independent on the image’s size.

A solution

The horizontal centering is not difficult. If the image is left with its default inline display, then text-align: center is the obvious solution, working well in all browsers.<!– And if the image is given display: block, then the usual method for horizontal centering of blocks can be applied, consisting in margin-left:auto; margin-right:auto (plus text-align: center on the container for IE5.x/Win.) –>

For the vertical centering the best solution, working in modern browsers, is to assign display: table-cell; vertical-align: middle to the container. This works in Gecko based browsers, Opera 6+, Safari, IE8. It leaves IE7 and lower (both Windows and Mac) out.

For IE7- the idea is to create a sort of line-box having as height the height of the container, and the using again vertical-align: middle. The line-height property cannot be used to achieve this, since it doesn’t work correctly in IE7-/Win in presence of images. Also the use of a big font-size (without specifying line-height) is problematic, because the height of the generated box is slightly bigger than the font-size. And IE5/Mac (differently from IE/Win) is able to resize (according to user choice) line-height and font-size expressed in pixels, so it would have problems with this approach, unless the height of the container is expressed in em. Note: this same argument precludes the general use of such vertical centering method, based on line-height, in Gecko based and Safari browsers.

Fortunately IE7- has (partial) support for display: inline-block. If an empty inline-block element (for example a span) is added inside the container and it is assigned height: 100%; vertical-align: middle then it allows to precisely get what we want: a line box with the desired height. In other words, the inline-block element respects an assigned height (equal to the container’s one) and props the line open, so that vertical-align: middle (both on the extra element and the image) gives the desired vertical centering.

Some details:

  • The extra, empty inline-block element may have zero width in IE7-/Win, but it must have at least width: 1px in IE/Mac, otherwise it has no effect (this sometimes offsets the horizontal centering by 1px. It could be counteracted with a -1px margin, but the problem is barely visible.)
  • In IE5/Mac the vertical centering is some pixels off. The use of a small font-size or line-height on the container seems beneficial, not clear why (IE5/Mac is a bit incoherent here, especially when playing with its font size settings.)

A combined solution, using display: table-cell and the extra span with display: inline-block, works in Gecko based browsers, Opera 6+. Safari, IE5+/Win, IE5/Mac.

A variation of this technique can be used to vertically center a block element (even with unknown height) inside another one (with known height) which is a more interesting problem.

The code

Putting all together, and naming “wraptocenter” the class of the container, that’s the relevant CSS. Code for IE/Mac is wrapped in a suitable filter. Code for IE7-/Win is put in conditional comments.

<style type="text/css">
.wraptocenter {
    display: table-cell;
    text-align: center;
    vertical-align: middle;
    width: ...;
    height: ...;
}
.wraptocenter * {
    vertical-align: middle;
}
/*\*//*/
.wraptocenter {
    display: block;
}
.wraptocenter span {
    display: inline-block;
    height: 100%;
    width: 1px;
}
/**/
</style>
<!--[if lt IE 8]><style>
.wraptocenter span {
    display: inline-block;
    height: 100%;
}
</style><![endif]-->

And that’s the relevant HTML

<div class="wraptocenter"><span></span><img src="..." alt="..."></div>

Hide/Toggle submenu when clicking on another menu item

Just hide all li’s before toggling current li –


$(function () {
$('nav ul li').not("nav ul li ul li").click(function(e){
$("nav ul li ul").hide();
$(this).children('ul').stop().toggle();
e.stopPropagation();
});
$("nav ul li ul li").click(function(e){
$(this).children('ul').stop().toggle();
e.stopPropagation();
});
});
$(document).click(function() {
$("nav ul li ul").hide();
});

On click smooth scrolling to target id

Smooth Scrolling

$(function() {
  $('a[href*=#]:not([href=#])').click(function() {
    if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {
      var target = $(this.hash);
      target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
      if (target.length) {
        $('html,body').animate({
          scrollTop: target.offset().top
        }, 1000);
        return false;
      }
    }
  });
});

HTML, CSS sticky footer (growing content)

By using absolute, the footer and mainContainer are subject to where you put them. If you use absolute and set the footer to the bottom, it will just stick to the bottom of the viewport.

For sticky, you should use relative units and the correct heights where needed.

html, body { width:100%; }
#wrap { 
min-height:100%;
height:auto !important;    
margin: 0 auto -158px;  /* Bottom value must = footer height */
}

.pagefooter, .push { width:100%; height:158px; position:relative; bottom:0; }

The order goes

 <div id="wrap">
 <!--All of your content goes here-->
 <div class="push"></div>
 </div>
 <div class="pagefooter"></div>

That way, the footer always has enough room and is set to the bottom. margin:auto inside the wrap will center the wrap (so as long as it isn’t width:100%, it will center without the inline)

CSS Browser Hacks For Firefox, Opera, Safari, chrome & Internet Explorer in single CSS file

Most standards favoring browsers (IE, Opera, Chrome & Safari) have no method of targeting CSS to the specific browser while Mozilla, the buggiest browser, has a completely safe and easy method of serving CSS/HTML to only Mozilla.

The Setup

To show that the hacks are working correctly I created 6 paragraphs with their specific browser/version identifier within them. This will let you know that the hack is working correctly

  1. <p id=”opera”>Opera 7.2 – 9.5</p>
  2. <p id=”safari”>Safari</p>
  3. <p id=”firefox”>Firefox</p>
  4. <p id=”firefox12″>Firefox 1 – 2 </p>
  5. <p id=”ie7″>IE 7</p>
  6. <p id=”ie6″>IE 6</p>

 


Targeting Internet Explorer With CSS Using Conditional Comments

The easiest way to target IE is with conditional comments. There is a robust syntax that Microsoft has created to allow authors to do this. I’m not going to go into detail about this since it has been re-hashed a million times by other bloggers but here are two alternatives to parser CSS hacks:

  1. <!–[if IE 7]>
  2. <style type=”text/css”>
  3. </style>
  4. <![endif]–>
  5.  
  6. <!–[if IE 6]>
  7. <style type=”text/css”>
  8. </style>
  9. <![endif]–>

 


Targeting Internet Explorer With CSS Using Parser Hacks

I wouldn’t recommend using these hacks since conditional comments are really, really easy to use but if you want to keep all your CSS in one file here is an alternative. Note that the IE7 hack will only apply to IE7 because IE6 does not understand the > selector. It should also be noted that no other browser will recognize this hack.

  1. /* IE 7 */
  2. html > body #ie7
  3. {
  4. *color:blue;
  5. }
  6.  
  7. /* IE 6 */
  8. body #ie6
  9. {
  10. _color:blue;
  11. }

 


Targeting Firefox With CSS

The first hack targets only Firefox 1 and 2 by using the body:empty hack. The second hack, which is quite clever target all versions of Firefox by using the proprietary extension -moz. -moz combined with the -document url-prefix() which by the way is used by Firefox Addon creators targets Firefox and Firefox alone. I’ve found that by using proprietary extensions to CSS, as hacks, usually means the most surefire way to target individual browsers without having to worry about another browser possibly parsing the CSS.

  1.  
  2. /* Firefox 1 – 2 */
  3. body:empty #firefox12
  4. {
  5. color:blue;
  6. }
  7.  
  8. /* Firefox */
  9. @-moz-document url-prefix()
  10. {
  11. #firefox { color:blue; }
  12. }
  13.  

 


Targeting Safari/Chrome With CSS

The Safari CSS hack works similar to the Firefox hack because it uses a Safari proprietary extension to CSS. By using the -webkit prefix we can target Safari and only Safari.

  1.  
  2. /* Safari */
  3. @media screen and (-webkit-min-device-pixel-ratio:0)
  4. {
  5. #safari { color:blue; }
  6. }
  7.  

 


Targeting Opera With CSS

The Opera CSS hack works because of negation in CSS. Currently I feel this hack is the weakest of all the hacks I’ve listed simply because it’s targeting ALL browsers that support -min-device-pixel-ratio that aren’t -webkit. It will only be a matter of time before Firefox supports this and this hack will then most likely apply to Firefox as well.

  1.  
  2. /* Opera */
  3. @media all and (-webkit-min-device-pixel-ratio:10000), not all and (-webkit-min-device-pixel-ratio:0)
  4. {
  5. head~body #opera { color:blue; }
  6. }

 

 

Put them all together in a single .css file.

 

NB: CSS for safari and chrome is same. If changes occur it can be handled manually. Though changes will be minor.