pr0cz pr0cz - 7 months ago 14
Javascript Question

Block a div load at page-load for the htaccess popup

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?

Answer

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.
});
Comments