Sometimes we have tabular data that do not go along well with mobile by default.
One of the approaches can be putting tables in a wrapper DIV to make them scroll horizontally on smaller devices as proposed by Bootstrap. But I’m not a big fan of it as the scrollbars are almost hidden on mobile devices and there are chances that user oversight them.
The other approach is to change the display of table on small device to display entire data on screen without scrollbar and that is what I’m going to demonstrate now. To accomplish that, I used the one of the underused CSS property
content: attr(value string).
Responsive design is fluid; using CSS3 media queries to respond to any screen sizes, where text can wrap and images can shrink to adjust along with your browser whereas Adaptive design uses a series of static layouts based on breakpoints.
– Excerpt from an article by Ryan Boudreaux
I think the above definition is self-explanatory; however I will try describing both with examples and used cases without getting into it that who started what and when.
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.
In 2013 Matt D Smith shared an innovative form interaction pattern popularly known as “Float Label Pattern”; it floats the placeholder up above the input and make it as label after the user focuses on the form field or enters a value.
“Only the placeholder text is showing by default, so there is a nice, clean and readable form. Once an input field is tapped and text is entered the placeholder text fades out and a top aligned label animates in. This way, with multiple fields a user won’t forget what an individual field represents.” — Matt D Smith
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.
As some of my colleagues know, I have been exploring SVG (Scalable Vector Graphics) lately. I must say that my background with Mathematics and ActionScript did help me a lot for the learning curve, but it is really very easy if you know how to work with a notepad along with a vector graphics software (I’m using Inkscape as it is free for Windows and Mac).
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 C
RUD 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 :).
For every constituency the page was getting refreshed. The only thing that impressed me, was page load time. The result pages are only HTML files, no external resource dependency. Then I thought that they could have used JSON and then showed result by filtering data. This gave me an idea to create a JSON result of all records and then play with it.