How create gradient color without images...

Working on a new assignment, I had to find a way to generate gradient color.  I decided to educate myself and learn online gradient generator. First of all, I found a good one, for a second, using online tool, I generated a nice piece of code for my project.

Turn the arrow

Working in Bootstrap-Knockout environment, I had to find the way to implement movable arrow for mobile menu.

It's quite easy and interesting task, which I would like to document.

HTML:
 <nav>
        <div class="navbar navbar-inverse" role="navigation">
            <div class="container">
                <div class="navbar-header">
                    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse" id="caret-mobile">
                        <span class="sr-only">Toggle navigation</span>
                        <span id="caret-mobile" class="caret-down"></span>
                    </button>
                    <a class="navbar-brand" href="#">Menu</a>
                </div>
                <div class="collapse navbar-collapse">
                    <ul class="nav navbar-nav">
                        <li><a href='#'>About</a></li>
                        <li><a href='#'>Contact Us</a></li>
                        <li><a href='#'>FAQ</a></li>
                        <li><a href='#'>View Cart</a></li>
                    </ul>
                </div>
            </div>
        </div>
    </nav>
CSS:
.caret-down {
display: inline-block;
width: 0px;
height: 0px;
margin-left: 2px;
vertical-align: middle;
border-bottom: none;
border-top: 10px solid #FFFFFF;
border-right: 10px solid transparent;
border-left: 10px solid transparent;
content: "";
}

.caret-up {
display: inline-block;
width: 0px;
height: 0px;
margin-left: 2px;
vertical-align: middle;
border-top: none;
border-bottom: 10px solid #FFFFFF;
border-right: 10px solid transparent;
border-left: 10px solid transparent;
border-top-width: 0px;
border-top-style: dotted;
content: "";
}
Javascript:
<script src="jquery-2.0.3.js"></script>
<script src="bootstrap.min.js"></script>
<script type='text/javascript'>
        jQuery(document).ready(function () {
            jQuery('#caret-mobile').click(function () {
                $(".caret-down").toggleClass('caret-up');
            });
         
        });
</script>

Web Page Ruler

On this project I work a lot with QA counting every pixel in my css-file. To finish my project I had to add new Chrome extension. It's a quite good and practical tool for Front-End Development. I hope, everybody will use this extension.

In addition I found a very good tool to compress HTML online. He it is: http://www.textfixer.com/html/compress-html-compression.php This site features more useful tools and tricks, which I will use in a future.

Horizontal and Vertical Menu

One HTML code, which will serve desktop, tablet and mobile views.

HTML:
 <nav>
           <div class="col-xs-12 col-sm-12 col-md-12" id="navigation">
                <ul>
                    <li><a href="#">Home</a></li>
                    <li><a href="#">About Us</a></li>
                    <li><a href="#">FAQ</a></li>
                </ul>
            </div><!-- navigation  -->
    </nav>
CSS:
header, nav {
    width: 976px;
    margin-left: auto;
    margin-right: auto;
}

nav {
    height: 130px;
}

#navigation ul
{
    margin: 0;
    padding-top: 15px;
    display: block;
    padding-bottom: 15px;
    height: 40px;
}

#navigation ul li
{
    list-style-type: none;
    display: inline;
}

#navigation li:before {
content: " | ";
padding-left: 30px;
padding-right: 30px;
color: white;
}

#navigation li:first-child:before {
content: none;
}

#navigation ul  {

    background-color: #6FB4D3;

}

#navigation li a {

    color: white;

 }

#navigation li a:hover {

    color: #000066;

    text-decoration: none;

}

Media -query:

@media screen and (max-width : 480px)

{

 #navigation ul li

    {

        display: block;

        list-style-type: none;

        height: 40px;

        width: 300px;

        padding-top: 15px;

        padding-bottom: 15px;

        margin: 0;

        text-align: center;

        border: solid 2px #FFFFFF; 

    }

    #navigation li:before { content: none;}

    #navigation li:first-child:before { content: none; }

 

#navigation ul  {

    background-color: #FFFFFF;

  }

  #navigation ul li  {

    background-color: #6FB4D3;

    }

  

  #navigation ul li

    {

         background-color: #6FB4D3; 

    }  

  #navigation li a {

    color: white;

    }

    #navigation li a:hover {

        color: #000066;

        text-decoration: none;

    }

}

Customized Bootstrap popover for search-box

I searched, searched, and searched and did not find anything even close to fulfill my assignment. Now I'm ready to post my code.

HTML:
 <div class="btn searchcontainer" id="searchcontainer" style="margin-top: 50px; margin-right: 25px; border: 1px solid #D7D7D7";">
               <input type="search" class="productsearch select" value="@(string.IsNullOrEmpty(ViewBag.SearchWord) ?"Search Catalog... ":ViewBag.SearchWord)" onclick="if(this.value=='Search Catalog... '){this.value=''; this.style.color = '#000000';}" onblur="if(this.value==''){this.value='Search Catalog... '; this.style.color = '#D7D7D7';}" style="@(string.IsNullOrEmpty(ViewBag.SearchWord) ?"width:15em; border: 0px; color:#D7D7D7;": "width:15em; border: 0px; color:#000000;")" rel="popover" data-placement="bottom" data-content="<div class='popover-error'>You must enter search criteria</div>" data-color="pink" name="searchKeyword" id="searchKeyword"/><i class="fa fa-times-circle fa-lg" id="clear-search"></i> <a id="btn-search">Go &gt;</a>
  </div>

Javascript:
<script type='text/javascript'>
       $('#btn-search').click(function(){
           var $search = $('#searchKeyword');
           if (!($search.val().length > 0 && $search.val().indexOf("Search") < 0)) {
               $("#searchKeyword").popover({ html: true, placement: 'bottom'});
               $("#searchKeyword").popover('show');
               $('.popover').css('top',parseInt($('.popover').css('top')) + 10 + 'px')
           }  
           return false;
       });
    </script>

CSS:

.popover {
    border-radius: 6px;
}

[rel=popover][data-color=pink] + .popover {
    background: #F2DEDE;
    border: 1px solid #F2DEDE;
}

    [rel=popover][data-color=pink] + .popover.bottom .arrow {
        top: -17px;
        left: 50%;
        /*margin-left: -5px;*/
        border-left: 9px solid transparent;
        border-right: 9px solid transparent;
        border-bottom: 19px solid  #F2DEDE;
    }

     [rel=popover][data-color=pink] + .popover .arrow,  [rel=popover][data-color=pink] + .popover .arrow:after {
        border-left: 9px solid transparent;
        border-right: 9px solid transparent;
        border-bottom: 19px solid  #F2DEDE;
    }
/*-----------------------------*/

.popover-error {
    color: #B94A48;
    font-size: 12px;
    font-weight: bold;
}

Dynamic Bootstrap Popover on empty search

 Searching the Internet for something suitable for my assignment I did not find anything interesting. Some sites are closed, some - not. I came out with my own code, which works in MVC/Bootstrap/Knockout environment.

HTML:

 <div class="btn searchcontainer" id="searchcontainer" style="margin-top: 50px; margin-right: 25px; border: 1px solid @(string.IsNullOrEmpty(ViewBag.productListJSON) ? "red" : "#D7D7D7");">
               <input type="search" value="@(string.IsNullOrEmpty(ViewBag.SearchWord) ?"Search Catalog... ":ViewBag.SearchWord)" onclick="if(this.value=='Search Catalog... '){this.value=''; this.style.color = '#000000';}" onblur="if(this.value==''){this.value='Search Catalog... '; this.style.color = '#D7D7D7';}" style="@(string.IsNullOrEmpty(ViewBag.SearchWord) ?"width:15em; border: 0px; color:#D7D7D7;": "width:15em; border: 0px; color:#000000;")" rel="popover" data-placement="left" data-content="No Records Found" data-original-title="Alert" name="searchKeyword" id="searchKeyword" required/><a id="btn-search">Go &gt;</a>
</div>

Javascript:
<script type='text/javascript'>
         var productList = @Html.Raw(Json.Encode(@ViewBag.productListJSON))
         $(window).load(function() {
             if (productList == "") {
                $("#searchKeyword").popover('show');
            }
         });
    </script>

What it does: it displays a popover only when search return empty set:

Search box with a link inside

Doing a project, I had to implement a search-box with link inside in knockout-bootstrap environment. Before doing something like this, I Googled the Internet and found out that there is no solution on popular sites. So, I decided to write by myself. It a very easy and very elegant piece of code.

Here it is:
<div class="row">
    <div class="btn searchcontainer" id="searchcontainer"><input type="search" placeholder="Search Catalog..." style="width:15em; border: 0px;" name="searchKeyword" id="searchKeyword" required/><a id="btn-search">Go &gt;</a></div>
</div>

Couple days later... Placeholder does not work in IE9. I had to come up with some different code and I did:

 <div class="btn searchcontainer" id="searchcontainer" style="margin-top: 50px; margin-right: 25px;">
               <input type="search" value="@(string.IsNullOrEmpty(ViewBag.SearchWord) ?"Search Catalog... ":ViewBag.SearchWord)" onclick="if(this.value=='Search Catalog... '){this.value=''; this.style.color = '#000000';}" onblur="if(this.value==''){this.value='Search Catalog... '; this.style.color = '#D7D7D7';}" style="@(string.IsNullOrEmpty(ViewBag.SearchWord) ?"width:15em; border: 0px; color:#D7D7D7;": "width:15em; border: 0px; color:#000000;")" name="searchKeyword" id="searchKeyword" required/><a id="btn-search">Go &gt;</a>
            </div>

I think, it will work for IE 9 and IE 10 (cross the fingers)