Suppose I have toggle function which make animation on height , width and opacity of a div -
transition: width 2s, height 2s , opacity 2s,transform 2s;
Here is its demo - jsFiddle
When it change from hide to show all these 3 attribute got animation ,
Now , I want to apply on it hiding (from show to hide) just animation on its opacity such that it disappear by becoming from opacity : 1 to opacity : 0 (with no height , width change) - like this - jsFiddle .
Update :
I want to make the "show to hide" of the 1st jsFiddle as the "show to hide" of the 2nd jsFiddle without to change the "hide to show" of the 1st hsFiddle .
How to get it ?
You can achieve that by using CSS Transform scale.
You can apply that on your toggle function().
like this:
$('.testDiv').css({
'-webkit-transform': 'scale(1)',
'-moz-transform': 'scale(1)',
'-o-transform': 'scale(1)'
});
and to revert:
$('.testDiv').css({
'-webkit-transform': 'scale(0)',
'-moz-transform': 'scale(0)',
'-o-transform': 'scale(0)'
});
jsFIDDLE DEMO
Related
I want to seamlessly expand my div (in a non-jarring way) when the text inside it changes:
The CSS transition: all 2s ease; is working great for colour changes, manually setting width, etc (as you can try out in the jsfiddle - click button to toggle width). but when the inner text of the div is changed the div just jumps to the new width without any transition.
How can I get the transition working when the inner text changes?
Thanks!
Because the default width of the div will be auto (100%), it can't transition from auto to a numerical value.
I don't think dynamically changing a width of an element depending on its content is possible, as there is no transition for content. The content of an element changes instantly and the width does not get a numerical value in your case - but adjusts.
A solution that can be sometimes applicable: Using a function to roughly calculate your text's width so that you'll be able to set a numerical width for your element on change.
Here's a simple one that I made.
function getTextWidth(text, css) {
var e = $('<span></span>'); // dummy element
e.css(css); // set properties
e.text(text); // set test
var width = e.appendTo($('body')).width(); // append and get width
e.remove(); // remove from DOM
return width;
}
Put together an example of usage.
Hi abagshaw try this script to solved your problem.
var big = false;
$('#content').on('click', function(e) {
if(!big)
{
$( this).animate({
width: "600px" }, 500 );
this.innerHTML = "MORETEXTMORETEXTMORETEXTMORETEXTMORETEXTMORETEXTMORETEXT";
big = true;
}
else
{
$( this).animate({
width: "200px" }, 500 );
this.innerHTML = "LESSTEXTLESSTEXT";
big = false;
}
});
.ui.transitioning.button{
transition:all 0.5s ease-in-out;-webkit-transition:all 0.5s ease-in-out;
width:200px;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.0.7/semantic.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="ui transitioning teal button" id="content">LESSTEXTLESSTEXT</div>
If you look at all the Google apps when you open the side (hamburger) menu the content of the app is greyed.
Here is an example
Is it possible to do this with ion-side-menu in ionic framework? If so, how?
Thank you.
Based on Mark Veenstra's answer, here is the result I came with.
In CSS:
.opaque-content {
opacity: .5;
transition: opacity 300ms ease-in-out;
}
In the controller I'm watching the open ratio of the side menu and set a flag:
$scope.$watch(
function () {
return $ionicSideMenuDelegate.getOpenRatio();
},
function (ratio) {
$scope.sidemenuopened = (ratio == 1);
});
In the template I'm using ng-class to conditionally apply the class:
<ion-side-menus>
<ion-side-menu-content ng-class="{'opaque-content' : sidemenuopened}">
<ion-nav-bar>
</ion-nav-bar>
</ion-side-menu-content>
</ion-side-menus>
This works and makes the page content partially transparent when the side menu is opened.
I believe this is not standard available in Ionic, but if you look at the $ionicModal you can see they do use the same technique there.
If you look at the CSS they use for this option, you should add the following to the correct class:
opacity: .5;
transition: opacity 300ms ease-in-out;
background-color: #000;
You should somehow detect when the side menu is exposed and then apply above CSS to the <ion-nav-view>.
I think you could create a directive or so which watches the $ionicSideMenuDelegate.isOpen() function and based on result apply or remove the CSS.
You only need CSS for this.
When the side menu is opened, there is a CSS class menu-open added to the body tag.
So just add the following and you will get what you want.
body.menu-open ion-side-menu-content {
-webkit-transition: opacity 300ms ease-in-out;
transition: opacity 300ms ease-in-out;
opacity: 0.5;
}
Based on Marius Bancila's answer, here is my solution.
In CSS: nothing
In the controller I'm watching the open ratio of the side menu and set a flag:
$scope.$watch(
function () {
return $ionicSideMenuDelegate.getOpenRatio();
},
function (ratio) {
$scope.sidemenuopened = (ratio == 1);
});
In the template I used modal backdrop background class instead of your opaque-content which isn't gray at all:
<ion-side-menus>
<ion-side-menu-content>
<div ng-class="{'modal-backdrop-bg' : sidemenuopened}"></div>
<ion-nav-bar>
</ion-nav-bar>
</ion-side-menu-content>
</ion-side-menus>
With this you will have the same effect as Google!
I've search ALL day and couldn't find anything. I'm trying to fade an image to be transparent with another image. Meaning - when I click a button the transition starts but you have to keep clicking the button to see the 2nd image. Example: 2 of the same images but one is night image and one is a day image. I want to transition day to night, not by fading the opacity to 0 and then 1, but to have it clicked continuously and you see the transition.
I think here is what you have searched for
$(document).ready(function(){
var opacityOfNight = 0;
$('.turnNightBtn').click(function(){
if (opacityOfNight == 1){
opacityOfNight = 0;
} else {
opacityOfNight += 0.05;
if(opacityOfNight > 1) {
opacityOfNight = 1;
}
}
$('.night_img').css({
opacity : opacityOfNight
});
});
});
http://jsfiddle.net/nUBmh/
I put together a basic example that you can use as a basis to get to your goal. I've layered one image over top of the other and then set up a jQuery function to lower the opacity of the top image by 25% per click. You can adjust the class names and values to match your HTML and desired fade amount per click. Hopefully this helps.
$(function(){
var imageOpacity = 1;
$('button').click(function(){
if(imageOpacity > 0){
imageOpacity = imageOpacity - .25;
$('.image2').css('opacity', imageOpacity);
}
});
});
JSFiddle Example - http://jsfiddle.net/tM9P7/
I am trying to create two buttons, one that will expand a div and one that will collapse it. I've tried to modify this code, but I cant seem to get it to work. I think I just dont understand how to not toggle a link.
I am also trying to make the DIV appear when the page loads. I'm not even sure if this is possible with the way I am writing the code.
Can anyone help me understand what I need to do to get this to work.
http://jsfiddle.net/XUjAH/93/
I am trying to avoid using .slideUp/.slideDown it seems to be interfering with another plugin I am using on the page.
$('#click-meopen').click(function() {
var height = $("#this").height();
if( height > 0 ) {
$('#this').css('height','0');
} else {
$("#this").css({'position':'absolute','visibility':'hidden','height':'auto'});
var newHeight = $("#this").height();
$("#this").css({'position':'static','visibility':'visible','height':'0'});
$('#this').css('height',newHeight + 'px');
}
});
$('#click-meclose').click(function() {
var height = $("#this").height();
if( height > 0 ) {
$('#this').css('height','0');
} else {
$("#this").css({'position':'absolute','visibility':'hidden','height':'auto'});
var newHeight = $("#this").height();
$("#this").css({'position':'static','visibility':'visible','height':'0'});
$('#this').css('height',newHeight + 'px');
}
});
All following text is just IMHO :)
See my exmple here - http://jsfiddle.net/XUjAH/99/
html:
<p id="click-meopen">click me to open</p>
<p id="click-meclose">click me to close</p>
<div id="this">
<div id="content">here<br />is<br />a<br />bunch<br />of<br />content<br />sdf</div>
</div>
as for JS:
$('#click-meopen').click(function() {
$("#this").height($("#content").height());
});
$('#click-meopen').click();
$('#click-meclose').click(function() {
$("#this").height('0');
});
as for CSS it should be the same you have.
UPD: Seems that animation is a bit flaky - when you set 'height: auto' - div is visible from the beginning, however close button ignores animation on first click(I have Chrome with latest update) so I've added some workaround. Also added other styles to support this animation for other browsers like Firefox and Opera and not only for those who support -webkit.
http://jsfiddle.net/XUjAH/110/
in CSS added class and removed 'transition' from the main style:
.with-animation {
-webkit-transition: height 1s ease-in-out;
-moz-transition: height 1s ease-in-out;
-o-transition: height 1s ease-in-out;
transition: height 1s ease-in-out;
}
In JS:
// However our div already have proper size this line
// prevents instantaneous close on first click, don't know why
$("#container").height($("#content").height());
$('#click-meopen').click(function() {
$("#container").height($("#content").height());
});
$('#click-meclose').click(function() {
// If we add class with-animation on upper level div will
// start animation on page load
$("#container").height('0').addClass("with-animation");
});
If you can use toggle then all you need is $("#this").toggle('slow');, but you must replace height: 0; with display: none;
$('#click-meopen').click(function() {
$('#this').show();
});
$('#click-meclose').click(function() {
$('#this').hide();
});
http://jsfiddle.net/XUjAH/95/
Or with toggle
$('#click-meopen').click(function() {
$('#this').toggle();
});
http://jsfiddle.net/XUjAH/96/
You are trying to change this to buttons ?
<input type="submit" id="click-meopen" value="open"></input>
<input type="submit" id="click-meclose" value="close"></input>
<div id="this">here<br />is<br />a<br />bunch<br />of<br />content<br />sdf</div>
That's not hard to do.
I would also recommend you to use .toggle() or the .show(),.hide() methods of jQuery. Just setting the css height property to zero is not a good practice.
Do you want to show the div when the page is loading or when its finished loading ( the DOM is ready) ?
Your JavaScript code would be:
$('#click-meopen').click(function() {
$('#this').show(); // or .toggle()
});
$('#click-meclose').click(function() {
$('#this').hide(); // or .toggle()
});
If you would use only one button you should use the .toggle() method, otherwise stick with the .show(),.hide() method !
When the DOM is ready ( The Page is loaded completely):
$(document).ready(function(){
$('#this').show();
});
documentation of the methods that are used:
http://api.jquery.com/show/
http://api.jquery.com/hide/
http://api.jquery.com/toggle-event/
http://api.jquery.com/ready/
I see that you have used -webkit-transition which works for me in chrome but i guess you want it to work in other browses than webkit.
There are two ways i can suggest, one is to just simply add -moz-transition: height 1s ease-in-out; and transition: height 1s ease-in-out; to do it with css3 but that wont help in older ie browsers.
An other way is to place a div inside your text in the div you want to collapse:
<div id="this">
<div id="height">
text
text
</div>
</div>
then in your javascript you can get the height of the inner div-element, and in that way you can use animate instead of height: auto.
$('#click-meopen').click(function() {
$('#this').animate({'height': $('#height').height()}, 1000);
});
$('#click-meclose').click(function() {
$('#this').animate({'height': 0}, 1000);
});
that should be enough for you.
$('#click-meopen').click(function() {
$("#this").css({'position':'absolute','visibility':'hidden','height':'auto'});
var newHeight = $("#this").height();
$("#this").css({'position':'static','visibility':'visible','height':'0'});
$('#this').css('height',newHeight + 'px');
});
$('#click-meclose').click(function() {
$('#this').css('height','0');
});
$('#click-meopen').click();
http://jsfiddle.net/XUjAH/100/
I'm creating a web app where I allow users to zoom certain 100x100px background images.
When they double tap the image, I scale the image to twice its size (-webkit-transform: scale( 2 )).
When the transition is done, I swap the 100x100px image with a larger 200x200px image. For some reason, the image is very blurry.
So I tried to use an img tag instead of a div tag to show my images. Here the image isn't blurry at all. Why is this?
I NEED to use background images to circumvent the memory limit on the iPad and iPhone (if I use img tags I will hit a memory wall).
Can anyone help me? Thank you so much.
Im claiming 3 things:
Scaling a div stretches the pixels and not adding more.
background-size: contain; Ensures you that your background-image is fully showen
The div never change size.
As you can see here the div is still 200x200 pixels
The image is resized to be 200x200 pixels Even if it's 400x400 pixels. See here
Almost proved in 1. the font is still sharp but javascript thinks the width and height is 200x200 pixels.
Okay so for your fix:
There are several ways.
You can change width and height instead of scaling. This isn't any pretty, or at least you are very lucky if this animation doesn't lack it's way throw (on iOS).
Something else could be scaling and detection webkitTranstionEnd
$('div').bind("webkitTransitionEnd", function() {
$(this).css({
"-webkit-transform": "scale(1)",
"width": "400px",
"height": "400px"
});
$(this).unbind("webkitTransitionEnd");
});
Remember to unbind the webkitTransitionEnd event. Else its doubling the function call.
But what happend it's animation back. So we have to keep the transtion in a class so we can add and remove it when we want:
div {
-moz-transition-duration: 0ms;
}
div.transition {
-moz-transition-duration: 200ms;
}
And then add the class when we have to animate:
setTimeout(function() {
$('div').addClass("transition");
$('div').css({
backgroundImage: 'url(http://img812.imageshack.us/img812/212/cssc.png)',
webkitTransform: 'scale( 2 )',
mozTransform: 'scale( 2 )'
});
}, 3000);
And remove it again in webkitTransitionEnd
$(this).removeClass('transition');
$(this).css({
"-webkit-transform": "scale(1)",
"width": "400px",
"height": "400px"
});
$(this).unbind("webkitTransitionEnd");
What??! It dosn't add / remove the class in time?! What happen.
Sometimes the browser needs a little while to make sure the class is added. Therefore you need to wrap the setting of css in a setTimeout(function(){...}, 0);
setTimeout(function() {
$('div').addClass("transition");
setTimeout(function(){
$('div').css({
backgroundImage: 'url(http://img812.imageshack.us/img812/212/cssc.png)',
webkitTransform: 'scale( 2 )',
mozTransform: 'scale( 2 )'
});
}, 0);
}, 3000);
Also when we remove the class:
$(this).removeClass('transition');
setTimeout(function(){
$(this).css({
"-webkit-transform": "scale(1)",
"width": "400px",
"height": "400px"
});
$(this).unbind("webkitTransitionEnd");
}, 0);
So long, now the problem is that it's scaling up and get blurred and after the scale it gets super sharp.
What we can do about it I dont know, but hope it helps you some where!
Andreas