ExpressionEngine CMS
Open, Free, Amazing

Thread

This is an archived forum and the content is probably no longer relevant, but is provided here for posterity.

The active forums are here.

How can I make entries appear in different divs by custom field?

October 25, 2007 6:05pm

Subscribe [2]
  • #1 / Oct 25, 2007 6:05pm

    Jack Brighton

    58 posts

    I’m pounding my head against the CSS wall on this one.  Gotta be a simple way to do this:

    A daily talk show we produce has two different hours each day.  So each show gets an entry.  I want both shows to appear in the same “row” only I’m not using tables.  I want the next day’s two shows in the next row, all lined up evenly by day.  And so on, like this:

    http://will.atlas.uiuc.edu/index.php/focus580/focus_new/

    Except I want a way that actually works…this almost does but the rendering gets goofy after the first two rows.  Probably because I’m just not approaching it right.  I’m generating a seperate <ul> for each hour, and trying to use a combination of relative position on the left <ul>, and absolute positioning on the right.  I’m using an {if} conditional to sort entries by values in a custom field (either 10am or 11 am), to then render them in one of the two divs.  Probably using lots of query overhead in the process, and still not rendering things right.

    So, I don’t expect anyone to fix my code for me, but I’m hoping someone has a better general idea of how to do this without resorting to a table or something….

    Jack

  • #2 / Oct 26, 2007 10:33am

    e-man

    1816 posts

    I have set you up a barebones example here. (the styles used are in the <head>)
    The div with class “daily”  holds the two entries for that day, which have their separate div with class “entry.”
    These are then floated inside “.daily”, the css for “.daily” makes it wrap around these two entries and voila.
    You’ll see that even with differing content they still line up.
    I’ve also removed a lot of the classes from your markup and marked it up a bit more semantically. Have a look at it!

  • #3 / Oct 26, 2007 4:51pm

    Jack Brighton

    58 posts

    Brilliant!  E-man to the rescue! 

    Now back to the Eric Meyer books for me…

    Many thanks,
    Jack

  • #4 / Oct 26, 2007 4:53pm

    e-man

    1816 posts

    No problem!
    Please note that if you want your stylesheets to validate, this line:

    zoom:  1;

    will have to be moved to an IE only stylesheet using conditional comments.

  • #5 / Oct 27, 2007 7:01pm

    Jack Brighton

    58 posts

    OK, now I’m totally revealing the depths of my ignorance.  I’m used to it at least…

    So how could I make the entry with the “10am” custom field value display on the left, and the entry with the “11am” value display on the right?  At the present moment, here’s the page…styled right but not the result I need yet:

    http://will.atlas.uiuc.edu/index.php/focus580/focus_eman/

    Best regards,
    Jack

  • #6 / Oct 27, 2007 9:57pm

    e-man

    1816 posts

    What does your EE template code look like?

  • #7 / Oct 28, 2007 1:51pm

    Jack Brighton

    58 posts

    Here is the {weblog} code:

    {exp:weblog:entries weblog="{my_weblog}" orderby="date" sort="desc" limit="10" disable="member_data|trackbacks"}
    
    <div class="daily">
       <div class="entry">
        {entry_date format=' %l, %F %d, %Y'}, {focusHour}
        <h3>{focusSubject}</h3>
    <p>    {focusGuest}{col_1}, {col_2}{/focusGuest}<br />
        </p><h4>Audio Archives:</h4>
    <p>       <ul><br />
              <li><a href="http://willmedia.will.uiuc.edu/ramgen/archives/{title}.rm" class="real noIndent">RealAudio</a>| <br />
                  <a href="http://will.uiuc.edu/media/{title}.mp3" class="download">MP3 download</a><br />
              </li><br />
           </ul><br />
        {if focusLinks}</p><h5>Interview links:</h5><p><ul class="links">{focusLinks limit="10"}<li><a href="http://{col_2}">{col_1}</a></li>{/focusLinks}</ul>{/if}<br />
        </p><h5>Categories:</h5>
    <p>      {categories backspace="7"}<br />
            <a href="http://{path={my_template_group}/story}">{category_name}</a> •<br />
          {/categories}<br />
        <div class="posted"><br />
          {if allow_comments}({comment_total}) <a href="http://{url_title_path=">Comments</a> •{/if}<br />
          <br />
        </div> {!-- posted --}<br />
      </div> <!-- closes entry  --></p>
    
    <p>  <div class="entry"><br />
           {entry_date format=' %l, %F %d, %Y'}, {focusHour}<br />
          </p><h3>{focusSubject}</h3>
    <p>       {focusGuest}{col_1}, {col_2}{/focusGuest}<br />
          </p><h4>Audio Archives:</h4>
    <p>         <ul><br />
               <li><a href="http://willmedia.will.uiuc.edu/ramgen/archives/{title}.rm" class="real noIndent">RealAudio</a>| <br />
                 <a href="http://will.uiuc.edu/media/{title}.mp3" class="download">MP3 download</a></li><br />
             </ul><br />
           {if focusLinks}</p><h5>Interview links:</h5><p><ul class="links">{focusLinks limit="10"}<li><a href="http://{col_2}">{col_1}</a></li>{/focusLinks}</ul>{/if}<br />
          </p><h5>Categories:</h5>
    <p>          {categories backspace="7"}<br />
              <a href="http://{path={my_template_group}/story}">{category_name}</a> •<br />
              {/categories}<br />
           <div class="posted"><br />
              {if allow_comments}({comment_total}) <a href="http://{url_title_path=">Comments</a> •{/if}<br />
              <br />
           </div> {!-- posted --}<br />
        </div> <!-- closes entry  --> <br />
    </div> <!-- closes daily  --></p>
    
    <p>{/exp:weblog:entries}

    Originally I was assigning different classes to the two divs (left and right), and using an {if} statement to filter “10am” entries to the left, and “11am” entries to the right.  The left div was given a position:relative and the right was absolute…which caused problems with the footer and other bad things.  I was trying to nest these new divs into an existing template, which is probably a bad idea anyway…but the idea of filtering entries into different divs based on values in a custom field (10am or 11 am) should work. Unless I’m misunderstanding something basic, which is certainly possible.

    Here’s how I was trying to do that:

    {if focusHour == "10am"}
    <div class="leftCol">
    ....
    </div> <!--leftCol -->
    {if:elseif focusHour == "11am"}
    <div class="rightCol">
    ....
    </div> <!--rightCol -->
    {/if}

    I thought of another way to do this which eliminate the conditional tag:

    <div class="{focusHour}">

    But the result is the same as seen here.

    Oh, for a designer better than me!  But I can’t fire myself since I’m the only one on my staff.  I love EE but obviously I have a lot still to learn…

    Many thanks,
    Jack

  • #8 / Oct 28, 2007 2:35pm

    e-man

    1816 posts

    Try this:

    {exp:weblog:entries weblog="{my_weblog}" orderby="date" sort="desc" limit="10" disable="member_data|trackbacks"}
    <div class="daily">
        {if focusHour == "10am"}
       <div class="entry">
        {entry_date format=' %l, %F %d, %Y'}, {focusHour}
        <h3>{focusSubject}</h3>
    <p>    {focusGuest}{col_1}, {col_2}{/focusGuest}<br />
        </p><h4>Audio Archives:</h4>
    <p>       <ul><br />
              <li><a href="http://willmedia.will.uiuc.edu/ramgen/archives/{title}.rm" class="real noIndent">RealAudio</a>|<br />
                  <a href="http://will.uiuc.edu/media/{title}.mp3" class="download">MP3 download</a><br />
              </li><br />
           </ul><br />
        {if focusLinks}</p><h5>Interview links:</h5><p><ul class="links">{focusLinks limit="10"}<li><a href="http://{col_2}">{col_1}</a></li>{/focusLinks}</ul>{/if}<br />
        </p><h5>Categories:</h5>
    <p>      {categories backspace="7"}<br />
            <a href="http://{path={my_template_group}/story}">{category_name}</a> •<br />
          {/categories}<br />
        <div class="posted"><br />
          {if allow_comments}({comment_total}) <a href="http://{url_title_path=">Comments</a> •{/if}<br />
          <br />
        </div> {!-- posted --}<br />
      </div> <!-- closes entry  --><br />
        {/if}<br />
        {if focusHour == "11am"}<br />
      <div class="entry"><br />
           {entry_date format=' %l, %F %d, %Y'}, {focusHour}<br />
          </p><h3>{focusSubject}</h3>
    <p>       {focusGuest}{col_1}, {col_2}{/focusGuest}<br />
          </p><h4>Audio Archives:</h4>
    <p>         <ul><br />
               <li><a href="http://willmedia.will.uiuc.edu/ramgen/archives/{title}.rm" class="real noIndent">RealAudio</a>|<br />
                 <a href="http://will.uiuc.edu/media/{title}.mp3" class="download">MP3 download</a></li><br />
             </ul><br />
           {if focusLinks}</p><h5>Interview links:</h5><p><ul class="links">{focusLinks limit="10"}<li><a href="http://{col_2}">{col_1}</a></li>{/focusLinks}</ul>{/if}<br />
          </p><h5>Categories:</h5>
    <p>          {categories backspace="7"}<br />
              <a href="http://{path={my_template_group}/story}">{category_name}</a> •<br />
              {/categories}<br />
           <div class="posted"><br />
              {if allow_comments}({comment_total}) <a href="http://{url_title_path=">Comments</a> •{/if}<br />
           </div> {!-- posted --}<br />
        </div> <!-- closes entry  --><br />
        {/if}<br />
    </div> <!-- closes daily  --><br />
    {/exp:weblog:entries}

  • #9 / Oct 28, 2007 3:26pm

    Jack Brighton

    58 posts

    Cleaner code certainly, but here’s the result.

    Looks like each entry is generating another <daily> div, instead of each pair of entries which is what we want.  Gotta be a way…

    Jack

  • #10 / Oct 28, 2007 3:49pm

    e-man

    1816 posts

    LOL 😊
    How’s this then?

    {exp:weblog:entries weblog="{my_weblog}" orderby="date" sort="desc" limit="10" disable="member_data|trackbacks"}
    <div class="daily">
        {if focusHour == "10am"}
       <div class="entry">
        {entry_date format=' %l, %F %d, %Y'}, {focusHour}
        <h3>{focusSubject}</h3>
    <p>    {focusGuest}{col_1}, {col_2}{/focusGuest}<br />
        </p><h4>Audio Archives:</h4>
    <p>       <ul><br />
              <li><a href="http://willmedia.will.uiuc.edu/ramgen/archives/{title}.rm" class="real noIndent">RealAudio</a>|<br />
                  <a href="http://will.uiuc.edu/media/{title}.mp3" class="download">MP3 download</a><br />
              </li><br />
           </ul><br />
        {if focusLinks}</p><h5>Interview links:</h5><p><ul class="links">{focusLinks limit="10"}<li><a href="http://{col_2}">{col_1}</a></li>{/focusLinks}</ul>{/if}<br />
        </p><h5>Categories:</h5>
    <p>      {categories backspace="7"}<br />
            <a href="http://{path={my_template_group}/story}">{category_name}</a> •<br />
          {/categories}<br />
        <div class="posted"><br />
          {if allow_comments}({comment_total}) <a href="http://{url_title_path=">Comments</a> •{/if}<br />
          <br />
        </div> {!-- posted --}<br />
      </div> <!-- closes entry  --><br />
        {/if}<br />
        {if focusHour == "11am"}<br />
      <div class="entry"><br />
           {entry_date format=' %l, %F %d, %Y'}, {focusHour}<br />
          </p><h3>{focusSubject}</h3>
    <p>       {focusGuest}{col_1}, {col_2}{/focusGuest}<br />
          </p><h4>Audio Archives:</h4>
    <p>         <ul><br />
               <li><a href="http://willmedia.will.uiuc.edu/ramgen/archives/{title}.rm" class="real noIndent">RealAudio</a>|<br />
                 <a href="http://will.uiuc.edu/media/{title}.mp3" class="download">MP3 download</a></li><br />
             </ul><br />
           {if focusLinks}</p><h5>Interview links:</h5><p><ul class="links">{focusLinks limit="10"}<li><a href="http://{col_2}">{col_1}</a></li>{/focusLinks}</ul>{/if}<br />
          </p><h5>Categories:</h5>
    <p>          {categories backspace="7"}<br />
              <a href="http://{path={my_template_group}/story}">{category_name}</a> •<br />
              {/categories}<br />
           <div class="posted"><br />
              {if allow_comments}({comment_total}) <a href="http://{url_title_path=">Comments</a> •{/if}<br />
           </div> {!-- posted --}<br />
        </div> <!-- closes entry  --><br />
        {/if}<br />
    {if count==2 OR count==4 OR count==6 OR count==8 OR count==10}</div><!-- closes daily  -->{/if}<br />
    {/exp:weblog:entries}

  • #11 / Oct 28, 2007 6:23pm

    Jack Brighton

    58 posts

    This is getting really close!  I hadn’t thought of using count like this, very cool.  But here’s the page now.  What the heck is with the horizontal scroll bars (in Firefox anyway)?

    It’s also possible I fundamentally screwed things up with too many divs and floats in the basic page layout.  😝 Maybe I should return to Go or something.  Back to school…

    Jack

  • #12 / Oct 28, 2007 6:29pm

    e-man

    1816 posts

    You’ll have to play a bit with the width of .daily and the margin of .daily and the elements it contains to get rid of that scrollbar. But otherwise it appears to be OK.

  • #13 / Oct 28, 2007 7:02pm

    e-man

    1816 posts

    changing overflow: auto; to overflow: hidden for .daily may already be enough to fix the scrollbars.

.(JavaScript must be enabled to view this email address)

ExpressionEngine News!

#eecms, #events, #releases