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/
Related
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.
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/
Im currently building this project for some pals. However, the transition that I use to move the whole page to the left, when the menubutton is clicked. This animation does work in chrome and Firefox but not in edge. Why is this?
header HTML:
<div id="page" class="">
<div class="wow fadeIn" data-wow-duration="1s">
<header class="fixed topheader">
<div class="leftheader toplist">
<a id="logo" href="#">23-RuleZ</a>
</div>
<nav id="navbar" >
<ul class="menulist nav">
<li class="menuitem topitem">Join 23-RuleZ</li>
<li class="menuitem topitem">Blog</li>
<li class="menuitem topitem">Clanwar</li>
<li class="menubutton topitem"><a id="sidemenu" class="topbutton" href="javascript:void(0)"> ☰ </a></li>
</ul>
</nav>
</header>
Some JS:
var a = document.getElementById("sidemenu");
a.onclick = function() {
if ($('#page').hasClass('moved')){
$('header').removeClass('moved');
}
else {
$('header').addClass('moved');
}
$('#page').toggleClass('moved');
$('.sidebar').toggleClass('visible');
$('#sidemenu').toggleClass('error redbottom');
return false;
}
}
CSS:
.bodyheader {
background-color: #efefef;
height: 60px;
border-bottom: 3px solid #CCC;
transition: all 0.5s ease;
-moz-transition: all 0.5s ease; /* FF3.7+ */
-o-transition: all 0.5s ease; /* Opera 10.5 */
-webkit-transition: all 0.5s ease; /* Saf3.2+, Chrome */
}
.topheader {
height: 80px;
color: #FFF;
font-weight:700;
font-size:20px;
border-bottom: 1px solid #666;
transition: all 0.5s ease;
-moz-transition: all 0.5s ease; /* FF3.7+ */
-o-transition: all 0.5s ease; /* Opera 10.5 */
-webkit-transition: all 0.5s ease; /* Saf3.2+, Chrome */
}
All code is available at the site.
Any help is appreciated!
EDIT: What would be superb, is that the width changing of the page of the page is animatable. I could get this to work previously.
Edge is quite a new browser so it may take a while for all HTML/CSS/JS to be supported, blame the 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');
});
This is my html code:
<div class="wrapper">
<a target="_blank" href="klematis_big.htm">
<img data-src="holder.js/180x180" style="height:20%;width:100%;float:left;"
src="../goyal/profile-pic.jpg" alt="Klematis">
</a><p class="text">gjhgkuhgfkuyfrjytdcj</p>
</div>
css:
#wrapper .text {
position:relative;
bottom:30px;
left:0px;
visibility:hidden;
}
#wrapper:hover .text {
visibility:visible;
}
This is my profile picture of my page.
when i hover on image it shows a button and some
text with opacity.
like edit profile picture etc
you can use jQuery code.
Demo Here
Replace
#wrapper .text {
with
.wrapper .text {
And
#wrapper:hover .text {
with
.wrapper:hover .text {
wrapper is an class not an id.id will represented with # and class will represented with .
You can also achieve that with opacity and CSS3 Transitions, here's a Fiddle
HTML
<div class="wrapper">
<a target="_blank" href="klematis_big.htm">
<img data-src="holder.js/180x180" style="height:20%;width:100%;float:left;"
src="../goyal/profile-pic.jpg" alt="Klematis"/>
</a>
<p class="text">Text Text Text ...</p>
</div>
CSS
.wrapper .text {
position:relative;
bottom:30px;
left:10px;
opacity:0;
transition: opacity 0.3s linear;
-moz-transition: opacity 0.3s linear;
-webkit-transition: opacity 0.3s linear;
}
.wrapper:hover .text {
opacity:1;
}