Sunday, 20 May 2012

Hide div when clicking outside the div Or anywhere on the page

Android blog with example
Hello Friends,
Yesterday while creating a web application in Java ,Jsp and Jquery I trapped
in a really weird situation. I make a div which show and hide on clicking
the down arrow icon as shown in the image.


My code is this:
1. JSP CODE:
     <div class="header">
            <div id="logo">
                <div id="emailAddress">
                    <a id="home" href="home.html">
                         mukesh@gmail.com
                    </a>
                    <div id="showSettingBox" class="dwnArrow ">&nbsp;
                    </div>
                    <div class="settingBox">
                        <a href="editProfile.html">Profile</a>
                        <a href="#.">Setting</a>
                        <a href="main.html">Logout</a>
                    </div>
                </div>
            </div>
        </div>
2. Java Script | JQuery Code:
     $("#showSettingBox").click(function(){
                    if($("#showSettingBox").hasClass("showBox"))
                    {
                        $("#showSettingBox").removeClass("showBox");
                        $(".settingBox").hide();
                    }
                    else
                    {
                        $("#showSettingBox").addClass("showBox");
                        $(".settingBox").show();
                    }
                }); 
    
But the div doesn't hide when we are clicking outside it or anywhere on the Page.
As shown in the below image.



Solution:
 If anyone else has this problem, here's a quick solution.  

  $("#showSettingBox").click(function(){
                    if($("#showSettingBox").hasClass("showBox"))
                    {
                        $("#showSettingBox").removeClass("showBox");
                        $(".settingBox").hide();
                    }
                    else
                    {
                        $("#showSettingBox").addClass("showBox");
                        $(".settingBox").show();
                    }
                }); 
                $('html').click(function() {
                //Hide the menus if visible
                $("#showSettingBox").removeClass("showBox");
                              $(".settingBox").hide();
                });

                $('#showSettingBox').click(function(event){
                    event.stopPropagation();
                })

I added the above selected(5-6 line) code in my java script code and its 
working for me. :)
Just Use event.stopPropagation(); with the Id of div.

Hope this will helps you !!!
Happy Coding.... :)
Enjoy :)


Friday, 11 May 2012

Android(Java) - gson\json deserialization error

Android Blog With example



Hello Friends,
 
     I found a strange issue in android application , My application is running 
     Fine but in few of the device(like:HTC Explorer, HTC Desire.....) its gives  
     parsing error.....
            
           JsonParseException: The JsonDeserializer com.google.gson.  
           DefaultTypeAdapters$CollectionTypeAdapter@4e76fba0 failed to
            deserialize ...
                
   After doing a lot of investigation  , Here are the steps which I follow to fixed 
   this issue:
    1) Download jarjar (http://code.google.com/p/jarjar/downloads/list)
    2) Put jarjar-1.3.jar and gson-2.1.jar in the same folder
    3) Create a new text file in this folder (rules.txt)
    4) Write the following line in the textfile:     
         rule com.google.gson.** com.google.myjson.@1
 
   5) From the command line, go in to the folder where you placed 
        jarjar-1.3.jar and gson-2.1.jar and run the following 
        command:
      "java -jar jarjar.jar process rules.txt gson-2.1.jar myjson-2.1.jar"  
 
  6) Replace the gson library in your project with myjson and
      update the imports.
  
  Hope this will helps you!
  cheers! :)
  Happy coding....... 
 



 

Copyright @ 2013 Android Developer Blog.