Wednesday, May 14, 2014

How to call jquery function from JSP page conditionally

Sometimes we might need to write a jquery function in jsp page and we might need to call it only when it is required or based on certain conditions.

Say we have a boolean attribute based on which we have to call jquery function.

Setting an attribute on server side

We set an attribute on server side using

 req.setAttribute("myAttribute", true);  // On Server Side

on jsp page use <% % > tags to write java code and get that attribute.

Getting attribute in JSP

<%  boolean myAttribute = (Boolean)req.getAttribute("MyAttribute") %>

Now, if that boolean is true write your jquery script.

Calling Jquery function in JSP

<%  if( myAttribute) {%>
<script>
   $(function () {
      alert("Called Jquery from JSP conditionally")
})
</script>
<%}%>

Or you can use taglib library

Example for calling jquery in JSP:

 <c:set var="myAttribute"  value="${5}"/>
<c:if test="${myAttribute< 10}">
  <script>
   $(function () {

       alert("Called Jquery from JSP conditionally");
   });
  </script>
   Variable <c:out value="${myAttribute}"/>

</c:if>

How to make divs responsive-Creating simple responsive design

It is now became necessary for every website to be responsive to different platforms like mobile, tablet and desktop. Creating fluid or responsive design is made easy CSS3 media queries.

In this post we will see how to create a simple responsive design using media query.

1. Lets create two div blocks in a simple html page

<!DOCTYPE html>
<html>
<style>

#container {
  width : 610px;
}

.holder {
  width : 300px;
  height : 300px;
  border : 1px solid red;
}

</style>
<body>
    <div id = "container"> 
    <div class = "holder">
     MY CONTENT IN DIV 1
    </div>
    <div class = "holder">
     MY CONTENT IN DIV 2
    </div>
   </div>
</body>
</html>

If you execute the above code you will see something like below.

Fig.1 : Shows general div blocks with defined width and height of 300px

2. We need these div blocks to be side by side intially. So we will add some css properties to place them in one row.

Replace the holder class style with the below one.

.holder {
width : 300px;
height : 300px;
border : 1px solid red;
display : inline-table;
float : left;
}

Now our divs should look like this

Fig.2 : Shows div blocks aligned in one row(aligned side by side)

3. Now, the two divs total width is 600px(i.e 300px + 300px). Lets say any device/browser width which is less than that, we want them to be in one column

So, now using media query in our css we will change the css properties of the divs when the browser width is less than 600px.

a) Change container width to 100%

b) Change holder width to 100%

@media (max-width: 600px) 
{
 #container {
     width : 100%;
  }
 .holder {
     width : 100%;
  }
}

Thats it, if you include media query section in your style sheet, the result div blocks willl look like below for devices/browsers that are less than 600px width.

If you have any questions regarding this post, please post them in the comments section. I will reply as soon as possible.

NEXT TIP Centering a div inside another div

CREATING A MOBILE MENU

Saturday, May 10, 2014

YUI 3 Charts - How to display custom labels for axes

YUI 3 is the one of the best opensource javascript framework that I found to use for my clientele requirements.

YUI 3 provides good auto labeling for charts, but occasionally those labels will be not be good. In such cases we can customize the labeling for chart axes.

In this post I would like to explain the work around to fix labeling problems.

Lets start with creating a simple DOM element to hold our chart and apply basic styles to it.

<style>
#myChartHolder {
    margin:10px 10px 10px 10px;
    width:90%;
    max-width: 800px;
    height:400px;
}
</style>

<div id="myChartHolder">
</div>

We need YUI 3 library for working on any charts. So just point to the latest YUI library in the html header section(i.e between <head></head> tags). Say,

<script src="http://yui.yahooapis.com/3.16.0/build/yui/yui-min.js">
</script>

Now to render the basic chart with minimum data we use YUI's "use" method, pasted below with example data

<script>
YUI().use('charts', function (Y) {

     var myAxes = {
            totals:{
                keys:["total"],
                position:"left",
                type:"numeric",
                styles:{
                    majorTicks:{
                        display: "none"
                    }
                }
            },
            dateRange:{
                keys:["date"],
                position:"bottom",
                type:"category",
                styles:{
                    majorTicks:{
                        display: "none"
                    },
                    label: {
                        rotation:-45,
                        margin:{top:5}
                    }
                }
            }
        };

 var accountsGraph = new Y.Chart({
  dataProvider: [{"date":"July","total":"1"},
        {"date":"August","total":"1"},
        {"date":"September","total":"1"},
        {"date":"October","total":0},
        {"date":"November","total":"1"},
        {"date":"December","total":0},
        {"date":"January","total":0},
        {"date":"February","total":0},
        {"date":"March","total":0},
        {"date":"April","total":0},
        {"date":"May","total":0},
        {"date":"June","total":0}],
  render: "#myChartHolder",
  type: "column",
  categoryKey: "date",
  axes:myAxes,
  horizontalGridlines:true
 });
});
</script>

When you execute the above script, the result html chart would look like this,

If you observe the labels of the left Y-axis, some of the numbers are not good and we definitely do not want something like that.

In order to avoid any such long decimal or to replace with any custom content, we are gonna use "labelFunction" parameter.

In this function, we will force the decimal places to take only one using javascript's native function ".toFixed()".

In the axes definition, we have two variables "totals"(Y-axis) and "dataRange"(X-axis). Place the customLabel function for "totals" like below in between position and type parameters.

position:"left",
 labelFunction: function (val) {
                var display = val.toFixed(1);
// 0.9999999887 will be 0.9
                    return display;
                },
 type:"numeric",

If you execute the whole code, now your html result YUI chart should look like this.

Now that solves our problem for labeling errors in YUI 3 charts. If you have any questions, you can post them as comments, I will reply as soon as possible.