0

I am using the view core module to view the featured articles, latest articles and more stuff in my project, it is rendering 3 articles and the load more button to load more content using ajax, This is working great in Desktop, However in Mobile, the load more button doesn't exist (As per website design) and the articles are displayed in a slider. I am hiding load more button using CSS, the user has no way of loading more content!!


1st Approach: Load more content using ajax.

How can I automatically load more content after the user slides 2 or more slides ? I can easily detect when the user slides to the 2nd slide using jquery but how can I load more slides dynamically using ajax? Do I have to load more content by myself or does Drupal 8 have a way of doing this?


2nd Approach: Make 2 blocks, one for desktop, one for mobile.

I thought of doing 2 separate views blocks:

Desktop view block: 3 items and load more button

Mobile view block: all items

But this doesn't feel right, and I will have to toggle between them using CSS which means the content will be fetched by network anyway, So this approach is not correct.

I could not find how to hide or show a block depending on view width without CSS.


If there is another approach please tell me.

0

Maybe can you detect with jQuery that the user's screen is near the bottom of the page (or with your 1st approach), then you use an .click() on your invisible "load more" button ? In that way, user will scroll and more content will appear each time ?

  • I don't think that you have fully understood my question, I have no problem with loading more content on the desktop, what I am trying to do is load more content is a mobile slider without having the load more button. – Bassem Mohamed Nov 8 '17 at 8:35
  • This is why I say that if your more button is hidden, you only have to generate a false user click on this invisible button with jQuery when the user is near the bottom. It means 1 - detect that the user is looking the bottom / 2 - simulate a click on the invisible more button – Seldell Nov 8 '17 at 9:32
  • It worked, I ended up doing jquery function that checks for the last item in the slider is active, then click on the load more button, I had to reinitialize the slider again to make it work, thanks... – Bassem Mohamed Nov 8 '17 at 15:23
0

You should look at the views_infinite_scroll project. It has the option to not display a Load More button and just autopage when the end of the list is reached. Just specify it as the pager in your view and select options from there.

You could either have two different views or maybe just refactor the desktop to not have a load more button and use the auto load like the mobile display.

  • In the design I have 3 blocks on the same page for example ( Featured articles - Most viewed - Latest ), so I cannot depend on automatic scrolling in desktop I need the load more button , I looked at the infinite scroll js file it is simulating a click on the load more button when the user scrolls down, maybe I can also simulate a click when the user goes to the 3rd slide or so, what I am trying to do now is to make the load more button adds slides to the end of the slider instead of adding more articles under the slider. – Bassem Mohamed Nov 8 '17 at 8:32

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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