How to make a lightbox, with overlay for entire page(not just viewport)?

Click and wait for another page to open for the data to display, this is no more a trend, now in every
website we find light boxes.  Light Boxes are the small boxes or we can say windows which appears in the middle of the screen with the data and all, and there is a transparent overlay just below it covering rest of the page.  We get plugins for these lightboxes, but when I tried it myself with simple javascript and CSS, was unable to get a perfect one.  But now I got something perfect the following code is perfect for the light box, with the simplest and minimum code we can create such lightboxes.
     Following is the html code:

<div class="container">
<input type="button" onclick="showOverlay()" value="Click Here For LightBox"/>
</div>  
<div id="overlay"></div>
<div id="lightBox"><h1>Jaydharphics</h1>
<input type="button" onclick="hideOverlay()" value="Close This"/>
</div>

Description:
  Overlay DIv and lightBox Div are the two DIVs we require for the lightBox.  As the name suggests overlay is the one covering the entire page and the lightBox Div is the one popping up with the data.  The container DIV is the normal page. In that page I have created a button "Click Here for LightBox" this button will trigger the display of the light box  and there is another button in the light box which will unhide the lightbox.
Following is the javascript for the above actions:

<script type="text/javascript">
function showOverlay() {
document.getElementById('overlay').style.display='block';
document.getElementById('lightBox').style.display='block';
}

function hideOverlay() {
document.getElementById('overlay').style.display='none';
document.getElementById('lightBox').style.display='none';
}
</script>

The CSS of the overlay DIV and the lightBox Div was the biggest issue for the perfection of this lightBox.  Making a DIV hide and unhide was easy but positoning of the overlay and lightbox DIVs is pretty important.  Few things are very important for a lightbox, the lightbox should be in the middle of the page, no matter what is the size of the screen, it should be at the centre.  For that reason the following CSS is very important and perfect.

<style>
#overlay{height:100%; width:100%; position:fixed; background:#545454; opacity:0.5; top:0px; left:0px; display:none;}
#lightBox{position:fixed; top:50%; left:50%; width:400px; height:200px; margin-left:-200px; margin-top:-100px; border:4px solid #e4e4e4;  background:#fff; display:none;}
</style>

A very important thing in this CSS of lightBox are the width, height, margin-left and margin-top properties.  margin-left value(-200px) should be half of the value(400px) of width and margin-top value(-100px) should be half of the value(200px) of the height, and the values of margin-top and margin-left should be in negative. 
This will make your light box display in the centre of the screen.

Next is the CSS of the overlay DIV:
#overlay{height:100%; width:100%; position:fixed; background:#545454; opacity:0.5; top:0px; left:0px; display:none;}

Most of us definately have problem with this overlay. The CSS I used earlier was used to cover the viewport only, not the entire page.  But a simple change in the CSS fixed my problem. yes! fixed is the word which fixed my problem.  Most of us use position:absolute; for this, but position:fixed; is the solution.  This will cover your entire page and rest of the CSS I think is not tangent for you!
  Thank You Friend!

Share Your Solutions!

Godavari Launch Journey towards Bhadrachalam

Finally! I did it, always wanted to go Bhadrachalam on launch.  Never dared to plan the trip, but thanks to my cousin it was his engagement which made my trip possible.  I think launch journey on River Godavari from Rajahmundry to Bhadrachalam is one of the best tourist attraction in Andhra Pradesh state of India.  The journey was through various temples and hill stations.  The beautiful greenery surrounding the river Godavari is just superrrrr.
   There are many travel agencies in Rajahmundry at the bank of Godavari, where you can book your tickets for the journey.  There are many different packages for this journey like same day returning trip, 2days and 1 night trip, 3days  and 2 night trip etc. etc. "more sugar more sweetness" I think you got me.  As we were not having enough time we decided for one day trip.  They also have a special package for those who don't want to return to Rajahmundry and continue the journey to Bhadrachalam.   Han! "Bhadrachalam" yes  let me tell you something about this,  its 400 years old temple made by a local Tahsildar  called Gopanna popularly known as Bhakta Ramadasa.  There is a huge history behind this temple for more information on Bhadrachalam and Ramdasa watch telugu movie Sri Ramdasa or Google it! APTDC launches are also available for this journey but APTDC launches are available on Fridays only.  So, its better to go for travel agencies.
     We boarded on a bus provided by the travel agent at Rajahmundry at travel agents office which took us to a stop called Pattiseema.  Its around 35Kms from Rajahmundry to Pattiseema.  Many Launches were harboured in the river.  Each Travel agents have their own Launches.  In Pattiseema itself  there is a temple, but the tour package doesn't include the visit of this temple. so if your are a real Bhakta (devotee) you have to arrange your own trip for visiting all temples in Rajahmundry.  Its just impossible to visit all the temples coz there were so many. 
   Following is the Pattiseema temple. Its a small temple located on top of a small hill.  The temple is for god Sri Uma Maha Nandiswara swamy (short me bole to Shiv Bhagwan).  There is some information like there was an under ground way to reach kashi from this temple. This temple was constructed during 12th century.  Thanks to the guide of our launch he gave all this information so if you find this wrong its that guide who is responsible not me OK.  Breakfast will be served here so no need to worry about your belly.

The second stop was at Gonduru, temple of Goddess Gandi Pochamma.  It was a small village with a beautiful entrance you can see the following images of the Gonduru.  Entrance ticket is to be taken for INR 2 and for special darshan (only on sunday and Tuesday) INR 5.  For special pujas you can pay additional amount.

The next stop was at a check post before entering into Papikondalu (Papi Hills) area. This one is for a very short duration tourists are not allowed to board off,  the launch manager have to report number of persons travelling on the boat at the check post.  The place is Devipatnam,  this is the place where an Indian revolutionary Alluru Sita Ram Raju, looted a police station and killed 20 British Policemen.  You can see that police station from the launch only.  Following is that police station.

 Then the journey was through the Papi Hills which was very beautiful.  The journey was through thick forest surrounded by hills at both the sides.  This part of the journey was quiet longer.  Lunch was served before reaching the next stop Peranta Palli.  While cruising through Papi Hills you will come across a small village at East side of the Godavari River.  Its Kolluru Bamboo Huts, There is small colony kind of thing at the bank of river.  If you want to stay there there are other packages which you can go for.  There is no electricity in that village solar power is used for lighting and all.  Food will be arranged by the travel agent you can spend your night and have a nice camp fire, next morning launch will come to take you forward.

The next stop was at Peranta Palli.  Sri Ramkrishna Hermitage is the major attraction at Peranta Palli.  There is a small water fall in front of the hermitage flowing from hills.  The water was very chilled there, we got lot of relief taking a dip in that water.  Worshipping any other god near the Hermitage is not allowed,  no offerings are allowed in that temple.  If you want to offer something to those villagers you can buy books and variety of handicrafts made up of bamboo made by local villagers.  The Hermitage was started by Sri Swamy Balananda.

 After Peranta Palli there will not be any more stops.  Those who want to go Bhadrachalam have to change their launch.  There was a separate launch standing for us at Peranta Palli.  This launch will drop you at a stop at east godavari.  We reached that unknown stop where vehicles were parked to take us to Bhadrachalam.  Those vechiles were also arranged by the travel agent, they will take you near Bhadrachalam temple.  There are many dharamshalas and hotels in Bhadrachalam, but there is a
hotel nearest to the temple called "OM SHANTI GUEST HOUSE".  The rates are comparable so its better to book there.  There is another dharam shala near temple, its "TANISHA DHARAM SHALA/ KALYAN MANDAPAM", you can try that also.  There is another spot near Bhadrachalam "Parnashala', its around 40 Kms from Bhadrachalam, one must go there.  Bhadrachalam pics-

We had a tough time returning to Rajahmundry from Bhadrachalam.  Because of that Telangana issues buses were on strike, so we had to travel around 100 Kms on auto rickshaw from Bhadrachalam to Arsarao Peta.  From Arsarao Peta APSRTC bus services were available.  Ultimately we had a nice trip.  Thank you for sparing your precious time.  Good Bye!!

My First Animation

Today I am sharing my first animation, This must be the slowest animation ever made on the earth. Well I made this animation using Macromedia flash MX, Each and every scene and the characters are made using the mouse.  It took me a long time to make every movement of the characters GOLDI and the stranger doing his morning exercise.  For each hand and leg movements I drew with mouse.  Definately this is not the way animations are made, there are better alternatives, otherwise for a single episode of Tom & Jerry, the animators would take years to complete. 
If I come through some easy and better alternatives I am definately going to share, until just watch the video.

Share Your Solutions