cant get scripting file to insert div after 2 and 3 childpage

Anders Brohus 193 posts 474 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 4457 posts 17970 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 193 posts 474 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 4457 posts 17970 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 660 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 193 posts 474 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...

This forum is in read-only mode while we transition to the new forum.

You can continue this topic on the new forum by tapping the "Continue discussion" link below.

Flag this post as spam?

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