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>
Related
OK, my disclaimer, regarding script, I'm green as a cucumber.
I've recently set up jquery-oembed on my site (phpbb forum), it's a code which auto embeds media content from various sites like youtube, twitter, facebook etc...
It works great, except I'm having trouble integrating it into my chat box. The chat functions through an ajax code which auto refreshes in intervals. Depending on where I put my script, the embed will either show a link and not embed until you manually refresh the page....or....it will embed, but constantly repeat itself over and over every time the ajax refreshes. I've been playing around with this a lot, I try to avoid bothering you guys unless it's absolutely necessary.
Here's the oembed code, which works find on the posts in my site.
(function($) {
$(document).ready(function() {
$(".avatarMessage .postlink").oembed(null, {
embedMethod: "append",
startClosed: true,
maxWidth: 300,
});
});
})
The best I could find through searching was this snippet which I tried. If I change it to add:
(function($) {
$(document).ready(function() {
$(".avatarMessage .postlink").oembed(null, {
embedMethod: "append",
startClosed: true,
maxWidth: 300,
});
while (update.firstChild) {
update.removeChild(update.firstChild);
}
});
})
Then it won't keep repeating it, but it also won't allow for new url's to embed, so I can't use this one.
Is there something I could add for this which would limit the removeChild to just the content of that message, or perhaps another idea that I'm just completely not seeing (don't get frustrated with me, I'm trying, I just don't have much experience outside the basic html and css).
In case anyone is interested, here is the ajax code which fires the auto refresh.
https://raiderforums.com/mchat/mchat_ajax_mini.js
Thanks for putting up with me :)
This is happening because each time you call $(".avatarMessage .postlink").oembed(....) all matched elemenets will be compiled even if they are already compiled. To prevent that you can add a new-post class and remove it after the element is compiled/embeded:
(function($) {
$(document).ready(function() {
$(".avatarMessage .postlink.new-post").oembed(null, {
embedMethod: "append",
startClosed: true,
maxWidth: 300,
}).removeClass('new-post');
});
})
Thus, the elements will not be matched on the next oembed call.
Here is another alternative, it uses a flag instead:
(function($) {
$(document).ready(function() {
$(".avatarMessage .postlink").each(function(index, element) {
var $el = $(element);
//If already embedded just return
if ($el.data('oembedded')) return;
//set the flag
$el.data('oembedded', true);
$el.oembed(null, {
embedMethod: "append",
startClosed: true,
maxWidth: 300,
});
});
});
});
I hope this will help you.
In given below link when we refresh our page it briefly shows the expanded version before it collapses on its own. Is there a way to have it immediately be collapsed?
http://new.cgwealth.com/staff
Below are JS Code links:
http://new.cgwealth.com/pages/js/jquery-1.7.2.min.js
http://new.cgwealth.com/pages/js/accordion-jquery-ui.min.js
<script type="text/Javascript">
$(document).ready(function () {
$(".accordion").accordion({
autoHeight: false,
navigation: false,
collapsible: true,
clearStyle: true
});
});
</script>
CSS link: http://new.cgwealth.com/pages/pages/css/accordion.css
So i want to hide all the data until my accordion functionality works.
Thanks in advance
i had the same question in my last project, but i have no idea about that. Then i use a very ugly method to fix this. When i load data from my server, i add class named 'hidden'(css:display:none), and it had a effort that all data, just like text or images, all hide. And after all data loaded, i call jquery function accordion and remove class 'hidden'.
So i use this method to fix. Maybe it is valid for you.
You have to hide the content through css, and then enable the content to be show via javascript. Here is one working copy
http://jsfiddle.net/aneeshrajvj/FcHEC/
I'm a little new to javascript as I mostly just fool around with CSS styling when developing web pages.
I ran into a problem trying to integrate Fancybox with Cloudzoom. I've been trying to follow the directions as directed here: http://blog.codestars.eu/2010/cloud-zoom-in-der-fancybox/
I'm able to get the effect to work perfectly except for one small error-- for some reason (all my images are in galleries for easier use scrolling through fancybox), the zoom only ever shows the first image in the series.
If someone could help me sort through this? Preview any of the galleries here: http://bit.ly/LaPzEH
Here's the tidbit I think is just slightly off - I think it has something to do with the href line in this code being off:
$j('a[rel=gallery]').fancybox({
padding: 0,
overlayColor: '#'+$j('#skin_color').val(),
transitionIn: 'fade',
transitionOut: 'fade',
overlayOpacity: .9,
onComplete : function(arg) {
$('#fancybox-img').wrap(
$('<a>')
.attr('href', $(arg[0]).attr('href'))
.addClass('cloud-zoom')
.attr('rel', "position: 'inside'")
);
$('.cloud-zoom').CloudZoom();
}
});
Any an all help is greatly appreciated!
Edit: Got it working by changing
$(arg[0]).attr('href')
to
this.href
As an aside (because I couldn't find many cloudzoom/fancybox threads) you can also change the position from inside to right/left etc. by editing the JS code for fancybox to have the fancybox-inner display as visible rather than hidden.
If the idea is to wrap the #fancybox-img selector with an anchor with class="cloud-zoom" and with the same href attribute of the anchor that opened fancybox like
<a href="{same as anchor}" class="cloud-zoom" rel="position: 'inside'">
<img id="fancybox-img" src="{big image}" alt=" " />
</a>
... so Cloud Zoom can work on the specific image, then I would re-write the onComplete callback like :
'onComplete' : function(){
$('#fancybox-img').wrap(
$('<a />')
.attr('href', this.href) // this.href gets the "href" of the current image
.addClass('cloud-zoom')
.attr('rel', "position: 'inside'")
); // wrap
$('.cloud-zoom').CloudZoom();
} // onComplete
(not idea what the heck onComplete : function(arg) would do but in any case it would be better to use 'onComplete' : function(currentArray, currentIndex) for the sake of standard fancybox code)
SIDE NOTES:
You are loading two versions of jQuery (1.4.2 and 1.7.1) when you actually need a single instance (ideally the latest version) to avoid unexpected errors.
You are using fancybox v1.3.0 ... it wouldn't hurt to upgrade at least to v1.3.4
Set all your fancybox API options between quotes like
"padding": 0, // it's OK 0 without quotes (integer and Boolean values go without them)
"overlayColor": '#'+$j('#skin_color').val(),
"transitionIn": 'fade',
"transitionOut": 'fade',
"overlayOpacity": .9,
"onComplete": ...etc
there are known issues (mostly with IE) because that (fancybox v1.3.x)
It seems that when I add an afterClose callback to my fancybox I'm getting this error:
Uncaught RangeError: Maximum call stack size exceeded
This is the code I am using:
$("a.termsLink").fancybox({
type : 'iframe',
fitToView : false,
width : 450,
height : 600,
afterClose : function(){
$('#regForm').click();
}
});
What is supposed to happen is when the termsLink box closes, the regForm is supposed to open. I've expiremented with differnt callbacks, but the issue that I am running into seems to be unaffected by this.
The solution appears to be as follows:
afterClose : function(){
setTimeout(function(){$('#regForm').click();}, 1);
}
However that feels like a very hacky method to me, the issue seems to be that the fancybox code trys to call the new box while the animation for the other box is still running, which causes this issue. Is this a documented issue with FancyBox? Or is this a function of the way jQuery animation event work? Is there a more elegant solution to this issue?
If you're using Twitter Bootstrap < 2.3.1, it's known to cause this exact issue (I just experienced it, and upgrading bootstrap solved the problem)
More details here: https://github.com/fancyapps/fancyBox/issues/519
Try
$("a.termsLink").fancybox({
type : 'iframe',
fitToView : false,
width : 450,
height : 600,
afterClose : function(){
$('#regForm').focus();
}
});
although what you have should work you're right. Unsure but check the script doesn't close all fancybox's open. if the #regForm is being opened into a fancybox hence why you'd need the timeout.
Looking into the fancybox script they use this function
function _cleanup() {
overlay.fadeOut('fast');
title.empty().hide();
wrap.hide();
$.event.trigger('fancybox-cleanup');
content.empty();
currentOpts.onClosed(currentArray, currentIndex, currentOpts);
currentArray = selectedOpts = [];
currentIndex = selectedIndex = 0;
currentOpts = selectedOpts = {};
busy = false;
}
This basically confirms what I was saying before. All the instances of fancybox are cleared after this function is run. So even though you've got one opening straight after it's being cleared before really being shown. The solution you've come up with seems to be the better solution unless you want to fiddle with the fancybox script yourself :)
Are you sure the problem is related to the click function?
I found the same problem including, by mistake, two jQuery versions
(jquery-1.2.6.pack.js and jquery-1.4.4.min.js)
Removing the last one solved the problem.
I checked this because of this topic loading jquery twice causes an error?.
You could try to check it.
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>