How can create a responsive web design?

Responsive Design

We can develop responsive webpage by using following ways.

  1. Media queries
  2. Responsive frameworks like Bootstrap and Foundation.

Media Queries Example:

To write CSS codes for accepting in mobile view only:


@media (max-width: 767px){
//CSS declarations
}

To write CSS codes for accepting in tablet view only:


@media (min-width: 768px) and (max-width: 1024px){
// CSS declarations
}

To write CSS codes for accepting in desktop view only:


@media (min-width: 1200px){
// CSS declarations
}

Some of Device Resolutions:

  • 768px – IPad portrait
  • 1024px – Ipad Landscape
  • 375px – Iphone6 Portrait or latest mobile devices
  • 360px – Some android phones
  • 320px – IPhone5 Portarit
  • 1280, 1366+ – desktop resolutions

Responsive design using CSS Frameworks (Bootstrap / Foundation):

This is like plug and play type. They have already predefined the required classes and components for responsiveness. We can use those class names and UI components for achieving responsiveness with minimal efforts.

Continue Reading

What are the steps to learn front end web development?

Learning Front End Development

  • First learn about web development basic concepts such as domain, web hosting, web server, FTP, HTTP, HTTPS, markup languages, script languages, SEO, version control, responsiveness, recent trends in web development… ect
  • Then focus on creating structures (image, title, table, logo, content section, slider, tab.. ect) using markup language like HTML/HTML5.
  • Then applying styles (color, fonts, background, line-height, border.. etc) for created structures using CSS/CSS3.
  • Create interaction between the webpage and user by using scripts like Javascript and Jquery.
  • Try to create responsive web page by using media queries.
  • Then use advanced responsive framework like Bootstrap and Foundation.
  • Learn Advance Javascipt based libraries such as Angular JS, React JS, Ember JS, Knockout JS, Node JS for advanced web development.
Continue Reading

Popover / Tooltip using Jquey plugin

Popover implementation using Webui-popover

Webui-popover is a jquery plugin which is used for creating popover UI component.

Step 1:
Include webui-popover CSS in head section.


 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/webui-popover/2.1.15/jquery.webui-popover.min.css" />

Step 2:
Include Jquery library and webui-popover js files in head section.


 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js "></script>
 <script src="https://cdnjs.cloudflare.com/ajax/libs/webui-popover/2.1.15/jquery.webui-popover.min.js"></script>

Step 3:
Call the webuipopover method to trigger the popover on the selected element.


$(document).ready(function(){
        $('#tooltippanel').webuiPopover({
                constrains: 'horizontal', 
                trigger:'click',
                multi: true,
                placement:'right-top',
                width:100,
                content: 'tooltip contents placed here...'
        });
    });

Explanation:

  • When click the corresponding selector (id or class name), script will trigger the webui-Popover on that target element.
  • Placement attribute specifies the tool-tip direction display. Different direction are there such as left, right, top, bottom, right-top, right-bottom, top-left, top-right.. etc.
  • We can put the tool-tip content within “content” attribute.
Continue Reading

Custom scroll using Jquery

Custom scroll implementation using mcustomscrollbar

Mcustomscrollbar is a jquery plugin. We will see the implementation steps below.

Step 1:
Include mcustomscrollbar CSS file in head section as below.


<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/malihu-custom-scrollbar-plugin/3.1.5/jquery.mCustomScrollbar.css" />

Step 2:

Inlcude Jquery library and mcustomscrollbar JS files in head section.


<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/malihu-custom-scrollbar-plugin/3.1.5/jquery.mCustomScrollbar.concat.min.js"></script>

Step 3:

Call the following function with proper selector name.


(function($){
        $(window).load(function(){
            $(".scroll-section").mCustomScrollbar();
        });
 })(jQuery);

Note: “.scroll-section” is the class name of content section which we have to trigger the custom scroll.

Continue Reading

Show one popover at a time and hide other popovers

Show one popover at a time

We have implemented popovers on a web page by using webuipopover jquery pluign. When use clicked the first popover after that he wanted to click another popover without closing the first popover at that time both the popovers will open.

To overcome this issue we have to use following script.

Script:


$('.triggerpopover').webuiPopover();
$('.triggerpopover').on('click', function (e) {
  $('.triggerpopover').not(this).webuiPopover('hide');
});
Continue Reading

Load more items when clicked show link using jquery

Loading more items using Jquery

When the page loads I am displaying 5 items Initially. When I clicked show link which is placed on the bottom, it will show next 5 items. When all the items are displayed, I have to hide the show link further.

Solution:

Load more items when clicked show link using jquery

Script:


var itemsCount = 0;
 var itemsMax = 30;
 //var itemsMax = $("#totalcount").val();
 $('.product-section .item').hide();
function loadNextItems() {
 var pagination = 5;
 //var pagination = $("#initialcount").val(); 
 //var pagination = parseInt($("#initialcount").val()); 
 //parseInt
 for (var i = itemsCount; i < (itemsCount + pagination) ; i++) { $('.product-section .item:eq(' + i + ')').show(); //load 5 more items in every iteration } itemsCount += pagination; if (itemsCount > itemsMax) {
 $('#showmore').hide(); 
//hiding load more link after loaded the maximum count
 }
};
loadNextItems();
$('#showmore').on('click', function (e) {
 e.preventDefault();
 loadNextItems();
});
/* end load more items*/
});
Continue Reading

How to limit the number of characters using Jquery

Limit the characters count (Characters count) using Jquery

In some cases we have to limit the number of characters in text contents(heading, paragraph). Additionally We can add […] which tells the user corresponding word/sentence is not completed.


//Limit the characters count to 55.
$(this).text($(this).text().substr(0, 55));

//adding [...] at then end of word
$(this).append('...');

Continue Reading

Instantly turn any ttf font permission into installable

Turn any ttf font permission into installable

Online based tool to set truetype fonts permission into its least restrictive form “installable embedding allowed”. Solves most problems related to embedding fonts into web pages, free of charge. Based on the tool embed. Made because there just weren’t any quick fix tools available.

https://www.andrebacklund.com/fontfixer.html

Continue Reading