How to set fixed width and height on fancy box? the fancy box works fine but not the width/height.
The width should be 953px and the height 100%.
script:
<script type="text/javascript">
$(document).ready(function(){
$(".fancybox").fancybox();
});
$(".fancybox").fancybox({
padding : 0
});
</script>
You can set width and height for fancy box directly :
$(".fancybox").fancybox({
'overlayShow': false,
'frameWidth': 500, // set the width
'frameHeight': 100, // set the height
'type': 'iframe', // tell the script to create an iframe
'autoDimensions':false,
'autoSize':false
});
or
$('.fancybox').fancybox({
autoDimensions: false,
height: 300,
width: 400
});
Related
There has been multiple changes in the Fabricjs API that affect the way scaling points behave. One of the latest changes in version 4 (http://fabricjs.com/v4-breaking-changes) states that uniformScaling is now the way to go to force proportional scaling.
This is my test canvas:
<canvas id="c" width="400" height="400" style="border:1px solid #ccc"></canvas>
And this is my simple code snippet:
const canvas = (this.__canvas = new fabric.Canvas("c"));
canvas.uniformScaling = true;
const Add = () => {
const rect = new fabric.Rect({
left: 100,
top: 100,
fill: "yellow",
width: 200,
height: 100,
stroke: "lightgreen",
});
canvas.add(rect);
canvas.setActiveObject(rect);
};
Add();
See a codepen illustrating the issue.
Why are the control points for resizing horizontally and vertically still there? What am I doing wrong?
The uniformScaling property only determines the behavior of the corner resize controls. You can hide the side controls using the setControlsVisibility method.
http://fabricjs.com/docs/fabric.Object.html#setControlsVisibility
fabric.Rect.prototype.setControlsVisibility({
ml: false,
mt: false,
mr: false,
mb: false
});
I develop web aplication with fabricjs ,At present, scaleX or scaleY is changed by Controls in fabricjs, but I want to change width or height directly by Controls. How can I do that?
try this Code :
canvas.on({
'object:scaling': function(e){
var selected = e.target;
selected.set({
height: selected.height * selected.scaleY,
width: selected.width * selected.scaleX,
scaleX: 1,
scaleY: 1
});
canvas.renderAll();
}
})
set height and width after calculation of scaling and make scale 1.
i using TweenMax and pixi.js
codepen.io/nimaina/pen/aPERKO
how to remove black background?
Well the black background that you see is the default PIXI.Application setup.
Default width: 800
Default height: 600
Default backgroundColor: 0x000000 (black)
Basically there are two options, that I see, to avoid the black background.
Option 1: use exact dimensions for width and height
I see the dimensions of greensock.png are 538x173.
var app = new PIXI.Application( {
view: document.querySelector("#canvas"),
width: 538,
height: 173
});
Option 2: set transparent:true and make the background transparent
var app = new PIXI.Application( {
view: document.querySelector("#canvas"),
transparent: true
});
In fabricjs textbox if text content(no space) is larger than the textbox width it won't go to next line, it stuck at first line. So that I get the content width using text:changed event and try to press enter programmatically if content is greater than textbox width but its not working. Is there any other way?
I don't want to override fabricjs default method for breakwords it has other conflicts and cursor get misplaced.
var canvas = new fabric.Canvas('c');
var text1 = new fabric.Textbox('Text', {
left: 10,
top: 20,
width: 300
})
canvas.add(text1);
canvas.on('text:changed', function(e) {
if (e.target.width > 300) {
console.log("text over width");
$('#canvas').trigger(jQuery.Event('keypress', {
keyCode: 87,
which: 13
}));
}
});
canvas{
border:1px solid #000;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script>
<script src="https://rawgit.com/kangax/fabric.js/master/dist/fabric.js"></script>
<canvas id="c" width="400" height="400" style="border:1px solid #000000;"></canvas>
I have more than one textbox. When I group all textboxes and scale the group horizontally height of group is not increase dynamically and content of textbox get vanish unlike independent textbox which increase height till the content end.
Below code I tried to set same height of group as of textbox but not working. Any Suggestion ?
var canvas = new fabric.Canvas('c');
var text1 = new fabric.Textbox('Text', {
left: 10,
top: 20,
fontSize : 18,
width: 300
})
canvas.add(text1);
var text2 = new fabric.Textbox('If this textbox grouped with above textbox, height will not increase on scaling horizontally and content get vanished but if scalling independently height increase', {
left: 20,
top: 40,
fontSize : 18,
width: 300
})
canvas.add(text2);
canvas.on('object:scaling', function(e) {
/* if(e.target.type == "group"){
var obj=e.target;
obj.height=obj.item(0).height;
obj.width=obj.item(0).width;
}*/
});
canvas{
border:1px solid #000;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.7.9/fabric.js"></script>
<canvas id="c" width="400" height="400" style="border:1px solid #000000;"></canvas>