cant get scripting file to insert div after 2 and 3 childpage - Using Umbraco 7

Anders Brohus 194 posts 475 karma points

Jan 22, 2014 @ 14:59

Can't get scripting file to insert div after 2 and 3 childpage

Hi,

I have some problems with my script...

I want it to take childpages of the current page and list them with 3 in each row, and then insert a div that clear the float and makes some space between the two rows, and it's working well, the problem begins now because it's a responsive website and when a phone is viewing the site, i want to the display 2 in each row, and then the div that makes space. So i made this script

@inherits umbraco.MacroEngines.DynamicNodeContext
@if (Model.Children.Any())
{
<div class="onerow eudListColleges">
    @{int count = 1;}
    @foreach (var page in Model.Children.Where("Visible"))
    {
        if (count == 3 || count == 2)
        {
            if (count == 3)
            {
                count = 1;
                    <div class="col4 eudTwoColleges last">
                        <div class="eudCollege">
                        <a href="@page.Url" class="eudCollegeLink">
                            <img src="@Model.MediaById(@page.eudPicture).umbracoFile" width="310" alt="@page.Name" class="eudPicture" />
                        <div class="eudCollegeName" style="background-color:#@page.collegeColor">
                            <p>/@page.umbracoUrlName</p>
                        </div>
                        </a>
                        </div>
                    @if (page.Children.Any())
                    {
                        <ul class="eudListEducations">
                            @foreach (var subpage in page.Children.Where("Visible"))
                            {
                                <li>
                                    <div class="eudListBorder">
                                    <a href="@subpage.Url">
                                        @if (subpage.umbracoUrlName == "")
                                        {
                                        <p>@subpage.Name</p>
                                        }
                                        else
                                        {
                                        <p>@subpage.umbracoUrlName</p>
                                        }
                                        </a>
                                    </div>
                                </li>                   
                            }
                        </ul>
                    }
                    </div>
                <div class="eudSpacer"></div>
            }
            else
            {
                count++;
                    <div class="col4 eudTwoColleges">
                        <div class="eudCollege">
                        <a href="@page.Url" class="eudCollegeLink">
                            <img src="@Model.MediaById(@page.eudPicture).umbracoFile" width="310" alt="@page.Name" class="eudPicture" />
                        <div class="eudCollegeName" style="background-color:#@page.collegeColor">
                            <p>/@page.umbracoUrlName</p>
                        </div>
                        </a>
                    </div>
                    @if (page.Children.Any())
                    {
                        <ul class="eudListEducations">
                            @foreach (var subpage in page.Children.Where("Visible"))
                            {
                                <li>
                                    <div class="eudListBorder">
                                    <a href="@subpage.Url">
                                        @if (subpage.umbracoUrlName == "")
                                        {
                                        <p>@subpage.Name</p>
                                        }
                                        else
                                        {
                                        <p>@subpage.umbracoUrlName</p>
                                        }
                                        </a>
                                    </div>
                                </li>                   
                            }
                        </ul>
                    }
                    </div>
                    <div class="eudSpacerTwoRows"></div>
            }
        }


        else
        {
            count++;
            <div class="col4 eudTwoColleges">
                <div class="eudCollege">
                    <a href="@page.Url" class="eudCollegeLink">
                        <img src="@Model.MediaById(@page.eudPicture).umbracoFile" width="310" alt="@page.Name" class="eudPicture" />
                    <div class="eudCollegeName" style="background-color:#@page.collegeColor"><p>/@page.umbracoUrlName</p></div>
                    </a>
                </div>
                @if (page.Children.Any())
                {
                    <ul class="eudListEducations">
                    @foreach (var subpage in page.Children.Where("Visible"))
                    {
                        <li>
                            <div class="eudListBorder">
                            <a href="@subpage.Url">
                                @if (subpage.umbracoUrlName == "")
                                {
                                    <p>@subpage.Name</p>
                                }
                                else
                                {
                                    <p>@subpage.umbracoUrlName</p>
                                }
                                </a>
                            </div>
                        </li>
                    }
                </ul>
                }
            </div>
        }
    }

</div>
}

This works great on desktop and tablets but not phones, it makes this HTML

HTML Output

But i have figured out how i can make it look nice on all three platforms with this HTML, but i can't get the script to make it like this...

How i want it to look like

So can some of you help me with my script so it figures out how to make the html below or something that's works like i have described

// Anders

Copy Link

Dennis Aaen 4500 posts 18255 karma points admin hq c-trib

Jan 22, 2014 @ 15:17

Hi Anders,

In your case I think you should take a look at .InGroupsOf([int]) if you don´t know it already. By using this you´re able to group items, e.g three items in each row. The integer value specifies the size of the groups.

@* return in groups of 3 *@ 
@foreach(var group in Model.Children.InGroupsOf(3)){ 
    <div class="row"> 
        @foreach(var item in group){ 
            <div>@item.Name</div> 
        } 
    </div> 
}

I hope this can help you to do what you want easier and maybe do your code more readable.

Hope the InGroupsOf fuction can help you.

/Dennis

Copy Link

Anders Brohus 194 posts 475 karma points

Jan 22, 2014 @ 15:23

Okay, thanks :-)

But i still can't see how this is thhelp because it has to be a row with three on desktop and tablet and a row with two on phone?

// Anders

Copy Link

Dennis Aaen 4500 posts 18255 karma points admin hq c-trib

Jan 22, 2014 @ 15:48

Hi Anders,

I was trying to say, that maybe the InGroupsOf([int]) function you help you out :-) and if you don´t already knew it I think that you should know it then :)

Here is a small example: https://gist.github.com/nul800sebastiaan/1067257 that use InGroupsOf.

/Dennis

Copy Link

Funka! 398 posts 661 karma points

Jan 22, 2014 @ 23:42

Suggestion: use a non-programming-related solution and drastically simplify things.

Just loop through one, and stop keeping track of count --- you don't need the "first" and "last" classes! Instead, using CSS3 and media queries, you can use nth-child selector to clear previous floats, which would be every other element (2n+1) on a phone or every third element on desktop (3n+1).

Just a quick idea to consider. Best of luck to you!

Copy Link

Anders Brohus 194 posts 475 karma points

Jan 23, 2014 @ 14:31

It's working now! :)

I used the InGroupsOf(3), and two counters and i got it to work! :D

Copy Link

is working on a reply...

Flag this post as spam?

Can't get scripting file to insert div after 2 and 3 childpage