CSS animation / transition not working properly - javascript

Here is without animation / transition code check this:
<!DOCTYPE html>
<html>
<head>
<style>
</style>
</head>
<body>
<!DOCTYPE html>
<html>
<head>
<style>
.resize {
font-size: 2.8vh;
white-space: nowrap;
color: black;
background: yellow;
cursor: move;
width: 300px;
height: 130px
}
</style>
</head>
<body>
<button class="do-resize" type="button" >Click Me!</button>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/jquery-ui.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/themes/smoothness/jquery-ui.css">
<div class="resize" id="chartdiv">Some name that is very long</div>
</body>
</html>
<script type="text/javascript">
$.fn.fontResize = function() {
return this.each(function() {
const $el = $(this);
$el.css('font-size', ($el.width() * $el.height()) / 2800 + 'px');
});
}
$('button.do-resize').click(function(){
$('#chartdiv').width(600).fontResize()// use plugin function
})
$('.resize').resizable({
minWidth: 210,
minHeight: 120,
resize: function(event, ui) {
$(this).fontResize();// use plugin function
}
});
</script>
</body>
</html>
and now this is with animation / transition code: simply i have added here only CSS transition for div class .resize{transition: 0.3s;} and i think it should work, But problem is that this is not working with single click, if i click one time then text font-size goes small and then after second click it works, what is the problem plz check it. i want to work it with single click only.
<!DOCTYPE html>
<html>
<head>
<style>
</style>
</head>
<body>
<!DOCTYPE html>
<html>
<head>
<style>
.resize {
font-size: 2.8vh;
white-space: nowrap;
color: black;
background: yellow;
cursor: move;
width: 300px;
height: 130px
}
.resize{transition: 0.3s;}
</style>
</head>
<body>
<button class="do-resize" type="button" >Click Me!</button>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/jquery-ui.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/themes/smoothness/jquery-ui.css">
<div class="resize" id="chartdiv">Some name that is very long</div>
</body>
</html>
<script type="text/javascript">
$.fn.fontResize = function() {
return this.each(function() {
const $el = $(this);
$el.css('font-size', ($el.width() * $el.height()) / 2800 + 'px');
});
}
$('button.do-resize').click(function(){
$('#chartdiv').width(600).fontResize()// use plugin function
})
$('.resize').resizable({
minWidth: 210,
minHeight: 120,
resize: function(event, ui) {
$(this).fontResize();// use plugin function
}
});
</script>
</body>
</html>

If you check the calculated font size you'll find some issues:
So my assumption is that, since you're transitioning all CSS properties (by setting transition: 0.3s you're not excluding any property change), the width of .resize is not 600px by the time you're calculating the new font-size. Try with a longer transition time, like 2 seconds. You will probably need more than 2 clicks to get the final font-size. If that happens, then you found the problem.
A solution, in case you want to transition also the width change, would be to pass the desired width (600px) to fontResize() and not rely on the HTML element width (which will be changing for .3 seconds).

The text is resizing immediately - the problem is that the resize function takes the initial dimensions of the yellow rectangle as the measures for the resizing - not the final dimensions after the animation completes. So the text is resizing to the same size and you see no difference.
When you click the button, you're telling the text to resize to the yellow rectangle's size. But the yellow rectangle isn't fully resized at this point, basically the text element is being resized relative to the initial dimensions of the yellow rectangle.
To verify this, you only have to apply a setTimeout to the text animation, and you'll see, that if the yellow rectangle has time to animate, the text element will animate as you expect it to.
To see the what I mean, replace the click handler with the following code.
$('button.do-resize').click(function() {
$('#chartdiv').width(600)
setTimeout(function() {
$('#chartdiv').fontResize()
}, 300)
})
So you see, if you give time for the rectangle to expand, the text will be able to get larger dimentions from it to expand.
But if you hardcode the final font size, the animation will start immediately
Instead of:
$el.css('font-size', ($el.width() * $el.height()) / 2800 + 'px');
Try:
$el.css('font-size','40px');
The point is, make sure to determine appropriate dimensions at the time of the button click.

Add the following:
$('#chartdiv').on('transitionend', function () {
$(this).fontResize()
});
You trigger the fontResize() each time a transition end to make sure you use the correct div.
$.fn.fontResize = function() {
return this.each(function() {
const $el = $(this);
$el.css('font-size', ($el.width() * $el.height()) / 2800 + 'px');
});
}
$('button.do-resize').click(function() {
$('#chartdiv').width(Math.random()*600).fontResize() // use plugin function
})
$('#chartdiv').on('transitionend', function () {
$(this).fontResize()
});
$('.resize').resizable({
minWidth: 210,
minHeight: 120,
resize: function(event, ui) {
$(this).fontResize(); // use plugin function
}
});
.resize {
font-size: 2.8vh;
white-space: nowrap;
color: black;
background: yellow;
cursor: move;
width: 300px;
height: 130px
}
.resize {
transition: 0.3s;
}
<button class="do-resize" type="button">Click Me!</button>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/jquery-ui.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/themes/smoothness/jquery-ui.css">
<div class="resize" id="chartdiv">Some name that is very long</div>

Since you are hard-coding the final width in the click handler by doing $('#chartdiv').width(600), you might as well pass that as a parameter to help you resize the text.
Instead of something like this:
$el.css('font-size', ($el.width() * $el.height()) / 2800 + 'px');
Something more like this:
$el.css('font-size', (parameter * parameter) / 2800 + 'px');
Here's a working JSFiddle.
In my example, everything will animate immediately to the right place.
See the comments where I made changes:
$.fn.fontResize = function(newSize) { // receive parameter
return this.each(function() {
$el = $(this)
const halfSize = newSize/2 // divide width by 2
$el.css('font-size', (halfSize * halfSize) / 2800 + 'px'); // apply in calculation
});
}
$('button.do-resize').click(function(){
const newSize = 600 // declare as const to use twice in next line
$('#chartdiv').width(newSize).fontResize(newSize) // pass as parameter to fontResize
})

Related

Working with CSS, top propery in JQuery

I want to change top position of class bbb after 100 ms, but it took out that .css(top) does not work.
Please help.
<!DOCTYPE html>
<html>
<head>
<script src="jquery-3.2.1.min.js"></script>
</head>
<body>
<div class="ddd"><div class='bbb'>Bobobo</div></div>
</body>
<script>
$(function myFunction() {
setInterval(alertFunc, 100);
});
function alertFunc() {
var b = $('.bbb').first();
b.css('top', 100 + 'px');
}
</script>
</html>
You should use setTimeout() instead of setInterval() this way alertFun() will only run once.
let alertFunc = function() {
$('.bbb').css('top', 100 + 'px');
}
setTimeout(alertFunc, 100);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="ddd">
<div class='bbb'>Bobobo</div>
</div>
Just like #jhpratt mentioned. You need to add position:relative to the .bbb class.
See below.
$(function myFunction() {
setTimeout(alertFunc, 500);
});
function alertFunc() {
var b = $('.bbb').first();
b.css('top', 100 + 'px');
}
.bbb {
position: relative;
border: 1px solid red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div class="ddd">
<div class='bbb'>Bobobo</div>
</div>
As others have already said, if you want to use the top attribute you need to give
position:relative;
to the element. This way the element will be set relative to his position and this could be a little tricky. By the way i usually prefer to make a container box relative ad put the positionable element absolute in it, so it will be displayed relative to his container:
.container{
position:relative;
}
.element{
position:absolute;
}
This is the html:
<div class="container">
<div class="element"></div>
</div>

Setting element width to an element width a percentage width not correct on page load

I'm trying to set an element's width equal to another element's width.
The problem is that when the 2nd element has a percentage width, jQuery's .width() function returns the incorrect width when the page is first loaded.
If I do the same after the page is loaded, such as in an onclick function, then .width() returns the correct size of the element.
It is just when the page is first loaded, as if css hasn't finished calculating the actual elements width from the percentage.
Here is some code :
CSS :
#first {
width:50%;
}
Javascript :
$(function(){
function resizeResults() {
$("#results").css("width", $("#first").width());
}
resizeResults();
});
So, that will not return the correct size of the #results element. If I call this function via an onclick method, then it sets it to the proper width. JavaScript/jQuery should account for css percentages being loaded before executing code, right?
You must change this:
function resizeResults() {
$("#results").css("width", $("#first").width());
}
to this:
function resizeResults() {
$("#results").css("width", $("#first").width() + 'px');
}
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js"></script>
<style>
div {
height: 100px;
background-color: #acacac;
margin: 10px;
}
</style>
<script>
$(function ()
{
function resizeResults()
{
$("#results").css("width", $("#first").width() + 'px');
}
resizeResults();
});
</script>
</head>
<body>
<div id="first" style="width:200px;">Div first</div>
<div id="results" style="width:400px">Div result</div>
</body>
</html>

JQuery animate margin-top using var not working

I'm using JQuery to have my .wrapper div snap back to its original margin-top after being moved to margin-top. The original margin-top is dependent on browser height. I'm trying to do this by storing the original margin-top value into a variable, and using it for JQuery animate when I want to .wrapper div to snap back later on.
$(document).ready(function() {
//Adjust .wrapper Margin-top to adjust position to 1/4 of Window Broswer Height
var marginWindowSpace = ($(window).height()) / 4;
$(".wrapper").css("margin-top", marginWindowSpace);
var originalMargin = $(".wrapper").css("margin-top").toString();
});
$(".title").click(function() {
$("#results-container").empty();
$(".wrapper").animate({
'margin-top': originalMargin
}, 200);
$(".title-tag, .or, .random-article, .random-article-underline").fadeIn(500);
$("footer").addClass("footer-pos1");
});
QUESTION: Why wont my the animate margin-top accept my variable (where the original margin-top value is stored), even when converted to string? I don't want to use a static value as my margin-top.
If you want to see the app code, it's here. http://codepen.io/myleschuahiock/pen/zqvvNZ
Any help is appreciated! Thanks!
EDIT: I changed the click function to $('.go-back'), but the animate for magin-top should still be the same
Move the whole $(".title").click(function(){}) into the $(document).ready(function(){})
The problem exists because at the time of the initialisation of the $(".title").click(function(){}) originalMargin is not set yet because the document is not ready yet.
Do like this. there are some errors in your animate part.margin-top should be correct as marginTop and your string should convert as int and do like this.I implement as an example.hope this will help to you.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Test</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
</head>
<style type="text/css">
body{
margin: 0;
padding: 0;
}
div.testing{
width: 100px;
height: 100px;
background-color: orange;
margin-top: 100px;
}
div.two{
width: 200px;
height: 200px;
background-color: green;
position:
}
</style>
<body>
<div class="testing"></div>
<br><br>
<h3 class="clk">Click me!</h3>
<div class="two"></div>
<script type="text/javascript">
$(document).ready(function(){
var one = $(".testing").css("margin-top").toString();
var vaL = parseInt(one,10);
$(".clk").click(function(){
$(".two").animate({'marginTop':vaL+'px'},1000);
});
});
</script>
</body>
</html>
note :
var one = $(".testing").css("margin-top").toString();
int this part get the margin-top value as a string.
var vaL = parseInt(one,10);
convert it to an integer.
then the animate part
$(".two").animate({'marginTop':vaL+'px'},1000);

HTML5 full-screen doesn't work when set inside a timer

I am trying this code. It is supposed to generate an image and set its container div to full-screen when the p is clicked.
<html>
<head>
<style>
img { height: 643px; width: 860px; }
img:-moz-full-screen { height: 643px; width: 860px; }
div:-moz-full-screen { background: white; }
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script>
$(function() {
$("p").click(function() {
setTimeout(function() {
$("body").prepend("<div><img src = 'http://i.stack.imgur.com/lBZKC.jpg?s=128&g=1' /></div>");
$("div").get(0).mozRequestFullScreen();
},5000);
});
});
</script>
</head>
<body>
<p>Foo</p>
</body>
What it does is wiat for 5 seconds and prepend the image all right, but it is not set to full-screen. However, if you remove the timer and do it normally:
$("p").click(function() {
$("body").prepend("<div><img src = 'http://i.stack.imgur.com/lBZKC.jpg?s=128&g=1' /></div>");
$("div").get(0).mozRequestFullScreen();
});
it works fine, it prepends the image and immediately sets it to full-screen.
Is this intentional, or a bug? Either way, is there any way to make it work?
The method has to be called in response to a user input event (ie. keypress, mouseevent).

How can I get a css position change to take effect during a JQuery UI Draggable element's start event handler?

I have an odd situation in which I need to modify the position of a draggable element as soon as the user starts dragging it. So, during the draggable element's start event handler, I'm trying to set the position. It doesn't respond to the position change unless - and this is weird - I do something to cause a javascript error after I change the position. Here's an example:
<html>
<head>
<title>Drag reposition test</title>
<script type="text/javascript" src="js/css_browser_selector.js"></script>
<script type="text/javascript" src="development-bundle/jquery-1.3.2.js"></script>
<script type="text/javascript" src="development-bundle/ui/jquery-ui-1.7.1.custom.js"></script> <!-- Includes JQuery UI Draggable. -->
<style type="text/css">
#draggable { width: 150px; height: 150px; padding: 0.5em; }
</style>
<script type="text/javascript">
$(function() {
$("#initialdragger").draggable({
start: function(e, ui) {
$('#initialdragger').css('top', 400);
x = y; // Javascript error, which weirdly causes a redraw.
}
});
});
</script>
</head>
<body>
<div id="initialdragger" class="ui-widget-content" style="border-width: 1px; border-color: black; background-color: orange; width: 300px">
<p>Drag me around</p>
</div>
</body>
</html>
How can I legitimately cause a redraw to happen in this context? JQuery's hide() and show() don't work and neither do these methods.
I think binding a mousedown event will get you what you want
<script type="text/javascript">
$(function() {
$("#initialdragger").draggable();
$('#initialdragger').bind("mousedown", function(e) {
$(this).css('top', 400);
});
});
</script>

Categories

Resources