Thread

Hi there. I am a bit lost in regards to loading content dynamically from categories

To be more specific…I have a website with a lot of products and the navigation has a drop down menu with the list of all product categories and sub categories. Because the client has so many products it’s really important for anyone visiting the site to immediately get a good idea of what a certain product category is.

So what I want to do is have a container right below the navigation that loads the category description and image with jquery/ajax whenever a user hovers above a specific category

is this something I can get out of the box or do I need a special plugin for it?

So basically I want to load category images and descriptions via a jquery/ajax load into a fixed container on mouseover of the category title

Thanks!

Hi Dovia, while EE’s easy to integrate w/AJAX heavy designs, I don’t think you need that for what you want.  How are you showing the dropodown menu?  Using the Channel Categories Tag?  The cat image and description are available to that tag.  So really, it’s a matter of hooking up some show/hide to display that on mouseover.

What I’d do?  Ignore the dynamic nature of things to start with- go code your html/js and get that working.  And then plunking EE’s dynamic content in it should be fairly easy.  Does that help at all?  You can definitely skim http://devot-ee.com for add-ons that give you more control over category display and such.  But for what you want, it sounds like you just need to hash out your html and EE should drop right in.

hey there, basically yes, I show the drop down menu on click and then I have the 5 main categories on top and the rest of the sub categories below each of those…of course I know how to list all the category images and their descriptions without ajax and then use CSS to just show/hide stuff on mouseover, that’s not really a problem and the solution I have right now is kinda similar.

but…

I have 50+ categories each with their own image and description. Don’t you think it’s a bit too much to load all of that at once? I guess I could go that route but it just feels like a bit of an overkill, I’d also have to add quite a bit of css for each item

thanks 😊

ok so I managed to figure how to do this with jquery thanks to an older post on this forum with a similar question…I have the following javascript code in the header

[removed]    
 {exp:channel:categories channel="products" style="linear"} 
    $(document).ready(function () {
    $('a.{category_url_title}').hover(function () {
    $('#productDesc').load('{path=main/products}');
    });
  });
 {/exp:channel:categories} 
    [removed]

and in the menu itself I have:

<ul class="subNavigation clearfix">
       {exp:channel:categories channel="products" category_group="5" style="linear"}
         <li><a href="#" class="{category_url_title}">{category_name}</a></li>
       {/exp:channel:categories}
    </ul>

below that there’s an empty div which gets loaded with content from an empty template that just has a category description + image

now this is a bit messy because I’m generating a lot of javascript, a line for each category…and combining EE tags along with jquery makes it look really confusing…on top of it I’m not sure if making so many load requests is good for the server, it seems to be working pretty slow as well so I’m guessing your initial suggestion to just put everything into a big container and do show/hide with css might be a better solution

let me know if you have any ideas on how I might optimize it further, if not then feel free to close the topic or move it to a more suitable forum (not like there’s anything wrong with EE here 😉 )

Hrm- you’re right.  I don’t love either of our solutions.  There’s no need to pull the actual image path in dynamically, but loading 50 something images at once is not something I love either. I do think it’s an html/js issue rather than an EE one.  But yea, I’d likely go with loading them all as hidden.  It shouldn’t slow down the page load itself, it just may keep loading for a bit.  Once they’re in cache, it will speed that up as well.

I suspect the design folks know more about that side of things than I do, though!

And glad you’ve at least got working options.  I think either approach should be optimizable.