Use Liquid Tempting Engine and jQuery to Identify Website Orientation

[Blueberry_Media]

Hi,

I have a site that I am developing where I need the layout to change when someone changes from landscape to portrait view on a table device.  I have used jQuery mobile to target the device when it is orientating however I am having problems with loading the html and Liquid code via jQuery onto the page as my layout is continuously breaking.

Would really appreciate some guidance as to how to proceed further.

I have added the link to the web page with the error on it below and the actual html, jQuery and Liquid code as well.

http://www.mnialive.com/beta/index3.html

{% assign euFeaturedVar = 314828 %}

{% assign euStoriesVar = 104043 %}

<div id="eu-section" class="article-sections row 1">

</div>

<script>

    $(window).on("orientationchange", function(event) {

        if (event.orientation == "landscape") {

            $("div#eu-section.article-sections.row.1").html("

<div id="eu-section" class="article-sections row 1">

    <div class="col-lg-12 headline">

        <h2>Europe Landscape View</h2>

    </div>

    {% if globals.visitor.deviceClass == "desktop" or globals.visitor.deviceClass == "tablet" %}

    {module_webapps id="14585" render="collection" collection="euFeatured1" filter="latestClassified" itemId="{{euFeaturedVar}}" resultsPerPage="2" sortType="Date" template=""}

    {% for euFeatured1 in items limit:1 %}

        {% if euFeatured1.counter == 1 %}

        <div class="col-md-6 col-lg-4">

            <div class="lead col-xs-12 col-sm-12 col-lg-12 euStories-{{euFeatured1.counter}}">

                <a href="{{euFeatured1.url}}">

                    <img src="{{euFeatured1.Images}}?Action=thumbnail&Width=428&Height=243&Format=png&algorithm=fill_proportional" alt="{{this.items[0].[" Image Caption

                    "]}}" class="img-responsive">

                    <h3>{{euFeatured1.name}}<'/'h3>

                </a>

            </div>

            {% endif %}

  {% endfor %}

    {%comment%}<!-- 1st Featured EU story -->{%endcomment%}

    {module_webapps id="14585" render="collection" collection="euStories1" filter="latestClassified" itemId="{{euStoriesVar}}" resultsPerPage="5" sortType="Date" template=""}

    {% for euStories1 in items %}

        {% if euStories1.counter == 2 or euStories1.counter == 3 or euStories1.counter == 4 %}

            <div class="col-md-12 col-lg-12 euStories-{{euStories1.counter}}">

                <div class="col-xs-3 col-sm-3 col-md-2 col-lg-3 pd7">

                    <img src="{{euStories1.Images}}?Action=thumbnail&Width=81&Height=81&Format=png&algorithm=fill_proportional" alt="{{this.items[0].[" Image Caption "]}}" class="img-responsive">

                </div>

                <div class="col-xs-9 col-sm-9 col-md-10 col-lg-9 pdr0">

                    <a href="{{euStories1.url}}">

                        <p>{{euStories1.name | truncate: 125}}</p>

                    </a>

                </div>

            </div>

            {% if euStories1.counter == 4 %}

                </div>

            {% endif %}

        {% endif %}

  {% endfor %}

    {%comment%}<!-- 1st EU story section -->{%endcomment%}

    {module_webapps id="14585" render="collection" collection="euFeatured2" filter="latestClassified" itemId="{{euFeaturedVar}}" resultsPerPage="2" sortType="Date" template=""}

    {% for euFeatured2 in items limit:2 offset:1 %}

        {% if euFeatured2.counter == 2 %}

            <div class="hidden-xs hidden-sm col-md-6 col-lg-4">

                <div class="lead col-lg-12 euStories-{{euFeatured2.counter}}">

                    <a href="{{euFeatured2.url}}">

                        <img src="{{euFeatured2.Images}}?Action=thumbnail&Width=428&Height=243&Format=png&algorithm=fill_proportional" alt="{{this.items[0].[" Image Caption"]}}" class="img-responsive">

                        <h3>{{euFeatured2.name}}</h3>

                    </a>

                </div>

        {% endif %}

  {% endfor %}

    {%comment%}<!-- 2nd Featured EU story -->{%endcomment%}

    {module_webapps id="14585" render="collection" collection="euStories2" filter="latestClassified" itemId="{{euStoriesVar}}" resultsPerPage="9" sortType="Date" template=""}

    {% for euStories2 in items %}

        {% if euStories2.counter == 6 or euStories2.counter == 7 or euStories2.counter == 8 %}

                    <div class="col-md-12 col-lg-12 euStories-{{euStories2.counter}}">

                        <div class="col-xs-3 col-sm-3 col-md-2 col-lg-3 pd7">

                            <img src="{{euStories2.Images}}?Action=thumbnail&Width=81&Height=81&Format=png&algorithm=fill_proportional" alt="{{this.items[0].[" Image Caption "]}}" class="img-responsive">

                        </div>

                        <div class="col-xs-9 col-sm-9 col-md-10 col-lg-9 pdr0">

                            <a href="{{euStories2.url}}">

                                <p>{{euStories2.name | truncate: 125}}</p>

                            </a>

                        </div>

                    </div>

            {% if euStories2.counter == 8 %}

                </div>

            {% endif %}

        {% endif %}

  {% endfor %}

    {%comment%}<!-- 2nd EU story section -->{%endcomment%}

    {% endif %}

    {% if globals.visitor.deviceClass == "desktop" %}

        <div class="col-lg-4 hidden-xs hidden-sm hidden-md">

            <div class="section-banners">

                {module_adrotator adRotatorId="7557"}

            </div>

        </div>

    {% endif %}

    <div class="more-stories col-xs-12 col-sm-12 pd30">

        <p><a href="#">More <span class="glyphicon glyphicon-play-circle" aria-hidden="true"></span></a>

        </p>

    </div>

</div>

     ");

        };

    });

    // You can also manually force this event to fire.

    $(window).orientationchange();

</script>

Thanks in advance.

[Liam Dilley · Accepted solution]

That is really  a bit OTT.

You first would use media queries:

UI Design: Applying CSS Based on Screen Orientation

There is a few bits you will need to do:

The orientation media query - QuirksBlog

And if you need javascript on orientation change - Detect mobile device orientation change with jQuery | PJ McCormick

Liquid is server side, javascript is client side you can not set liquid with javascript.

[Blueberry_Media]

Am re-writing the code. Thanks for the sanity check.