Home/ Questions/Q 523255
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-13T08:26:19+00:00

I am using WordPress for this design portfolio website: http://onomadesign.com/wordpress/identity-design/shleppers-moving-storage/ Now, on this single.php

  • 0

I am using WordPress for this design portfolio website: http://onomadesign.com/wordpress/identity-design/shleppers-moving-storage/

Now, on this single.php page, you can see the thumbnails on the right which link to each different post. What I would like to accomplish is that the thumbnail navigation with scrollbar, stays in the same position when people click on one to view a project. Now the whole page refreshes, so that the scrollbar is viewed from the top again. I don’t want that.

So, I think I have to ‘ajax’ some stuff, right? Preferrably using jQuery, because I use that library through the website allready. Can I make that div on the right side with the thumbnails not to refresh while the rest of the page does? Or fetch the single posts so that it ‘ajax refreshes’?

I hope I made myself clear, thanks in advance for any help!

Joshua

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    You have to make the whole left side of your page refresh when you click one of the links. This should have been taken into account when you started to design the page, to implement it at this stage can be very hacky to say the least.

    Anyways, the simplest solution is this:

    • Capture the thumbnail’s click event
    • Instead of redirecting the browser to the URL it points to, fetch that URL by AJAX
    • Get the current side bar in a selection
    • Replace the sidebar of the new page with the sidebar of the current page
    • Replace the current DOM with the DOM of the new page

    This is far from optimal – it is very heavy to modify the DOM in this way and it might result in weird things happening with the rest of the code (cufón not firing, etc) but it’s the simplest to implement. It actually does the opposite of what AJAX is supposed to do: this fetches whole content and ‘keeps’ only on block, whereas normally AJAX is used to fetch only smaller blocks at a time.

    To do it properly, you would need to have a page which only has the content you need to update, then you’d fetch that content and only replace a part of your page. If that’s possible, that would be the way to go.

    If you want to try the first method, I can give you the code for that. Let me know what you think.

    • 0