#1
  1. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Nov 2012
    Posts
    5
    Rep Power
    0

    Dynamic textblock?


    Hey guys,

    here's what I'm trying to achieve: I'm working on a blog for a client who's publishing his own work as well as work and scripts from friends. Whenever work from a friend gets published, he'd like a second column next to the text to appear with details about the original author.

    So we got two scenarios:
    1. Own work, no additional details-column required, one column at 100%
    2. Friends work, two columns required -> left column filled with text, right column (next to it) with authors details.

    The problem is: I can't make the second column appear next to the text, because it doesn't know I want it to be there. One option would be to set the text column to 80% which makes the second column to appear next to the text. However, that causes the column to always stick to 80%, even when there is no second column.

    Is there any way to achieve what I'm trying to do? A dynamic text column, that shrinks to — say 80% — when there is another element next to it and otherwise sticks to 100%?

    Thanks so much
  2. #2
  3. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Oct 2012
    Location
    Jersey
    Posts
    16
    Rep Power
    0
    Any chance you would be able to supply some of your HTML and CSS? How is this dynamic content coming in? I would recommend a server side language like PHP to determine if the content is there and then modify the HTML based upon the data being displayed. If thats not possible try javascript to determine what the width should be. jsfiddle
  4. #3
  5. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Nov 2012
    Posts
    5
    Rep Power
    0
    Hey there,

    sure, here's the my code… There is not pretty much to it, but here you go :-) :

    Code:
    .entry-content {
        padding:5px 0 0 0;
    }
    .author_details {
    	width:100px;
    	float:left;
    	position:relative;
    }
    Code:
     
    <div class="entry-content">
    					
    	<?php thematic_content(); ?>
    	<?php
    		$attachment_id_author = get_field('blog_author');
    		$size_author = "blog-author";
    		$image_author = wp_get_attachment_image_src( $attachment_id_author, $size_author );
    	?>	
    						
    	<div class="author_details">
    		<img src="<?php echo $image_author[0]; ?>" />
    		<?php the_field('blog_author_position'); ?>
    		<?php the_field('blog_author_contact'); ?>
    	</div>					
    </div>
  6. #4
  7. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Oct 2012
    Location
    Jersey
    Posts
    16
    Rep Power
    0
    What did you want the HTML to look like when it is the "Own work" situation? What did you want the HTML to look like when its the "Friends work". Are there any fields, or variables that specify whether its their own work or the friends work? For exampled would you be able to run something along these lines:
    PHP Code:
    if( $user_type == 'own' ){
    //Some Code
    }
    else if( 
    $user_type == 'friend' ){
    //Other code

  8. #5
  9. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Nov 2012
    Posts
    5
    Rep Power
    0
    I've uploaded a quick wireframe visualization of what I imagine it to look like…

    Edit: It seems like I can't upload any graphics or provide any links to dropbox or google drive unfortunately. Seems like my forum's account is somehow restricted because I just opened it…

    It's a Wordpress site — I'm using a plugin — ACF (Advanced Custom Fields) — to display all additional details. Details need to be added by the editor, if he decides to leave the boxes in the backend empty, no additional information will appear. Thus the text box will span to 100%… If he adds details, then I somehow need to tell WP to shrink the textbox...
  10. #6
  11. CSS & JS/DOM Adept
    Devshed Supreme Being (6500+ posts)

    Join Date
    Jul 2004
    Location
    USA (verifiably)
    Posts
    20,124
    Rep Power
    4304
    Welcome to DevShed Forums, shenanigans.

    As you found out new users are restricted from posting URLs until they have made 5 posts. You may need to get around this by leaving out the "http://" and putting a space before each ".". Yes this rule is annoying, but the administrators say it's necessary for limiting spam.
    Spreading knowledge, one newbie at a time.

    Check out my blog. | Learn CSS. | PHP includes | X/HTML Validator | CSS validator | Common CSS Mistakes | Common JS Mistakes

    Remember people spend most of their time on other people's sites (so don't violate web design conventions).
  12. #7
  13. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Nov 2012
    Posts
    5
    Rep Power
    0
    Originally Posted by Kravvitz
    Welcome to DevShed Forums, shenanigans.

    As you found out new users are restricted from posting URLs until they have made 5 posts. You may need to get around this by leaving out the "http://" and putting a space before each ".". Yes this rule is annoying, but the administrators say it's necessary for limiting spam.
    Hey there,

    oh I completely understand, unfortunately these rules seem to be necessary indeed. Thanks for the tip though, I'll upload the image tomorrow, got it on my work PC :-)
  14. #8
  15. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Nov 2012
    Posts
    5
    Rep Power
    0
    Originally Posted by danramosd
    What did you want the HTML to look like when it is the "Own work" situation? What did you want the HTML to look like when its the "Friends work". Are there any fields, or variables that specify whether its their own work or the friends work? For exampled would you be able to run something along these lines:
    PHP Code:
    if( $user_type == 'own' ){
    //Some Code
    }
    else if( 
    $user_type == 'friend' ){
    //Other code

    And here is a link to a small image that hopefully helps to understand what I'm trying to do :-)

    www. dropbox. com/s/egl60m5ssvb8kyk/column.jpg

IMN logo majestic logo threadwatch logo seochat tools logo