Current date/time is Fri 19 Apr - 20:27

Search found 1 match for someTab

How to create this CSS animated, responsive drop-down menu?

If you have 50+ iframes on the same forum that load all at once, that's definitely going to cause trouble. One thing that you could do is opt out of iframes and consider using AJAX. For example, when someone hovers over a certain tab we send an ajax request to load that tabs content :
Code:
$('#someTab').on('mouseover',function(){
  if (window.localStorage.getItem('tabcontent'+$(this).attr('id'))) return $(this).find('.content').html(window.localStorage.getItem('tabcontent'+$(this).attr('id')));
  $(this).find('.content').load('/h1- .bodyContent', function() {
    if (window.localStorage) window.localStorage.setItem('tabcontent'+$(this).parent().attr('id'),$(this).html());
  });
});


We can then use localStorage to store that HTML content, so we can set it without sending a request next time. You can also use a trick to set a cache time for localStorage items as well. I'd recommend wrapping the content in the HTML page with a unique class, such as in my example, so we can load all the content we need into the tab. After the loading is complete we check if storage is supported and store the HTML with a ID unique to that tab.. e.g. #someTab ( without # )

It is a rough example of what you can do, and there will be a small delay for the tab content to show up, but it is a lot more flexible than 50 iframes that load at once. I'm not sure how your code looks, but you should be able to adapt it to include AJAX and localStorage.

This is simple documentation on jQuery AJAX : http://www.w3schools.com/jquery/jquery_ref_ajax.asp ( the official site is more detailed )
This is information on Storage : https://developer.mozilla.org/en-US/docs/Web/API/Web_Storage_API
by Ange Tuteur
on Wed 11 Feb - 16:43
 
Search in: Garbage
Topic: How to create this CSS animated, responsive drop-down menu?
Replies: 79
Views: 5019

Back to top

Jump to: