for a website with a focus on audio I need the ability of Background sounds and onclick sounds. I think I am able to integrate that, but I also need a stop/play button and a volume control that works sidewide (that means the site should remember the volume value and if to play or not after page reload or page change).
Does anybody know a method to do that?
The answer to your question is in the tags.
Cookies.
http://www.quirksmode.org/js/cookies.html — this may help.
Just save the cookie named "volume" (for example) every time the volume changes and read it on page load.
You have to use either a Javascript variable that saves the state of the volume or a server side variable.
Remember that there is no way to play the music in background while loading a new page unless you use ajax to load contents.
Related
I visit a site often that has a "click to change to dark theme" button. The dark theme is much easier to read, so I have to click the link every visit (history cleared on close).
I'm on a local Linux box with Firefox; so Javascript, HTML, Python and Bash are available.
I'm focused on a Bookmarklet as it seems like the right way - however, nothing I'm doing is working. I'm not versed in Javascript so it's been days looking up and trying examples. It may not be possible as a Bookmarklet, so perhaps there is another way around?
Bookmarklet - Set Then Go
Here's what I have:
javascript:document.cookie="theme=dark; domain=example.org; path=/;"; location.href="http://www.example.org";
It works if it's only the cookie, and it works if it only loads the site - but not both. I'm ok with programmatically going to the page first, setting the cookie, then reloading but that doesn't work either. I'm not wanting to click two links. "example.org" is how the cookie is stored for a normal visit, and I'm ok with the cookie only lasting for that session.
Persistent Cookie
I can't get Firefox (IceCat) to keep the cookie. I set it under Exceptions to allow, but nothing keeps it unless both "Keep cookies until they expire" and "Cookies" is unchecked for removal after close. Doing that keeps all cookies from everywhere which I'm not wanting to do.
Permanent Cookie
I'd tried setting the cookie in an immutable file - but Firefox doesn't keep cookies there anymore. They are in SQLite. Maybe there's a way to set a flag on the row so it's never removed? User.js and prefs.js don't seem to apply - but shouldn't it be possible to set the cookie in prefs.js or user.js that would set it for each browser load thereby creating a 'permanent cookie'?
Bookmarklet - Go Then Click
Another thing I tried was to open the page, then click the link programmatically to load the dark theme:
javascript:location.href="http://www.example.org";document.getelementbyid('Dark').click();
The ID is known and in the form of a non-valid anchor (no href). The site's javascript seems to be listening for a click event. Here is what they have:
$('#Dark').click(function(){
document.cookie='theme=dark; domain=.example.org; path=/';
window.location.reload(true);
});
So shouldn't it be as simple as setting an environment variable then loading the site - maybe JS doesn't have environment vars?
Inject It And Forget It
I read that it was possible to inject style into the head of the page, so I tried to inject:
<script>document.getelementbyid('Dark').click();</script>
via the Bookmarklet which seems like it should work as the click would be in a local context. I could never get it to inject, but again, I don't know Javascript.
Last Resort
If nothing above is possible, could it be done with bookmark to a local .html file that sets the cookie for the given domain then redirects to the site? A last ditch solution that is not preferred would be an actual script (.sh/.py)?
I don't want to share the site, and I don't want to not clear history on exit. Neither are due to what you're probably thinking. :)
I'm here because I'm wanting a Javascript solution (a bookmark), but I'm not good at Javascript - so all the examples above might work with tweaking, I'm just doing it wrong.
Thanks all for any help!! If you can fix it - could you also explain why what I had doesn't work?
Below is a try to explain rather than an answer.
Let's assume that you are already at the target page. Do the following bookmarklets work for you?
This:
javascript:(function() {
document.getElementById('Dark').click();
})();
or this one:
javascript:(function() {
document.cookie='theme=dark; domain=.example.org; path=/';
window.location.reload(true);
})();
I eventually figured out a cookie's initial entry can only be set by the domain, as a measure against XSS. So the answer to my question is it's not possible.
The simplest work around is to use an Add-On followed by userContent.css.
It would of been nice to set the theme preference (cookie) before loading the page - but I can see why the rule's in place..
It takes the same amount of clicks to go to the site and click "Change To Dark Theme" as it would if JS was used (open the site [1st click], set the cookie and reload [2nd click]).
I have a set of php/html pages that contain buttons that when the mouse is over it plays a sound.
Now I want that when the user clicks on another button, it silence all pages of the site or put them with sound, depending if the sound was already on or not.
I already have an html code that allows me to silence the page, but it only work on the page itself, if I go to any other page or go back to that page they have sound. And I don't want that...
This is an exemple of the code in one of the pages:
<audio preload id="sombotao">
<source src="audio/somBotao.ogg"></source>
</audio>
<img src="img/exemple.png" onMouseOver="document.getElementById('sombotao').play()" />
I've tried using javascript, but it didn’t work.
I even tried with php using sessions, but since my experience is very limited it also didn’t work.
Can anyone help me? Where can I find a piece of code as an example?
Thanks in advance.
JV
This is completely possible. One solution will take a combination of server side and client side code. Your pages must have code that automatically checks the server every so often for updates to the volume level (This works similar to automatically updating comment feeds or stock tickers, but is so much simpler).
Your solution will look like this:
Step 1
Page 1:
Sound is playing
Page 2:
Sound is playing
Step 2
Page 1:
User clicks the mute button.
Page 1 "posts" via ajax to volumecontrol.php
Step 3
Page 1:
Query volumecontrol.php and find page is muted, continue muting
Page 2:
Query volumecontrol.php and find page is muted, change current volume to "mute"
A little more explanation
Think of this like a whiteboard at a doorway. As people enter and leave the room, they leave instructions for the other members. Members do not have to be present when a message is written, they only have to see the board every so often to coordinate with the other members of the group.
One important part of this whole process is that you will set the volume according to something unique to the user (i.e. a session variable).
Another key is that you use Ajax to push settings to a page in PHP and use Ajax to regularly check the server for updates to that setting.
I already know that you can have an embedded Vimeo video start from a certain point by adding this line of code #t=0m0s to the iframe source, but what I'm trying to achieve is to have the time the viewer is on the page be cookied so it can set the start point when they return.
This way the video picks up where they left off.
I know the values can be passed with cookies so I'm assuming it's possible, I just don't have the javascript knowledge to wrap my head around it.
Any ideas if this is actually possible?
You can use our JavaScript API to listen for the playProgress event to record how far along they are in the video, then use the beforeunload event on window to store the value that you have in a cookie.
I am making a website for my friends band. I would like to know if its possible (apart from using Ajax) to keep audio playing after clicking on a link to another page on the site?
I currently have it set up using Ajax to reload the content, but I am having a few issues with it, and I'd rather not deal with the bother unless I really have to.
If not possible, is there a way to minimise the disruption (pausing then playing again) while navigating? It would be possible for the new page to continue playing the track from where the last page stopped, but I would like to minimise the pause. Or, on this subject, is it possible to keep certain page elements loaded after changing the URL (without using # urls), like facebook does (as in, you click on it, but the banner never disappears during loading)
Thanks for any help :)
Use Ajax to load content and History API’s pushState() to alter URL without page reload.
For consistent behavior across browsers, consider using a wrapper library like History.js.
Sites like Facebook use JavaScript/AJAX for these kind of things. If you don't want to use it, you can use frames (not recommended). Divide the page in two frames: the player and the website itself. This way you can easily turn it off too, just open the site without frames.
Good luck!
Of course you could also pop up the player in another window/tab.
(For now) It won't be possible without frames or javascript.
It might be troublesome to implement it differently than via AJAX, however you can either use IFrames, where the music would be played in the main one and the content is displayed in the child on or you can always make it a Flash webpage.
Build it in Wordpress and use the AnythingSlider plugin to have the pages shift within the main page. This way you can have tabbed navigation and never leave the actual page. No need to write too much code. The AnythingSlider uses html for the slides.
You can also not use wordpress and just use the AnythingSlider code.
http://css-tricks.com/anythingslider-jquery-plugin/
and
http://wordpress.org/extend/plugins/anythingslider-for-wordpress/
and
http://css-tricks.com/examples/AnythingSlider/
I would like to have a video play continuouly even when html page changes.The new google videos page works this way. My page utilizes javascript.
You can only continue to play video if you are changing portions of the DOM, not if the location of the page changes.
What about reloading parts of the page with AJAX.
Then you avoid a reload which would stop the video playing.
I think you want to check into AJAX (Asynchronous JavaScript and XML). This allows you to manipulate parts of the page (in general, the entire HTML DOM) using callbacks to the server via JavaScript. This is exactly what YouTube/Google Videos use to allow voting/feedback while still watching the video, since any page reload forces the browser to stop playback of the video and restart.
Depending on which web framework you are using, there are various different choices for AJAX libraries out there. Microsoft have create their own [ASP.NET AJAX]](http://www.asp.net/ajax/) for example, which is now very mature.