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)

Knockout-Bootstrap

Working in Bootstrap-Knockout environment, I have to create some elements to enhance the application. I found it's not easy to work  in this environment because Knockout dominates all the time. Therefore, I found a very good piece of software which work for me.
The code is in http://billpull.github.io/knockout-bootstrap/js/knockout-bootstrap.min.js

It's much easier to work with this library than  raw bootstrap and knockout.

Changing appearance of Bootstrap ToolTip

Today I worked on Bootstrap tooltips. I needed to set up several different tooltips on one page. The problem was with width of the Tooltips. I can not have the same width for all of them and had to set up different width for different tooltips. Thanks article, I found the way to set up the different width.

Each division has an unique class name (business_name and business_description) and I changed tooltip set up only this class (css)

/*specially for this template I changed Bootstrap tooltip width to handle a Product name*/
.business_name + .tooltip > .tooltip-inner {
    width: 350px;
}
/*specially for this template I changed Bootstrap tooltip width to handle a Product description*/
.business_description + .tooltip > .tooltip-inner {
    width: 350px;
}

These definitions overwrite Bootstrap tooltip and create a new setup.

A list of Font Awesome icons and their CSS content values

Today, I'm proud of myself. Instead doing a lot of tweaks and coding and found the way to satisfy my customer. I think, all of us, who work with Font Awesome, bootstrap and jQuery must know about article. It's absolutely clear, that the article will save many hours of coding and finding a right solution. I hope, to you the article as much as I can.

Text-overflow

Today I learned something new and quite interesting. Usually text-truncation is done with some javascript. Nowadays we can do using text-overflow. It very elegant and simple solution and it work just fine in all browsers. We just have to add text to a div or paragraph and create a class. For example:

HTML:
<div class="oneline" title="text">text</div>

CSS: .oneline { text-overflow : ellipsis; white-space : nowrap; width : 100%; overflow : hidden; padding: 0px; margin: 0px; }

This combination will truncate the long lines in div and gives a very good tooltip. I think, it's the most elegant solution I saw in a last time I work with HTML.

LESS

I'm starting to work with LESS. For those who has no clue what is this, I can recommend some sites

1. http://getbootstrap.com/customize/
2. http://coding.smashingmagazine.com/2013/03/12/customizing-bootstrap/
3. http://blog.teamtreehouse.com/customize-an-html5-webpage-using-the-bootstrap-framework
4. http://webdesign.tutsplus.com/tutorials/htmlcss-tutorials/get-into-less-the-programmable-stylesheet-language/

My job as a developer to learn how to use this wonderful environment for my application. Actually, it's going to be my first interaction with built-in CSS environment. I hope, it's going to give me less coding work as it used to be.

9 Useful Chrome Extensions

Today I'm beginning to work with Bootstrap and need to install some Chrome Extensions for template testing. I found a nice referral source to install. I hope, it will make my work easier and comfy. I have never worked with Chrome extensions before and would like to explore this avenue. I will let you know how it works for me. Bye for now.

BEM

Working in a different companies, I always spend extra time getting to know code and especially code conventions. Usually there is not problem in small company or on a small project, but big teams and big projects need some time to adjust.  I just started a new project and found some time to learn about code background and standards, I was offered to read a very interesting article on a site http://bem.info/ . I think, each company must adopt such good standard for development and testing. I hope, many developers can read such interesting article. I think, Russian developers did pretty good job.

ASP.NET MVC training

Since many companies start to explore relatively new Microsoft platform such as MVC, I decided to find a good tutorial to train myself. As several people suggested, I went to ASP.NET and started to learn new ideas from Microsoft. I hope to go through all course in a near future.

Text resizing for desktop, mobile, and smartphones

In many cases we have place a lot of text (content) on a page, which must be readable from any Internet-enabled device. So, we have a problem to resize a text, image or any other element on a page. It's quite easy, especially with a right advice, which I found in  article . Actually we have to place a simple several line of code in css, and text will be perfectly resize. Here they are:
 

body {

transition:all .2s linear;

-o-transition:all .2s linear;
-moz-transition:all .2s linear;

-webkit-transition:all .2s linear;

}

 

Link to Button

Doing a new mobile design, I met several requests to convert  a comple link into buttons. I came out with quite simple and good css element for a class link.

.link { display: block;
height: 40px;
width: 250px;
border: 1px solid #000;
font: bold 11px Arial;
text-decoration: none;
background-color: #EEEEEE;
color: #333333;
padding: 2px 6px 2px 6px;
text-align:center;
-moz-border-radius: 20px;
-webkit-border-radius: 20px;
-khtml-border-radius: 20px;
border-radius: 20px; }

It will create a button in any view mobile/desktop or tablet. I think, it's quite useful.

CSS Content

Today I'm going to talk about property in CSS3 content. It's quite importent property in responsive web design. Instead of using a lot of images, I used a content. First of all I foudn a very interesting article , where I found exceptionally interesting chart for using special characters inside of the content. I think, many of us, who do Front-End development need such a good graph . Don't waste a time trying to use another tricks. This chart will make your life much easier.

Changing Up and Down arrows

Today I discovered a whole world of special characters for triangle-arrows in HTML. First of all, I found a very good article in stackoverflow.com . For a second, I wrote a small Javascript function to change arrows on click with a text.  This function will change the text and arrow on click.

HTML:
<TR>
<TD>Peter</TD>
<TD><span id="arrow">&#9660;</span><a href="#" onclick="changeText(); return false;" id="part">Boris</a></TD>
</TR>
Javascript to change text and arrow direction:
function changeText() {

if ( document.getElementById('part').innerHTML == 'Boris')
{ document.getElementById('arrow').innerHTML = '&#9650;';
 document.getElementById('part').innerHTML = 'Andrew';
}
else {
document.getElementById('arrow').innerHTML = '&#9660;'
document.getElementById('part').innerHTML = 'Boris';
}
return true;
}

CSS:
#part, #arrow {
text-decoration: none;
font-weight: normal;
color: #000000;
}

Responsive Data Tables

Today one of the hiring companies in my area approached me with an interesting task. They have to construct a responsive data tables. I decided to research the problem and found very interesting site. Actually I downloaded some files and played around. I think, I got the idea of flip-flop tables. Now they're quite important in mobile design. I hope, managers from the company will be happy to accept my solution.

Home work for interview

Lesson 5

• What is delegate in C#?
• How to catch error in Javascript?
• What is the difference between DatarReader and DataSet?
• What is the difference between browsers?
• History of Microsoft .NET

Elegant jQuery Modal window

Recently I was interviewed by the company and asked to perform their website analysis. Working on it, I found very elegant modal window based on jQuery.
Here is a code and live-demo This elegant solution can be implemented even on a front page.

OOP video tutorials

Absolutely unexpectable for me, I found 2 very good OOP video tutorials. Since I would like to master myself in OOP, I decided to post these tutorials:

• Object Oriented Programming What is it Pt 1
• Object Oriented Programming What is it Pt 2

Plus I found a very good resource for us, developers, who wants to learn more. It looks to me, this guy does a good job educating others. I'm going to try to watch all of his video tutorials.

Home work for interview

Lesson 4

• What are Cookies?
• What is Session State?
• What is HTTPhandlers?
• What is LINQ?
• What is Reflection?
• What is MVC(Model-View-Controller) in .NET?
• What is the difference between strong typing and weak typing?
• What is the difference between class and interface?

New tools for web design

Recently WEBSITE magazine published an article about tool for mastering usability & interface design. Here's 2 of them, which I believe are really good.

• MockingBird
• Dojo

I will try these tools and let all of you know how I feel to use them.

jQuery vs jQueryMobile

I just had a very interesting interview and had a question. How jQueryMobile differs from regular jQuery? I was quite interesting to me, because when I worked on mobile sites I did not have even time to think about it. Now it's time to search for the answer.

Per my research I found:
 - "jQuery is purely designed to simplify and standardise scripting across browsers. It focusses on the low-level stuff: creating elements, manipulating the DOM, managing attributes, performing HTTP requests, etc.

jQueryUI is a set of user interface components & features built on top of jQuery (i.e. it needs jQuery to work): buttons, dialog boxes, sliders, tabs, more advanced animations, drag/drop functionality.
jQuery and jQueryUI are both designed to be 'added' to your site (desktop or mobile) - if you want to add a particular feature, jQuery or jQueryUI might be able to help.

jQuery Mobile, however, is a full framework. It's intended to be your starting point for a mobile site. It makes use of features of both jQuery and jQueryUI to provide both UI components and API features for building mobile-friendly sites. You can still use as much or as little of it as you like, but jQuery Mobile can control the whole viewport in a mobile-friendly way if you let it.

Another major difference is that jQuery and jQueryUI aim to be a layer on top of your HTML and CSS. You should be able to just leave your markup alone and enhance it with jQuery. However, jQuery Mobile provides ways to define where you want components to appear using HTML alone - e.g. (from the jQuery Mobile site):" - www.stackoverflow.com

It's truly true, you never know when you're going to learn. I LEARNED!

Home work for the interview

Lesson 3

• What is IIS (Internet Information Services)?
• What is the difference between Apache and IIS server

ASP.NET questions

• What is a Master Page
• What is the Code-behind
• What is the Postback?
• What is the VIew State? Disadvantages and Performance
• How to pass variables between the pages
• Type of Validation
• Response.Recirect vs Server.Transfer
• What is global.asax
• What is the web.config
• Major type of files in ASP.NET

C# questions

• What is the multiple inheritance and is C# support it?

  Multiple inheritance is a feature of some object-oriented computer programming languages in which a class can inherit characteristics and features from more than one superclass. It is distinct from single inheritance, where a class may only inherit from one particular superclass.C# implements single inheritance but allows for multiple interfaces at the same time indirectly.

• Will code in a Finally statement fire if I return a value in a Try block?
• Overload Method
• How to define inheritance
• C# String Builder

Home work for the interview

Lesson 2


What is Object Oriented Design?
What are the benefits and drawbacks?
What are important aspects of GUI design?
What is SQL injection?
What is the difference between GET and POST in web forms? How do you decide which to use?
Tell me about HTTP
What is Service Oriented Architecture? Advantages and Disadvantages?
What is the advantage of using CSS? What are some of the irritating limitations of CSS?
What's the difference between public, private, protected and internal modifiers?
What's the difference between static and non-static methods?
How have you used Reflection?
How to check if page is POSTBACK

Home work for the interview

Lesson 1

There are certain questions, which will be asked during almost every technical interview. I would like to be prepared and talk as confident as I can about.


1. What's new in HTML 5
2. What might slow the web-page?

-  site slow. If just one site is slow, then there is nothing you can do about it because the site itself is the cause.

- Connection slow. If all sites are slow, and it happens more at certain times of the day, then your Internet Service Provider or the Internet itself are slowing down under higher loads. Try using the ping and traceroute programs to diagnose the connections to various sites. If the delays are excessive on all sites then the cause is likely your Internet Service Provider, because even under very heavy loads the Internet backbone usually continues to provide good performance.

- Browser slow. There are no known browser configurations that can slow normal operation, although some can be configured to not download images, which can speed up operation on slow connections.

- Computer slow. If all sites are slow all the time, even for the speed of your Internet connection, then you should check and make sure that you have the proper modem configuration, hardware connections, driver and connection installations, and other options. You can check with your Internet Service Provider for correct connection settings. If you are hearing a lot of disk activity during the times that the response is slow, you may need to defragment your disk, or you may need more RAM memory, which is often one of the best ways to speed up a computer.

- Unoptimized Images. This is usually the most common reason for slow websites; there are lots of images, all of which are full-size and uncropped.

- Use of Server-Intensive Dynamic Scripts Dynamic websites, such as those that generate their pages from data stored in databases, are slower than simple HTML websites. And while the slight delay is not often noticed on small, low-traffic websites, it is often noticeable as a website increases in size and popularity. To remedy this situation, we suggest caching. Caching enables you to store copies of frequently accessed dynamic documents and allows files to be accessed more quickly.

- Too Much Flash. Flash is a great tool for adding interactivity or animation to a website.

- Bulky Code Some ways to make your filesizes smaller is by:

• removing unnecessary whitespace
• avoiding inline styles
• using external CSS & JavaScript documents
• opting for a CSS/DIV based layout, instead of a table-based layout
• writing efficient code

- External Embedded Media Ever wondered why many MySpace pages load very slowly? Well, this is a good example of why using external media is often a bad idea. If you add external videos, slideshows, etc… to your website, your website will be only as fast as the external website. So if some external website is having a slow day, so will yours. If possible, try to host all content on your own server.

3. How Can You Know You Are Shopping On A Safe Website?

Color contrast checking tool

Recently people from Washington suggested me a very good tool for color contrast. I installed it and play around. I think, it's easy and quite interesting. I hope, for those, who need, will use for the development.

Creative Design Tools for Non-Designers

I'm always feel confused with Adobe Photoshop and try to avoid as much as possible. I feel like I need another tools to be more artistic and creative with my projects. Unexpectable for myself Website magazine published an article about creative tools for non-designers. In spare time I would like to try some of them. For now I'm saving a link for future work here're some of them in case Website magazine delete the article:

• DeviantART
• Fluid UI
• Label59
• Wevideo
• Balsamiq
• Pixlr
• Mind Meister

I found a very good article on LinkedIn . Please check more tools.

Resizing image for Mobile devices.

I had to research a problem of resizing images for mobile. It's quite interesting, because my designer suggested to have to images for landscape and portrait views.  Taking her opinion, I decided to reseach by myself and found one very good idea over the Internet.  It's quick, easy and it works:
Javascript:
After initializing jQuery and jQueryMobile, place the script in a header
<script type="text/javascript">
    $(document).ready(function() {
$width = $('#content').width();
$('#content img').css({
'max-width' : $width , 'height' : 'auto'

});
    });
    </script>
HTML:
 <div id="content"><img src="temp.jpg" /></div>

Mobile Publishing

Today I'm working on some improvements in mobile development. Accidentally, I found a nice article, which has information about a new feature built in DreamWeaver CS5. First of all, I would like to play around with this feature. For a second, I would like to study a PhoneGap. I have to fins a better way to put information to our mobile site. Actually, I have to create something like automatic process for future postings on mobile website. I hope, I will find a way to do this.

How to detect a mobile browser

Today my coworker had a question: How to detect a mobile browser? He asked me and I found an interesting answer. Actually, someone did a great job and place many code on Internet. I was wondering, if any of this code will work on my site. I experimented and found out that it works. Now I can recommend this site for all of you. I hope, you will enjoy.

Javascript-based Charts

Today I'm trying to find out how to convert XML/SWF Charts into Javascript-based charts. First of all, I would like to explain why I'm looking for the information. As many of us know, XML/SWF charts can not be presented in mobile browsers. So, there is a problem.  I went out on Internet hoping to find something suitable for conversion.  Searching and searching, I found out a several possibilities for future mobile optimization.

• http://www.jqplot.com/
• http://www.flotcharts.org/
• http://www.fusioncharts.com/goodies/fusioncharts-free/
• http://www.jqchart.com/jquery/chart/chartdata/xmlfile

The fourth one I like a lot because the data is driven from XML file, which is closed to what I need. I hope, my selection will work for conversion