I've made my own slider with jQuery using .animate functions throughout, and the slider works when I use it once, and twice, but on the 3rd try, it goes crazy! Basically it's similar to Microsoft's 'For Home' and 'For Work' slider, but a lot less complex (right now)
It is live on a website, and to show you what I mean, here's the URL:
http://glorbi.com/index3
(Click For Work, then For Home, then For work, it starts to fail)
Here's the jQuery that handles the sliding:
$("#sidebar2").click(function(){
$("#innerSec2").animate({"right" : 130}, 1000);
$("#sidebar2").animate({"height" : 1100});
$("#innerSec").animate({"left" : -840}, 1000);
$("#innerSec").animate({"left" : 840}, 200);
$("#sidebar").animate({"height" : 400});
});
$("#sidebar").click(function(){
$("#innerSec").animate({"left" : 0}, 1000);
$("#sidebar").animate({"height" : 1100});
$("#innerSec2").animate({"right" : 970}, 1000);
$("#innerSec2").animate({"left" : 710}, 200);
$("#sidebar2").animate({"height" : 400});
});
I've tried using callbacks, but they lead to a more sequential reaction, moving the slider in parts, which looks pretty horrible.
Also I am aware of the z-index issue as it slides, and I'll fix that!
Does anyone know how I could fix this? The code is pretty generic, and it's strict values for every action, I don't really see how it's failing. :S
Thanks alot! Any help is greatly appreciated! :)
After fiddling with it in firebug, I found out that the left:710px on innerSec2 is causing problem, after we click on sidebar2 div, so I tried following and it seems working except z order problem which you can fix :D
$("#sidebar2").click(function(){$("#innerSec2").animate({"left":-130},0);});
Related
I'm having trouble grasping how to deal with front end events in volt, and hopefully this specific question could help enlighten me.
I implemented the simple chat program from the webcast and wanted to build on it. Specifically I want the chat window to stay scrolled to the bottom as the chat window is populated. I think the key is the jquery .animate({ scrollTop:...}) method, but I don't understand how to implement that in volt. Could someone enlighten me?
My first attempt is the "scroll_bottom" method in the controller
https://github.com/mmattthomas/chat/blob/master/app/main/controllers/main_controller.rb#L30-L36
def scroll_bottom
`
var newscrollHeight = $('.panel-body').attr('scrollHeight') - 20;
//alert('newscrollHeight:' + newscrollHeight);
$('.panel-body').animate({ scrollTop: newscrollHeight }, 'normal');
`
end
The javascript runs, but the variable returns NaN.
View is here:
https://github.com/mmattthomas/chat/blob/master/app/main/views/main/index.html
Even this specific example doesn't solve the whole problem (what if someone else adds to the chat, what event can animate the chat window to the bottom?) - so how best to implement this client-side action with volt?
Well, one good thing to know about Volt is that it uses OpalRb for client-side workings. To run something like jQuery in Volt, I think it would be easiest to use an Opal wrapper, which allow access of libraries like jQuery with Ruby.
Using the opal-jquery wrapper, I would implement a jQuery animation like so:
panel_body = Element.find(".panel-body")
panel_body.animate({ scrollTop: panel_body.children.height }, speed: "normal")
EDIT:
Here is a fork of your project where I have implemented a fix for this issue that you can check out.
I made an animation, and i want to add a callback function at the end of the animation loop.
Do you know how I can do that ?
Thx.
Glad to read you found your solution :)
You can find a complete example on the cgscenegraph website:
http://gwennaelbuchet.github.com/cgSceneGraph/examples/03_Animation/animation_01_SRT/index.html
There are other examples related to animation also: http://gwennaelbuchet.github.com/cgSceneGraph/examples.html
What you have to understand with the animation engine is that a timeline is generated for each couple node+property you want to animate. And it is this timeline that provides events related to the animation.
Here is an example to get the onAnimationEnd of a timeline:
this.sceneGraph.getTimeline(myNode, "rotation.angle").onAnimationEnd = function (event) {
console.log("animation ended");
};
To get onAnimationStart or onAnimate events, it's exactly the same :)
Hope this can help.
okay i found what i want,
there is a property named "onAnimationEnd" into the CGSGTimeline class that is fired at the end of the animation, so i've got my callback function ;)
for information, there are other callback functions like "onAnimate" & "onAnimationStart" in the cgSceneGraph framework.
link to http://gwennaelbuchet.github.com/cgSceneGraph/api.html
best regards.
so i have tried making myself an infinite carousel using html, css & jQuery and everything is working apart from the back button will not loop, i've spent quite a while doing this now and i'm wondering if anyone has any insight? http://jsfiddle.net/e2SKk/ is where you can see the code! i'm only really doing this because i thought it would give me a chance to learn a lot more, but any criticisms of code layout or technique would be helpful!
specifically its this code thats seems not to work
else if(loopPrev==true){
sliderActive=true
$('.item-holder').css({
'left':clonePos
});
$('.item-holder').animate({
'left':holderPos+$('.slider').width()+'px'
},function(){
sliderActive=false;
});
};
that is only a snippet btw and won't make much sense without the rest!
jQuery is cool to write short scripts.
Your slider code in short:
var width = $('.slider').width();
$('.item').css({width:width});
var $holder = $('.item-holder').css({left:-width}).prepend($('.item:last'));
$('.prev').click(function(){
$holder.not(':animated').css({left:-2*width}).prepend($('.item:last')).animate({left:-width});
});
$('.next').click(function(){
$holder.not(':animated').css({left:0}).append($('.item:first')).animate({left:-width});
});
That's the complete code.
See this in action on http://jsfiddle.net/creativecouple/YPU2d/
Pretty cool little slider you have going here! You say you are a beginner? I'd say you've picked up on jQuery quite well! Also before I forget, addressing your comment: if you post something on stackoverflow...it WILL be viewed, likely by many people :). It's rare to come here and receive no help (albeit you may not always get an answer).
Fortunately for you, I've found your problem! It's right here:
else if(loopPrev==true){
sliderActive=true
$('.item-holder').css({
'left':clonePos
});
$('.item-holder').animate({
'left':holderPos+$('.slider').width()+'px'
},function(){
sliderActive=false;
});
};
You are checking whether or not to loop, setting the slider to active, setting the next slide to the last slide in the index (and subsequently pushing it to that at the same time), then you animate as you normally would. This results in two movements: first to the back of the index, then to the value of holderPos+$('.slider').width()+'px'...hence your strange behaviour. This should help:
else if(loopPrev==true){
sliderActive=true;
$('.item-holder').animate({
'left':"-1800px"
}, function(){
sliderActive=false;
})
};
The value "-1800px" is just the last slide in your buffer that I precalculated...you should be able to replace it with your clonePos variable without trouble.
*EDIT: You should also change your variable clonePos to look like this:
var clonePos = '-'+($('.item').index()-1)*($('.slider').width());
It will eliminate a bug when you swap between the last slide in the index and the first slide (a "smooth transition" if you will).
**
Part II
**
In order to achieve the illusion of infinite scrollability you will need to embed a callback "push back" function inside the "left pressed" animation call. It's late here so I haven't tested the code I am about to write but I'm fairly confident it will work for you.
else if(loopPrev==true){
sliderActive=true;
$('.item-holder').animate({
'left':clonePos
}, function(){
$(this).css('left':holderPos+$('.slider').width()+'px');
sliderActive=false;
})
};
If you take a look this isn't much different from the original answer I offered. All we have done is take the callback function for animate, and added a call to slip the position to the original index position. Again, untested, but the idea is that .animate() will slide to the clone, once that is done your callback will swap the clone with the original, and then deactivate the slider.
You weren't very far off! Here's a semantic rule of the animate function (to attempt to help your understanding of the way a callback works):
animate( params, [duration], [easing], [callback] )
params is our left call (to the cloned slide in this case)
duration is ignored here
easing is ignored here
callback is our function() call that does our little david copperfield swap
Hope this helps!
How can I possibly delay the disappearance of the menu by some miliseconds/seconds?
going ahead and editing this fadesettings: {overduration: 350, outduration: 2000}in the js only changes the animation speed. But THAT IS NOT what I want =).
Please check this JSFiddle to see the JS, CSS, and HTML.
Thanks for the help guys
P.S:- about the top:80px gap that you see, I intentionally put it there cuz that's the way I'm styling my site so I want the gap there.
You can user the setTimeout function to add a delay before you call a function.
In your case, if you want to delay the fadeout of the menu, instead of just doing :
$this.children("ul:eq(0)").fadeOut(jquerycssmenu.fadesettings.outduration);
You could do
setTimeout(function() { $this.children("ul:eq(0)").fadeOut(jquerycssmenu.fadesettings.outduration)
}, 2000);
to delay the call by 2 seconds.
Note that I cached the $(this) selector in your fiddle to still be able to access the variable.
http://jsfiddle.net/KB5Ve/
EDIT :
Added comments on the fiddle : http://jsfiddle.net/DBvq7/
I've tried a veriety of jQuery plugins recently and I keep getting this error …
(source: shaunbellis.co.uk)
… regardless of what plugin I try to use.
I've checked the links to the JS files which are all there and working fine. I'm using Drupal if that makes any difference.
I've run the plugins away from the main site to demonstrate that they are working and that I am doing things right with 100% success.
Any ideas?
Update:
My jQuery file called in the footer:
$(document).ready(function() {
$('#footer_holder').hide();
// Fancy Box
$("a.fancybox").fancybox({
'hideOnContentClick': true,
'titlePosition' : 'over',
'transitionIn' : 'elastic',
'transitionOut' : 'elastic',
'speedIn' : 600,
'speedOut' : 200,
'overlayShow' : false,
});
$("#homepage_slider").easySlider({
auto: true,
continuous: true,
});
});
*note - fancy box works fine (unless the easySlider code is above it). jQuery is sorted out by Drupal. I'm running version 1.4
This problem can also arise if you include jQuery more than once.
Ignore me. I'm sorry everyone. I'd mistyped the url of the script. Thanks to Simon Ainley for the prod in the right direction.
Sorry again. Thanks.
I had this problem, or one that looked superficially similar, yesterday. It turned out that I wasn't being careful when mixing jQuery and prototype. I found several solutions at http://docs.jquery.com/Using_jQuery_with_Other_Libraries. I opted for
var $j = jQuery.noConflict();
but there are other reasonable options described there.
For anyone else arriving at this question:
I was performing the most simple jQuery, trying to hide an element:
('#fileselection').hide();
and I was getting the same type of error, "Uncaught TypeError: Object #fileselection has no method 'hide'
Of course, now it is obvious, but I just left off the jQuery indicator '$'. The code should have been:
$('#fileselection').hide();
This fixes the no-brainer problem. I hope this helps someone save a few minutes debugging!
This problem may also come up if you include different versions of jQuery.
This usually has to do with a selector not being used properly. Check and make sure that you are using the jQuery selectors like intended. For example I had this problem when creating a click method:
$("[editButton]").click(function () {
this.css("color", "red");
});
Because I was not using the correct selector method $(this) for jQuery it gave me the same error.
So simply enough, check your selectors!