Bootstrap 3: Dropdown form fields without <form> tag

bootstrap 3: dropdown form

There are times when we need some forms in dropdown menu, e.g. login/register/settings. The implementation is very easy in Bootstrap 3, however with form fields inclosed in <form> tag. But if for some reason we cannot use <form> wrapper (take instance of moonshine technologies .NET Web Form or JSF where entire page is wrapped in single <form>) then there is a peculiar behavior that dropdown get closed when you click on input fields.

Read more…

Cross-browser Responsive SVG with PNG fallback

Working with SVG is fun but putting it in action can be pain. There were two challenges that I faced; It is not supported by IE8 and below and It was not responsive enough on IE9 and above.

Internet Explorer is main culprit in cross-browser Responsive SVG. If we do not mention the height then IE assume the height of SVG as 150px by default and therefore the code max-width: 100%; height: auto failed. The SVG get stretched to fill the width but the height remains 150px.

Read more…

Bootstrap 3 Modal – Easy way

For past one year I am mostly using Bootstrap 3 (UI framework) for RWD and rapid prototypes, and I discovered that non-UI-background developers usually face problems during the implementation of Modal popups. To make my work easier, I have written a wrapper function in JavaScript for Bootstrap Modal. It does not need any HTML semantics to be present in DOM. The necessary HTML is added to document body when it is called first time, and later the cached instance is used. I tried to make it as simple as I think of and utilized the most used Bootstrap options for Modal.

Read more…

jqGrid with BackboneJS

In one of my past project we (team) used Backbone to give structure to web application and jqGrid for data display and manipulation. The data layer was RESTful JSON api and the problem that I faced that we were fetching data through Backbone’s RESTful JSON interface, however for other CRUD requests we wrote custom functions. So basically it was one-way data binding and once data arrived from server, the job of Backbone Collection was done.

As novice Backbone and jqGrid developer, I wondered why couldn’t we bind Backbone Collection to View (jqGrid) two-way, so that the collection get updated when we manipulate grid records and therefore synchronized with server automatically, leveraging Backbone. So, I googled and searched stackoverflow and found no help.

Now that I’m well up in Backbone and I know we can achieve that, I would like to share my-way :).

Read more…