Opening URI in overlay, not main page

Question

On my page, overlays are loaded by inserting their content with jQuery and then fading in.

What I want to do is this:

When you click to open an overlay, an URI is loaded (e.g. news/12, where news is the category and 12 is the id of the item to load). Except, instead of loading it in body, it should be loaded in the overlay.

In other words, I want to achieve something like on facebook, where you open an overlay, the url changes, but the main page stays the same.

I'm guessing you need ajax for this, but I have no idea whatsoever how to do it.

Thanks

what do you mean by "overlay"? if you're just talking about dialogs, use boxy or something similar : http://onehackoranother.com/projects/jquery/boxy/ — Janus Troelsen, Jan 07 '12 at 23:17

score 0 · Answer 1 · edited May 23 '17 at 12:03

0

Use Boxy. See http://onehackoranother.com/projects/jquery/boxy/tests.html#

AJAX example:

<a href='#' onclick='Boxy.load("test-1.html");'>Test 1</a>

See this question: Ajax - How to change URL by content

edited May 23 '17 at 12:03

Community

1
1

answered Jan 07 '12 at 23:19

Janus Troelsen

17,537
13
121
177

I've already designed my own, so I'd rather continue with this than throw it all away :) – bur Jan 08 '12 at 05:12

score 0 · Accepted Answer · edited May 23 '17 at 12:29

0

It sounds like you want to use the new history.pushState(...) and history.popState(...) browser API. This SO post might help you out: Change the URL in the browser without loading the new page using JavaScript

edited May 23 '17 at 12:29

Community

1
1

answered Jan 07 '12 at 23:32

Lethargy

1,839
14
15

This is exactly what I need! Thanks! – bur Jan 08 '12 at 05:06
The only problem is, when I push back or forward, the page doesn't change. And one more problem: I'm having trouble fetching the base url to append the new url to. – bur Jan 08 '12 at 05:10
Okay, so I think the problem is that when doing pushState, the URI is changed, but the active URL isn't. So when I call pushState in javascript, it acts on the active URL, which isn't always the same. – bur Jan 08 '12 at 05:17
You probably want to register `popstate` event handler, or something. I'm not sure. Try more googling, and reading this: https://developer.mozilla.org/en/DOM/Manipulating_the_browser_history – Lethargy Jan 08 '12 at 14:53
Yes, window.onpopstate = function() { location.href = location.pathname; }; did the trick :) – bur Jan 08 '12 at 20:35

score 0 · Answer 3 · edited Jan 08 '12 at 10:07

0

I solved it thanks to Lethargy's answer.

.pushState() is exactly what I need to have the URL reflect the contents of the overlay that is dynamically created with jQuery.

With some tweaking around and debugging I managed to get it all working.

Now my overlays (or popups, dialogs, whatever) are search engine ready, and the url is copy-pastable for users :)

edited Jan 08 '12 at 10:07

Marcus

11,428
5
44
64

answered Jan 08 '12 at 08:58

bur

532
2
17

Opening URI in overlay, not main page

3 Answers3