Scroll To Top of the page smoothly

With single web page designs coming into play, a very small effect but very effective Scroll to top becomes a necessity in every web page.  And it is always a good idea to use this option if the web page has lots of content because it becomes easy for the visitor to navigate easily.  You may get many plugins for this simple action, lot of people use them but they don't realize about the extra garbage they take in their code with those large scripts.

Here we are using verrrrry few lines for this action.  You need a button to click on to scroll the page to the top.  Here's the CSS for the button:

<style type="text/css">
        .scrollup{
    width:40px;
    height:40px;
    opacity:0.3;
    position:fixed;
    bottom:50px;
    right:100px;
    display:block;
    text-indent:-9999px;
    background: red;
}
    </style>

I am using a button initially it is invisible when scroll down the page that button gets appear.  As you can see position:fixed and display:none is used, a fixed position right at the bottom of the page.  Button will be visible only when the page is scrolled down otherwise invisible.

Here's the script:

<script type="text/javascript">
    $(document).ready(function(){

        $(window).scroll(function(){
            if ($(this).scrollTop() > 100) {
                $('.scrollup').fadeIn();
            } else {
                $('.scrollup').fadeOut();
            }
        });
        $('.scrollup').click(function(){
            $("html, body").animate({ scrollTop: 0 }, 600);
            return false;
        });

    });
</script>

HTML for the button:

<a href="#" class="scrollup">Scroll</a>

You can see the first few lines of the script, action is agains window scroll when scrollTop position is greater than 100 the button fades In and gets visible and when clicked the scrollTop:0 makes it scroll to the very top of the page, at 0px position, and the 600 is used for the duration of animation in milliseconds. Higher values indicate slower animations. You can also use ‘fast’, ‘slow’ or ‘normal’ instead of millisecond values.

Share Your Solutions!!

Embed Youtube in Responsive Design

With all these handheld devices coming in to the market, it became obvious for us to design websites and web applications responsive to their devices.  Same thing happen to me also. Few days back I came across this problem.  I was working on a RWD website where client need a youtube video to embed.  Since the website is responsive I wanted the Youtube video to resize depending on the size of the browser, otherwise it is of no use people using handheld devices can't view that video.  When I embedded that video in my page it was with fixed width and height, so it was perfect in desktop and laptops.  But when I look at my smartphone......disappointment.

Little bit of research and simple CSS, thats it I was smiling with a solution.  Yes, just CSS no need of responsive embedding code that many of the developers are wondering for.  Only thing you have to do is wrap the youtube iframe into a div and treat the iframe and the child elements object etc. as that wrapper div's child element and style them.

Use following CSS:

.wrapper {

    position: relative;

    padding-bottom: 56.25%;

    padding-top: 30px; height: 0; overflow: hidden;

}

.wrapper  iframe, .wrapper  object, .wrapper  embed {

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

}

Use following HTML for the youtube embed code.

<div class="wrapper">

         <iframe width="560" height="315" src="//www.youtube.com/embed/Lp6n5JWuAcg" frameborder="0" allowfullscreen></iframe>

</div>

Sorry I cant embed the video here as this blog itself is not responsive. Try the above code and comment.  Now your videos should be responsive, and ready to view on Smart Phones, Tablets and Mobile devices.

Share Your Solutions

Aao Luteron Ko Baghban Bnayen

आओ लुटेरों को बाघबान बनाए

अपने धीरज को थोड़ा और बढ़ाए,
फिर से लोमडियो को सत्ता दिलाएं,
उनकी ख़ुशी के लिए खुद बंट जाए,
अपने संयम के बांध पर एक बोरी सीमेंट की और चढ़ाएं
आओ लुटेरों को बाघबान बनाए

भगत सिंह के  बलिदानों की अर्थी उठाएँ,
सीमा के शहीदों को फिर से कफ़न उड़ाएं,
भाषा प्रान्त के नाम पर वो हमे बांटते जाएँ,
क्षण अफ़सोस उपरांत हम सब भूल जाए,
आओ लुटेरों को बाघबान बनाए

वो करोड़ो के घोटाले करते जाएँ,
और हम दस रुपये की आमदनी पर भी टैक्स भरते जाएँ,
वो पेट्रोल की क़ीमतें बढ़ाते जाएँ,
हम बेशर्मों की तरह सिर्फ सौ कि टंकी में डलवायें
वो कानून की धझियाँ उड़ाएं,
हम कानून से नजर मिलाने में भी घबराएँ,
आओ लुटेरों को बाघबान बनाए

Trip to Belpahari, Jhargram

Helloooooooo everybody a very happy new year to all of you. Starting with the famous lyrics of Brayn Adams "Here I am" song.

"It's a new world
It's a new start
It's alive with the beating of young hearts
It's a new day
It's a new plan
I've been waiting for you
Here I am"

With a new resolution in mind stepped into this year. Want to change lot of things, but to start with all those tedious processes I thought of having a road trip to bore me from myself, so that I can concentrate on my work.  On that note me and two of my friends Vikram and Amit decided 31st night that we will have a road trip next morning.  Decided to leave our places at 0700 hours and next morning we started from our places at sharp 1000 hours ofcourse we dont wanted to abuse that traditional myth of indian time.  And the total credit goes to Vikram and his hangover.
        Few days back I got an opportunity to design a logo for Jhargram Tourism and that time I came to know a lot about this place and its surrouding.  The Founder of Jhargram Tourism Mr. Sumit Dutta even gave me a list of places to visit in Jhargram.  So, it was Jhargram which we started for.  Jhargram is  37Kms drive from Kharagpur.  Just before entering into the Jhargram town in its outskirt you have to take a left turn from Ward Memorial Church School.  This road will lead you to Chilkigarh. Its around 12Kms drive from Jhargram.  There is a Raj Palace and a Kanak Durga Temple.  Between the temple and Raj Palace flows the Dulung river.  The temple is surrounded by different types of trees and plants of various species.  These trees draw attention from different places for research.  A typical species of monkey also live here with a black flat hip.  First we reached that temple. A local said one has to cross the river to visit Chilkigarh Raj Palace.  So we did the same crossed the river walked around 2 Kms to reach the Raj Palace and returned the same way. But when we resumed our journey forward we were on the road which is going through that Raj Palace.  So, guys no need to cross the river by foot. There is a road to the Raj Palace.  I think everybody go by road only we were the only fools to cross the river and visit the palace.

Few pics of the palace and the temple.

Chilkigarh Kanak Durga Temple

Radha Krishna Temple in the premises of Chilkigarh Raj Palace

Chilkigarh Raj Palace

in the premises of Chilkigarh Raj Palace

Then we left for Belpahari, 35 km from Jhargram. A forest paradise under the Dolma Hills.  Its a beautiful drive from Jhargram to Belpahari.  Pitch black road thickly forested with a variety of tropical trees from both sides.  That Black and Green combination is a scenic beauty to watch and driving through is an amazing experience.

It was already 1500 hours when we reached Belpahari, and as per our list there were many spots still left to visit. So we decided to visit nearby places of Belpahari and return back to Belpahari so that we dont have to drive at night. But there was no lodging facility at Belpahari one has to return Jhargram for shelter.  You can make an enquiry at Belpahari Block office for lodging as there is Block Guest House.  We tried for that also to add up to our disappointment it wasnt vacant either.  So we decided to return home same day.  But how can we return with visiting just two places.  Our next destination was Ghagra, its a 9 km drive from Belpahari. Land of green hills surrounding dense groves of shaal and eucalyptus trees. Favourite spot is where the 18.3-m. high Tarafeny waterfall cascades down on boulders below.

Ghagra, Belpahari

A short distance downstream is the Tarafeny Barrage. Wild elephants are reputed to inhabit the forests of Ghagra.  You have to drive on kutcha road to visit Ghagra and Tarafeny Barrage. 

Tarafeni Barage, Belpahari

   

And that was our last destination on this trip.  Our two days trip was scissored to one day.  At Tarafeni we decided to return home.  It was alreay dark it is bit risky to drive through the jungle in night.  I would suggest not to drive in that area in night as it is not safe.  You better plan your trip with proper lodging facilities.  There are many places to visit at Jhargram and nearby places of Jhargram.  Just for your knowledge here is the list of places.

Jhargram
  Jhargram Town, Alampur, Chilkigarh Raj Palace and Kanak Durga Temple, Jhargram Raj Palace, Jungle Mahal, Kendua, Sabitri Temple

Belpahari
  Ghagra Water falls, Gurrasini, Kakrajhor, The Hills of Kanaisor, The Spring at Ketki, The Laljal Mountains, Orgnonda, Tarafeni

Gopiballavpur
  Beliaberah Rajj Palace, Bhasraghat, Sahasraling Shivmandir and Chandraketugarh, Chorchita Yogashram and Choreshwar Shiv Mandir, Shripat Gopiballavpur, Hatibari, Jahanpur Pirthan, Jhilibandh, Kuthighat, Nayagram, Rameshwar, Shyamtarangini, Tapoban.



Share Your Solutions

CSS3 Box Shadow

With CSS3 coming into play web designing is getting better and saving lot of time for designers, now there is no need of making transparent images for shadow effects, just a simple CSS and u can get a nice shadow effect to ur block elements.
Here's the CSS syntax for any block level elements like Div, Image etc.

Box-Shadow

.boxDiv {
  -moz-box-shadow:    3px 3px 5px 6px #ccc;
  -webkit-box-shadow: 3px 3px 5px 6px #ccc;
  box-shadow:         3px 3px 5px 6px #ccc;
}

Inner shadow

.box {
   -moz-box-shadow:    inset 0 0 10px #000000;
   -webkit-box-shadow: inset 0 0 10px #000000;
   box-shadow:         inset 0 0 10px #000000;
}

One-sided shadow

.box {
    -webkit-box-shadow: 0 8px 6px -6px black;
    -moz-box-shadow: 0 8px 6px -6px black;
     box-shadow: 0 8px 6px -6px black;
}

Now lets discuss the values used in the syntax:

box-shadow: h-shadow v-shadow blur spread color inset;

h-shadow is the horizontal offset of the shadow, both positive and negative can be used positive value means the shadow will be on the right side of the box and a negative value will show the shadow on the left side of the box.

v-shadow is the vertical offset of the shadow, it also accepts both positive and negative values, here positive values put the shadow below the box and negative value means shadow above the box.

blur is the blur radius its optional, if the value is 0 the shadow will be sharp. Higher value means more blurred shadow.

spread is the spread radius of the shadow in simple words we can say it is size of the shadow, this one is also optional, default value is 0 the shadow is same size as blur, positive value increase the  size of the shadow and negative value decreases.

color is the color of the shadow u want, obviously its better to use dark colors for the shadow.

There is another value which you can see above in the syntax. Its inset this one is also Optional value but this can change the shadow from an outer shadow (outset) to an inner shadow.

I hope this much description was enough for you, its great to have this shadow effects in your websites. 

Share Your Solutions

Custom Select Box using CSS only

I hope you read my last blog, custom select box using jquery and css.  If you haven't  then no need to worry, here I am with a better solution to the same problem.  Customising a select box using jquery and CSS was conflicting with other jquery and javascript codes.  In a single page with jquery dedicated to select box only was working well.  But when I used it in a project it wasn't.  So a little bit of more effort and here's the solution, select box customised using CSS only and with CSS no need to worry about the conflicts and all.

Here's the HTML for the select box:

<div class="styled-select">
   <select>
      <option>Select One</option>
      <option>Blue</option>
      <option>Red</option>
      <option>Green</option>
      <option>Yellow</option>
      <option>Brown</option>
   </select>
</div>

Here's the CSS for the select box:

.styled-select select {
   background: transparent;
   width: 166px;
   padding: 3px 0px 4px 9px;
   font-size: 11px;
   border: none;
   height: 25px;
   color:#efefef;
}

.styled-select {
   width: 144px;
   height: 25px;
   overflow: hidden;
   background: url(selectBG.png) no-repeat;
   border:none;
}

     You can see the HTML, the select box is placed in a div with a class name "style-select".  That  div is styled with a background image selectBG.png.  The image width is 144px where as the select box is with a width of 166px.   The width of the container div i.e. styled-select should be less than the width of the select box, this way you can hide the drop down arrow of the select box which is impossible to style whereas rest of the select box can be easily styled.  Following is the screen shot of the combo box.

Share Your Solutions

Custom Select Box, using CSS and Jquery

It was July when I posted my last blog.  Was fullllllll busy with work and festivals.   Few days back I was preparing a HTML for a design provided by a client.  And the design was containing a select box with mastttt design.   So styling a select box is not possible with normal CSS.  You can style everything with the CSS except that right arrow.  So, google was the only hope and as usual I found the solution.  So, thought of sharing with you all.

HTML for the select box

<select class="select" title="Select one">
                <option></option>
                <option>Blue</option>
                <option>Red</option>
                <option>Green</option>
                <option>Yellow</option>
                <option>Brown</option>
</select>

CSS for the select box

/* setting the width and height of the SELECT element to match the replacing graphics */
select.select{
        position:relative;
        z-index:10;
        width:166px !important;
        height:26px !important;
        line-height:26px;
}

/* dynamically created SPAN, placed below the SELECT */
span.select{
    position:absolute;
    bottom:0;
    float:left;
    left:0;
    width:166px;
    height:26px;
    line-height:26px;
    text-indent:10px;
    background:url(selectBG.gif) no-repeat 0 0;
    cursor:default;
    z-index:1;
    }

you must make an image of size 166px X 26px.  The size of the select box and the background image which you are going to place as the select box should be same.  You can see the CSS for span.select{...}, I have used a background image selectBG.gif.

      Finally, the javascript you should use to make your customized select box. Use the following javascript and don't forget to include latest jquery file.

<script type="text/javascript">
    $(document).ready(function(){   

        if (!$.browser.opera) {   
            // select element styling
            $('select.select').each(function(){
               var title = $(this).attr('title');
                if( $('option:selected', this).val() != ''  ) title = $('option:selected',this).text();
                $(this)
                    .css({'z-index':10,'opacity':0,'-khtml-appearance':'none'})
                    .after('<span class="select">' + title + '</span>')
                    .change(function(){
                        val = $('option:selected',this).text();
                        $(this).next().text(val);
                        })
            });
        };       
    });
</script>

Following is the screen shot of the select box.  The black rounded select box in the screen shot is selectBG.gif which I used in the background of the select element.

I hope it is going to help you!! Byeeeeeeeeeeee and and dont forget to......

Share Your Solutions