Category: Bootstrap

26 Dec

Prevent bootstrap affix overlapping with footer

Fixing a div to the right side of your web page using
bootstrap’s affix method is easy.

Steps required are
1)Add data-spy=”affix” to the div you would like to fix in the right side. Also Add a class to the div, in the example i added the class as my-affix-div.
The whole affix div code is given below.

<div class="col-sm-5 pull-right my-affix-div" 
        data-spy="affix"  >
        <div class = "panel 
                panel-primary 
                panel-transparent affix_div" >
            <div class ="panel-heading">
                <h3 class = "panel-title">Summary</h3>
            </div>

            <div class = "panel-body">
                <div class="row">
                    <div class="col-sm-4">
                        <b>Name</b>
                    </div>

                    <div class="col-sm-3">
                        <b>Place</b>
                    </div>

                    <div class="col-sm-3">
                        <b>Phone</b>
                    </div>                  
                </div>
  
            </div>

            <div class = "panel-footer">
                <form role="form" action="#"
                     method="get">
                    <button type="submit" 
                          class="btn btn-default"
                    >
                        Clear
                    </button>
                </form>
            </div>

        </div>
    </div>

2)Then add the below Javascript code.

$('.my-affix-div').affix(
   {offset:{top: 75, bottom: 240}}
);

In the code we specified when the div should be fixed.
If the scroll top is more than 75 pixel, then the div with the class name my-affix-div will be fixed. If we scroll to the bottom and if the distance from bottom to the div is less than 240,
the div’s position becomes absolute.

At any moment the div with data-spy=”affix” , will be in one of the three states.
1)affix-top: If your scroll top is less than 75px.
2)affix: (If your scroll top is more than 75 px
and scroll bottom is more than 240 ).
3)affix-bottom: if your scroll bottom is less than 240.
We can specify styles of those states. Below CSS code is added to specify that the position should be absolute in both
affix-bottom and affix-top states. in affix state, the div will be fixed to the right side and distance to the top of the div will be
200px.

.affix-bottom{
    position: absolute;
    right: 0;  
}
.affix-top{
    position: absolute;
    right: 0;  
}
.affix {
        top: 200px;
        right: 0;  

 }
Bootstrap by whmcsisg8
19 Dec

How to add popover to awesome font?

If you like to display a popover as shown in the above image,
You should include following files in your html head.

    <head>
        <script src="js/jquery.min.js"></script>
        <script src="js/bootstrap.min.js"></script>
        <link rel="stylesheet" href="css/font-awesome.min.css">
        <link rel="stylesheet" href="css/bootstrap.min.css">

    </head>

Below is the html body content. The popover should come when placing mouse over the awesome font with class name “fa fa-question”. The awesome font is written as an inner html of a tag. Two important attributes we added to the tag are 1)data-toggle=”popover” and 2)data-content=”[popover message]”.

<body>
<div class="container">
    <h2>Sample Popover Code</h2>
    <div class="panel-group">
        <div class="panel panel-default">
            <div class="panel-heading">Popover with awesome font</div>
            <div class="panel-body">
                <div class="row form-group">

                    <div class="col-sm-6">
                        <input class="form-control" type="text"
                               placeholder="Name"  name="name" />
                    </div>

                </div>

                <div class="row form-group text-center">

                    <div class="col-sm-6">
                        <div class="input-group">
                            <input placeholder="Address"
                                   class="form-control pooja-star"
                                   type="text" name="address"/>
                            <span class="input-group-addon">
                                <a 
                                    data-toggle="popover"
                                    data-content="Enter Address as
                                    Street,City,State">
                                    <i class="fa fa-question"></i>
                                </a>
                            </span>
                        </div>
                    </div>

                </div>
                <div class="row form-group text-center">
                    <div class="col-sm-6">
                <button type="submit" class="btn btn-primary">
                Save changes
            </button>
                </div></div>
            </div>
        </div>

    </div>
</div>
</body>

Below javascript code is required, where we set when the popover should be displayed, and also we are defining the selector.

As we set selector: ‘[data-toggle=”popover”]’ and
trigger: ‘hover’, when we place mouse over an element with attribute data-toggle=”popover” the popover function will be called.

<script type="text/javascript">
    var popOverSettings = {
        trigger: 'hover',
        container: 'body',
        html: true,
        selector: '[data-toggle="popover"]', 
 
    }
 
    $('body').popover(popOverSettings);
</script>

You can customize the look of awesome font and the background box
by adding your style to the below classes.

.input-group-addon {
    background-color: #your-color-here;
    border:0px
}

.fa-question {
    //style here
}
Bootstrap by whmcsisg8