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?
Related
I'm using wordpress with visual composer and I have built this demo popup example https://www.air8cushion.com/index.php/popup-test/ when I click on "More Info" button the popup shows up. However when I scroll content inside of it, and close the modal window, and again click on "More Info" I need to reset the content to appear from the top again.
I know its possible to do it with JS but I had fails many times to make it work. Most of examples of similar things online are mostly for Bootstrap and none of them worked for me.
Thanks.
You can use this on click of the close button of your popup
this function will scroll viewport of the popup div to top when clicked
jQuery(document).on('click','.vc_general',function(){
var myDiv = document.getElementById('myNav');
myDiv.scrollTop = 0;
});
".vc_general" is one of the class in your close button. You can add an extra class if you think it will affect the other functionality.
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();
How can I create a new frame/window in the canvas? I am trying to make a game, and have a feature when you press a button, a menu screen will pop up displaying a bunch of information. Currently I have it working where you press a button and it will pop up with a placeholder image, which I would now like to replace.
I know in Java you would just create a new JFrame or JPanel, but how do you do this in JavaScript?
jQuery's modal dialog is popular:
http://jqueryui.com/dialog/
The jquery modal dialog window is an overlaying div element positioned within the viewport and is protected from page content (like select elements) shining through with an iframe. It has a title bar and a content area, and can be moved, resized and closed with the 'x' icon by default.
Define your popup window
You define the jquery dialog window by creating a div element containing your informational contents.
<div id="MyInfo" title="My Popup dialog">
<p id="myContent">Here is 'a bunch of information' and images too!<p>
<img src="anyImage.png">
</div>
Display your popup window
jQuery will initially hide your popup div. You can display the popup div like this;
$( "#MyInfo" ).dialog("open");
So if you want the popup to display when you press a button you can do this:
$("#myButton").click(function(){ $("#MyInfo").dialog("open"); });
And, Yes, you can get your desired contents through AJAX calls and then put that info into your the jquery popup.
$("#myContent").text("Here's some info from an AJAX GET request");
There are quite a few useful options that can be used with the jQuery dialog including animations and buttons.
I am using jQuery CustomBox modal. I have it all working fine but I want the div behind it (BUT NOT THE BACKGROUND IMAGE) to disappear when modal is clicked. I have managed that, but not too sure on the code to make it reappear again after the modal is closed. At the moment I have to refresh the page in order for it to come back.
Here is the code I am using so far: http://codepen.io/doolz77/pen/esoHB/
I have not included the modal due to the amount of extra code, however, here is a link to the actual page
to make the modal appear just click on the 'joey' link.
Thanks!
EDIT: At the moment it is controlled by jQuery. The call which is placed in the footer is:
<script>
$(function () {
$('#fadein').on('click', function () {
$.fn.custombox( this {
effect: 'fadein'
});
return false;
});
});
</script>
This fades the modal in and out. Would I just need to place some code here for the #wholePageContainer div to re-appear??
You need to store the html before deleting it to retrieve later. Or you can use show/hide To reduce the pain and achieve desired functionality:
function clearBox(wholePageContainer)
{
document.getElementById(wholePageContainer).style.display = "none";
}
function showbox(wholePageContainer)
{
document.getElementById(wholePageContainer).style.display = "block";
}
Demo
Is this what you were looking for:
http://codepen.io/anon/pen/giFEL
Edited:
Explanation to the above link:
In the above link i have made the html and body tag as 100% and the div element who's content is been removed to some percentage i.e 50%, This will keep the div occupy space event if it is empty.
Next i am storing the html content to a hidden div element and restoring it back to the div when required.
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