Develop Reference

How to avoid transparent background using cropping plugin

I'm using this cropping tool https://github.com/fengyuanchen/cropper/. I have this issue, that if I add an image dynamically there is some transparent background around the image. So the image does not fit the container and it also makes it possible to crop around the image. I followed the examples on the docs to try to get rid of the transparent background, but with no success.
here is my code:
<div id="imgWrap" style="max-height:400px;min-height:400px">
<img id="img" src="" /> // Image gets added dynamically
</div>
the javascript
var reader = new FileReader();
reader.onloadend = function () {
var img = $('#imgWrap img');
img.attr('src', reader.result);
img.cropper({
aspectRatio: 1 / 1,
autoCropArea: 0.65,
guides: false,
strict: true,
highlight: false,
responsive:true,
dragCrop: false,
movable: true,
resizable: true,
zoomable: true,
touchDragZoom:true,
rotatable: false,
minCropBoxWidth:105,
minCropBoxHeight:105,
built: function () {
// cropper-container is the element where the image is placed
$('.cropper-container').cropper('setCanvasData', {
left: 0,
top: 0,
width: 700,
height: 700
}
);
},
})
I tried to this: https://github.com/fengyuanchen/cropper#setcanvasdatadata but nothing happens
You can see an example here:
The natural size of the image is 1920x1200
This is what is generated after the image is added:
So, does anyone have a suggestion how to get rid of the transparent background and make the image fit the container?

I had the exact same issue. In the Cropper doc it says to set the img max-width = 100%. I did this and it fixed the issue
https://github.com/fengyuanchen/cropper
/* Limit image width to avoid overflow the container */
img {
max-width: 100%; /* This rule is very important, please do not ignore this! */
}

Setting background property of cropper object to false fixes this problem.

You can set option:
aspectRatio: 1 / 1, // select area ratio 16:9, 4:3, 1:1, 2:3, free
viewMode: 3, // sketch image to fit the container

In case someone else gets a similar problem, I fixed mine by encasing the <img> its in own div. Cropper (at least in 2.0.1) defines the container with
$cropper.css((this.container = {
width: max($container.width(), num(options.minContainerWidth) || 200),
height: max($container.height(), num(options.minContainerHeight) || 100)
}));
and $container is created with this.$container = $this.parent(); so if you have padding, some other lines of code, etc it calculates its size along with those lines. Given the age of this though, I doubt OP can validate if that was his problem or not.

I had a same problem and solution was easy.
Everything what you need is setup your css height, width to your cropper selector instead of cropper but after init cropper. This is normal jQuery object and you call cropper init on him later. As latest thing you'll setup new visual variables.
var $area = $('div.crop-area-image'); // jquery object
$area.cropper(options); // init cropper
$area.css({height: '300px'}); // setup css
voala .. thats all!

Unfortunatelly
/* Limit image width to avoid overflow the container */
img {
max-width: 100%; /* This rule is very important, please do not ignore this! */
}
is not enough. This only fixes top and bottom empty space issue.
I had to add display: inline-block; to my container to clamp canvas and image boxes: https://jsfiddle.net/h9ktgxak/

Use fillColor option in the getCroppedCanvas method
Also, make sure to use full color name ('#ffffff') not ('#fff')
getCroppedCanvas({fillColor:'#ffffff'}).toBlob((blob) => {});

You call setCanvasData method on wrong element.
You should call it on the image:
...
img.cropper({
...
built: function () {
img.cropper('setCanvasData', {
left: 0,
top: 0,
width: 700,
height: 700
});
}
});
...

Make div 'fullscreen' onClick?

I have a div that I want to go full-screen (100% width/height of Window size) onClick of a button.
How would I go about this using Javascript/jQuery?

DEMO
$('div').click(function() {
$(this).css({
position:'absolute', //or fixed depending on needs
top: $(window).scrollTop(), // top pos based on scoll pos
left: 0,
height: '100%',
width: '100%'
});
});

$('div.yourdivclass').click(function(){
$(this).css('height','100%').css('width','100%');
})

What have you tried? What didn't work?
Take a look at that:
http://jsfiddle.net/6BP9t/1/
$('#box').on('click',function(e){
$(this).css({
width:"100%",
height:"100%"
});
});

I would do this:
$('#idOfDiv').click(function() {
$(this).css({position:'fixed', height: '100%', width: '100%'});
});​
jsfiffle: http://jsfiddle.net/P6tgH/

$('div').click(function(){
var win = $(window),
h = win.height(),
w = win.width();
$(this).css({ height: h, width: w });
});
http://jsfiddle.net/TQA4z/1/

This is an alternate to the answer marked as correct. Plus it gives him what he asked for to close the div.
Using toggle class is much easier than having your css in your jquery. Do everything you can do to keep css separate from JavaScript.
For some reason my https is effecting loading of the JavaScript on load of that jsfiddle page. I clicked on the Shield icon in chrome address bar and chose to run scripts.
Toggle Class Demo
Something like
$('#buttonID').click(function() {
$("div > div").toggleClass("Class you want to add");
});

Possible to toggle/animate between two sizes using jQuery?

Basically I have a small div that is initially styled to 60x60. I have created click event that animates the expansion of the div:
$("#myDiv").click(function () {
$(this).animate(
{
width: "350px",
height: "300px"
}, 500);
}
I would like to reverse this animation if someone clicks the div again. Is there anyway to toggle between the original size and the expanded size (still using the animate function) with each click?
I found the toggleClass function but I don't think this will work with animiate.
You can see a basic fiddle here: http://jsfiddle.net/NS9Qp/

$("#myDiv").toggle(function() {
$(this).stop().animate({
width: "350px",
height: "300px"
}, 500);
}, function() {
$(this).stop().animate({
width: "60px",
height: "60px"
}, 500);
});
Example.
The jQuery toggle() function allows you to define two or more functions to cycle through on each mouse click. In this case, the first one (triggered on the first click) expands the div and the second one (triggered on the second click) resets it. On the third click, it starts back at the first one, and so on.
More about toggle() here.

just to be different :
var size=[];
$("#cornerBox").click(function(){
$(this).width() >= 350 ? size=[60, 60] : size=[350, 300];
$(this).stop().animate({ width: size[0], height: size[1] },500);
});
Fiddle: http://jsfiddle.net/NS9Qp/1/

I ended up using jQuery UI's animated toggleClass effect: http://jqueryui.com/demos/toggleClass/
super simple code:
$('h2').click(function() {
$(this).next().toggleClass("hidden", 1000);
});

Do not hardcode css styles (in my example I used inline css for myDiv element, put this in css files).
<div id="myDiv" style="background:red; width: 60px; height: 60px;"></div>
<script type="text/javascript">
var div = $('#myDiv');
div
.attr('defWidth', div.width())
.attr('defHeight', div.height())
.toggle(function() {
$(this).stop().animate({width: "350px", height: "300px"}, 500);
}, function() {
$(this).stop().animate({width: $(this).attr('defWidth'), height: $(this).attr('defHeight')}, 500);
}
);
</script>

What I do for cases like this, is store a transformation array.
var transforms = { 'height0': 60, 'width0': 60, 'height1': 300, 'width1': 350};
Then, store a toggle between 0 or 1, and use the corresponding values for the animation.
EDIT: combine this with the previous example of toggle, and you've got yourself a solid working solution!

Width and height issue with fancybox

When I've added this code no setting on width and height works
jQuery(document).ready(function() {
$('a.iframe').fancybox();
});
What are the options to get around it?

Take a look at the documentation here: http://fancybox.net/api
You're using inline content, so make sure that you're setting the autoDimensions option to false along with the width and height settings.
UPDATE: I tested the following solution successfully:
$('a.fbtag').fancybox({
autoDimensions: false,
height: 300,
width: 400
});
This assumes that the class name of the link you're opening is 'fbtag'.

Fancy Box width and Height always varies with the media type.
If we provide 5 * 5 pixel image - Fancy Box will show up with dimensions of Image Dimensions.
To counter the effect of media dimensions and define the default width & height for Fancy Box
Try this:
$.fancybox.open(collection.toJSON(), {
afterShow :function(){},
maxHeight : 600,
minWidth : 500
});
FancyBox width will be minimum - 500 pixels.
FancyBox Height will be proportional to the FancyBox data with maximum Height of 600 pixels.

For example
$.fancybox({
'content':"This will be the content of the fancybox",
'width':'500',
'autoDimensions':false,
'type':'iframe',
'autoSize':false
});

$(document).ready(function() {
$(".fancy-ajax").fancybox({
type: 'ajax',
autoDimensions: false,
'autoSize': false,
'height': 'auto'
});
});
The above codes worked for me. However, I was designing in Twitter Bootstrap.

you can do this two way
With iframe
$(document).ready(function () {
$(".fancybox").fancybox({
width:600,
height:400,
type: 'iframe',
href : 'url_here'
});
})
Without iframe
$(document).ready(function () {
$(".fancybox").fancybox({
width:600,
height:400,
autoDimensions: false,
});
})

Setting height of text area based on text inside of it using jQuery

I have a <textarea> element in my form that has this code attached to it:
$('#links').focusin(function() {
$('#links').animate({
height: '100px'
}, 300, function() {
// done
});
});
This works perfectly, when the text area gets focus it increases in height nicely to 100px. Now, I want it to shrink back down to a suitable size based on the text inside it when it loses focus. I wrote this:
$('#links').focusout(function() {
$('#links').animate({
height: 'auto'
}, 300, function() {
// done
});
});
But it doesn't work, it just stays at the same height (100px). Is there any way to do this?
Thanks. :)
Edit: To save some confusion, the even handler for $('#links').focusout works fine, that's the first thing I tested. So I assume it's a problem with the animation or the CSS property.

Try $( '#links' ).blur( function(){ ... } ) instead
http://api.jquery.com/blur/
Edit, your actual code:
$('#links').blur(function() {
$('#links').animate({
height: 'auto'
}, 300, function() {
// done
});
});
Some other notes.. You can use $( '#links' ).focus() instead of focusin, and also, once you're in the function, you can use $( this ).animate(), as a shortcut. Just little tips and whatnot.

This isn't quite the same as what you're doing, but quite similar: http://james.padolsey.com/javascript/jquery-plugin-autoresize/

auto_height_link = $( '#links' ).css('height');
$('#links').focusin(function() {
$(this).animate({
height: '100px'
}, 300, function() {
// done
});
}).focusout(function() {
$(this).animate({
height: auto_height_link
}, 300, function() {
// done
});
});
but anyways the animate doesnt read the css value auto for height
i stumbled upon this http://www.unwrongest.com/projects/elastic/ which is what you need i guess

You can't use auto to animate in jQuery. You should set it to auto, then get the actual height (in px) and finaly animate it.
Take a look here