Building Cms With Bootstrap Problems

[kcmastrpc]

You can visit the site here: http://cumberlandcreativegroup.com ; the login information and link are at the bottom.

 

I've already extended the CMS platform quite a bit, adding an image management/upload system, along with a carousel manager.

 

The issue I'm running into is with the DOM, and I think it's because I'm using bootstrap responsive. Anyways, a couple problems, and they'll stand out pretty quick is when the carousel slides, the overlay objects don't line up correctly. The first slide is fine, as it loads in the browser view (I'm assuming).

 

The next problem is with float elements (images) in the body, you can see what happens to those as well.

 

I've tried to handle the slideshow with this script, but it only half way works (as you can tell).

 

	$( '#myCarousel' ).bind('slid', function(e) {
	    $('.item.active').each(function() {
		        $('.tek_edit').each(function() {
			var height = $(this).outerHeight();
			if (height < 25) { height = 25; }
			var width = $(this).parent().width();

			$(this).height(height).width(width);
			$(this).find('.tek_edit_link').height(height-2).width(width-2);
		});
                   });
	});

[falkencreative]

You'll need to do a little testing, but I would bet this line:

 

var height = $(this).outerHeight();

 

is returning 0 for elements within slides that aren't visible, since those slides are set to display: none when the page first loads and that script runs. jQuery can't figure out the proper height without the element being visible in the page.

 

I don't really have a solution for you, though you might check http://stackoverflow.com/questions/2345784/jquery-get-height-of-hidden-element-in-jquery or see what workarounds others have done for this issue. Alternatively, you could rewrite the slideshow or use a different slideshow script that doesn't hide slides by using display:none, but perhaps hides them using z-index or by moving them out of sight.