WordPress.org

Ready to get started?Download WordPress

Forums

DivUp Content
Differnt width of colums (6 posts)

  1. christian_ice
    Member
    Posted 2 years ago #

    Hi, ive been trying to 'modify' your great plug but cant get my head around it hehe.

    Id like to have a set of divs that are as wide as the content in them are. So if a image in column 1 is 100px id like the column to be 100px and image in column 2 150px id like the column 2 to be 150px. I tried to set width to 'auto' but didnt work.

    Second question. each image have different heights and all of them align in 'top' i want them to align 'bottom'

    i tried to set divup-wrap to relative and divup to absolute but then all divs ended up on top of eachother.

    Thanks

    /christian

    http://wordpress.org/extend/plugins/divup-content/

  2. Themeover
    Member
    Plugin Author

    Posted 2 years ago #

    Hi Christian,

    Sorry for late reply, I was on holiday.

    If you can post a link to the web page you are working on I will just post the CSS code you need in this forum. If that's not possible, try the following:

    - don't use relative or absolute positioning on anything
    - If you want the wrapping divs to be the same width as the images, give them a "width:150px" (or what ever). If you also want them to stack along in a line, give the divs a "float:left" (or right). If you float the divs, you may want to give the divup-wrap div "overflow:hidden" - which has a similar effect of adding a <div style="clear:left"></div> after all the divs inside divup-wrap (but is a bit cleaner as it doesn't require extra html or inline CSS).

    Hope that helps!

    Seb

  3. christian_ice
    Member
    Posted 2 years ago #

    Hey, hope the holiday was good.

    I actually solved it yesterday with jquery.
    $(window).load(function(){ $("img").each(function(i,item){  $(item).css("margin-top",$(".TINYMCE_gallery_wrapper").height()-$(item).height() ); }); });

    but now im a bit shattered how to get each img. positioned in the middle, same spacing top and bottom.

    /christian

  4. Themeover
    Member
    Plugin Author

    Posted 2 years ago #

    Perhaps you could try this instead:

    $(window).load(function(){
    	$("img").each(function(i,item){
    		$(item)
    		.css( "margin-top", ($(".TINYMCE_gallery_wrapper").height()-$(item).height())/2 )
    		.css( "margin-bottom", ($(".TINYMCE_gallery_wrapper").height()-$(item).height())/2 );
    	});
    });

    [Please post code or markup snippets between backticks or use the code button.]

  5. christian_ice
    Member
    Posted 2 years ago #

    Ahh thanks!

    I do have one last question, as you probably understand there's a lot of trial & error, hehe.

    Im trying to print the img alt. tags with out the hover, in other words id like them to be visible.
    iv tried to change .hover but without success

    All the best

    [Code moderated as per the Forum Rules. Please use the pastebin]

  6. Themeover
    Member
    Plugin Author

    Posted 2 years ago #

    OK, we've wondered a bit far off topic now so this is the last time I'm going to help you with this! But this final amended script should do everything you're after:

    $(window).load(function(){
    	$("img").each(function(i,item){
    		var vertMargin = ( $(".TINYMCE_gallery_wrapper").height()-$(item).height() )/2;
    		var imgAlt = $(item).attr('alt');
    		$(item)
    		.css( "margin-top", vertMargin)
    		.css( "margin-bottom", vertMargin)
    		.after('<span class="img-alt-text">'+imgAlt+'</span>');
    	});
    });

    It's worth mentioning that you probably could've achieved all of this with CSS alone.

    Over and out!

Topic Closed

This topic has been closed to new replies.

About this Plugin

About this Topic