I'm using a SoundCloud.com music player plugin called Stratus. The plugin allows you to set the class "stratus" on any anchor pointing to a soundcloud track and when clicked, will dynamically add the track to the player and begin playing. jsfiddle example: http://jsfiddle.net/2CCS6/
In addition to the toggle I have below, I'd like to toggle or remove "pause" from (this) when the src of the iframe changes. I've styled all .stratus links as play buttons and the issue is that when they're clicked, they (visually) remain in a play state. By toggling the class pause, I can display a pause icon instead to indicate the active track and pause functionality.
The version I have here sort of works for the click function but it seems to interfere with the function below it. As for toggling when the iframe src changes... I was looking into this.contentWindow.location but not sure if that will work due to the domain mismatch.
$('a.stratus').click(function() {
$(this).toggleClass('pause');
$.postMessage($(this).attr('href'), src, $('#stratus iframe')[0].contentWindow);
return false;
});
return $.receiveMessage(function(e) {
return $('#stratus').toggleClass('open');
}, root_url);
Thanks for any help you can offer!
I believe the .load method will fire every time the src attribute changes.
$('#frameId').load(function () {
$(this).toggleClass('pause');
});
Related
Okay, so, my problem is that I have a video in my HTML and I managed it to set it up to play on the mouse hover, but the problem is that it dosen't work until I clicked anywhere on my Website first. For example: If I try to play video by hovering mouse over it, it won't play. But if I click first anywhere on the site, then it's working. How do I fix that? I want to be able to play my video without having to click somewhere first.
Here's my code:
JavaScript:
<!-- Mouse hover over .video1 to play -->
var $video1 = $(".video1");
$video1.on("mouseenter focus", function () {
$video1.get(0).play();
});
It's a new thing recently implemented - the user is required to interact with the page, with either a click or a keypress, before any video or audio can play. So no, this is not possible - but to get around this, you can just add a confirm dialog to the top of your page:
$(function() {
confirm();
var $video1 = $(".video1");
$video1.on("mouseenter focus", function () {
$video1.get(0).play();
});
});
What the above code does is it forces the user to either press "Enter" or "Esc", or to click "Cancel" or "Confirm", to dispel the alert box, so your video will play automatically after that.
I found the best answer for this to be adding the muted attribute to the video element. This allows the video to autoplay without requiring a user gesture first. Explained in more detail here: https://stackoverflow.com/a/50742427/5572739
I'm making a book-website with a jQuery-plugin. Every time a link is clicked, the book-page switches to the next page and the .active class switches from link. The problem is that if you click fast between the pages, the active class switches but the movement of the book is too slow so you don't hop to the next page.
I'm trying disable the link after u clicked on one. My idea was just removing an attribute for a couple of seconds like this:
$('.button').click(function(e){
.. switch page using id
.. switch .active
$(".button li a").removeAttr("id");
}
So when the page is loaded, and the active class is switched. U cannot click on another link until the attribute is put back on.
How can remove an attribute for a couple of seconds? Or are there other options to disable a link for a period of time without removing the attribute?
An easy (but a bit hacky) way to accomplish this is returning early out of the handler if the action is already in progress:
var pageIsTurning = false;
$('.button').click(function(e){
if (pageIsTurning) { return; }
// do your stuff and change the page
}):
According to the docs of the booklet plugin you can bind to the bookletstart and bookletchange events which are where you'd update the pageIsTurning variable.
$(".selector").bind("bookletstart", function(event, data) {
pageIsTurning = true;
});
$(".selector").bind("bookletchange", function(event, data) {
pageIsTurning = false;
});
Note that this approach wouldn't work if you have more than one booklet on the page but could easily be adapted.
I'm attempting to change the video playing in my embed. I would like to know if this can be done by clicking on an LI item?
You could use jQuery javascrip library to add an onclick event to your <li>.
$('li').click(function() {
var newId = $(this).text();
player.loadVideoById(newId, 0, "large");
});
If the video is inside the <li> you might need to create a transparent overlay that reacts to the user clicking. Note that you might have to change the z-index of the iframe.
Please provide more info on your page layout if you require more help.
I´m having a problem. I make 4 tabs using jquery, and on each tab, i open an iframe, calling another html, that have a javascript code with css3 animation.
But, there is my problem. Once you load the page, the first tab is already "open", so, that animation starts rolling. But, when i change tabs or come back to the first one, all the animations are already done...
I need the animations, to start ONLY when i open the tab, and, start over again when i come back to another tab that has already been seen.
Since the css3 code and js are too big, there´s the link to my working(problem) tabs.
http://efdutra.com/testes/abas_final.html
ps: only works on SAFARI (i´m made it that way, i just need to get it working on safari).
Thanks!!
Update
Ok, now this just start when i click on the Tab, i add this on my parent code:
function divStart1(){
document.getElementById('teste1').contentWindow.start();
};
function divStart2(){
document.getElementById('teste2').contentWindow.start();
};
function divStart3(){
document.getElementById('teste3').contentWindow.start();
};
function divStart4(){
document.getElementById('teste4').contentWindow.start();
};
And in the html i add this:
<img src="img/001_a.png">
<img src="img/002_b.png">
<img src="img/003_b.png">
<img src="img/004_b.png">
But, when i come back to a tab that have already been opened, it dont do the animation again.... what can i change now??
The new code url:
http://www.efdutra.com/testes/new/abas_final.html
Thanks!
If you move your animation script into a function, you can call that from parent window.
/* This is in your child page */
function Animate(){
// Do animation
// To restart css animation I assume you have to remove a class and add it again?
}
$(document).ready(function(){
Animate();
}
Then you can bind an event when the user changes tabs on the parent window
function OnTabSelected(){
document.getElementById('ID of iframe here').contentWindow.Animate();
}
you will need to add id's to the iframes so you can select them using this method.
Hey guys, ok, so, I have a jPlayer jQuery plugin playlist hidden on my home page (http://www.marioplanet.com).
Now, it is hidden by default and is only supposed to be activated upon clicking the image labeled "Music" in the upper-right-hand-corner of my header <div>.
This works great, and once an end-user clicks the image, a nice, slick slideToggle action occurs on the <div id="player"> element and it is revealed.
Now, everything holds.
Until, the end-user clicks anywhere except the Music image again, the <div id="player"> element will slideToggle yet again, vanishing.
The only problem, is when the end-user clicks upon the Music image again, because, as far as I know, it slideToggles twice!
That is definitely not what we want.
So, here is the code which was adapted by Magnar's helpful post:
$('#text_music').click(function() {
$('#jplayer').slideToggle(500, function() {
$("body").click(function (event) {
var outside = $(event.originalTarget).parents("#popup").length === 0;
if (outside) {
$("#jplayer").slideToggle(500);
$("body").unbind("click");
}
});
});
});
#text_music is my image reading "Music"
#jplayer is my <div> containing my jPlayer plugin
So, what I want to try and do is declare a variable, just like how var outside is declared in the above code, which handles with the clicking of the #text_music image once the #jplayer <div> is already visible.
However, I need a little assistance in understanding the meaning of this variable.
Anyone want to offer any words of wisdom?
:) Thanks!
Have a look at jQuery outside events plugin to detect events outside of the specific element.