I am not sure if Spry is just smoother than jQuery but I can never get my animations as smooth as http://labs.adobe.com/technologies/spry/samples/effects/slide_sample.html
I perform my animations as follows:
$("#button").click(function (e) {
$("#thediv").css('margin-left',$(window).width + 10 + 'px');
$("#thediv").animate({
'margin-left' : '0'
},100);
});
I have tried playing with the easing, lowering the framerate using a plugin, adjusting the ms. Does Spry do anything different? As far as Im aware it manipulates the DOM like jQuery. What are ideal animation settings to create smooth "slide from left" div transitions. The web app is for a mobile phone and the div switcing is for switching between views.
Yes you can get exact effect: Working demo :) http://jsfiddle.net/FjgjE/ or http://jsfiddle.net/YWcgw/
Use these js and css files and rest html and full js code is in demo.
Please lemme know if I missed anything!
Hope it helps your cause :) rest feel free to play around with the demo.
scripts
<link href="http://labs.adobe.com/technologies/spry/css/samples.css" rel="stylesheet" type="text/css" />
<script src="http://labs.adobe.com/technologies/spry/includes/SpryEffects.js" type="text/javascript"></script>
code
var animation_start = function(){
var button = document.getElementById('animation_button');
if (button){
button.disabled = true;
button.style.backgroundColor = '#FFF';
}
}
var animation_stop = function(){
var button = document.getElementById('animation_button');
if (button){
button.disabled = false;
button.style.backgroundColor = '';
}
}
var slide_func = new Spry.Effect.Slide('slideIt', {toggle:true, setup: animation_start, finish: animation_stop});
Related
I'm pretty new with Jquery. I would like that my animations with Wow.js could run more than once time. For instance: i scroll to the bottom of my page and see all the animations, and if i scroll back to the top i see again the animations like when you scroll down. I hope that I explained myself. I have already seen many websites that repeats the animations on theirs pages but unfortunately I don't remember them and I can't provide a link.
I have already tried this:
$(window).scroll(function(){
new WOW().init();
}
But it repeat the animations also if you scroll a little and it's pretty ugly to see. I try to explain me better: I have a with my animation and if it is focused the animation is triggered, then i scroll down to another div and the previous div is no more visible(not in the window viewport), then again i scroll back to my div with animation and the animation is triggered again.
I'm sorry for this messy question but I really don't know how to explain it.
Thanks in advance!
This example by Benoît Boucart shows how the animation can be "reset" when the user scrolls out of view and back in. The key here is the second function that removes the animation css class when the element scrolls out of view. I wish WOW.js would implement this, but they've indicated that they don't plan to.
http://codepen.io/benske/pen/yJoqz
Snippet:
// Showed...
$(".revealOnScroll:not(.animated)").each(function () {
var $this = $(this),
offsetTop = $this.offset().top;
if (scrolled + win_height_padded > offsetTop) {
if ($this.data('timeout')) {
window.setTimeout(function(){
$this.addClass('animated ' + $this.data('animation'));
}, parseInt($this.data('timeout'),10));
} else {
$this.addClass('animated ' + $this.data('animation'));
}
}
});
// Hidden...
$(".revealOnScroll.animated").each(function (index) {
var $this = $(this),
offsetTop = $this.offset().top;
if (scrolled + win_height_padded < offsetTop) {
$(this).removeClass('animated fadeInUp flipInX lightSpeedIn')
}
});
If a user wants to repeat the animation on both the events i.e.
onScrollUp
onScrollDown
then this will be a good solution for it:
First create an addBox function, it will help to push new elements into the WOW boxes array.
WOW.prototype.addBox = function(element){
this.boxes.push(element);
};
Then use jQuery and scrollspy plugin that helps to detect which element is out of the view and then push WOW as:
$('.wow').on('scrollSpy:exit',function(){
var element = $(this);
element.css({
'visibility' : 'hidden',
'animation-name' : 'none'
}).removeClass('animated');
wow.addBox(this);
});
Solution Courtesy: ugurerkan
Answer by #vivekk is correct I m just adding a working example so that people can easily get this
see the Demo fiddle
<script>
// Repeat demo content
var $body = $('body');
var $box = $('.box');
for (var i = 0; i < 20; i++) {
$box.clone().appendTo($body);
}
// Helper function for add element box list in WOW
WOW.prototype.addBox = function(element) {
this.boxes.push(element);
};
// Init WOW.js and get instance
var wow = new WOW();
wow.init();
// Attach scrollSpy to .wow elements for detect view exit events,
// then reset elements and add again for animation
$('.wow').on('scrollSpy:exit', function() {
$(this).css({
'visibility': 'hidden',
'animation-name': 'none'
}).removeClass('animated');
wow.addBox(this);
}).scrollSpy();
</script>
Ok so I'm putting in an image that onclick resizes, (goes larger and then onclick returns to origional size)
I've done this using JS but I cant seem to implicate an animation in the tween between sizes, i want it to visibly get bigger rather so it expands to the size rather than just flicks between the two instances.
Heres the coding:
<script type="text/javascript">
<!--
var flag = true;
function resize() {
if(flag) {
document.getElementById("img1").style.width = "50px";
} else {
document.getElementById("img1").style.width = "280px";
}
(flag)?flag=false:flag=true;
}
//-->
</script>
<body onload="resize();">
<img id="img1" src="../images/attachicona.png" border="0" onClick="resize();" />
You can use CSS3 transitions to make the same effect. No need of javascript or jquery -
css3 animation/transition/transform: How to make image grow?
Or you can use jquery animations -
http://forum.jquery.com/topic/image-resize-animation
if using jquery
var flag = true;
$('#img1').click(function(e){
if(flag)
$(e.target).animate({width:'50px'}, 150, function(){
//do stuff after animation
});
else
$(e.target).animate({width:'280px'}, 150, function(){
//do stuff after animation
});
flag=!flag;
});
For example I have a function called showcontainer. When I click on a button activating it, I want a certain div element, in this case <div id="container">, to fade in. And when I click it again, fade out.
How do I achieve this?
Note: I am not accustomed with jQuery.
So you got a bunch of jQuery answers. That's fine, I tend to use jQuery for this kind of stuff too. But doing that in plain JavaScript is not hard, it's just a lot more verbose:
var container = document.getElementById('container');
var btn = document.getElementById('showcontainer');
btn.onclick = function() {
// Fade out
if(container.style.display != 'none') {
var fade = setInterval(function(){
var opacity = parseFloat(container.style.opacity);
opacity = isNaN(opacity) ? 100 : parseInt(opacity * 100, 10);
opacity -= 5;
container.style.opacity = opacity/100;
if(opacity <= 0) {
clearInterval(fade);
container.style.opacity = 0;
container.style.display = 'none';
}
}, 50);
// Fade in
} else {
container.style.display = 'block';
container.style.opacity = 0;
var fade = setInterval(function(){
var opacity = parseFloat(container.style.opacity);
opacity = isNaN(opacity) ? 100 : parseInt(opacity * 100, 10);
opacity += 5;
container.style.opacity = opacity/100;
if(opacity >= 100) {
clearInterval(fade);
container.style.opacity = 1;
}
}, 50);
}
};
Check the working demo.
Provided you're not opposed to using jQuery per se, you can achieve this easily:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#showcontainer').click(function() {
$('#container').fadeToggle();
});
});
</script>
...
<div id="container">
...
</div>
...
<input type="button" id="showcontainer" value="Show/hide"/>
...
Note the missing http: in the beginning of the source of jQuery. With this trick the browser will automatically use http: or https: based on whether the original page is secure.
The piece of code after including jQuery assigns the handler to the button.
Best thing you could do is start now and get accustomed to jQuery.
The page http://api.jquery.com/fadeIn/ has all the example code that could be written here. Basically you want to have the call to fadeIn in your showcontainer function.
function showcontainer() {
$('#container').fadeIn();
}
You can have a look at jQuery UI Toggle.
The documentation turns the use of the library very simple, and they have many code examples.
You'd be as well off learning jQuery as it makes it a lot easier to do things!
From the sounds of it, you could have the container div already in the HTML but with a style of "display:none;", and then simply show it in your click event using (jQuery):
$('#container').fadeIn('slow', function() {
//Any additional logic after it's visible can go here
});
Forgive me, I am a total n00b with javascript! I have a complicated request that I've been trying to put together for hours I think I have the pieces, but I have a poor understanding of javascript and jQuery syntax, can someone help me put this together?
First, this code should detect via UserAgent string if the device is an iPhone (Note: I'm not sure if this works for all mobile devices... any suggestions for better conditional statements that will catch ALL iPads, iPhones, etc. - anything that uses viewport rather than scrollbars)
<script type="text/javascript">
jQuery(document).ready(function(){
var deviceAgent = navigator.userAgent.toLowerCase();
var agentID = deviceAgent.match(/(iphone|ipod|ipad)/);
if (agentID) {
{
// do stuff
}
else
{
// do nothing
}
}
</script>
Next piece of the puzzle is detecting the height of the viewport. It's important that this script be conditional and apply only to devices that utilize viewport and NOT scrollbars, otherwise I screw the site up for non-mobile users. I only need to alter background-position on the y axis, trying to prevent the background image from disappearing when mobile users slide the viewport.
var viewportHeight = $(window).height();
I found this snippet of code that utilizes the "parralax" effect - where scrolling your position affects the background-position.
$(function(){
var yAdd = 0;
var scrollInterval = setInterval(function(){
yAdd++;
if(yAdd >= 920){
xAdd = 0;
}
$('#body').css('background-position',xAdd + 'px 100%');
},10);
}); }
Can someone help me stitch all of this together... PLEASE?!
I'm thinking it should look something like this:
<script type="text/javascript">
jQuery(document).ready(function(){
var deviceAgent = navigator.userAgent.toLowerCase();
var agentID = deviceAgent.match(/(iphone|ipod|ipad)/);
if (agentID) {
$(function(){
var viewportHeight = $(window).height();
var yAdd = 0;
var scrollInterval = setInterval(function(){
yAdd++;
if(yAdd >= 920){
yAdd = 0;
}
$('#body').css('background-position',yAdd + 'px 100%');
},10);
}); }
}
else
{
''
}
}
</script>
This might not be exactly what your looking for but you can detect iphone and ipad and ipod devices through CSS like this
<link rel="stylesheet" type="text/css" href="css/iphone.css" media="only screen and (max-device-width: 480px)" />
<link rel="stylesheet" media="only screen and (min-device-width: 768px) and (max-device-width: 1024px)" href="css/ipad.css" type="text/css" />
But I kno you need it through jQuery here is what you might do instead
jQuery(document).ready(function(){
var deviceAgent = navigator.userAgent.toLowerCase();
var agentID = deviceAgent.match(/(iphone|ipod|ipad)/);
if (agentID) {
// do something
} else {
//do this
}
});
the only problem is this code is not specific to iPhone, iPad, iPod and so on
as far as the background-image Fixed doesn't work I know you know that makes sense why it doesn't but it sucks and I have not explored a solution for this
I don't have an official answer for this yet, but I'm CLOSE... Read Over here
https://stackoverflow.com/questions/4719469/patching-this-code-to-apply-dynamic-iphone-background-position
I've found a way to dynamically set the "top: x" property based on scroll position (at least it works on my iPhone)... but I still need help putting it all together!
Edit: I put this snippet of code in jsbin: http://jsbin.com/eneru
I am trying to let the user resize (only vertically) a DIV element with jQuery. I read about jQuery UI, I tried it, and in some minutes, I had it working. But the library is adding a ~25KB overhead that I would like to avoid, since I only want simple vertical resizing.
So I tried to do it on my own. Here it is the HTML, I am using inline styling for clarity:
<div id="frame" style="border: 1px solid green; height: 350px">
<div style="height: 100%">Lorem ipsum blah blah</div>
<span id="frame-grip" style="display: block; width: 100%; height: 16px; background: gray"></span>
</div>
As you can see, there is a little bar under the DIV element, so the user can drag it up or down to resize the DIV. Here it is the Javascript code (using jQuery):
$(document).ready(function(){
var resizing = false;
var frame = $("#frame");
var origHeightFrame = frame.height();
var origPosYGrip = $("#frame-grip").offset().top;
var gripHeight = $("#frame-grip").height();
$("#frame-grip").mouseup(function(e) {
resizing = false;
});
$("#frame-grip").mousedown(function(e) {
resizing = true;
});
$("#frame-grip").mousemove(function(e) {
if(resizing) {
frame.height(e.pageY - origPosYGrip + origHeightFrame - gripHeight/2);
}
});
});
It works, more or less, but if you drag the bar too fast, it stops following the mouse movement and everything breaks.
It is the first time I try to do something serious (ahem) with JS and jQuery, so I may be doing something dumb. If so, please do tell me :)
You are doing something dumb: You're trying to do it yourself.
Hear me out, hear me out: Javascript across browsers is a horrible, horrible thing. There are many engines in many versions with many different operating systems, all of which have many subtleties, all of which make Javascript pretty much hell to work with. There is a perfectly good reason why librabries such as jQuery (and their extensions) have exploded in popularity: a lot of great programmers have spent a lot of hours abstracting all these horrible inconsistencies away so we don't have to worry about it.
Now, I am not sure about your user base, maybe you are catering to old housewives that still have dialup. But for the most part in this day and age the 25KB hit on the initial page load (as it will be cached afterwards) for the peace of mind that this is going to work in all browsers consistently is a small price to pay. There is no such thing as "simple" resizing when it comes to Javascript, so you're better off using UI.
I worked on a similar thing and managed to get it to work with maximum and minimum height and to me seems to work very fluid, this was my code.
$(document).ready(function()
{
var resizing = false;
var frame = $("#frame").height();
$(document).mouseup(function(event)
{
resizing = false;
frame = $("#frame").height();
});
$("#frame-grip").mousedown(function(event)
{
resizing = event.pageY;
});
$(document).mousemove(function(event)
{
if (resizing)
{
$("#frame").height(frame + resizing - event.pageY);
}
});
});
live example of how I used it, pull the red button, lacked images so i replaced with simple color. http://jsbin.com/ufuqo/23
I agree with Paolo about using UI, but here are some modifications to your code to get it working:
$(document).ready(function(){
var resizing = false;
var frame = $("#frame");
$(document).mouseup(function(e) {
resizing = false;
});
$("#frame-grip").mousedown(function(e) {
e.preventDefault();
resizing = true;
});
$(document).mousemove(function(e) {
if(resizing) {
var origHeightFrame = frame.height();
var origPosYGrip = $("#frame-grip").offset().top;
var gripHeight = $("#frame-grip").height();
frame.height(e.pageY - origPosYGrip + origHeightFrame - gripHeight/2);
}
});
});
You can save having a do-nothing handler called when you're not resizing, by only binding the mousemove function when you are actually dragging:
$(document).ready(function(){
var resizing = function(e) {
var frame = $("#frame");
var origHeightFrame = frame.height();
var origPosYGrip = $("#frame-grip").offset().top;
var gripHeight = $("#frame-grip").height();
frame.height(e.pageY - origPosYGrip + origHeightFrame - gripHeight/2);
return false;
}
var stopResizing = function(e) {
$(document).unbind("mouseover", resizing);
}
$("#frame-grip").mouseup(stopResizing);
$("#frame-grip").mousedown(function(e) {
e.preventDefault();
$(document).bind("mouseover", resizing).mouseup(stopResizing);
});
});
(sample at http://jsbin.com/ufuqo)