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.
Related
I was wondering what would the best way to add something that would hide a image when a iFrame was clicked, in this case a embedded YouTube video. I have a image that's on that's slighly over the iFrame and I'd like to hide it when the iFrame is clicked and show it again once it's clicked again after the first time. I'm not really experienced in JQuery but I know php well enough.
My image would be under something like:
<div class="picture">
Something like this? Add a click listener to the iframe and hide the picture.
$( "#myIframe" ).click(function() {
$("#myImage").hide();
});
edit: since your pic only has a class, not id it would be $(".picture").hide();
Currently I am trying to implement the ability to change the image with my backstretch. Backstretch is binded to a block level element like so,
$("#background-image.slideshow").backstretch(backgroundImages, {fade: 750,duration: 4000});
What I am then wanting to do be able to click a link get the href and add a new backstretch image however what happens at the moment is a new backstretch instance is created, here is my click code,
$("#thumb-gallery a").click(function(e) {
// Prevent the click from actually following the href
e.preventDefault();
// Backstretch
$.backstretch( $(this).attr("href") );
});
Where I am going wrong? All I want to be able to do is change the backstretched image in #background-image.slideshow
You can just replace the image source in the backstretch generated div:
$('#backstretch img').attr('src','your_image_url');
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');
});
I'm sure someone has already done this and posted it online, but I'm having trouble finding such an example or tutorial.
Basically, I want to have a series of links on the page. If you hover your mouse on the link, it should open a drop down DIV box under the link and then load content into the DIV from a remote URL that is pre-defined.
Has anyone seen such an implementation or have any ideas on how to do it with jQuery?
I think you're looking for something similar to:
$(document).ready(function(){
$("a").hover(function(){ //When a given link (<a> tag) is hovered over
$("div").load(this.href).show(); //load the src of that tag into a given div container.
});
});
Here's a simple test in jsFiddle, but I didn't know what to put with the href...so all you'll see is the div appear with the post error...not very pretty, but if anyone has suggestions then I'm definitely open to all.
http://jsfiddle.net/ChaseWest/VEuH9/2/
I would go with something like the following. Note that we target only anchors who don't have the loaded class. The reason why is because we don't want to load the contents for any anchor multiple times. Whenever the user passes over an anchor, its content will be loaded and it will get a special class indicated this. If they pass over it again, nothing happens.
$("body").on("mouseenter", "a:not(.loaded)", function(e){
$(".mydiv").load(e.target.href, function(){
$(e.target).addClass("loaded");
});
});
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.