Iphone app Design

Hi
  in this tutorial I'll  explain the size of  sections in Iphone app UI designing .

Iphone 6/6+

Iphone6 Wireframe Size : 750X1334
Iphone6+ Wireframe Size : 1080X1920


Iphone6/6+ Status Bar : 40px
Iphone6/6+ Navigation bar : 88px

Iphone 5

Iphone5 Wireframe Size : 640X1136
Iphone4(retina) Wireframe Size : 640X960
Iphone(non-retina) Wireframe Size : 320X480

Iphone5 Status Bar : 40px
Iphone4 Status Bar : 40px

Iphone5 Navigation Bar : 88/64px
Iphone4 Navigation Bar : 88/64px

App Icon : 120X120

animate class using jquery

Hi!
  In this tutorial I'll show you how to animate any function using jquery with .animate function :
checkout this fiddle :
example

Problem: On click make the height of box 50px;


Html :
<div class="Box">
</div>


CSS:
.Box
{
     height:100px;
     width:100px;
     background-color:black;
}

Jquery :
$(document).ready(function(){
    $('.Box').click(function(){
            $("#box").animate({height: "50px"});
      });
});


Note : you can define the transition time like this :
$(document).ready(function(){
    $('.Box').click(function(){
            $("#box").animate({height: "50px"}, 2000);
      });
});


Thats all you are done
Happy Coding

css using jquery

Hi!
  as we know its really very easy to set height & width of any div using css
here is an example

Html:
 <div class="block">
</div>

CSS:
.block
{
     height:100px;
     width:100px;
     background-color:black;
}

so the output will be like this

But the problem occurs when we want to set it using jquery .
So dont worry its really very simple you can set property of any class i jquery by the method below :
$(document).ready(function(){
     $('.block').css('height','100px');
      $('.block').css('width','100px');
});

even if you want you can make the height variable :
$(document).ready(function(){
    var height_variable= 100;
     $('.block').css('height',   height_variable +'px');
      $('.block').css('width','100px');
});

Now what if we want to set the height of each block equal to any particular div than :

$(document).ready(function(){
    var height_variable= $('.class_of_Desire_Div');
     $('.block').css('height',   height_variable +'px');
      $('.block').css('width','100px');
});

Even you can  write any style for any class .

Scroll(horizontally) on hover using jquery

Hi!
  Before few days I faced a problem :
There will be a alley contains logo/icons of clients and if we hover on it ,it should scroll left to right  and make a loop (on click on any will redirect you on new link)

Have a look on screenshot :

So at that time I have decided that I'll not use any plugin for the app (it will make my page heavy ).
so here is simple solution :

Jsfiddle
Here is Example


Html :

<div class="cont">
                <div id="cont1">
                <div id="contS" class="Img_cl1">
                <div  class="col-md-12 fdfll  scroll-left">
                        <a target="_blank" href="http://www.meraevents.com/">
                            <div class=" cl1 hde " >
                                <img alt="client" src="http://commons.wikimedia.org/wiki/File:Vanamo_Logo.png" />
                            </div>
                        </a>
                        <a target="_blank" href="http://www.appvirality.com/">
                            <div class=" cl2 hde">
                                <img alt="client" src="http://commons.wikimedia.org/wiki/File:Vanamo_Logo.png" />
                            </div>
                        </a>
                        <style>
                         

                        </style>
                        <a target="_blank" href="http://www.customfurnish.com/">
                            <div class=" cl3 hde ">
                               <img alt="client" src="http://commons.wikimedia.org/wiki/File:Vanamo_Logo.png" />
                            </div>
                        </a><a target="_blank" href="http://www.medplusmart.com/home.mart">
                            <div class="  cl4 hde ">
                                <img alt="client" src="http://commons.wikimedia.org/wiki/File:Vanamo_Logo.png" />
                            </div>
                        </a>
                        <a target="_blank" href="http://www.ishyd.org/">
                            <div class=" cl5 hde ">
                               <img alt="client" src="http://commons.wikimedia.org/wiki/File:Vanamo_Logo.png" />
                            </div>
                        </a><a target="_blank" href="http://www.stileeye.com/">
                            <div class=" cl6 hde ">
                               <img alt="client" src="http://commons.wikimedia.org/wiki/File:Vanamo_Logo.png" />
                            </div>
                        </a>                  
                        <a target="_blank" href="http://vuego.tv/index.html">
                            <div class=" cl7 hde ">
                                <img alt="client" src="http://commons.wikimedia.org/wiki/File:Vanamo_Logo.png" />
                            </div>
                        </a>
                        <a target="_blank" href="http://www.veooz.com/">
                            <div class=" cl8 hde ">
                                <img alt="client" src="http://commons.wikimedia.org/wiki/File:Vanamo_Logo.png" />
                            </div>
                        </a>
                        <a target="_blank" href="http://www.zapevent.com/">
                            <div class=" cl9 hde ">
                                <img alt="client" src="http://commons.wikimedia.org/wiki/File:Vanamo_Logo.png" />
                            </div>
                        </a>
                        <a target="_blank" href="https://www.doctrz.com/">
                            <div class=" cl10 hde ">
                               <img alt="client" src="http://commons.wikimedia.org/wiki/File:Vanamo_Logo.png" />
                            </div>
                        </a>
                        <a target="_blank" href="http://reveye.in/">
                            <div class=" cl11 hde ">
                                <img alt="client" src="http://commons.wikimedia.org/wiki/File:Vanamo_Logo.png" />
                            </div>
                        </a>
                        <a target="_blank" href="http://www.leonia.in/">
                            <div class=" hde cl12 ">
                                <img alt="client" src="http://commons.wikimedia.org/wiki/File:Vanamo_Logo.png" />
                            </div>
                        </a>
                </div>
               </div>
                 
             
                </div>
               </div>


Jquery :

 var $content = $('#contS'); // Cache your selectors!
    $(".cont").hover(
            function loop() {
                var first_node = $('.hde')[0];
                if(-parseInt($content.css('marginLeft'), 10)>=$('.hde').width()) {
                    $content.css('marginLeft', '+=' + $('.hde').width());
                    $('.hde')[0].remove();
                    $('.hde').last().after(first_node);
                }
                $content.stop().animate({ marginLeft: '-=20' }, 500, 'linear', loop);
            },
            function stop() {
                $content.stop();
            });

CSS:

ul

{

    list-style-type:none;

    padding:0px;

    margin:0px;

}

.hde img

{

    width:80px;

   

    margin:18px 0px;

    

}

#content

{

    margin-top:10px;

    float:left;

    width:100%;

}

#content img

{

    width:100%;

}

li

{

    float:left;

}

.Homepage,.bgpink

{

    background-color:#ff2c7e !important;

    color:White;

}

.Layout

{

    float:left;

    width:100%;

    

}

/*----------------------------stories--------------------------------------*/

.container

{

    width:90%;

    margin:0px auto;

}

.active

{

    font-weight:bold;

}

.ImageSec

{

    cursor:pointer;

}

.ImageSec img

{

    

     width: 100%;

}

.WholeView h3

{

      font-size: 14px;

      text-align: center;

      line-height: 18px;

      text-transform: uppercase;

      color: #333333;

      display: inline-block;

      width:100%;

      min-height:45px;

      

}

.OverlaySec

{

  

  cursor: pointer;

  background-size:100%;

  z-index: 9999;

  display:none;

  

}

/*

.img1hover

{

    background-image: url(../img/work/1hover.png);

}

.img2hover

{

    background-image: url(../img/work/2hover.png);

}

.img3hover

{

    background-image: url(../img/work/3hover.png);

}

.img4hover

{

    background-image: url(../img/work/4hover.png);

}

.img5hover

{

    background-image: url(../img/work/5hover.png);

}

.img6hover

{

    background-image: url(../img/work/6hover.png);

}

.img7hover

{

    background-image: url(../img/work/7hover.png);

}

.img8hover

{

    background-image: url(../img/work/1hover.png);

}

.img9hover

{

    background-image: url(../img/work/9hover.png);

}

.img10hover

{

    background-image: url(../img/work/10hover.png);

}

.img11hover

{

    background-image: url(../img/work/11hover.png);

}

.img12hover

{

    background-image: url(../img/work/12hover.png);

}

*/

.CircleBox

{

      height: 70px;

  width: 70px;

  margin: 0px auto;

  margin-top: 39%;

  background-image: url(../img/thumb.png);

  background-size: 60px;

  background-position: center;

  background-repeat:no-repeat;

  

  

}

Hope will help you