views:

163

answers:

5

Basically, I want the same effect as the oldschool html 'frameset' I think.

Take a look at this page please: http://onomadesign.com/wordpress/identity-design/alteon-a-boeing-company/

If a user selects a project from industry -> transportation for example, I would like that the right scrollmenu keeps its initial state when the new project page comes up. So they won't get lost and have to click again to be in the same submenu section.

So, the right thumbnail navigation should stay in the same way, I don't want it to reload.

Do I have to do it with frames or iframes? Or can I make some kind of jQuery call to 'not reload' that div? Maybe PHP? I'm sorry, I am not a programmer from origin.

Thanks in advance.

A: 

Facebook kinda does this without frames for optimization's sake. They take every single link and, if supported, using AJAX to load the page content without reloading the layout.

Obviously, this sort of thing may require significant restructuring of the internals of your app. Another option is to simply store the menu's state as a cookie on link click (see the jQuery Cookie plugin) and, on every reload, either have Javascript look at the cookie and dynamically restore the menu to its correct state, or use your internal PHP to read the cookie and decide what menu to display.

But if you get really desperate, you may end up falling back on frames. Sometimes that can be okay - but try everything else first :)

Matchu
jQuery makes life really simple if you can have your app spit out appropriate XML for it to read and populate your page with.
KingRadical
Quick question: by XML do you mean the page HTML, or generic structured data? Since though the latter may be simple, it *is* Javascript-dependent, which is something you never want to be for basic navigation.
Matchu
That Cookie thing sounds good, however I've looked at it and I am not a good enough programmer to figure that out myself.. could you FireBug my site and help me out? thanks
Josh
...not today, sorry. Too much on my plate. Learn it or hire someone who can :)
Matchu
@Josh: Read a bit at http://www.w3schools.com/PHP/php_cookies.asp and afterwards Google a bit. It is not that hard to use them.
Veger
no problem, thanks for your help and goodluck with your own plate;)
Josh
Yeah, cookies aren't that bad, and the plugin makes them pretty easy to manage. Changing the menu based on the cookies would likely be the tricky part.
Matchu
Yes, by the look of it a little too tricky for me.
Josh
A: 

You also can detect what menu item was activated (you got the page request due to clicking on the corresponding link) and use this information to restore/select this menu item.

At least that is what I do and... No cookies or AJAX required!

Veger
I don't totally understand the menu flow (I'm tired) but it sounds like there's more than one way to get to a given section, which is why he can't determine which menu was present at runtime. Or maybe he can and this just hadn't occurred to him yet?...
Matchu
Exactly, there is more then one way. So, when a user picks one project via the 'industry' submenu, I got the jScrollPane plugin to autoscrollTo to that current item on pageload. Only it does that in the first submenu 'name' and not in the submenu he picked it from, 'industry'. That's why I thought that it would be easier not to reload that DIV at all, like a frame. Is this possible thru your solution?
Josh
Ah... this solution only works if there is just one way to reach an item :( It was not clear to me that there were multiple ways.
Veger
A: 

You can use a technique known as "AHAH" Asynchronous HTML and HTTP. Essentially you're doing a jQuery

$.post("whatever.html",function(data) {
       $("contentdivelement").html(data);
} 

You can wrap this in a function like:

updateContent(sPage) {
   $.post(sPage,function(data) {
       $("contentdivelement").html(data);
} 
}

This will load the content from your "frame" page into the div without reloading the page.

You can also bind to each of the navigation links and use their HREF as your path to load in your content div such as:

$(".menuLink").click(function() {
   var menuLink = $(this).attr('href');

   updateContent(menuLink);

   /* prevents the browser from taking the parent to that link */
   return false;

});

ADDITION: Your menu may look like this:

<ul class="myMenu">
   <li><a href="frame1.html" class="menuLink">Frame 1</a></li>
   <li><a href="frame2.html" class="menuLink">Frame 2</a></li>
</ul>

Also, If you want it to remember the page you're on you can use cookies or #anchors. There are many ways to add "tab" or "menu" anchors but one way would just be to use a jQuery plugin.

The most COMMON and TRENDY way to do it is to use #anchors. Your browser address bar ass #frame1 to the end so when the page is refreshed or reloaded it will load up "frame1" automatically with some additional code.

You can even called the anchor #/frame1.html and read the anchor in

$(document).ready(function() {
   /* you'll need to either use a plugin or parse out the anchor from your current browser address bar */
   updateContent(anchorContentVar);
});
Joshua
Why would you be using POST requests instead of GET - and why wouldn't you be using $('#el').load()? ;)
Matchu
The reason I always use POST is because some browsers cache GET requests which would lead to dynamic content being cached as well. Just makes it easier. Whether POST or GET, same result. Josh is welcome to experiment with both. Also, a .load() function essentially does the exact same thing as a .post() or .get(). It doesn't really matter either way in my opinion.
Joshua
Thank you very much for your reply. Sounds good, I'm trying real hard to understand but I'm afraid I'm a coding noob. Could you explain to me how I would have to apply this in my existing code?
Josh
Yes, I'll add it as an edit to my post.
Joshua
My menu -and the whole site for that matter- is dynamic from a database (Wordpress) but that wouldn't make a difference right? Thanks.
Josh
Nope, definitely doesn't matter. jQuery is nice because you can bind to any element on your page without digging into onClick events and things on each element. The other function I recommend is using the jQuery .live() event for elements that may come or go depending on which page you're on. You could replace the $(".menuLink").click() with a $(".menuLink").live("click",function() { }); so it would catch any new links added to your menu dynamically.
Joshua
Thank you for this. I still have to get my head around this thing and then try to use it in my (already messy) code, but I think I'll be okay. Thanks very much again.
Josh
I've been trying your solution all night, but I just can't figure it out.. could you FireBug my site and see if you can get it to work? That would be great.
Josh
A: 

Guys, I managed to put the whole thumbnail navigation code into a seperate php file, called sidebar.php. Now this gets called in my single.php (Wordpress) by <?php get_sidebar(); ?>.

Should it now be easier to make this sidebar.php NOT refresh on page reload? I've been looking at cookies, php sessions, iframes.. but I can't get it to work.

Any more help would be greatly appreciated!

Josh
A: 

Instead of updating your content using click-handlers I suggest a slightly different approach. Just replace your hyperlinks with this kind of link:

 #info_page

Now set up a simple interval that reads out the current URL and updates the DIV accordingly:

__LOC = document.location.href;
 setInterval(function(){
 if (__LOC!=document.location.href) __LOC=document.location.href;
  var fetchURL = __LOC.split("#")[1];
  $.get( "/getcontent/"+fetchURL, function(d){ $("#mydiv").html( d ); } )
 } 1000);

This allows visitors to use bookmarks as well.

Gabor de Mooij