Jump to content

Dynamically Load/Unload parts of HTML


FrancisChung
 Share

Recommended Posts

Hi there,

I'm trying to build a page in Processwire where it has a desktop layout of  

Sub Nav | Content Column 1 | Content Column 2

and a mobile layout of 

Content Column 

As you can see the Sub Nav appears and disappears depending on the viewport of the design.

I've been doing a lot of searching and reading and there does not seem to be a way where I can dynamically load / unload the Sub Nav section of the page and reload and render the page again when the view port changes?

Does this mean I need a mobile template and a desktop template for that page?
How would I load each appropriate one?

Are there any PW modules that would help me achieve this task?
(I have already looked at MarkupAdaptive module but the example doesn't seem to show dynamically loading parts of the HTML)

Thanks in advance.

Link to comment
Share on other sites

Perhaps you'll find your solution here:

http://stackoverflow.com/questions/18890053/php-conditions-depending-on-window-width-media-queries

I guess there are "solutions" with PHP, PHP + Javascript, Javascript...

By the way, a ProcessWire version is missing at "3rd party modules" here: https://github.com/serbanghita/mobile-detect

NB: don't forget to also read the last answer(s).

Edit: see also https://css-tricks.com/forums/topic/how-to-load-a-section-of-content-only-if-the-screen-is-over-a-certain-width/

  • Like 1
Link to comment
Share on other sites

A great way to learn would be a framework that has a responsive design already. The word you are looking for is responsive. There are tons of frameworks that will help you, or you could code everything from scratch and write all of your own media queries as well. I learned a lot from bootstrap and skeleton about this :).

http://www.awwwards.com/what-are-frameworks-22-best-responsive-css-frameworks-for-web-design.html

Link to comment
Share on other sites

Thanks for the replies. The helpfulness of this community never ceases to amaze me.

I already knew about Media Queries, but what I needed was something extra like response.js.

And this post that Christophe mentioned was exactly what I was looking for.
 

https://css-tricks.com/forums/topic/how-to-load-a-section-of-content-only-if-the-screen-is-over-a-certain-width/

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...