I'm working on modal windows. When I click on a hyperlink in the main page, I need to show a modal window. This modal window I prepared using divs and one iframe. iFrame is used to show the source. Now in this modal window, I have another hyperlink to click which again opens a new modal window. This goes on.
Every time when I click on hyperlink, i want to create a new modal window in that provided iframe's src file itself. How to achieve this ?
TIA.
You can achieve this by using a simple java script file which creates div and iframe in your pages and frames. This script file will have all the necessary methods and a class to access these methods separately in each of the frame.
For example you can have the script file like
MyClass = function(){
this.var1, this.var2; // To store values separately in each frame.
this.myMethod = function(){
// Function body
}
}
Related
I am trying to use this
<script>
$(document).ready( function() {
var data = 'testing'
$("#about").on("click", function() {
$("#main-content").load("/about.html");
});
});
</script>
When I click the "About" button, it loads the HTML page "about.html" into the div called "main-content". But I have 2 issues
When it loads, it loads the "about.html" page into the whole page rather than just inside the "main-content" div
When I load the "about.html" I want to be able to access the JavaScript variable "var data" from the main page
Are these both possible?
Unless about.html is HTML and inline CSS only,
ifrmae is for this purpose.
<iframe src="about.html" />
First issue: the about.html page should actually be loaded only inside the main-content div. Maybe the css makes the about page fill everything. Maybe there's another javascript in the code causing this issue. The browser inspector should help debugging it.
Second issue: One possible way is to write the variable content into the html then fetching it later. The jQuery data does that creating/reading data attributes on html tags:
// javascript in current page
var foo = 'testing';
$("#main-content").data('myvar', foo);
// javascript in about.html
var bar = $("#main-content").data('myvar'); // equals 'testing'
I am struggeling with the following problem:
I want to stop a div from loading at the page startup. I've got the content inside the div file in an extra folder which is secured with an htaccess+htusers file.
So atm the htaccess question starts immediately when the page is loaded, but it should only ask about this permission, when the button is clicked and the folder content should appear.
Is there a possibility to stop a div from loading and force the load with a button or something?
I assume that your popup contains an Iframe to the subdirectory. That being the case, you can delay the loading of that Iframe by omitting (leaving out) the src attribute, and assigning it only when the button to open the popup is clicked.
Start by declaring an empty iframe, like this:
<iframe id="popup1"></iframe>
Then, using jQuery, assign the src attribute to the iframe when a button is clicked:
$('button#openPopup').on('click', function (event) {
// Set the src location
$('iframe#popup1').prop('src', 'http://domain.com/frame-location');
// Now open the popup the way you normally would.
});
You can also store the location in a data HTML5 attribute and recall it from there when the button is clicked:
<iframe id="popup1" data-src="http://domain.com/frame-location"></iframe>
$('button#openPopup').on('click', function (event) {
$frame = $('iframe#popup1'); // Assign the frame
$frame.prop('src', $frame.data('src')); // Set the src location from data attribute
// Now open the popup the way you normally would.
});
I have made the following site:
www.ppp.one
Whenever you open an image, a popup is loaded.
This popup can be closed using the X on the top-right. However, if you click on one of the thumbnails in the popup (reloading the frame) the X button can no longer close it.
The JavaScript I use:
function hide(){
if(currentIframe){
currentIframe.hide();
currentIframe = null;
}
popupBG.remove();
popup.remove();
}
And the html:
<a class="small align-top" onclick="frameWarp.hide();">✖</a>
Any ideas on what is causing the issue?
When you open the popup you call a function setUpAPI which inserts the frameWrap object into the global scope of the iframe.
When a thumbnail is clicked the frame is reloaded and the frameWrap instance is no longer available.
You could try listening for load events on the iframe instead of ready events:
iframe.ready(function(){
frameCacheDiv.append(iframe);
});
iframe.load(function(){
setUpAPI(iframe, settings);
settings.onShow();
});
It looks like when the iframe's URL changes the frameWarp variable becomes undefined. One idea to try would be to listen to the load event of the iframe and make your changes there: (you'd have to give it the ID of "iframeId")
$('#iframeId').load(function(){
console.log('URL changed');
// code to attach hide event here
});
Another idea would be to change your setup to use the postMessage API for the communication between the parent and iframe. You can read a tutorial of how to do that here:
http://robertnyman.com/html5/postMessage/postMessage.html
Edit: Actually, this blog post is a better example: http://davidwalsh.name/window-iframe
I have a dialog type popup that shows when the user clicks a button. Within that popup is a form and once that submits I want to change the width and height of that popup using the following:
$(document).ready(function(){
// ON SUBMIT OPEN DIALOG WINDOW TO CREATE FLOOR PLAN FOR PRINTING
$("#submitit").click(function(){
$(".form_wrapper").fadeOut();
$("#sb-wrapper").css('width', '99%');
$("#sb-wrapper").css('left', '7px');
$("#sb-wrapper-inner").css('height', '350px');
$( "#dialog-container" ).load( "./printing/display-print.php" );
});
});
Now once the popup opens it is within an iframe. The #sb-wrapper and #sb-wrapper-inner are outside of the iframe that is created. Now when running the above nothing happens. Except the form that is within the iframe fades out and the new data loads in the container within the iframe.
So my question is, how can I make this work together?
You have to use the contents() method:
$("#myiframe").contents().find("#myContent")
Source
In JQuery bPopup, how can i remove the old page from the popup and load a new page in same popup without closing it?
I have tried following 3 things, but still no success:
Applied anchor tag in child page, but it opens the new page in parent page
Applied $('.popup_content').bPopup({...}); in child page, it opens new page along with the previous page, both page are there in two rows.
Put 4 divs for popup in parent page, and called bPopup() for seperate popup divs in child pages. It works well, but keeps open the overlay of the old page.
Try this function:
function fnPopupClose1() {
var popup = $('.popup1').bPopup();
popup.dispose = true;
popup.close();
}