Copied to clipboard

Flag this post as spam?

This post will be reported to the moderators as potential spam to be looked at


  • JacoboPolavieja 62 posts 84 karma points
    Jul 18, 2010 @ 18:38
    JacoboPolavieja
    0

    Placing nodes in different floating divs

    Hello all,

     

    I'm building a sports news site. The section I'm trying to get done now looks like this in HTML

     

    [code]

    <div id="news_left">

                <div class="new">
                    <img class="new_country" src="images/content/countries_titles/usa.gif">
                    <img class="new_flag" src="images/content/flags/usa.jpg">
                    <h1>New Title</h1>
                    <p>
                        <span class="new_date">TheDate</span>SomeText<br />

                        <span class="new_readmore">Read more...</span>
                    </p>
                </div>

    <!-- here it goes another two "new" divs -->

    </div>

    <div id="news_right">

                <div class="new">
                    <img class="new_country" src="images/content/countries_titles/usa.gif">
                    <img class="new_flag" src="images/content/flags/usa.jpg">
                    <h1>New Title</h1>
                    <p>
                        <span class="new_date">TheDate</span>SomeText<br />

                        <span class="new_readmore">Read more...</span>
                    </p>
                </div>

    <!-- here it goes another two "new" divs -->

    </div>

    [/code]

     

    As you see it's basically a two column layout and each one holds 3 news. So, i get the last 6 nodes of news through XSLT 6 xPath, but... how do I tell them to put the latest one on the top of the left column, the next one on the top of the left one, the next one secnd on the right one....

    The only thing I have come up to till now is to put it in separate lines instead than in a for-each loop for the nodes, but I also don't know still ho to tell XSLT "select the next node from the last one you selected" unless it keeps an index forthe last position you tok or smething like that.

     

    I'm not asking for code of course, just if someone could point me to any article or something where discretional placing through XSLT is achieved.

     

    Thank you so much!

     

     

  • JacoboPolavieja 62 posts 84 karma points
    Jul 18, 2010 @ 18:43
    JacoboPolavieja
    0

    Sorry it doesn't le me edit to put the code well. When I try the forum returns this error:

    Error parsing XSLT file: \xslt\forum-commentsList.xslt

     

    Anyway, although it's not very relevant, the properly formatted HTML code is this:

    <div id="news_left">

                <div class="new">
                    <img class="new_country" src="images/content/countries_titles/usa.gif">
                    <img class="new_flag" src="images/content/flags/usa.jpg">
                    <h1>New Title</h1>
                    <p>
                        <span class="new_date">TheDate</span>SomeText<br />

                        <span class="new_readmore">Read more...</span>
                    </p>
                </div>

    <!-- here it goes another two "new" divs -->

    </div>

    <div id="news_right">

                <div class="new">
                    <img class="new_country" src="images/content/countries_titles/usa.gif">
                    <img class="new_flag" src="images/content/flags/usa.jpg">
                    <h1>New Title</h1>
                    <p>
                        <span class="new_date">TheDate</span>SomeText<br />

                        <span class="new_readmore">Read more...</span>
                    </p>
                </div>

    <!-- here it goes another two "new" divs -->

    </div>

     

    Thanks!

  • wolulcmit 357 posts 693 karma points
    Jul 18, 2010 @ 19:09
    wolulcmit
    0

    do something like this within your for-each statement:

    <!-- close and start a new div after the 3rd item -->
    <xsl:if test="position() mod 4 = 0">
    </div><div id="news_right">
    </xsl:if>

     

  • JacoboPolavieja 62 posts 84 karma points
    Jul 18, 2010 @ 19:23
    JacoboPolavieja
    0

    Hello wolulcmit and thanks for answering.

     

    I was just guessing about the position() function as I am looking at the ListNewsEvents.xslt from an Umbraco package. The things is that we would like to have the first one on the left column, the second one on the right column, the thir on the left...

    1 ------------- 2

    3 ------------- 4

    5 ------------- 6

     

    If I'm not mistaken, working the position() function like that would leave it:

    1 ------------- 4

    2 ------------- 5

    3 ------------- 6

     

    We would like that as some news are "the most important ones" and when there is more than one of those, they should be at the top of the columns as they are displayed more eye-catching.

     

    Any idea about it? Thanks!

  • Matt Brailsford 4124 posts 22215 karma points MVP 9x c-trib
    Jul 18, 2010 @ 19:56
    Matt Brailsford
    0

    Hey Jacob,

    Sounds like your are pretty much going to need to break it up into multiple queries, storing results into variables, then do a final render at the end.

    I'd probably start by pulling back all your news items, sorting them so that the "most important" ones appear at the top (depending how you define this, this might also have to be broken up into 2 queries to pull back important ones, then non important ones and merging them).

    At this point you should have a var holding all the nodes you need in the right order. I'd then do 2 queries for each side and within your for-each, use a filter to only pull out odd/even entries

    [position() mod 2 = 0] 

    or

    [position() mod 2 = 1]

    This should give you results in the order, and in the layout you need.

    Matt

  • Hendrik Jan 71 posts 137 karma points
    Jul 18, 2010 @ 20:08
    Hendrik Jan
    1

    Hey, 

    So you want the odd numbers on the left and the even on te right?

    <!-- left news items "odd" -->
    <xsl:for-each select="$newsItems [position() mod 2 = 1]">
      <!-- print news stuff -->
    </xsl:for-each>

    <!-- Right news items "even" --> 
    <xsl:for-each select="$newsItems [position() mod 2 = 0]">
      <!-- print news stuff -->
    </xsl:for-each>

     

  • wolulcmit 357 posts 693 karma points
    Jul 19, 2010 @ 09:05
    wolulcmit
    1

    1 ------------- 2
    3 ------------- 4
    5 ------------- 6
    if you want this order why not then just float all your items left, and have have a containing div is only 2 floats wide, meaning that your 3rd will drop to the next line?
    <div class="newsitems">
    <div class="news">
    <h3>my news 1</h3>
    <p>Lorem Ipsum</p>
    </div>
    <div class="news">
    <h3>my news 1</h3>
    <p>Lorem Ipsum</p>
    </div>
    <div class="news">
    <h3>my news 1</h3>
    <p>Lorem Ipsum</p>
    </div>
    <div class="news">
    <h3>my news 1</h3>
    <p>Lorem Ipsum</p>
    </div>
    <div class="news">
    <h3>my news 1</h3>
    <p>Lorem Ipsum</p>
    </div>
    <div class="news">
    <h3>my news 1</h3>
    <p>Lorem Ipsum</p>
    </div>
    </div>

    .newsitems{width:600px}
    .news{float:left; width:300px;}
    there you go. a fake 2 column layout.

  • Lee Kelleher 4020 posts 15802 karma points MVP 13x admin c-trib
    Jul 19, 2010 @ 09:27
    Lee Kelleher
    0

    HI Jacobo,

    As wolulcmit suggests - CSS is the better option, it keeps a separation between the structure/mark-up and the design.

    If you do need to have the news items in separate <div> elements/structures, then following on from Matt's/Niels' suggestions of using position(), you can lose the <xsl:for-each> and use <xsl:template>, like so...

    <xsl:template match="/">
        <xsl:variable name="newsItems" select="$currentPage/xpath/to/your/news/items" />
        <div id="news_left">
            <xsl:apply-templates select="$newsItems[position() mod 2 = 1]"></xsl:apply-templates>
        </div>
        <div id="news_right">
            <xsl:apply-templates select="$newsItems[position() mod 2 = 0]"></xsl:apply-templates>
        </div>
    </xsl:template>

    Not sure which version of Umbraco you are using, whether its the new or old XML schema, but just add your XPath to the "newsItems" variable.

    Then you can have a separate <xsl:template> to handle the news item nodes...

    <xsl:template match="node">
        <div class="new">
            <img class="new_country" src="images/content/countries_titles/usa.gif" />
            <img class="new_flag" src="images/content/flags/usa.jpg" />
            <h1>
                <xsl:value-of select="@nodeName" />
            </h1>
            <p>
                <span class="new_date">
                    <xsl:value-of select="@createDate" />
                </span>
                <xsl:value-of select="data[@alias='bodyText']" />
                <br />
                <span class="new_readmore">
                    <a href="{umbraco.library:NiceUrl(@id)}">Read more...</a>
                </span>
            </p>
        </div>
    </xsl:template>

    Again, I don't know much about your doc-type properties - just guessing that the content is called 'bodyText'.

    Cheers, Lee.

  • JacoboPolavieja 62 posts 84 karma points
    Jul 19, 2010 @ 10:21
    JacoboPolavieja
    0

    Thank you for all guys,

     

    This forum is really amazing in terms of helping each other. Hope I can give something back as soon as possible.

     

    I am not at home now so can't try anything right now, but I will have a look at everything later and post back with my thoughts. I'm using Umbraco 4.5 by the way, in case it's of help.

     

    Really, really thank you all! Cheers!

  • JacoboPolavieja 62 posts 84 karma points
    Jul 22, 2010 @ 11:07
    JacoboPolavieja
    1

    Hello all,

     

    Busy days so I haven't been able to get back to you sooner. First of all, thanks a lot to everyone who has taken the time to write. Wish I had karma to give you all!

     

    I finally chose to update my layout through CSS to float all the news left while creating two columns as wolulcmit suggested. I then created a "List sub pages by type" macro and put Lee Kelleher's code on it resulting in:

    <xsl:variable name="documentTypeAlias" select="string('thm_new')"/>

    <xsl:template match="/">

    <!-- The fun starts here -->
    <xsl:for-each select="$currentPage/* [name() = $documentTypeAlias and string(umbracoNaviHide) != '1']">

            <div class="new">
                    <img class="new_country" src="images/content/countries_titles/usa.gif" />
                    <img class="new_flag" src="images/content/flags/usa.jpg" />
                    <h1>
                      <xsl:value-of select="thm_new_heading"/>
                    </h1>
                    <p>
                            <span class="new_date">
                                    <xsl:value-of select="umbraco.library:FormatDateTime(@createDate, 'dd MMM')" />
                              <!-- TODO: The above should really be publication date! -->
                            - </span> <xsl:value-of select="thm_new_summary"/>
                            <br />
                      
                            <span class="new_readmore">
                                    <a href="{umbraco.library:NiceUrl(@id)}">Read more...</a>
                            </span>
                    </p>
            </div>

    </xsl:for-each>

    </xsl:template>

     

    I now only have to limit that to get the first six news which have the "Important" attribute set to yes, but I guess that will be easy to do.

     

    Really... thank you all, this is a great forum. The beginnings are hard but all is fitting pretty well thanks to you all. Cheers!

Please Sign in or register to post replies

Write your reply to:

Draft