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();
Related
Actually i want to do open color box without popup and it need to be only show hide inside a div. can we target a div to open colorbox content.
<a href='#myGallery' class='group'>click here</a>
<div class=''><!--this must be container of colorbox, and disable popup-->
<div id="myGallery"><--some content with photo--></div>
</div>
function _teamPopup(){
$(".group").colorbox({
inline:true,
rel:'group',
href:$(this).attr('href'),
scrolling: false,
opacity:1,
width:100+"%",
});
}
on my web page , there is lot of thumbnails, when i click on it content must display without popup.and it can be next ,prev , close like colorbox group function.
please check below image and you can get some idea.
Use toggle function of jQuery to hide and show content inside an element
Why you want to change colorbox if its purpose is exactly to have a gallery popping up?
If you look around there are widgets more specific for the kind of problem you're having.
Check http://galleria.io/themes/classic/.
If you still don't like what you can find around why don't you just code the big div to change its image when clicking on a thumbnail?
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 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");
});
});
I have an iframe loaded with some content. I would like to move it inside the DOM without causing a refresh (I like the content inside it, I want to keep it).
I'm doing some basic node.appendChild(iframe) to do the job.
Is that possible?
Thanks in advance for your help.
If you're trying to move it visually, you can try modifying the CSS to use absolute positioning or some other adjustments.
However, if you're trying to actually pull it out of the DOM and insert it somewhere else, you won't be able to avoid a reload.
I don't think so, as the browser is going to re-render/reload the iframe when it's put back in the DOM.
http://polisick.com/moveNode.php better explains it.
To move a node you call removeNode to take it out of the tree and into memory, then appendNode to 'paste' it back where you want it.
I had a similar problem with an iFrame in a jQueryUI dialog box. jQuery moves the div (containing my iFrame) out of the DOM and because I still wanted postbacks (duh), I had to move it back. After reading this and several other posts, I came up with a solution.
The simple idea that I noticed is that the iFrame reloads when it is moved. So, I added the iFrame into the dialog container (div) after moving the div back into the DOM. This works because jQuery doesn't care about what's in the container. Here is some sample code:
Dialog open/close functions:
open:
function () {
$(this).parent().appendTo("form").css("z-index", "9000"); //Move the div first
$(this).append('<iframe id="iFrame" allowtransparency="true" frameborder="0" width="100%" height="100%" src="somePage.aspx"></iframe>');}, //then add the iframe
}
close:
function() {
$(this).empty(); //clear the iframe out because it is added on open,
//if you don't clear it out, you will get multiple posts
$(this).parent().appendTo("divHidden"); //move the dialog div back (good house-keeping)
}
html:
<div id="divHidden" style="display: none">
<div id="dialog" style="display: none">
</div>
</div>
you need to save the 'Html' node under the iframe and after you moved the iframe, add it back
First of all, here is the site I am working on.
I am trying to get a modal window to pop-up when elements in the Flash are clicked on. Which at this point I have about 90% working when you click on the warrior image. Below is a list of issues I am still trying to solve that I hope you can help me with...
The modal background doesn't fill up
the whole page like it should.
I cannot get the close button to work
I need to set the vidname variable in
both the Flash and Java to load in a
dynamic HTML file. Depending on which
image is clicked on. My naming
convention will probably be something
like vid-1.html, vid-2.html, etc.
If you need to look at the .js file you can view it at /cmsjs/jquery.ha.js
Below is the ActionScript I currently have...
var vidname = "modal.html";
peeps.vid1.onRelease = function() {
getURL('javascript:loadVid(\'' + vidname + '\');');
};
Well I have one for you.
Your current close code is
$('#modalBG, #modalClose').click(function(){
closeModal();
});
If you click the background after a video loads you'll see that the modal does close. The reason your close button does not work is because #modalClose does not exist in the DOM when you are binding to the click function.
You need to either rebind the modalClose element when you modify the DOM or use live. If you use live you just need to change your click code to this:
$('#modalBG, #modalClose').live("click", (function(){
closeModal();
});