I want to add a background music to my website, but i want that music to play continuously across all pages.
For e.g: i have music which is approx 10min, i am on Home page for 2 minutes music starts from 1 second, when i goto other page the music should start from 2 minutes 1 second.
i've searched across Google & StackOverflow but unfortunately didn't found any answer as per my requirement. :(
i just wanted to know that is it possible to do??? If yes then what kind of mechanism is used for that???
As far as I know, this is not quite easy to accomplish.
There are two practices you may follow, with the first being the most common (IMHO).
Sites that have a music background that doesn't start all over when you navigate, mostly use Ajax or similar methods to navigate, instead of allowing the page to normally refresh. This is mostly common with flash websites, but it is possible to do with Ajax refreshing just the inner content of your site.
The second way would involve somehow passing on a variable that remembers where the user was, but you cannot avoid the loading gaps, and the whole result would be very uncommon and not really pleasant.
There's a few ways you can do this off the top of my head. The easiest would probably be some JavaScript that would load the content of the next page into the current page:
<div id="content">[Your changing page content goes in here]</div>
A link:
Some Page
Some JS:
function loadNext(page){
//using jquery
// assigning to a var like this lets you do things like abort the call
var jqxhr = $.ajax({type:"get",url:page,dataType:"text"});
jqxhr.success(function(result){ $("#content").html(result); });
}
Another, probably simpler way is to load your page content into an iframe and then just have them navigate within that, that'd be a lot safer too as it won't break if people have JS disabled.
<iframe src="homepage.html"></iframe> //You'll need to size this to whatever the content needs obviously, like 'style="width:100%;height:100%"'
Both of these solutions require that your content be able to be separately loaded from the wrapper of the page, so that things like headers and footers don't duplicate infinitely as you navigate around.
Related
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').
A recurring problem with modern web design can be summed up as "too much sh** all over the place". There're two problems with this: one, it takes up memory and takes longer to load, and two, it visually clutters the webpage.
If I just wanted to solve the second problem, I wouldn't need help. JavaScript can delete DOM nodes and CSS can hide them, so there're already a few visible ways to simply hide parts of a webpage. What I want to do is solve the first problem - make a webpage load faster by not loading certain elements.
I'm pretty sure it's impossible to selectively download certain parts of an HTML file. But once the source is downloaded, the browser doesn't have to actually parse and display all of it, does it?
Of course, if this is done after it's already been parsed and displayed, it would be pointless. So I need a way to tell Chrome what to do before it begins parsing the HTML. Is this possible, and do you think it would significantly reduce load time/memory usage?
Yeah, unfortunately Ive never seen a way of changing the html before Chrome renders it.
But as far as blocking things that that page gets to display then Id recommend just using AdBlock https://chrome.google.com/webstore/detail/gighmmpiobklfepjocnamgkkbiglidom
AdBlock can be used to stop resources (js,images,css,xmlhttprequest) from ever being downloaded (it blocks them in the background using the webRequest api) and can also hide elements using css...its rather effective (just remember to select advanced options in its option page and then when you click the AdBlock button you get "Show the resource list"). Also installing Flashblock can help...or disable plugins in Chromes settings, doing this will make them not load but will still show on the page and then you can make them load.
Totally possible! Meet the newest Chrome API: webRequest, finalized in the current version of Chrome - 17.
Docs for webRequest: http://code.google.com/chrome/extensions/webRequest.html#event-onBeforeRequest
I'm trying to think of a solid way to do this... one suggestion I have is using the 'sub_frame' filter, and watching if it's a like/tweet/social button url
You could also block known analytics stuff... and the list goes on! Have fun! Do you have an email list I can sub to for when you launch? If not, get one and drop me a comment!
(From the comments, here is how a innerHTML hack could work)
//This modLoop constantly peers into and modifies the innerHTML in attempt to modify the html before it's fully processed.
var modLoop = function modLoop(){
var html = document.documentElement.innerHTML
//modify the page html before it's processed!
//like: html = html.replace('//google'sCDN.com/jquery/1.7.1/', chrome.extension.getURL('localjQuery.1.7.1.js'));
//I just pulled that ^ out of nowhere, you'll want to put careful thought into it.
//Then, mod the innerHTML:
document.documentElement.innerHTML = html;
setTimeout(modLoop, 1);
};
var starter = function starter(){
if (document.documentElement.innerHTML && document.documentElement.innerHTML.lengh > 0) {
modLoop();
} else {
setTimeout(starter, 1);
}
};
starter();
I've run into this problem twice in all the site's I've designed and I can't figure out how to fix it. (The flash compiler has not given me any errors for this.)
Here is the link first of all
http://rollingsquare.com/AKJ/akj.html
Once you're in the site click on portfolio and then click on "the excelsior" what happens is that for the first 4-5 clicks it won't do what it's supposed to do and it'll start randomly either stopping at a frame or playing a from a frame. Once it's done it's randomness it all works perfect again, but those initial clicks do not take you anywhere.
This is an externally loaded SWF and I've loaded it with 2 different techniques hoping it was that but that didn't fix it.
I've tried simply placing a UiLoader and linking it and what it is now, a var myLoader.
Anyone run into something like this before?
You should try to be more specific in asking programming questions. I almost took it as a spam link.
Anyway's if I am getting you correct, the initial thumbnail clicks don't load the image.You should probably use individual loader for each of those large images.
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 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.