We Keep Coding

Change Button Function After html site loaded on Iframe

I have an application in which I loaded .html file inisde a iframe on button click.
On In Progress Click app inside .html file loaded in iframe.
Above picture is of Iframe. On click Close a pop up appear.
Now I want to override the functionality of this CLOSE MODULE Button.
For example: On click this button i want to reload the parent application.
I have tired below code but its not working.
$('.notify-popup-prompt-button').on('click',function(){
console.log(123);
location.reload("https");
})

I resolved the issue, by changing in JavaScript using by .htlm file.

In MVC with Bootstrap External Popups, can you resize?

If you load an external Modal dialog with bootstrap in MVC, its easy to set the height, for example:
$(".modal-body").height(300);
However, if I then send another view to that same popup (if they click a link within the popup which hits your controller and you return a different view to the existing popup window), then you may have a different size of content in this new view. So how can you resize the external modal dialog now?
My thought was to put JS code in that new view, and have an onload event:
<script type="text/javascript">
$(document).ready(function () {
$(".modal-body").height(530);
alert("hit.");
});
</script>
Well this code hits (the alert debug message 'hit' does show up), but the dialog height doesn't change from 300 to 530. So, perhaps the JS doesn't have access to that part of the DOM?
How can I get this second view within the same Modal dialog to have the correct height for its content?
thanks

So there was a Iframe inside of the popup and that was why the popups content size was not changed. There exists an issue where the popup content change isnt noticed anyway, but that is solved with the code I already had, posted above, but the below solves when its in an iframe if on the same domain as well.
The solution was on the site that the SRC in the iframe pointed to (the content of the popup) since hosted on the same domain, was to do:
parent.$(".modal-body").height(530);
parent.$("#myIframeId").height(500);

Facebook or Pinterest styled onclick load page as overlay content?

In facebook feed or Pinterest gallery, when a user click on the content, jQuery will load the content and appended it to the current page as a modal (the url of browser will also changed according to a.href, even though there's no page reload). However, if the user launch a new page with the very same url, he is going to see a page with different layout (as opposed to the modal's) but the same content.
How do I accomplish this? (a click will load content onto a modal, while launch url as new window will display content on a new page with different layout)

how to avoid loading the source for iframe

I would like to improve loading performance for a page that has a button to trigger a popup initially hidden on the page (uses 'modal' component from twitter bootstrap). This popup body contains an iframe, which source is loaded on the page inital load adding about 30-40% more time to load, however. The iframe source is not needed to be loaded till the button is clicked which brings up the popup with the iframe. How can one avoid loading the iframe source on initial page load? ...only load the iframe source when the button is clicked? Can JS be used here? If so, then how or what method/library? Is there a better approach than make popup with iframe hidden in the page to improve loading time? Thank You

This is possible with JavaScript (no extra libraries required).
Simply use a function to set the src/display the frame when a link or button is clicked.
function loadIFrame(frameID, url) {
var frame = document.getElementById(frameID);
frame.setAttribute('src', url);
frame.style.display = 'block';
}
See the example here:
http://jsfiddle.net/ZNGmy/

Rather than having the pop-up as a hidden container that is made visible by the button, make the pop-up with the iframe content a separate html page that gets displayed by pressing the button. This way the content is not loaded until the button is pressed.
This link has an example of popping-up html pages.
http://allwebco-templates.com/support/S_add_pop.htm

How can I get Colorbox to appear in a div?

At the moment I've got Colorbox setup so that it starts automatically when the page loads, but I need to place it in a div on the page, instead of hovering in the center of the page. How can I do this? Thanks for reading.

You can do insert this javascript snippet into your javascript on document complete, where you bind colorbox.
$(document).bind('cbox_complete', function(){
var divContent = $('#cboxLoadedContent').html(); // Grab the content of cboxLoadedContent div
$('#colorbox').hide(); // Hide colorbox div
$('#cboxOverlay').hide(); // Hide the overlay div
$('#Output').html(divContent); // put the content inside the specified div.
});
What this does is that after the image/page is successfully loaded into colorbox, it will immediately grab that content, hide the colorbox and overlay, and dump that content into the new div.
Yes, you will see opening and closing of colorbox flashing on your screen really quick, but this will do it. If you want more controls, then you customize these events: onOpen or onLoad. See link at bottom of my post to go to colorbox website for more details.
Beside cboxLoadedContent, you can also use #cboxWrapper, or #colorbox divs, depending on how much colorbox information you want to embed in your div.
Please note that by doing this, you will have to rebind the buttons, if you want it to allow navigation inside the div.
You can go to Colorbox Site for more customization options.

I think Colorbox is the wrong tool for what you want. The functionality you want is more like an image gallery. Some ones you might like: Galleriffic or Galleria