UIStack | By Ashwani Pandey Freelancer Designer

Tuesday, September 8, 2015

jQuery animation plugin 2015

Hi!
Here are js plugins by which you can create a pleasant animation in your websites or apps.

DEMO
DOWNLOAD

Sunday, June 7, 2015

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:

{

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%;

}

{

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

{

}

.img2hover

{

}

.img3hover

{

}

.img4hover

{

}

.img5hover

{

}

.img6hover

{

}

.img7hover

{

}

.img8hover

{

}

.img9hover

{

}

.img10hover

{

}

.img11hover

{

}

.img12hover

{

}

.CircleBox

{

height: 70px;

width: 70px;

margin: 0px auto;

margin-top: 39%;

background-size: 60px;

background-position: center;

background-repeat:no-repeat;

}

Hope will help you

Tuesday, June 24, 2014

Android: How to create icons for all Resolution (LDPI,MDPI etc)

The General formula is :

LDPI = MDPI X 0.75
MDPI = MDPI
TVDPI = MDPI X 1.33
HDPI = MDPI X 1.5
XHDPI = MDPI X 2
XXHDPI = MDPI X 3
XXXHDPI = MDPI X4

instead of make all version we can make the larger one and by using image resizer software we can resize the image or icon for al resolution :

Download From Here :
You can download from here ,and its very easy to use just drag n drop your image and define the resolution by drop down ,it will automatically create folders in the same location where the current file is located .
LINK

and then

Android Application Splash screen size

Hi!

How are you?... today I'll tell you about different screen resolutions for android app design

Following are the sizes for Mobile device:

XHDPI: 640X480px
HDPI : 640X480px
MDPI : 470X320px
LDPI : 426X320px

Following are the sizes for Tablet device:

LDPI

Portrait : 200X320px

Landscape :320X200px

MDPI

Portrait 320X280px

Landscape : 480X320px

HDPI

Portrait :480X800px

Landscape : 800X480px

XHDPI

Portrait : 720X1280px

Lamdscape : 1280X720px