Setting width and height of fancybox - javascript

I've tried the following code with little to no avail:
$(document).ready(function(e){
$(".iframe").fancybox(
{
height: 950,
width: 400 }
);
});
I've put everything in quotes and everything without quotes and nothing seems to have any effect of the fancybox. There does seem to be some effect on the width, but it's irregular and temperamental. From what I can tell, all including the width does it set the width to it's default value.

Try:
$(document).ready(function() {
$(".iframe").fancybox({
maxWidth : 950,
maxHeight : 400,
fitToView : false,
width : '100%',
height : '100%',
autoSize : false
});
});

Related

How to set maximum cropbox size in cropperjs?

Hello i just want to ask how can i set the maximum size of my cropbox? Because i got a image frame which have a 400x400 image size then inside of it is a box container which going to be the place where the cropped image from the cropbox go.
I have this jQuery code
var img = $('#image');
$('#image').on('load', function () {
img.cropper({
aspectRatio : 1,
scalable : true,
rotatable : true,
checkOrientation : true,
cropBoxResizable : true,
dragMode : 'move',
minCropBoxWidth : 346,
minCropBoxHeight : 269,
minContainerHeight : 400,
minContainerWidth : 400,
minCanvasWidth : 400,
minCanvasHeight : 400,
viewMode : 1
});
img.cropper("setCropBoxData", { width: "346", height: "269" });
}
It works normal but no changes have been made with my cropbox. It only set its minimum size but not the maximum. Any solutions will help thanks.
You can add this :
autoCropArea: 1,
Try adding style="max-height:80vh !important" to the parent container for the cropper-container cropper-bg class.

Fancybox aling isnĀ“t work on Firefox

I'm using Fancybox to show a iframe when a page load, but, the vertical aligment in Firefox and Chrome doesn't show fine, and IE work perfect. The code is this:
<script type="text/javascript">
$.fancybox.open([
{
type : 'iframe',
href : 'http://www.example.org/online/index.html',
title : 'Inscribete',
width: 800,
height: 580
}
], {
padding : 0
});
</script>
If you want to display the iframe with those dimensions, then you may need to use fitToView set to false.
Also, check your syntax. I would rather do something like
$.fancybox.open({
type: 'iframe',
href: 'http://www.example.org/online/index.html',
title: 'Inscribete',
width: 800,
height: 580,
fitToView: false,
padding: 0
});
That should work fine in most of modern browsers.
See JSFIDDLE

imgAreaSelect JQuery Plugin Resizable Div's Minimum's Width and Height

I have a re sizable div generated by a Jquery Plug-in.It's purpose is for the cropping functionality. Below is the Jquery plug-in's link:
http://odyniec.net/projects/imgareaselect/usage.html
HTML Code:
<div class="imgareaselect-border4"></div>
JavaScript Code:
$('#img_captured').imgAreaSelect({
handles: true,
aspectRatio: "1:1",
disable: false,
hide: false,
show:true,
minHeight: '140px', //Set it's minimum height
minWidth: '140px' //Set it's minimum width
});
It has a way of setting it's minimum height and width, but doesn't work with me. I don't know what's wrong, so my last resort is to do it manually. I tried using the css code below but doesn't work. How can I limit it until it's dimension is 140px x 140px?
.imgareaselect-border4
{
min-height: 140px;
min-width: 140px;
}
The arguments for maxHeight and maxWidth in imgareaselect don't use strings but integers
$('#img_captured').imgAreaSelect({
handles: true,
aspectRatio: "1:1",
disable: false,
hide: false,
show:true,
minHeight: 140, //Edit here
minWidth: 140 //Edit here
});

Removing jQuery fancyBox black bars

On this link the FancyBox shows the video but with black bars to the side. Also when I resize the browser black bars appear on the top. I tried everything I could find on SO and elsewhere but I can't seem to find the solution.
This is my JS setup of the FancyBox:
<script type="text/javascript">
$(document).ready(function() {
$('.fancybox').fancybox({
openEffect : 'none',
closeEffect : 'none',
helpers : {
media : {}
},
autoSize: false,
fitToView: true,
maxWidth: 960,
maxHeigth: 540,
height: '70%',
width: '70%',
});
});
</script>
Where do I need to look to fix this?
I found if you update the width of div which class is flideo , that would fix this problem
you coulde see the picture url below
https://dl.dropboxusercontent.com/u/23971112/stackoverflow/fancybox%20black%20bar.JPG

jQuery get the document width and height excluding horizontal/vertical scrollbars

I have a piece of jQuery on my site that displays an overlay the full width and height of the window. I have an issue in that if the overlay is closed (as there is an option to close it) I lose the vertical scroll bar from my window. Is there a way to specify the width and height excluding any horizontal or vertical scrollbars?
This is my code below, the jQuery will run as soon as the page loads.
<div id="screen"></div>
$('#screen').css({ "display": "block",
opacity : 0.7,
"width" : $(document).width(),
"height" : $(document).height()
});
$('body').css({ "overflow" : "hidden" });
This works:
$('#screen').css({ "display": "block",
opacity : 0.7,
"width" : $(document).width(),
"height" : $(document).height()
});
$('body').css({ "overflow" : "auto" });

Categories