0

I'm trying to use page transitions using smoothstate.js (http://miguel-perez.github.io/smoothState.js/).

What this appears to do is to load the destination of a link in the background when the link is hovered rather than clicked, meaning when it is actually clicked the content is already loaded and can be presented with a smooth transition.

The challenge I'm finding is that I often use an {if segment_3 != ''} type conditional to use one template to show both a listings AND a detail page and avoid having to create an extra template and add an extra segment to my URL. Something like this...

{if segment_3 == ''}

    Listings page to go here...

{if:elseif segment_3 != ''}

    Detail page to go here...

{/if}

This seems to cause problems and not load the content on these detail pages correctly. I can only assume this is because when the content is loaded, the URL hasn't changed yet, meaning the EE conditional still comes out as false rather than positive.

Any ideas on how to get around this would be massively helpful and appreciated.

Thanks in advance,

Tom

Improve this question
1
  • 1
    This plugin works as ajax loader with cache + changed page url after loading (window.location). In any case, the data is loaded by specific url, not what you see in the current moment and if you choose correct segment - conditional must work. So is nothing about ee as is. Open chrome inspector on tab Network and check what url you requested.
    – Max Lazar
    May 20, 2015 at 7:59

1 Answer 1

Reset to default
1

This is a completely front-end issue, as Max Lazar said. There is no way EE template conditionals have anything to do with browser presentation frameworks, only generated content and structure. If you are ajaxing some content, and your URL to the page you want ajaxed is correct, ie:

/products/product_category/

vs

/products/product_category/product_one

that template will be parsed exactly as it would be without this front-end framework.

If you can test and give us more details about your templates without using this front-end framework, we might be able to help you find a problem with your templates that is completely separate from implementing the framework.

Update

After looking at the two page examples, they are binary equals. Your issue here comes down to browser behavior with respect to loading stylesheet rules and painting them appropriately. I've run into this thing before; sadly there is no easy or direct solution. I would initially try reloading the stylesheet rules to see if you can get a browser repaint:

https://stackoverflow.com/questions/2024486/is-there-an-easy-way-to-reload-css-without-reloading-the-page

https://stackoverflow.com/questions/13721183/reload-css-stylesheets-with-javascript

http://ajaxian.com/archives/browser-reflows-how-do-they-affect-performance

But I can foresee that getting messy, unless you basically write a jQuery plugin (or vanialla JavaScript library) triggered by a smoothState.js callback of some kind. Either way, this is browser behavior in regards to the particular structure and stylesheet rules of your website. Browsers do not paint the same after load, I believe.

Improve this answer
9
  • Thanks for your thoughts guys. It's a strange one then if as you say the presentation framework doesn't effect back-end loading.
    – Tom Perkins
    May 22, 2015 at 7:18
  • As an example, here's a listings page with smoothstate in place (dev.evolvewebsites.co/examples). If you hover on one of the websites you should see the detail page loaded in the console before you click. The trouble is that when you do click the page doesn't display correctly. Here's how the page should display (dev.evolvewebsites.co/examples/table-magic-website) but if you try to access that page from the listings page it doesn't load correctly (i.e. incorrect page height and no images). If you need any more info just let me know.
    – Tom Perkins
    May 22, 2015 at 7:18
  • Thanks for providing an example! I (and likely Blatant) will take a look in a few hours. I might need more info, I'll let you know.
    – jrothafer
    May 22, 2015 at 11:23
  • thanks for looking into this. I'm a little confused by your answer I'm afraid, not something I've come across before. Could you explain what you mean by 'they are binary equals' and why that would mean styles for the detail page aren't loading please?
    – Tom Perkins
    May 26, 2015 at 7:42
  • Basically, when your browser loads a web page, it loads the DOM structure and applies styling as the style rules load. This causes a specific order of rule application. If you are to asynchronously change the entire DOM structure of your page, the style rules end up not getting painted in the same order. Often this is because you have JavaScripts that add additional style rules when the page loads. However, this library may not be triggering an on-load event. It's annoyingly complex to try and recreate a page load event without simply asking the browser to load a new page.
    – jrothafer
    May 26, 2015 at 12:20

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.