On Behance.net I’ve seen a very smart way of using lightboxes, where an entire page open in a lightbox (like a video or a presentation), but also makes the URL change. If a user shares this URL, the new visitor will see the content, but now in another page (as the new visitor can’t view it in a lightbox, as we wouldn’t know which page would lay behind). Andof cause if the user closes the lightbox the URL will go back to the former page.
You can see it yourself here: https://www.behance.net
We’re building a project using BackboneJS and also uses HTML5 Pushstate, but we haven’t figured out yet, how to do this.
Does anyone of you know?
From MDN
var stateObj = { foo: "bar" };
history.pushState(stateObj, "page 2", "bar.html");
stateObj is any data you want to pass to the popState event.
Related
I have just read some concept about window.location property and method.
And I know that
1. window.location.href = "http://google.com"
2. window.location.assign("http://google.com")
3. window.location.replace("http://google.com")
are all can redirect our page to the target url, the only difference is that window.location.replace doesn't record the history, so we cannot get back to the previous page directly.
Now I just wondering, what's is the difference between window.location.href and Google, the <a> tag also records the history.
And for what situation do we use them respectively?
I think the main difference is what's happening behind the scene but on the surface they are pretty much giving the same effect.
window.location.href is only triggerable by JavaScript, or in JS context. Whereas a <a> tag defines hyperlink in HTML. It really depends on how you want to trigger this new page. You can either have a hyperlink a user can click/tap on, or you can trigger the page load by some JS functions that are triggered by certain actions.
To be more specific, a tag is common in webpages because browsers understand it and can apply CSS style to it to look nicer. As for window.location.href, there's no UI aspect for it, it simply is a line of JS code that you can trigger to either (1) get the current webpage URL or (2) set a value to it to redirect the user to some other URLs.
The difference is in how they are likely to be used (duh, bear with me.)
Setting window.location.href is a way to programmatically set the URL. For instance, window.location.href = 'https://www.google.com' will navigate the user to Google's search page. There is no way for your user to make use of this knowledge, unless they open the developer console.
Using an anchor tag of Google will show a hyperlink that the user can click, navigating them to Google's search page. This tag is also more likely to be interpreted by a screen reader more appropriately than a button with an onclick that navigates them to Google by setting window.location.href manually in Javascript.
So I have been looking into this for a few weeks and have come up with nothing!
I work on the website for my families music store, and have been asked to add a "Links" page to the website. My goal would be to have the categories of our vendors (i.e. Violin, Guitar, Piano, etc.) on the left of the page and when the category is selected the links come up on the right. That part I have. The tricky part here is: When a link to a vendor (i.e. Fender, G&L, Yahmaha) is clicked instead of taking them directly to the site, I want it to take them all to the same page, but embeded on that page is the site.
I have done a lot of research on this and have come up with nothing. I could just go through and make a new page for each of the vendors, with the embedding on each individual page, but that is extremely time consuming with the amount of vendors.
Is something like this at all possible? I've been playing with embedding itself and have that down. It just comes down to, which link did they click, and loading that specific page.
If there is any more information you may need to help or point me in the right direction please let me know! Same with any code that may be helpful!
I've come up dead on all my research on this.
EDIT: I guess my ultimate goal is that it will look something like this: http://answers.yahoo.com/ so that the vendors website is open on bottom, but our stores banner and links are still at the top. Out website can be found here: http://www.brassbellmusic.com/default.aspx
I've created a JSFiddle to demo this functionality using jQuery.
We iterate through the list of brand links in the ul:
$('#brandListing a')
Capturing a click event on each:
.click(function(ev){
jQuery passes an event object to the anonymous function (ev). When the link is clicked, we first must prevent the default action, which is to follow the link. Then we update the src attribute of the iframe (the "embedded page") with the value of the href that was clicked:
ev.preventDefault();
$('#embeddedBrandWebsite').attr('src', ev.target.href);
You'll need to add the jQuery library to your page to use my code sample, but it's possible to replicate the functionality without it.
EDIT
The sample above is for a single page implementation, where links and the embed are on the same page. To achieve the requested "transfer of information," I recommend passing the target href as a GET parameter (brassbellmusic.com/brandEmbed.aspx?path=http%3A//www.gibson.com/). On the single "embed" page, you can then extract this either on the server side to set the iframe's src, or using javascript. With javascript, you might use:
function getURLParameter(name) {
return decodeURI(
(RegExp(name + '=' + '(.+?)(&|$)').exec(location.search)||[,null])[1]
);
}
Source
And then after your document is ready, set the iframe src using getURLParameter('path').
I'm working on my website where I have a music player. The annoying part is that when I browse to another page the player stops and starts from begining...
What I want is to have a persistent music player. So how can I make the div that contains the music player to be static when browsing to another page?
The website: demo(dot)zdringhi-art(dot)com
Thanks!
WEB is stateless.
So if you move to another page there is no way for a div to remain the same.
Although what you can do is that... Hmm as follows.
Have a single page and have your div in there.
Then the other part of the page is loaded via ajax.
also when a link is clicked only parts of pages will be loaded.
Seems too much of coding , but is the only feasible option.
For eg take facebook
Gurav shah is correct, the web is stateless so if you are changing pages you only have a few options for this.
Frames, yes before anyone shouts this is what they were designed for. You could have the music player in one HTML frame and the rest of the page in another so when you move around you are only updating the main content frame.
Or do as gurav suggests and make your whole site one page and update the content with Ajax, so the music Div does not change.
Pass the current position of the player to the next page when you click a link.
to another page
Where getseconds() returns the current position of the music player and passes it to the next page then when that page is loaded you read in the variable from the URL and start the player from there.
Using frames is one solution but since you are using JQuery on your site you should check out .load (http://api.jquery.com/load/). It allows you to load the content of another page and put it somewhere in the current page. Something like this:
$(function () {
$("a").click(function (e) {
e.preventDefault(); // don't follow the link
$("#ja-container").load($(this).attr("href") + " #ja-container");
/* Load the new page using ajax request, take the content in #ja-container from that new page and put it in the current page's #ja-container */
});
});
This is not a complete solution: when someone clicks Concerts -> Agenda you should keep Agenda visible.
Personally, instead of forced background music I'd rather like to see a page with Youtube videos of the people playing the music.
Well, yes HTTP is stateless. what you can do is create a cookie, and update it with current location/time value of the player, constantly. This way, when you go to any other page you can read time/location from cookie.
otherwise, in a cookie less approach, sending AJAXed location/time data back-forth server-client will be too much network.
If I was doing this, I would have gone cookie way.
I have a website that has a music player in one of the corners. Because I didn't want the music to stop everytime the user changes part of the website, I used an iFrame for the content. So when someone clicks the menu buttons, all that changes is the source of the iFrame.
Now the only problem is if someone tries to open one of the sub-pages in a new tab/window. All they get is black text on a white background, with the content that was supposed to be in the iFrame.
Is there any way to prevent this?
Oh, and the page this is about is www.sinjabe.com if that helps.
Thanks
The most logical solution (to me...) would be to detach the music player from the page; have the music player open in a different window / tab. You can have the music player in a pop-up window when the visitor of your site requests it / clicks on it.
Other solutions like detecting if the content has a parent frame, will lead to multiple music players if someone opens a page in a new tab / window.
You can alter your sub-pages to detect if they are loaded in an iframe like this:
(window.location != window.parent.location) ? true : false;
and then load or redirect to the full template as needed.
Put this on your sub pages:
<script type="text/javascript">
if (window.location == window.parent.location)
this.window.location = 'main_site.html';
</script>
-- Give credit for this one #George Cummins for writting such a short conditional statment :)
This will redirect any direct incomming trafic on your subpages to your main page. I must warn you though, that iframes for displaying such content are highly SEO unefficient, and URL useless in terms of history mapping (back button will not work) and link sharing, because the main URL doesn't change while you click on menu buttons.
I have a music player swf embedded on an html page. Is there any way to have the music continuously play, even when the different html pages are loaded? When a link is clicked, the page is refreshed, also restarting the swf(music).
If the site was AJAX driven, this wouldn't be a problem, but all my pages are static. I suppose I could put the entire body in an iframe, but there has to be a better option. I am certainly open to the idea of using ajax here, but I do not have much ajax experience. Any ideas?
Ajax is really not that hard to learn, use it.
If you reload another page or the same page with a normal link, you will lose your current status in your embedded player. So you either have to use a non-standard link-mechanism, separate your player from the page or save your current status on change of the page. Your options basically are:
Use Ajax and never actually load a new page, but only new content (<- best solution, imho)
Use the standard link mechanism, but do it in an iframe, the player runs in a parent page (I agree with you, that wouldn't be nice)
Load the player in a new Window, put it in the background or something. This might be better than the iframe-solution, but you might get some difficulties with popup-blockers. Remember to close your popup when the user leaves your page.
Save the status of the player in a cookie whenever a link is clicked. On pageload check for the cookie and continue playing at the saved position. This will result in small breaks during playback and you need to be able to interact with the music player.