We Keep Coding

jQuery Slider Working only twice?

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);});

Fancy Box - how to refresh DIV on modal window onclosed

I've searched high and low through this forum and thus far I don't see an answer. And, I think I beginning to lose my mind.
Could be I'm just missing it as I am NOT a programmer.
I am a visual designer that can usually install pre written code without to much
difficulty. And, indeed I have installed FancyBox and have it working well
except for one small problem which I desperately need help with.
I am working with a dynamically generated page written in ColdFusion.
Three divs on the page contain FancyBox links that open editing screens.
Once editing is complete and the user closes the FancyBox modal the changes
need to be reflected on the parent page.
Right, so I was able to find a solution that refreshes the entire page
'onClosed': function() {
parent.location.reload(true); }
});
How, oh how can I get just a single div to refresh "onClosed" as
apposed to the entire page??????

There a a couple of ways to do that.
One way is to get the content of the div with a function. This function will preform an ajax-call to get the content, say the function is called getcontent(); your syntax will be something like onClosed': function() { getcontent(); }
A better way to do this is to get the edited content and push this in the div. say you set a variable text with the content after the save of the editor, after that you can push this variable into the div with onClosed': function() { $('#divid').html(yourvar); }
I must say both ways are not easy to implement. Maybe if you show the code you currently having we can help you some more.

Right on Tim, well Fancybox uses jquery and loads it's own "library".
Each link that invokes fancybox has an id which is referred to like thus
<script type="text/javascript">
$(document).ready(function() {
$("#link1").fancybox({
'titleShow' : false,
'width' : '80%',
'height' : '80%',
'autoScale' : false,
'transitionIn' : 'none',
'transitionOut' : 'none',
'type' : 'iframe',
'onClosed': function() {
parent.location.reload(true); }
});
});
</script>

jQuery issue - #<an Object> has no method

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!

close fancy box from function from within open 'fancybox'

Hi all i want to be able to close fancyBox when it is open from within.
I have tried the following but to no avail:
function closeFancyBox(html){
var re = /.*Element insert complete!.*/gi;
if( html.search( re ) == 0 ){
$.fancybox.close();
//alert("foo");
}
}
foo will open in dialog but will not close down. any hints?

Try this:
parent.$.fancybox.close();
See Fancybox API documentation.

According to http://fancybox.net/faq
How can I close FancyBox from other element? ?
Just call $.fn.fancybox.close() on
your onClick event
So you should just be able to add in the fn.

If you just want to close the fancy box it is sufficient to close it.
$('#inline').click(function(){
$.fancybox.close();
});

It is no use putting the .fn, it will reffers to the prototype.
What you need to do is $.fancybox.close();
The thing is that you are maybe experiencing another error from js.
There are any errors on screen?
Is your fancybox and jquery the latest releases?
jquery is currently in 1.4.1 and fb in 1.3 something
Experiment putting a link inside the fancybox and put that function in it.
You probably had read that, but in any case,
http://fancybox.net/api
One thing that you probably might need to do is isolate each part in order to realize what it is.

You can even close fancybox by get close button id and call click event on that id.
<input type='button' value='Cancel' onclick='javascript:document.getElementById("fancybox-close").click();' />
It works for me!

i had the same issues a longtime then i got the solution by the below code.
please use
parent.jQuery.fancybox.close()

Bit of an old thread but ...
Actually, I suspect that the answer to the original question about how to close the window from within the window has more to do with the fact that the click event is not attached to the element. If the click event is attached in document.ready the event will not be attached when fancybox creates the new window.
You need to re-apply the click event once the new window . Probably the easiest way to do this is to use onComplete feature.
This works for me:
$(".popup").fancybox({
'transitionIn' : 'fade',
'transitionOut' : 'elastic',
'speedIn' : 600,
'speedOut' : 400,
'overlayShow' : true,
'overlayColor' : '#000022',
'overlayOpacity' : 0.8,
'onComplete' : function(){$('.closer').click(function(){parent.$.fancybox.close();})}
});
Actually, after a bit of thought 'live' rather than 'click' or 'bind' might work just as well.

Use this to close it instead:
$.fn.fancybox.close();
Judging from the fancybox source code, that is how they handle closing it internally.

After struggling myself with this I found a solution that works just replace the $ with jQueryjQuery.fancybox.close() and I made it an inline script on an onClick. Going to check if i can call it from the parent

For those who spent hours like me to find out the solution for inline type: window.setTimeout(function(){$.fancybox.close()},10);

I ended up using:
<script>parent.$("#fancy_close").click();</script>
I guess the version of fancybox we have doesn't have a $.fancybox.close() function for me to call :(
FYI, I just wanted the page to close the fancybox, as it had finished its processing in PHP.

Add $.fancybox.close() to where ever you want it to be trigged, in a function or a callback, end of an ajax call!
Woohoo.

Within an iframe use - parent.$.fancybox.close();

to close fancybox by funciton its necessary to make setTimtout to the function that will close the fancybox
Fancybox needs some time to acept the close function
If you call the function directly will not work
function close_fancybox(){
$.fancybox.close();
}
setTimeout(close_fancybox, 50);

yes in Virtuemart its must be button CLOSe-continue shopping, not element, because after click you can redirect..
i found this redirect bug on my ajax website.

If anyone is looking for how to close all instances in Fancybox 4 you can just use Fancybox.close();

To close ajax fancybox window, use this:
onclick event -> $.fancybox.close();
return false;

Jquery Fancybox not working after postback

I have a Fancybox (or more accurately) a number of fancy boxes on an asp.net page.
My Fancybox (jquery plugin) works fine until a postback occurs on the page then it refuses to work.
Any thoughts? Anyone experienced similar behaviour?
UPDATE : Some Code..
I have a databound repeater with a fancybox on each repeating item.
They are instanciated by (outside the repeater)
$(document).ready(function() {
$("a.watchvideo").fancybox({
'overlayShow': false,
'frameWidth' : 480,
'frameHeight' : 400
});
});
The anchor tag is repeated..
href="#watchvideo_<%#Eval("VideoId")%>"
As is a div with
id="watchvideo_<%#Eval("VideoId") %>
As is a script element that instanciates the flash movies
Yes the VideoIds are being output the the page.
UPDATE : It's not a problem with the flash..
It is not a problem with the flash as i've tried it without the flash, it wont even pop a window with a simple message in.
UPDATE : I wonder if it is the updatepanel.
Rebinding events in jQuery after Ajax update (updatepanel)
-- lee

The problem is in using $(document).ready() to bind the fancybox. This code is only executed once, when the page is originally loaded. If you want the fancybox functionality on every postback, synchronous or asynchronous, replace the $(document).ready() with pageLoad(sender, args). i.e.
function pageLoad(sender, args) {
$("a.watchvideo").fancybox({
'overlayShow': false,
'frameWidth' : 480,
'frameHeight' : 400
});
}
see this answer for more info

Could it be that the instantiating code is being inserted at a piece of code which is not run after a postback?

It was the Update panel as described
here.. Rebinding events in jQuery after Ajax update (updatepanel)
As suggested I simply replaced
$(document).ready(function() {
$("a.watchvideo").fancybox({
'overlayShow': false,
'frameWidth' : 480,
'frameHeight' : 400
});
});
with
function pageLoad(sender, args)
{
if(args.get_isPartialLoad())
{
$("a.watchvideo").fancybox({
'overlayShow': false,
'frameWidth' : 480,
'frameHeight' : 400
});
}
}
and it worked!
-- Lee

This might help someone else, but FancyBox appends it's code to the <body> element... which is all fine and well, but resides OUTSIDE the asp.net <form> element. My postback problems went away when I modified FancyBox to append its dom objects to the <form> element:
$('body form:first').append( ... );

I had a similar problem with a paged grid-view. The first page of the grid was launching the fancybox while the remaing did not.
I thought it could be an issue related to the UpdatePanel which refreshes only a portion of the screen.
I solved the issue replacing this:
<script>
$(document).ready(function () {
$("a.small").fancybox();
});
</script>
with this:
<script>
function pageLoad(sender, args) {
$("a.small").fancybox();
};
</script>