I thought I had trouble using fancybox 2 with nivo slider wrapped by a div, but after some tests, I found that i have trouble using facybox 2 with div. So I will reorganize my question.
To make it clearer, I will post my codes in the following:
For css:
<style>
#content{
background: red;
}
#maximize{ width: 24px; height: 24px; }
</style>
For html:
max
<div id="content"> </div>
For JS:
$('#maximize').click(function() {
$('#maximize').fancybox({
'href' : '#content'
});
});
It works as expected if I clicked the max button. However, if I closed the fancybox, the popup box is gone, and the original div with id = "content" disappear as well. this is not expected. I want the content become what it was, but not disappeared.
Other question: How can I change the size of the fancy box popped up? I want to make the fancy box larger.
I hope my question is clear enough. Thanks in advance.
You don't actually need :
$('#maximize').click(function() {
$('#maximize').fancybox({
'href' : '#content'
});
});
... but only this :
$('#maximize').fancybox({
// API options here
});
... since .fancybox() already binds the click event to the selector #maximize, otherwise is redundant .... so does the 'href' : '#content' option since the href is already taken from the href attribute in the link.
On the other hand, fancybox will always hide the opened inline content since it would be its expected state (isn't it redundant to show in fancybox something that is already visible?) ... anyway, you could make it visible again using the callback afterClose like :
$('#maximize').fancybox({
afterClose: function() {
$("#content").show();
}
});
Regarding the second question, use the width and height options along with fitToView and autoSize to set your preferred box dimensions like :
$('#maximize').fancybox({
fitToView: false, // avoid the adjusting size to viewport
autoSize: false, // avoid set size based on content
width: 420, // or whatever
height: 320,
afterClose: function() {
$("#content").show();
}
});
See working DEMO
Related
I have a several blocks of content which open in a Fancybox. This all works as it's meant to but the contents of a couple of the boxes is quite small and doesn't really warrant a 1000px width Fancybox overlay. Is there a way to set the widths of these boxes to something else?
I've tried added a width to the content box (#login-overlay) for example but Fancybox just ignores this as it is built around the content once the relative link has been clicked which opens the overlay.
Here's my javascript:
$(document).ready(function() {
$(".fancybox").fancybox({
margin: [20,20,20,20],
padding: [20,20,0,20],
openEffect: 'fade',
openEasing: 'easeInQuad',
openSpeed: 400,
title: false,
//closeBtn: false,
//autoCenter: false,
scrolling : 'no', // turns off scrolling in box.
fitToView : false, // allows box to overflow out of viewport.
autoSize: false, // needs to be turned off for width/maxWidth to work.
height: 'auto', // if autoSize is set to 'false', this needs to be 'auto' so height matches content.
width: '100%',
maxWidth: 960,
helpers: {
overlay: {
// locked: false, // Prevents jump to top of window when opening a fancybox.
showEarly : false
}
},
tpl: {
closeBtn : '<a title="Close" class="fancybox-item fancybox-close icon-circle-cross" href="javascript:;"><span>Close</span></a>'
}
});
});
As you can see I'm using maxWidth to see the width of the default size. I couple of boxes could be almost half that. I've tried setting auto so see if it would inherit the width set on the content block in the CSS but this doesn't seem to work.
Any ideas that don't involve writing a whole need block of script for $(".fancybox-narrow")?
EDIT
I actually found an example on the Fancybox page which uses data-fancybox-width to set the width of an overlay: http://jsfiddle.net/wgPTR/
Though this doesn't seem to work with my code. The width sets but it isn't responsive anymore. Setting fitToView to false seems to get that working but then the fancybox crops when there's not enough vertical space and it's un-scrollable.
UPDATE
Just to update, here's a CodePen of the working (default) fancybox: http://codepen.io/moy/pen/YGgjqv
I've also created a forked version which uses data-fancybox-width to set a width - which works but unfortunately the fancybox is no longer responsive. The only way to get this to work is to take out fitToView: false which breaks my vertical scrolling.
Any ideas?
I seem to have found a solution (with a lot of help from the CSS Tricks forum) by using the following beforeLoad if statement:
beforeLoad: function() {
if ($(this.element).hasClass('fancybox--small')) {
this.maxWidth = 600;
}
}
Basically it checks for the class fancybox--small and if it's present it amends the maxWidth of the fancybox.
Can't see any problems with it (yet), checking in IE it seems to work down to IE8 as well. Hopefully this helps someone else but let me know if you find any issues with it ;)
I am using a mixture of jQueryTools overlay (lightbox type thing) and a scroll-bar called Perfect Scrollbar. The problem I have is that when the overlay is loaded the scroll-bar doesn't show until you scroll within that box. I need to be able to make it clearer so that everyone knows it is a scroll-able content box. One way this could be possible is to make the content box scroll up one pixel when the overlay is opened. I have found the following code
$(".scroll-content").load(function() {
window.scrollBy(0,-1);
}
which I have been told should work but no matter what I can't get it to scroll at all.. Is there something i'm doing wrong?
Since you have the scroll bar method bind to an element that is initially in a 'hide' status, in fact .BigSuperBlock .block_overlay is hidden by display:none; in Css, the plugin can not properly calculate the height of the overlay container.
So, when you call the function that show-up the 'overlay' container, you have to call the method on the scroll-content class:
$('.scroll-content').perfectScrollbar('update');
You can find the documentation of this in the author's page.
To make it works, you have to call the plugin 'update' method, again, in the jQueryTools modal function, as a callback.
$(".block_overlay").overlay({
onLoad: function(event) {
$('.scroll-content').perfectScrollbar('update');
// here you update the perfectScrollbar plugin
},
onClose: function(event) {
// other custom code
}
});
Try with this:
jQuery("container").animate({ scrollTop: 50 }, 800);
Give that you want to make clear that there is a scrollbar, you can have it on all the time if you change the perfect-scrollbar.css
.ps-container .ps-scrollbar-x-rail {
...
opacity: 0.6;
}
.ps-container .ps-scrollbar-y-rail {
...
opacity: 0.6;
}
As the title says really. I'm using Fancybox, the popular jQuery lightbox script on my site.
I've set a hyperlink which pops open the lightbox using an IFRAME of the requested page.
This works fine, however...
The lightbox is too big, I'd like it to auto size to the content. On the documentation at http://fancyapps.com/fancybox/#docs you can see in the table there's an autosize parameter.
Is this it, can someone who knows jQuery please help show me how this appears in my configuration of the script?
Here's my current configuration:-
$(document).ready(function() {
$(".fancybox").fancybox({
type: 'iframe',
nextClick: false
});
});
I have tried autoSize on your site and it does not seem to work. But this code seems to do the trick:
$(".fancybox").fancybox({
type: 'iframe',
beforeShow: function(){
this.width = $('.fancybox-iframe').contents().find('div:first').width();
},
nextClick: false
});
I found it in this answer and adapted it to your layout to retrieve the width from the root div.
But it would be better to understand why autoSize does not have any effect on the iframe you load.
Looking at your URL, the IFRAME has a fixed width of 520px on the first div element.
<div style="width: 520px; margin: 0 auto;">
Try removing or reducing that width to make it less wide - according to your needs.
I'm using jQuery colorbox to load a login form (via ajax). However, this little small box shows up for a few seconds, then it fades into the actual content that I want to load. So after observing several colorbox examples on the website, I'm somewhat sure that the little box is supposed to be a pre-loading box. Is there any way I could disable this box from appearing entirely?
I've tried silly things like tweaking the CSS and setting display: none to all loading items, but it doesn't work.
I want to avoid any CSS hacks and solve this problem by modifying the javascript. Ideally, some way for the loading box to never show up, as I won't be using colorbox for anything that takes a long time to load.
Recreated the problem on jsfiddle using my modified colorbox javascript and CSS. The ajax content won't load there, but the little box that I want to get rid of still shows up: http://jsfiddle.net/hPEXf/
Thanks in advance!
As #op1ekun said ColorBox has two events that are useful in your situation.
onOpen -> Callback that fires right before ColorBox begins to open.
onComplete -> Callback that fires right after loaded content is displayed.
It seems simply just hiding lightbox using either display:none or $("#colorbox").hide() don't work. so I used opacity to hide the lightbox while content gets loaded. I've set up a jsfiddle by forking yours http://jsfiddle.net/fDd6v/2/ that demonstrate this in action. Here is the code that has been used:
$(function(){
$("#awesome-link").colorbox({
onOpen: function(){
$("#colorbox").css("opacity", 0);
},
onComplete: function(){
$("#colorbox").css("opacity", 1);
}
});
});
Refrence: ColorBox - a jQuery lightbox Events/Callbacks docs
I changed the following in the CSS -
#colorbox{border: 1px solid #ebebeb;}
#cboxContent{background:#fff; overflow:hidden;padding: 20px;}
to this -
#colorbox{border: 0px solid #ebebeb;}
#cboxContent{background:#fff; overflow:hidden;padding: 0px; margin: 0px;}
And the box is hidden until it expands to show the content. I'm not sure if that will be detrimental to your overall style though. You should be able to manipulate the margin of the form so that you get white space around it.
http://jsfiddle.net/hPEXf/1/
I was working with ColorBox few days ago so I believe I'm quite fresh on the topic. Did You consider using built-in callbacks?
Specifically onOpen and onComplete?
If we go with the padding solution mentioned by Jay you can set padding to 0 in the onOpen and set it back to desired value in the onComplete.
It seems to be a clean solution.
I was working with
$(function(){
$("#awesome-link").colorbox({
onOpen: function(){
$("#colorbox").css("opacity", 0);
},
onComplete: function(){
$("#colorbox").css("opacity", 1);
}
});
});
But it turns to black fade then open color-box when i'm working with transition:"fade" properties of colorbox.
Now i change my code in jquery.colorbox.js
comment or remove the below code in colorbox js file
/*var initialWidth = setSize(settings.get('initialWidth'), 'x');
var initialHeight = setSize(settings.get('initialHeight'), 'y');
var maxWidth = settings.get('maxWidth');
var maxHeight = settings.get('maxHeight');
settings.w = (maxWidth !== false ? Math.min(initialWidth, setSize(maxWidth, 'x')) : initialWidth) - loadedWidth - interfaceWidth;
settings.h = (maxHeight !== false ? Math.min(initialHeight, setSize(maxHeight, 'y')) : initialHeight) - loadedHeight - interfaceHeight;
$loaded.css({width:'', height:settings.h});
*/
/*$loadingOverlay = $([$tag(div, "LoadingOverlay")[0],$tag(div,"LoadingGraphic")[0]]); */
$slideshow = $tag('button', "Slideshow")/*,
$loadingOverlay*/
/* clearTimeout(loadingTimer);
$loadingOverlay.hide();*/
/* loadingTimer = setTimeout(function () {
$loadingOverlay.show();
}, 100);*/
And change the below code
overlay.css({
opacity: opacity === opacity ? opacity : '',
cursor: settings.get('overlayClose') ? 'pointer' : '',
visibility: 'visible'
}).show(500);
To,
setTimeout(function(){
$overlay.css({
opacity: opacity === opacity ? opacity : '',
cursor: settings.get('overlayClose') ? 'pointer' : '',
visibility: 'visible'
}).fadeIn(500);
}, 600);
and now it's working smoothly.
I want to achieve something like :
$("#left").hide('slide', {direction: 'right'}, 1000)
However I do not want the div to be hidden I want it to keep up space so I want have the visibility hidden like:
$("#left").css('visibility','hidden')
Yet still achieve the same effect as above.
This is what I'd do
$parent = $('#left').parent(); //store the parent of the element in a variable
$('#left').clone() //clone the existing element
.appendTo($parent) // insert it into the current position
.css('visibility','hidden') //set it's visibility to hidden
.end().end() //target the initial element
.slideUp() //do any slide/hide/animation that you want here, the clone will always be there, just invisible
This could be horrible, but it's the only way I could think of solving the problem :)
EXAMPLE: http://jsfiddle.net/skyrim/j2RWt/4
Try this:
var $content = $("#left");
var offset = $content.offset();
$("<div></div>").css({
width: 0,
position: "absolute",
left: offset.left,
top: offset.top,
height: $content.outerHeight(),
backgroundColor: "White"
}).appendTo("body")
.animate({
width: $content.outerWidth()
}, 1000, function () {
$content.css('visibility', 'hidden');
$(this).remove();
});
EDIT
So, after learning what the actual need was (:p), this method basically place another div over the original element. I've tested it on IE...and I'll edit this with an update after I do further testing on other browsers!
EDIT
Only Chrome seems to be having an issue with getting the correct height.
Added a callback which removes the makes visibility hidden (as LEOPiC suggested) and removes the slideout div
You can do it in very simple way. There is really a nice tutorial here to animate in different direction. It will surely help you. try this
$('#left').animate({width: 'toggle'});
EXAMPLE : http://jsfiddle.net/2p3FK/2/
EDIT: One more solution, this is very simple to move the div out of window with left margin
$("#left").animate({marginLeft:'1000px'},'slow');
EXAMPLE : http://jsfiddle.net/2p3FK/1/