We Keep Coding

How to set the background color of the content that should be displayed in a fancybox in jquery?

I have a div that forms the content of the fancybox. I need to change the background color of the div which froms the content of the fancybox on click of a link which will popup the fancybox? How to change it in jquery?
/* Href */
click here
/* FancyBox */
$('#link').on('click', function(e) {
e.preventDefault();
$.fancybox({
'autoScale' : false,
'autoSize' : false,
'autoDimensions': false,
'titleShow' : false,
'padding' : 0,
'overlayOpacity': '.8',
'overlayColor': '#333',
'transitionIn': 'none',
'transitionOut': 'none',
'centerOnScroll': true,
'showCloseButton': true,
'closeBtn' : true,
'scrolling' : true,
'height': 'auto',
'width': 120,
'minHeight' : 160,
'minWidth' : 10,
'maxWidth' : 780,
'type':'ajax',
'href' : 'url/something.html',
helpers : {
overlay : {closeClick: false}
},
'beforeShow' : function(){
var closer = $('button.buttonCTW');
closer.on('click', function() {
$.fancybox.close();
});
$.fancybox.update();
},
});
});

Since you haven't posted any code.. this is just a shot in the dark but this should do the trick:
Fiddle:
http://jsfiddle.net/remix1201/gw0vnzcv/
$(".linkClass").click(function(){
$(".targetClass").css("background-color","YOURCOLORCODEHERE");
});

You can set the background colour of fancy box before it is shown.
$('.fancybox').fancybox({
beforeShow: function() {
$('fancybox-skin').css('background-color', 'red');
}
});

How to refresh an already opened FancyBox popup?

Can anyone tell me how to refresh a Fancybox popup ?
Here is how i create it.
$.fancybox({
'width' : 470, // set the width
'height' : 190,
'autoSize': false,
'transitionIn': 'fade',
'transitionOut': 'fade',
'href': 'pop.jsp',
'autoDimension' : false,
'type': 'iframe',
});

You may be able to do it by refering to $('iframe.fancybox-iframe'), with something like this:
$('iframe.fancybox-iframe').attr('src', function(i, val){return val;});
(according to Reload an iframe with jQuery)
example here: http://jsfiddle.net/pataluc/aLbYr/

Scroll absolute position div with page

I am using fancybox 2 and I would like for the fancybox modal to scroll with the page, instead of being fixed to the center and having a max-height. How can I do this?
$('.fancybox-open').fancybox({
openEffect : 'none',
closeEffect : 'none',
width: '100px',
'closeBtn' : true,
afterLoad : function() {
this.content.html();
}
});

You can use the option autoCenter: false when initializing your FancyBox: http://fancyapps.com/fancybox/#docs

Hide Fancybox triggered on Page Load on Mobile

Site: beauforgovernor.com
I have a fancybox triggered on page load (only on the homepage), but I don't want it to show up on mobile phones; however, I do still want it to show up on tablets.
I'm not sure how to code this.
This is the JS i'm currently using:
<script type="text/javascript">
$(document).ready(function() {
$("#aLink").fancybox({
'width' : '640',
'height' : 'auto',
'autoScale' : true,
'transitionIn' : 'none',
'transitionOut' : 'none',
'type' : 'iframe'
});
});

Youll want to choose which screen dimensions you consider as mobile, might be hard as some tablet are barely bigger than some smartphone...
$(function(){
var viewport = {
width : $(window).width(),
height : $(window).height()
};
if(viewport.width>"480" && viewport.height>"600")
{
$("#aLink").fancybox({
'width' : '640',
'height' : 'auto',
'autoScale' : true,
'transitionIn' : 'none',
'transitionOut' : 'none',
'type' : 'iframe'
});
}
);

Why is this Fancybox height and width not working?

This is what I have:
<script type="text/javascript">
$(document).ready(function() {
/*
* Simple image gallery. Uses default settings
*/
$('.fancybox').fancybox();
/*
* Different effects
*/
/*********This is what I added to see if I can change h and w****/
$('.fancybox-effects-a').fancybox({
autoDimensions: false,
height: 568,
width: 611
});
/********* my code ends ****/
// Change title type, overlay closing speed
$(".fancybox-effects-a").fancybox({
helpers: {
title : {
type : 'outside'
},
overlay : {
speedOut : 0
}
}
});
// Disable opening and closing animations, change title type
$(".fancybox-effects-b").fancybox({
openEffect : 'none',
closeEffect : 'none',
helpers : {
title : {
type : 'over'
}
}
});
// Set custom style, close if clicked, change title type and overlay color
$(".fancybox-effects-c").fancybox({
wrapCSS : 'fancybox-custom',
closeClick : true,
openEffect : 'none',
helpers : {
title : {
type : 'inside'
},
overlay : {
css : {
'background' : 'rgba(238,238,238,0.85)'
}
}
}
});
// Remove padding, set opening and closing animations, close if clicked and disable overlay
$(".fancybox-effects-d").fancybox({
padding: 0,
openEffect : 'elastic',
openSpeed : 150,
closeEffect : 'elastic',
closeSpeed : 150,
closeClick : true,
helpers : {
overlay : null
}
});
/*
* Button helper. Disable animations, hide close button, change title type and content
*/
$('.fancybox-buttons').fancybox({
openEffect : 'none',
closeEffect : 'none',
prevEffect : 'none',
nextEffect : 'none',
closeBtn : false,
helpers : {
title : {
type : 'inside'
},
buttons : {}
},
afterLoad : function() {
this.title = 'Image ' + (this.index + 1) + ' of ' + this.group.length + (this.title ? ' - ' + this.title : '');
}
});
/*
* Thumbnail helper. Disable animations, hide close button, arrows and slide to next gallery item if clicked
*/
$('.fancybox-thumbs').fancybox({
prevEffect : 'none',
nextEffect : 'none',
closeBtn : false,
arrows : false,
nextClick : true,
helpers : {
thumbs : {
width : 50,
height : 50
}
}
});
/*
* Media helper. Group items, disable animations, hide arrows, enable media and button helpers.
*/
$('.fancybox-media')
.attr('rel', 'media-gallery')
.fancybox({
openEffect : 'none',
closeEffect : 'none',
prevEffect : 'none',
nextEffect : 'none',
arrows : false,
helpers : {
media : {},
buttons : {}
}
});
/*
* Open manually
*/
$("#fancybox-manual-a").click(function() {
$.fancybox.open('1_b.jpg');
});
$("#fancybox-manual-b").click(function() {
$.fancybox.open({
href : 'iframe.html',
type : 'iframe',
padding : 5
});
});
$("#fancybox-manual-c").click(function() {
$.fancybox.open([
{
href : '1_b.jpg',
title : 'My title'
}, {
href : '2_b.jpg',
title : '2nd title'
}, {
href : '3_b.jpg'
}
], {
helpers : {
thumbs : {
width: 75,
height: 50
}
}
});
});
});
</script>
I added this line:
/*********This is what I added to see if I can change h and w****/
$('.fancybox-effects-a').fancybox({
autoDimensions: false,
height: 568,
width: 611
});
/********* my code ends ****/
But it still doesn't work. What can I do to have a custom height and width that is also automatic. Meaning if the content in there exceeds my width and height it should be able to become dynamic and change.

Try setting 'autoSize':false . For example:
$.fancybox({
'content':$("#element").html(),
'width':'500',
'autoDimensions':false,
'type':'iframe',
'autoSize':false
});

You must have like me found the documentation for V1 since it comes up on Google Search first, this is the documentation for the latest fancybox:
http://fancyapps.com/fancybox/#docs