Version 2 : Dynamically change IFrame Heights

May 25, 2009 by manikandanmv

This is a continuation of my previous blog. Dynamically change IFrame Heights – here loaded a static HTML content on iframes.
In version 2, we have loaded dynamic files inside the iframes. At the same time we have to dynamically change the height of iframes based on their loaded file content.

Sample Code

Below code works well in both browsers Firefox & Internet Explorer.


<html>
<body>
<script>
function setIframeHeight()
{
    var elt = document.getElementById('testIframe');
    if(elt.contentWindow){
        document.getElementById('testIframe').height = elt.contentWindow.document.body.scrollHeight + 30;
    }
}
</script>

<iframe src="http://manikandanmv.wordpress.com/ajax.html" name="testIframe" id="testIframe" onload="setIframeHeight();" />
</body>
</html>

contentWindow

  • returns an window object of the iframe.

scrollHeight

  • is a property which returns the scrolling height of the object.
  • the value specifies only the visible height of the object.

elt.contentWindow – returns the object of IFrame window.
elt.contentWindow.document – returns the object of HTML document.
elt.contentWindow.document.body – returns the object of HTML body element.

You may also use contentDocument property for getting height of iframe. This will work only in Firefox. Since IE6.0 or 7.0 does not support this property. This has been supported from IE version 8.0

Sample code for doing the same in Firefox with contentDocument

if(elt.contentDocument){
elt.height = elt.contentDocument.body.offsetHeight+40;
}

contentDocument

  • returns an object of iframe document.

offsetHeight

  • is a property used to retrieves the height of the element/object in pixels.
  • this value includes the height of elements borders + padding.

Tags: , , , , , , , , , , , ,
Posted in DOM, HTML, javascript | 3 Comments »

How to open Ajax Page in Browser New Tab

May 18, 2009 by manikandanmv

It’s not easy task to support both “Load a web page using Ajax” and “Allow to open the same page in browser new tab”. Because we have to manually handle the second option. Let’s see how to solve this task.
Before proceeding, first you have to know why ajax web pages are not able to support the second option.
Reason : when you click a web page link, it will just invoke a javascript method specified in onclick event which loads the page through ajax requests. So here “href” attribute of anchor tag is either empty or “javascript:void(0);”. Due to this we are not able to open the page in new tab.

Sample code for achieving both the actions

  • ajax page load
  • the same page should be able to open in Browser New Tab by using “Open Link in New Tab” option.

Two operations handled in the web page links(anchor tags),

  • invoke the method showPage when u click the link. which means simply onclick event gets fired.
  • if u open the same link in new tab, the below sequence of actions will execute.
    • # part of href(say, #/blogs/JSON/json-basics.html) has appended to the browser url
    • showtab method has invoked beco’z the main page gets loaded. rest will take care of the method showtab

main page should be like this.


<html>
<body>
<a href="#/blogs/JSON/json-basics.html" onclick="showPage('/<span style="color:#000000;">blogs</span><span style="color:#000000;">/JSON/json-basics.html');">JSON Basics</a>
<a href="#/</span><span style="color:#000000;">blogs</span><span style="color:#000000;">/ajax/ajax-basics.html" onclick="showPage('/</span><span style="color:#000000;">blogs</span><span style="color:#000000;">/ajax/ajax-basics.html');">Ajax Basics</a>
<a href="#/</span><span style="color:#000000;">blogs</span><span style="color:#000000;">/html/html-basics.html" onclick="showPage('/</span><span style="color:#000000;">blogs</span><span style="color:#000000;">/html/html-basics.html');">HTML Basics</a></span>

<span style="color:#000000;">
<div id="showhelp"></div>
<!-- This div is the Common Dynamic Area, this area gets changed based on clicking the above link --></span>

<script>
showtab();
<!-- this method gets executed everytime when a page loads.
what this method does,
just get the full url from the browser address bar.
parse the url and get the exact "new page url" which is available after the symbol "#"
and send the "new page url" via ajax request.
-->

function showtab()
{
var url = document.location.href;
var index = url.indexOf("#");
var taburl = "";
if(index>0){
var taburl = url.substring(index+1);
}
sendAjaxRequest(taburl, "showhelp");
}

function showPage(url)
{
sendAjaxRequest(url,"showhelp");
}

function sendAjaxRequest(url, divid)
{
var req = <a href="http://manikandanmv.wordpress.com/2008/09/29/ajax-example">getXMLHttpRequest</a>();
req.onreadystatechange = function(){ processResponse(req, divid) };
req.open('GET', url, true);
req.send(null);
}

function processResponse(req, divid)
{
if (req.readyState == 4) {
if (req.status == 200) {
document.getElementById(divid).innerHTML=req.responseText;
}
}
}

</script>
</body>
</html>

Are you new to Ajax..? Read the below posts for learning basics.

Ajax Basics – http://manikandanmv.wordpress.com/2008/09/23/ajax-asynchronous-javascript-and-xml/
Ajax Example – http://manikandanmv.wordpress.com/2008/09/29/ajax-example/

Tags: , , , , , ,
Posted in AJAX, HTML, javascript | Leave a Comment »

Dynamically change IFrame Heights

April 25, 2009 by manikandanmv

With script you can able to change/set the iframe attribute values dynamically. Sometimes we don’t know the actual height of the web page because page gets loaded dynamically and the height may varies. So here i have to calculate the page content height dynamically and set the same value in iframe height property. Mainly this is required when a page loads dynamically inside the iframe and its height can adjust automatically based on the content.(which means to show iframe without vertical scroll bar).

Sample Code


 <html>
<body>
<div id=”showid”>
<table>
<tr><td>
Enter your name <input type=”text” name=”yourname”/>
Enter your age <input type=”text” name=”yourage”/>
<input type=”submit” name=”Submit”/>
</td></tr>
</table>
</div>

<script>
function setIframeHeight()
{
document.getElementById(’testIframe’).height = document.getElementById(’showid’).offsetHeight;
}
</script>

<iframe src=”" name=”testIframe” id=”testIframe” onload=”setIframeHeight();” />
</body>
</html>

offsetHeight

  • is a property used to retrieves the height of the element/object in pixels.
  • this value includes the height of elements borders + padding.

How it works.?

Browser rendering a page by reading each HTML tags, scripts are loaded first. When the control comes to iframe tag, we have specified an event called onload and the value setIframeHeight() method gets invoked. In this method we get the height of the page which is rendered inside the div element and set the same in iframe height.

Like this you can set the value of any iframe attributes.

document.getElementById(’testIframe’).width = 100;
document.getElementById(’testIframe’).scrolling = “yes”
document.getElementById(’testIframe’).class= “css_classname”;

Tags: , , , , , , ,
Posted in DOM, HTML, javascript | Leave a Comment »

Inspirational Book : It’s All a Matter Of ATTITUDE

April 17, 2009 by manikandanmv

I got a chance to read a book called “It’s All a Matter Of ATTITUDE” written by Justin Herald. Thanks to my friend to lend me the nice book. In my life i have never read a book like this. I can recommend every people to read this book.

Really surprised.! Because i have already followed some of the points specified in the book in my life. This was a great sync between me and this book. So i was impressed and finished the book at a great pace. Due to this my friend gifted this book to me.

I have an attitude to share my knowledge with my friends/colleagues/peoples around me, hence this blog post. Surely all the points are helpful to improve/enhance your life well.

The book has almost 50+ consolidated slogans about attitudes. But here am going to summarize the points in topic wise which will be helpful for better understanding.

Topics are

  • Positive Attitude
  • Attitude Towards Goal
  • Success Attitude
  • Winners & Losers Attitude
  • Advice
  • Leadership & Ownership

Positive Attitude

  • Positive Attitude = Positive Results.
  • I don’t have an Attitude Problem… You have a Perception Problem
    • The best way to overcome is constantly keep your own attitudes in check.
  • I don’t care how Good you are…. I’m Better!
    • Never compare yourself to others and their results.
    • You are better than the outcomes that you experience. – it just means you are constantly bettering yourself.
  • Its all about your mindset

    • If nothing worked out as u planned, you can still get back on track.
  • 100 % Attitude
    • You will achieve a lot more if you adjust your attitude.
  • If you think you can’t…… You won’t
    • Our thinking plays a huge role.
    • Our thinking will control our actions
    • Our mindset has determined our’s end result.
  • If you think you’re beaten… You are!
    • Keep your mind filled with the positive things around you.
    • Don’t think in -ve way, If u did , the minute you allow a second outcome.
  • Life’s tough… So what!
    • Have an attitude that you CAN.
  • It’s none of my business what you think of me!
    • We all need to block our ears to negative people.
    • Become bulletproof – people around you offer negativity , separate yourself from them and their comments.
  • Be Different…. Be Better.
    • Being excellent is a choice.
    • Have an attitude to try new things, and learn new things day by day.
    • Do things that you have never attempted before.
  • Self-control

    • Make sure you always control your goals, dreams and life.
  • A Positive anything is better than Negative nothing.
    • Focus on the positives and outcomes will come in front of you.
    • Being positive doesn’t mean that everything will always work out the way you plan, but it will help to keep you going in the right direction.
  • No Regrets… Not event a little one.
    • Don’t focus on what you have done wrong. Focus on what you can do right.
    • Regret – negative tone.
  • I preach what I practice.
    • Be an example to all.

Attitude Towards Goal

  • No LIMITS, No EXCUSES, No IF’s , No BUT’s… Just ATTITUDE.
    • There are no excuses in life, there are no limits as to how high you can go.
  • Keep your focus on where you want to go in life.
    • Change your focus to areas that will give results sooner.
    • Focus on areas which you need to improve.

Success Attitude

  • Success is all about the journey.
    • A successful person is measured by how many times they picked themselves up. Not measured by their ultimate outcome.
  • Secrets to Success.
    • Do whatever it takes to succeed.
    • Hardwork, determination and desire.
    • What have you prepared to get where you want to go?
  • 100% Effort
    • Stay focused on your desired outcome and apply 100% effort, your dreams will become reality
  • The EDGE is not the limit….. It’s only the STARTING point.
    • Better you can concentrate on achieving all you desire
    • Enjoy yourself and all that life brings.
  • Have people around you who are enthusiastic about their own success.
    • Being positive doesn’t mean that everything will always work out the way you plan, but it will help to keep you going in the right direction.
  • Risks
    • Take risks, risks are just part of the process towards success.
  • Successful people.
    • They did not focus on obstacles.They used obstacles to make them stronger.
    • They see ‘impossible’ as ‘possible’ . Its all up to you.

Winners & Losers Attitude

  • The Game isn’t over until I win
    • Quitters never win and winners never quit (remember)
    • Life is a game – we only compete with ourselves: our thinking/goals/dreams.
  • Losing is not an option
    • Never think you are a loser, it means your goal is bit longer to achieve.
    • Its all about how you view it really.
  • Winners make it happen… Losers let it happen
    • Don’t let your life happen around you. Achieving is all about controlling the final outcome.
    • Make your successes happen. It’s really up to you.
  • Champion
    • Winners attitude will be the deciding factor.
    • Just change your thinking and start acting like a champion, your results will soon follow.
  • Professional Losers
    • They are just blaming others, blaming their past and blaming those around them.
    • To avoid this never allow your thinking stuck in ‘loser’ mode.
  • Losers says “its all about Luck“
  • Losers shortcut is “Quitting“.
  • Winners do everything it takes to reach their goals.

Advice

  • Asking advice to others. (When i want your opinion, I’ll give it to you!)

    • Seek advice from those who have achieved a level of success in your desired field.

Leadership & Ownership

I have already written a blog about Leadership. Read it here

  • Leadership
    • True leaders, will always have people following them.
    • Make sure you lead them to a place they need to go.
  • Ownership
    • Own the process of your success.

Every person have both attitudes (positive & negative). It’s up to you to choose which one and proceed the life in success mode.

Tags: , , , , , , , , , , ,
Posted in attitude | Leave a Comment »

Handling Timezone in webclient Timer

March 24, 2009 by manikandanmv

This post is the continuation of my previous post “Showing Timer in webclient”. – i could not handled timezone in my previous code. In detail if you are running a server in one timezone, say US(GMT-08:00)  and you are accessing the server webclient in different machine which has different timezone, say, India(GMT+05:30). So already written code is failed to show the correct server time.
First analyze, what was the problem in previous code:

var time = <%=System.currentTimeMillis()%>
var date = new Date(time);

In the above code, am getting server time in milliseconds and set the same in javascript Date object.
var date = new Date(time) - while executing this line, server will get browser timezone and set that timezone into this date object. Due to this we are getting incorrect server time.

Solution to this problem is by setting year, month, day, hours, minutes & seconds separately to Date class.  Here Date class does not take browser timezone.

<%
Calendar c = Calendar.getInstance();
int year = c.get(Calendar.YEAR);
int month = c.get(Calendar.MONTH);
int date = c.get(Calendar.DATE);
int hrs = c.get(Calendar.HOUR);
int mins = c.get(Calendar.MINUTE);
int secs = c.get(Calendar.SECOND);
%>
var date = new Date(<%=year%> , <%=month%> , <%=date%> , <%=hrs%> , <%=mins%> , <%=secs%> );

For better understanding, once again i put the entire code here with the updated one.

Sample code with Timezone handling.

<div id=”showTimer“></div> <!– Used to show the Digital Timer –>

<%
Calendar c = Calendar.getInstance();
int year = c.get(Calendar.YEAR);
int month = c.get(Calendar.MONTH);
int date = c.get(Calendar.DATE);
int hrs = c.get(Calendar.HOUR);
int mins = c.get(Calendar.MINUTE);
int secs = c.get(Calendar.SECOND);
%>

<script>

var months = new Array(”Jan”, “Feb”, “Mar”, “Apr”, “May”, “Jun”, “Jul”, “Aug”, “Sep”, “Oct”, “Nov”, “Dec”);
function showCurrentTime(){
var date = new Date(<%=year%> , <%=month%> , <%=date%> , <%=hrs%> , <%=mins%> , <%=secs%> );
var showdate = date.getDate() + ” ” + months[date.getMonth()] + ” ” +date.getFullYear() + “, ” ;
var hrs = date.getHours();
var mins = date.getMinutes();
var secs = date.getSeconds();
hrs = (hrs > 9) ? hrs : “0″+hrs;
mins = (mins > 9) ? mins : “0″+mins;
secs = (secs > 9) ? secs : “0″+secs;
var showtime = hrs + ” : ” + mins + ” : ” + secs;
time = time+1000;
document.getElementById(”showTimer“).innerHTML=showdate + showtime;
}
setInterval(”showCurrentTime()”, 1000);
</script>

Tags: , , , , , , , ,
Posted in JSP, javascript | Leave a Comment »

Vector vs ArrayList

March 21, 2009 by manikandanmv

Almost all basic java programmers have this doubt in his mind which one is best to use either Vector or ArrayList, Hashtable or HashMap. I don’t want to deviate this topic by evaluating the time required for insertions/deletions/modifications of data in each class instances. Just want to convey a main difference that’s enough for developers to use these classes in a better way. In Java, both the classes are similar from an API perspective but there has to be some differences. Let’s see below.

Vector

  • Vector is thread safe, because vector objects are synchronized which means you can access vector objects from any number of threads at the same time without affecting its data.
  • Due to the above reason, In performance wise Vector is slightly slower than ArrayList

ArrayList

  • ArrayList is just opposite of Vector class. Its not thread safe, suppose if you are using ArrayList instances in multiple threads surely which leads to create some problems while accessing.
  • ArrayList comes from Collection Framework family. So its easy to developers to convert in to any other datastructure formats.

According to me, when you are going to write code without threads it would be better to use ArrayList instead of Vector. Because this will improve your code performance. Anyway based on your requirements you can choose either Vector or ArrayList.

If you want to use/access ArrayList objects concurrently without affecting its data, its possible. In Java, an API is available to achieve this.

List asyncList = Collections.synchronizedList(new ArrayList());

Like Vector vs ArrayList, the same differences are applies to Hashtable vs HashMap respectively

Tags: , , , , , , , , , ,
Posted in Java | 2 Comments »

Leadership

March 6, 2009 by manikandanmv

I came across this article in economic times, really nice one to read about leadership. Below are the points highlighted for a true leadership.

A true leader

  • is a person who is ready to take responsibility consciously.
  • he is ready to handle life consciously and he is not constantly dependent on the past.
  • is a person who is able to respond spontaneously to situations.
  • he is fresh in his ideas and continuously keeps himself alive.

Quality of Leadership

It comes from one’s ability to take responsibility for a particular organisation, a situation or a particular group with tremendous awareness and maturity.

Source : Leadership is state, not a status.

Tags: , , , , ,
Posted in Uncategorized | 1 Comment »

Method to convert string array to integer array in Java

March 4, 2009 by manikandanmv

Thanks to my friend to ask this question, hence this blog after long gap.
In Java , almost all code logics are processing in terms of objects. However some one new to java is not aware of this initially. For basic java learners, this blog will be helpful for understanding the array logic. Also java does not have any api’s to do this array conversion.
Lets explain the method.

  • input param is string array.
  • allocate sufficient memory for integer array intarray to store the converted value. - int intarray[] = new int[sarray.length];
  • finally iterate the string array values one by one and convert each value into an integer type.

public int[] convertStringArraytoIntArray(String[] sarray) throws Exception {
if (sarray != null) {
int intarray[] = new int[sarray.length];
for (int i = 0; i < sarray.length; i++) {
intarray[i] = Integer.parseInt(sarray[i]);
}
return intarray;
}
return null;
}

Note : like this you can convert string in to any available data types(float , double,…) of  which you want.

Tags: , , , ,
Posted in Java | 3 Comments »

Happy New Year 2009

January 1, 2009 by manikandanmv
Happy New Year 2009

Happy New Year 2009

Tags: , , ,
Posted in Uncategorized | Leave a Comment »

Showing Timer in webclient

December 22, 2008 by manikandanmv

With javascript you can get the current time of client computer’s and showing them dynamically in browser which looks like a digital timer. Though we can able to show the client’s computer time but mostly that’s not needed for web developer’s. The main thing they required is to show the server time in client browser. Lets see how to do it.
A simple steps to achieve this,

  • Get the server time using java method currentTimeMillis() this should return current time(in milliseconds) of machine where the server is running.
  • Using javascript Date class you can parse that value in your required format and show in webclient.
  • Then increment the time with value 1000 for each seconds. This will simulate like the time is running each and every second.
  • Finally, do the above 2 steps every seconds.

Sample code.

<div id=”showTimer“></div> <!– Used to show the Digital Timer –>

<script>
var months = new Array(”Jan”, “Feb”, “Mar”, “Apr”, “May”, “Jun”, “Jul”, “Aug”, “Sep”, “Oct”, “Nov”, “Dec”);
var time = <%=System.currentTimeMillis()%>
function showCurrentTime(){
var date = new Date(time);
var showdate = date.getDate() + ” ” + months[date.getMonth()] + ” ” +date.getFullYear() + “, ” ;
var hrs = date.getHours();
var mins = date.getMinutes();
var secs = date.getSeconds();
hrs = (hrs > 9) ? hrs : “0″+hrs;
mins = (mins > 9) ? mins : “0″+mins;
secs = (secs > 9) ? secs : “0″+secs;
var showtime =  hrs + ” : ” + mins + ” : ” + secs;
time = time+1000;
document.getElementById(”showTimer“).innerHTML=showdate + showtime;
}
setInterval(”showCurrentTime()”, 1000);
</script>

Tags: , , , , , ,
Posted in Java, javascript | Leave a Comment »

« Older Entries