Jump to content

Building Cms With Bootstrap Problems


kcmastrpc

Recommended Posts

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);
		});
                   });
	});


Link to comment
Share on other sites

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.

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
×
  • Create New...