Dynamic height

[dapapes]

Does anyone have an idea on how to make the height of the preview dynamic, based on the height of the content?

[foaad1961]

Well, actually I have the same issue. I have tried to expand the height on .og-expander to 100% and also .og-expander-inner to 100% to no avail. The description paragraph is still the same size and it does not get extended by the amount of text. Any help would be greatly appreciated.

[dikei2000]

Got the same issue, is there any chance we could adjust the fixed height in the javascript and being able to expand to a variable height, depending on the content inside. Thanks a lot in advance.

[amishbhagwagar]

I got same issue..minHeight from grid.js is not functional very well

[badrobotbrain]

I too would love to know how to size .og-expander based on the height of the content.

[eladnova]

+1
Anyone know how to do this?

[torihaku]

If someone tells me how to make the thing calculate and change the height of the expanded div every time a thumbnail is clicked then I'll get it to work.
Now I do get the height based on the content but the problem is that if I have a div already expanded and its height is based on its content when I click another its height is based on the previous height (because the script only updates the content, not the height). If I close the div by clicking the X and then open another this problem does not occur.

Pretty much what I did was to change the this.$description = $( 'div class="divname">/div>' ); (ADD THE < and <, they wouldn't show in the comment) and added Marginals : 110 to the settings then
calcHeight : function() {
heightPreview = $(".divname").height() + settings.Marginals;
itemHeight = heightPreview + this.$item.data( 'height' ) + marginExpanded;
this.height = heightPreview;
this.itemHeight = itemHeight;
},
I removed the data-largesrc and data-title and put everything inside the data-description and styled it like this so that it takes up the whole area
.divname {
margin: 0 auto;
max-width: 1065px;
width:100%;
}
Hope I didn't leave anything out.

[torihaku]

I got it to work.
Also edited this, though now it always closes the opened div even if it's on the same row:

        // not in the same row
        if( previewPos !== position ) {
            // if position > previewPos then we need to take te current preview´s height in consideration when scrolling the window
            if( position > previewPos ) {
                scrollExtra = preview.height;
            }
            hidePreview();

            setTimeout( $.proxy( function() {   

                previewPos = position;
                preview = $.data( this, 'preview', new Preview( $item ) );
                preview.open();                 
            }, this ), 400 );
            return false;
        }
        // same row
        else {

            hidePreview();

            setTimeout( $.proxy( function() {   

                previewPos = position;
                preview = $.data( this, 'preview', new Preview( $item ) );
                preview.open();                 
            }, this ), 400 );
            return false;


        }

P.S. I do not know javascript or jquery, so all this is just a "lucky guess" ;)
edit: there seems to be a problem when content height is higher than the height of the screen, it doesn't scroll the screen to the right place.

[djredhat]

Вот решение:
замените этим.

calcHeight : function() {

        var heightPreview = $('.og-details p').height() + this.$item.data( 'height' ) + marginExpanded,
            itemHeight = heightPreview;

        if( heightPreview < settings.minHeight ) {
            heightPreview = settings.minHeight;
            itemHeight = settings.minHeight + this.$item.data( 'height' ) + marginExpanded;

        }

        this.height = heightPreview;
        this.itemHeight = itemHeight + this.$item.data( 'height' ) + marginExpanded ;

    },

[ghost]

I arrived at a similar solution to djredhat and while it works, the following issue remains:

If, say, the first item I expand has an .og-details area of 200 pixels height and then I expand another which has 500 pixels, the plugin will open it with the height of the first item i clicked and so the content will be cut off. This is rectified by closing the item and opening it again but if you open one first and then click on another, it retains the heigh of the very first item you clicked.

[lentilz]

Same issue, slightly different implementation.

Rather than using data attributes, I have an AJAX calling populating each expanded panel. I too have a similar solution for calculating the height, but am seeing the same issue as @aholsteinson where if I click on items in the same row, their increased heights are never removed from grid li, so when i click an item on a different row, the expanded grid is closed, the the increased height remains, leaving a large gap between that row.

My solution was to force the heights to return to their original size by adding a panel-closed class to all siblings of the clicked grid-item that resets/re-enforces the original height.

[samwilliscreative]

I've managed to get a pretty good fix for what I needed. This code will get the height based on the content of the img side of the dropdown (which for me was the bigger side). I also stack my content for responsive so have used a media query to add both heights if the screen is smaller than 800px wide. The + 50 that I add is to account for the padding within my box.

calcHeight : function() {

        var windowWidth = window.matchMedia( "(min-width: 800px)" );

        if (windowWidth.matches) {

            var heightPreview = $('.og-fullimg').outerHeight(true) + 50,
            itemHeight = heightPreview;

        } else {
            var heightPreview = $('.og-fullimg').outerHeight(true) + $('.og-details').outerHeight(true) + 50,
            itemHeight = heightPreview;
        }

        this.height = heightPreview;
        this.itemHeight = itemHeight + this.$item.data( 'height' ) + marginExpanded ;

    },

[onereik]

Well djredhat solution works only once with some issues, also every time you click an image it will keep returning the same height of the image and content of the first thumbnail photo you clicked.

The solution is:
First make sure to set minHeight to 0 as the following:
so you don't run into responsive issues on mobile view.
// default settings
`

settings = {
minHeight : 0,
speed : 350,
easing : 'ease'
};
`

Then you have to edit the
calcHeights and setHeights methods:

`
calcHeight : function() {

		var loadedImgHeight = $('.og-fullimg img').load(function(){
			$(this).height();
		})

		var heightPreview = $('.og-details').height() + this.$item.data( 'height' ) + loadedImgHeight.height() + marginExpanded,
        itemHeight = heightPreview;

		if( heightPreview < settings.minHeight ) {
			heightPreview = settings.minHeight;
			itemHeight = settings.minHeight + this.$item.data( 'height' ) + marginExpanded;

		}


	},
	setHeights : function() {

		var self = this,
			onEndFn = function() {
				if( support ) {
					self.$item.off( transEndEventName );
				}
				self.$item.addClass( 'og-expanded' );
			};

		this.calcHeight();
		this.$previewEl.css( 'height', this.itemHeight - this.$item.data( 'height' ) );
		this.$item.css( 'height', this.itemHeight ).on( transEndEventName, onEndFn );
		//console.log("SetHeight: "+this.itemHeight);

		if( !support ) {
			onEndFn.call();
		}

	}

`

Then replace the following in update function: where it says
// preload large image and add it to the preview
// for smaller screens we don´t display the large image (the media query will hide the fullimage wrapper)

if( self.$fullimage.is( ':visible' ) ) { this.$loading.show(); $( '<img/>' ).load( function() { var $img = $( this ); if( $img.attr( 'src' ) === self.$item.children('a').data( 'largesrc' ) ) { self.$loading.hide(); self.$fullimage.find( 'img' ).remove(); self.$largeImg = $img.fadeIn( 350 ); self.$fullimage.append( self.$largeImg ); console.log(self.$largeImg.height()); } $("#og-grid").find('li').attr("style",""); self.setHeights(); } ).attr( 'src', eldata.largesrc ); }