Develop Reference

Creating carousel using plain CSS

I'm trying to create a carousel with plain CSS that can hold 5 items in the current view and display rest on click of sliders.
Reference : Bootstrap carousel
Here's my fruit list plunker that I've created with background grey.I tried by giving width to 50% but was not able to hide the items not display them on click of left/right arrow.Please help..
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12" style="
padding-left: 0px;bottom: 10px">
<span class="glyphicon"></span>
<ul style="line-height:30px" id="nav" ng-repeat="item in fruitSlider">
<li>
<span class="fruit-name block" style="
text-align: left;">{{item.view}}</span>
<span class="mape-percent block">{{item.count}}%</span>
</li>
</ul>
<span class="glyphicon"></span>
</div>

So here is very basic simple example, don't have time now to provide more advanced code.
https://jsfiddle.net/maximelian/1f0dwbL9/26/
html:
<div class="leftbutton"><</div>
<div class="outer">
<div class="div1 shown">Test</div>
<div class="div2 right">test 2</div>
</div>
<div class="rightbutton">></div>
css:
.leftbutton {
float:left;
}
.rightbutton {
float:left;
}
.outer {
float:left;
position:relative;
width:50px;
height:50px;
background-color: red;
overflow:hidden;
}
.shown {
position:absolute;
width:50px;
left:0px;
transition: left 1s;
-webkit-transition: left 1s;
-moz-transition: left 1s;
-ms-transition: left 1s;
background-color:green;
}
.left {
position:absolute;
left:-50px;
transition: left 1s;
-moz-transition: left 1s;
-ms-transition: left 1s;
-o-transition: left 1s;
overflow:hidden;
background-color:grey;
}
.right {
position:absolute;
left:50px;
transition: left 1s;
-moz-transition: left 1s;
-ms-transition: left 1s;
-o-transition: left 1s;
overflow:hidden;
background-color:grey;
}
javascript:
$(".leftbutton").on("click",function(){
$(".shown").removeClass("shown").addClass("left");
$(".right").removeClass("right").addClass("shown");
});
$(".rightbutton").on("click",function(){
$(".shown").removeClass("shown").addClass("right");
$(".left").removeClass("left").addClass("shown");
});
Basically you just want div wrapper that hide overflow and those image or whatever div's with absolute position. Then you can trigger left position change with script and add some css transitions for animation.

Text on hover not centering properly CSS

I'm trying create a hover effect which displays the text centered in the image, both vertically and horizontally. My main problem is that the text keeps staying on top of the image and when I try to navigate it using percentages or pixels, the entire hover effect background changes its proportion.
In this JS fiddle you can see what I'm doing, just hover over the left image in order to achieve the effect. The text just appears on the top, while it shouldn't.
JS Fiddle
<div class="container-fluid">
<div class="row " id= "faded">
<img src = "img/logo.png" class ="img-responsive" id = "logo">
<div class = "col-md-3 col-sm-3 col-xs-12" >
<img src = "img/1.jpg" class = "img-responsive" id ="left-image">
<div class = "carousel-caption" id = "pricing">
<h2>PRICING</h2>
</div>
<div class = "text">
HAIRCUT $45<br>
SHAVE $45<br>
COMBO $80<br>
</div>
</div>
<div class = "col-md-6 col-sm-6 col-xs-12">
<img src = "img/2.jpg" class = "img-responsive" id = "middle-image">
<div class ="carousel-caption" id = "about-us">
<h2> ABOUT US </h2>
</div>
<img src = "img/3.jpg" class = "img-responsive" id= "mid-image">
<div class ="carousel-caption" id = "contact-us">
<h2> CONTACT US </h2>
</div>
</div>
<div class = " col-md-3 col-sm-3 col-xs-12">
<img src = "img/4.jpg" class = "img-responsive" id = "right-image">
<div class ="carousel-caption" id = "appointments">
<h3> APPOINTMENTS </h3>
</div>
</div>
</div>
</div>
CSS Code used:
#logo{
height: 10%;
width:15%;
}
.col-md-6, .col-md-3{
padding-left:0px;
padding-right:0px;
}
.img-responsive{
margin-left:0px;
padding-left:0px;
}
#pricing{
bottom:89%;
left:-30%;
}
#about-us{
bottom:89%;
left: -55%;
}
#contact-us{
bottom: 39%;
right:-53%;
}
#appointments{
bottom:89%;
left:-15%;
}
.text {
background-color: rgba(212, 212, 212, 0.83);
position: absolute;
color: black;
left: 0;
right: 0;
top: 0;
bottom: 0;
text-align:center;
font-size:2.5em;
opacity: 0;
-webkit-transition: all 300ms ease-out;
-moz-transition: all 300ms ease-out;
-o-transition: all 300ms ease-out;
-ms-transition: all 300ms ease-out;
transition: all 300ms ease-out;
pointer-events:none;
}
#left-image:hover ~ .text {
opacity: 1;
}

in your css you need to add
padding-top: 50%;
like so -
.text {
background-color: rgba(212, 212, 212, 0.83);
position: absolute;
color: black;
left: 0;
right: 0;
top: 0;
bottom: 0;
padding-top 50%;
text-align:center;
font-size:2.5em;
opacity: 0;
-webkit-transition: all 300ms ease-out;
-moz-transition: all 300ms ease-out;
-o-transition: all 300ms ease-out;
-ms-transition: all 300ms ease-out;
transition: all 300ms ease-out;
pointer-events:none;
}
padding changes the distance from the border, from the inside out. see - http://www.w3schools.com/css/css_padding.asp

How to hide and show elements on mouseover of containing element using Javascript?

I have a containing div, with a 'h1' title an 'p' description within it. I want the 'description paragraph' hidden while the 'title' is visible on page load, and when the mouse enters the 'container', the title fades to hidden and description fades to visible, and then to swap visibility back to its original visibility on mouseout. I was not able to achieve what i wanted with CSS alone.
I have low knowlege of the workings of javascript, but I can somewhat make of it when looking at it, any help would be greatly appreciated. Also I can provide more info if needed.
<div class="container">
<h1 class="name">Title</h1>
<p>description</p>
</div>

You can use CSS transition to fade effect.
First set the opacity of all paragraphs to zero. When hover over heading, increase the opacity of paragraph and decrease the opacity of heading gradually.
.container p {
opacity: 0;
-webkit-transition: opacity 1s ease-in;
-moz-transition: opacity 1s ease-in;
-ms-transition: opacity 1s ease-in;
-o-transition: opacity 1s ease-in;
transition: opacity 1s ease-in;
}
.container h1 {
-webkit-transition: opacity 1s ease-in;
-moz-transition: opacity 1s ease-in;
-ms-transition: opacity 1s ease-in;
-o-transition: opacity 1s ease-in;
transition: opacity 1s ease-in;
}
.container:hover p {
opacity: 1;
}
.container:hover h1 {
opacity: 0;
}
<div class="container">
<h1 class="name">Title</h1>
<p>description</p>
</div>
<div class="container">
<h1 class="name">Title</h1>
<p>description</p>
</div>
<div class="container">
<h1 class="name">Title</h1>
<p>description</p>
</div>
<div class="container">
<h1 class="name">Title</h1>
<p>description</p>
</div>
You can also use jQuery's hover and animate method
$('.container').hover(function() {
$(this).find('p').animate({
opacity: 1
}).end().find('h1').animate({
opacity: 0
});
}, function() {
$(this).find('p').animate({
opacity: 0
}).end().find('h1').animate({
opacity: 1
});
});
.container p {
opacity: 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<div class="container">
<h1 class="name">Title</h1>
<p>description</p>
</div>
<div class="container">
<h1 class="name">Title</h1>
<p>description</p>
</div>
<div class="container">
<h1 class="name">Title</h1>
<p>description</p>
</div>
<div class="container">
<h1 class="name">Title</h1>
<p>description</p>
</div>

Use .hide() and .show() functions.
Initially make description as display : none in css ,also use the mouseout() and mouseover() function
<div class="container">
<h1 class="name">Title</h1>
<p id="desc">description</p>
</div>
$('.container').mouseout(function(){
$('.name').show();
$('#desc').hide();
});
$('.container').mouseover(function(){
$('.name').hide();
$('#desc').show();
});
#desc{
display:none;
}
JSfiddle :
http://jsfiddle.net/n470z649/

touchstart event click on an other element

when i use a touchstart event to show a div on my phonegap app, thats open the div but also click on a button into this div.
Do you have any idea to prevent the button to be triggered ?

... i don't know exactly what you mean but maybe this helps ->
If you are using jQuery you could do it like this:
HTML
<div class="container">
<div class="header">Bla blah</div>
<div class="content">
<p> Some content here </p>
</div>
</div>
<div class="container collapsed">
<div class="header">Bla blah</div>
<div class="content">
<p> Some content here </p>
</div>
</div>
CSS
.container{
width:300px;
background:#ccc;
margin:10px;
float:left;
}
.header{
background:url('http://cdn1.iconfinder.com/data/icons/vaga/arrow_up.png') no-repeat;
background-position:right 0px;
cursor:pointer;
}
.collapsed .header{
background-image:url('http://cdn2.iconfinder.com/data/icons/vaga/arrow_down.png');
}
.content{
height:auto;
min-height:100px;
overflow:hidden;
transition:all 0.3s linear;
-webkit-transition:all 0.3s linear;
-moz-transition:all 0.3s linear;
-ms-transition:all 0.3s linear;
-o-transition:all 0.3s linear;
}
.collapsed .content{
min-height:0px;
height:0px;
}
JS
$(function(){
$('.header').click(function(){
$(this).closest('.container').toggleClass('collapsed');
});
});
And here is a working fiddle for you:
http://jsfiddle.net/AMzfe/

Creating Animations like a mobile app in browser

This might be a stupid question but is there a way to create animations like mobile app in the browser.
Ref link: http://www.google.com/design/spec/animation/meaningful-transitions.html#meaningful-transitions-meaningful-transitions-examples
It would be great if something could be built like this. I know a bit of javascript/jquery but this seems to be way out of my knowledge.
Any technical details would be helpful

You can try using famo.us: http://famo.us/
It's a new framework so there are some issues but it has potential. It relies on matrix transforms and can do really amazing things such as this: http://www.youtube.com/watch?v=6jg-PlisAFc
You can check out more demos here: http://famo.us/demos/
And there is a DNA helix example here: http://www.youtube.com/watch?v=JbIL3asjZBs
Hope this helps.

Here is a little example of what you can do with a bit of jQuery to trigger the animation with a class change and CSS3 transitions to handle the animation.
It will need some tweaking and customizing to reach the quality of the linked animations but it shows that CSS3/jQuery animations can be pretty smooth.
DEMO
HTML :
<header></header>
<section>
<article>
<div class="wrap">
<img src="" alt="" />
<p>some text</p>
</div>
</article>
<article>
<div class="wrap">
<img src="" alt="" />
<p>some text</p>
</div>
</article>
....
</section>
CSS :
body,html{margin:0;}
header{
height:100px;
background:#000;
}
article{
float:left;
width:50%;
padding-bottom:16%;
position:relative;
color:#fff;
}
article .wrap{
position:absolute;
width:100%;
height:100%;
overflow:hidden;
z-index:1;
background-color: rgba(0, 0, 0, 0.9);
-webkit-transition: width 0.2s ease-out, height 0.2s ease-out, 1s z-index 0s;
transition: width 0.2s ease-out, height 0.2s ease-out, 1s z-index 0s;
}
article .wrap img{
display:block;
width:100%;
height:auto;
}
footer{
height:50px;
width:100%;
position:fixed;
bottom:0;
left:0;
background:#000;
}
article:nth-child(odd) .wrap.show{
width:200%;
height: 100vh;
z-index:2;
-webkit-transition: width 0.2s ease-out, height 0.6s ease-out;
transition: width 0.2s ease-out, height 0.6s ease-out;
}
jQuery :
$('.wrap').click(function(){
$('.wrap').not(this).removeClass('show');
$(this).toggleClass('show');
});