Take the 2-minute tour ×
WordPress Development Stack Exchange is a question and answer site for WordPress developers and administrators. It's 100% free, no registration required.

Hi this is more of a solution and advice question.

I want to search my wordpress site and load the search results in a very typical way (unordered list with title, image and excerpt).

Upon clicking the title of each post I want to load the post itself in a div directly in a new panel on the right.

I want the search results to minimize in width to around 30% and then a new panel containing the post slide in from the right at 70% width. This giving you a side panel to select other posts and load into the new panel.

I've tried a number of solutions here, ajax, permalink load in and styling with css to get rid of headers, json plugins.

I am wondering if anyone had suggestions on how they might approach this.

NOTE: my search results use infinite scrolling, the post loaded has related posts plugin. I also have a button to slide the div back out to go back to original search results view. It's essentially like a preview feature but your being give the whole post and shortcodes.

Thanks!

share|improve this question
    
Exactly what is the question, here? Do you want to know how to achieve the sliding effect to show the content? Do you want to know how to load the content in the new panel? Do you want to know how to change your search results template? –  Sunyatasattva Mar 6 '13 at 11:36
    
No, simply just best practices and methods of how others might do this. Just advice :) –  Graeme Mar 7 '13 at 12:14

1 Answer 1

up vote 0 down vote accepted

Since you wanted best-practices, methods, advice, here is my take on how you should proceed:

  1. First of all, divide the content of your page in two ideal spaces, the list of posts, and the content. Something like this:

    <nav class="post-navigation">
        <ul>
            <li>
                <h2>{Post title}</h2>
                <p>{Excerpt} [&hellip;]</p>
                <p><a href="{post-permalink}">Read more &rarr;</a></p>
            </li>
        </ul>
    </nav>
    <section class="post-content"></section>
    

    Consider making the space with a list of post a <ul> inside a <nav> element, to be as semantic as possible.

  2. To hide the .post-content section, don't use display:none. As you want to animate it with a sliding effect, position it outside of the screen. Give it already the width: 70% which is your goal.
  3. Now that you have your layout, well… layed out… let's bring on the interesting parts. Most things will happen when you click on the links to read more, so bind a function to the click event with jQuery, like so:

    $('nav.post-navigation li a').click(function(e){
        // Function body
    });
    
  4. Slide the content by animating the position of your .post-content and the width of your nav. The jQuery documentation should be pretty clear on that. Remember that you want to intercept the normal behaviour of the anchor, so either preventDefault() or return false, or both.
  5. Get your post content using an AJAX request. You can use the href attribute that you put in your readmore link in order to fetch the correct content. The reason why you leave the href is to have a graceful fallback: should something go wrong with the code, should the user have javascript disabled, or simply navigating on a non-javascript friendly browser, he will still be able to access your content. Besides, think about 'dem spiders! Check for success and add your content to the div.post-content. You may use, for example, the append() method.

Basically, like this, you have what you are looking for. A content will be fetched with AJAX and served in a section which slides over the previously full-screen list of posts, making it look more like a sidebar navigation system.

You might want to add a little bit more details and refine what you have. I may suggest the following for starters:

  1. Make your website look more responsive by the cautious use of loading .gifs.

  2. Don't double serve content: check whether the user is clicking to the link of the currently displaying page and don't fetch the content again; besides looking silly to your user, it will make a useless server load (probably insignificant, but still). Always consider your user, though! Tell him that that link is disabled by clever use of UI.

  3. Manipulate browser history: using the history API. Your site will be more accessible, more user-friendly, more SEO-friendly, and will look much more advanced.

share|improve this answer
    
Thanks so much for the detailed response. This is essentially the same process I have been using, but I've got some excellent tips off you in terms of functionality. Especially the points about double serving content (A problem I already encountered) and the use of the history API. Thanks again!! –  Graeme Mar 20 '13 at 18:10

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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