Use the liquid engine tempting and jQuery to identify the Orientation Web site

Hello

I have a site that I'm at the point where I need the page layout to change when someone moves from the landscape to the portrait mode on a device table.  I used jQuery to target the device when it is oriented however I have problems with loading the html code and code Liquid via jQuery on the page as my layout is constantly breaking.

Would appreciate some advice on how to go further.

I added the link to the web page with the error below and the actual html, jQuery and fluid code as well.

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

{% assign euFeaturedVar = 314828 %}

{% euStoriesVar assign = 104043 %}

< div id = 'EU-section' class = ' article section row 1 ">

< / div >

< script >

.about $(window) ("orientationchange", function (event) {}

If (event.orientation == 'landscape') {}

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

< div id = 'EU-section' class = ' article section row 1 ">

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

View of landscape Europe < h2 > < / h2 >

< / div >

{% If globals.visitor.deviceClass is "desktop" or globals.visitor.deviceClass == 'compressed' %}}

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

{% for euFeatured1 in Articles limit: 1 %}}

{% If euFeatured1.counter == 1 %}

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

< div class = "lead 12-xs-col 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 = fi ll_proportional" alt = "{{this.items [0].}}" ["Legend of the image]

']}} "class ="img-reagent">

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

< /a >

< / div >

{% endif %}

{% endfor %}

{% Comment %} <!-1 story featured EU-> {% endcomment %}}

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

{% for euStories1 in items %}

{% If euStories1.counter == 2 or euStories1.counter is 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 = proportional fill_"alt =" {{this.items [0].}} " "{{[" Caption of the image ""]}}. class = 'img-sensitive' >

< / div >

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

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

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

< /a >

< / div >

< / div >

{% If euStories1.counter is 4 %}

< / div >

{% endif %}

{% endif %}

{% endfor %}

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

 

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

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

{% If euFeatured2.counter == 2 %}

< div class = "xs hidden 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 = fi ll_proportional" alt = "{{this.items [0].}}" {{["Class of image Caption"]}} ' = "img-reagent" >

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

< /a >

< / div >

{% endif %}

{% endfor %}

{% Comment %} <!-2nd story EU star-> {% endcomment %}}

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

{% for euStories2 in items %}

{% If euStories2.counter is 6 or euStories2.counter is 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 = proportional fill_"alt =" {{this.items [0].}} " "{{[" Caption of the image ""]}}. class = 'img-sensitive' >

< / div >

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

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

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

< /a >

< / div >

< / div >

{% If euStories2.counter is 8 %}

< / div >

{% endif %}

{% endif %}

{% endfor %}

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

{% endif %}

{% If globals.visitor.deviceClass is 'Office' %}

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

< div class = "section-banners" >

{module_adrotator adRotatorId = '7557'}

< / div >

< / div >

{% endif %}

< div class = "stories of other collar-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.

It's really a bit OTT.

First, you must use media questions:

INTERFACE design: Application CSS based on the Orientation of the screen

There are a few bits, you'll need to do:

The application of media guidance - QuirksBlog

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

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

Tags: Business Catalyst

Similar Questions

Maybe you are looking for