How to format JS date object in AngularJS using date filter.

AngularJs provides its own “date” filter to modify Javascript date object to a given format.

Following are defined format strings, which can be used to format JS date object.

Continue reading How to format JS date object in AngularJS using date filter.

Use TabIndex Form Field Focus in Specific Container

Using tab index attribute in HTML form fields a user can easily navigate to the next or previous field by merely using the keyboard. But after some presses, Tab index focus caret secretly goes to a new dimension where it becomes impossible to press tab to get back that caret guy in place. ultimately we use to move back caret guy in place.

So during a requirement where I wanted to trap carret guy in a wrapper so that even after continous tabbing caret we never be able to leave that defined wrapper. After defined at input field that will focus on first defined form field automatically.

Continue reading Use TabIndex Form Field Focus in Specific Container

How to Set Disqus Configuration Variables.

Disqus is a great discussion add-on available for multi platforms. The installation process is very simple for known CMS and platforms. But my requirement was to add Disqus on a single page app. To get it installed, I landed on this page.

Continue reading How to Set Disqus Configuration Variables.

Simple Small Progress Percentage Bar Using Custom CSS and jQuery

Small and easily customizable percentage progress bar can be help full in some cases when you want to show quick inline graphs or data notations. If the requirement is simple, we can’t proffer heavy libraries. For the same reason, I have written a small jQuery function to draw an animated progress bar. I have added some custom option which user can easily change in HTML attribute it self.

We can change Height, Width, Background or Bar color, Speed of animation. You can suggest me if other features can be added.

Continue reading Simple Small Progress Percentage Bar Using Custom CSS and jQuery

Custom Read More and Read Less using jQuery/ Javascript Function.

You can always find jQuery plugins or libraries for any type of requirement. But if we try to add plugins for every specific requirement, then we end up with a bunch heavy loaded library set which can take much time to load and can badly affect page efficiency. So I personally prefer to always try to code some specific function or method which can easily do the stuff without causing any hassle to page load time and including big sized libraries which always and have not required features which we will never need in future.

Here we will talk about very simple but very important function which can make longer texts look more concise and user-friendly. When we have a web page with longer texts in every section, it becomes very difficult for users to scroll those lengthy documents either they are on desktops or mobile devices. So “Read More” functionality comes to the rescue. This feature adds a read more link after longer texts trimming to 2-3 lines. So if a user wants to read the whole text, they can simply click on “Read More” and see the whole text.

Continue reading Custom Read More and Read Less using jQuery/ Javascript Function.

How to Create Multipage PDF from HTML Using jsPDF and html2Canvas

UPDATE: Some code is modified due to the initialisation of jsPDF code it was creating blank PDF, now I have added setTimeout of 2 seconds, this will initialize code after the page is loaded. I have also added a Demo Link below

 

There are a number of tools which can easily create PDF files from JSON or raw data provided. But in some situations, we have rich UI elements like images and data representation in graphs, so in that case, we may require PDF as it is.

jsPDF and html2canvas are really powerful tools which can help you to convert whole HTML page into multi-page PDF document, which you can show in iFrame or user can even download it.

Continue reading How to Create Multipage PDF from HTML Using jsPDF and html2Canvas