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.
});
Related
I am creating a website where all my content is loaded into a div name content. my menubar is also loaded in to a div name menu.
The problem arises when i click the same link for a second time. So for instance i would click on members.php for a second time, the content is loaded into the div but some of my functions dont work as expected as they rely on and id which has been set. An ID can only be used once so when i load the page for the second time the ID doenst work. I would have to remove it before loading the content another time (which isnt an option) - as there are many ids.
i would be using jquery to load the content into the div. for instance $('#content').load('members.php');
but upon doing this the second time my id's would not work (content of the first page load stays intact) is there a way to reload that div.
Also is this normal behavior?
You can use a flag to define if this content loaded before or not, check it every time you call the loading function if it is not loaded before then load it, else no need to reload it again.
//initialize members_loaded variable when your page start.
var members_loaded = false;
//then when you want to load data check for it, change it to true in your complete function (when ajax done)
if(!members_loaded){
$( "#content" ).load( "members.php", function() {
members_loaded = true;
});
}
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'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
}
}
I want to link my page with another page on condition.
Suppose I have 3 HTML pages, namely 1.html, 2.html and 3.html. What I want is that if 1.html is loaded then load page 2.html; If 1.html is not loaded then load 3.html.
please help.
I can't follow your explanation about pages 1, 2 and 3, but in a general sense you can have a hyperlink go to different URLs depending on some condition(s) by handling its "onclick" event to cancel the default navigation and do it from JavaScript instead:
My link
<script>
function doClick() {
if (someCondition || someOtherCondition)
window.location.href = "firstURLhere";
else
window.location.href = "alternativeURLhere";
}
</script>
The URL specified in the anchor's href attribute will be used if JavaScript is disabled. Otherwise, the doClick() function is called to decide which URL to navigate to. Of course the function can be as simple or complicated as you need.
The onclick needs to return false; to cancel the default behaviour of a click on the anchor because (obviously) the default is to navigate to the URL in the href attribute.
I am not fully sure what you want to achieve.
I think you want to show hyperlink on a page only if some other pages are opened earlier.
If this is the case, you can create cookies on window.load of page 1, and check if that cookie is set on windolow.onload event of page 2.
If cookie is set, create a dynamic hyperlink on page 2 to redirect to page 3. If cookie is not set, do not create a link.
You may also show / hide hyperlink (instead of dynamically creating) depeding on whether cookie is set or not. This is an easy and crossbrowser way if you are not using jQuery.
Refer: http://www.w3schools.com/js/js_cookies.asp
It should be something along the lines of:
If you add the script at the bottom of the page, the javascript will search for all the <a> tags and compare them to the current url. If theres a match it will set its style to invisible.
<script>
linkNodes = document.getElementsByTagName("a");
for(i = 0; i < linkNodes.length; i++){
if(linkNodes[i].getAttribute("href") == document.url){
linkNodes[i].style.visibility= "hidden";
}
}
</script>
This way if you are in 1.html, 2.html and 3.html are displayed but not 1.html itself. the same happens for 2.html which would show only 1.html and 3.html... etc.
I have a 2-frame HTML page:
FrameA contains a list of links to various pages, or anchors within pages
FrameB displays the individual pages.
Some of the pages contain slideDown sections, with trigger text - i.e. clicking this text shows/hides the slideDown section below it.
The parent element of the trigger element also contains an anchor, for example:
<li class="expandable">
<p><a name="myanchor3"></a>Trigger text</p>
<div class="slideDownSection">
...
</div>
</li>
I want to detect whenever an anchor is requested in the URL used to load the page into FrameB. If there is an anchor ref, I want to check whether the anchor falls within an "expandable" element and, if it is, I do a slideDown on the element below to display it.
I can do this easily enough by putting some Javascript inside a $(document).ready(function(){ ... }); in the page that gets loaded. This checks the location.hash value and processes it if one's found. However, this only works when the page gets loaded into FrameB.
If a page is already loaded into FrameB and I click a link in FrameA that points to another anchor within the same page, I can't capture that event. The page position changes to display the anchor at, or near, the top of the page - without reloading the page.
My question is:
What event handler can I use in the page displayed in FrameB to detect that an anchor on that page has been requested via a link clicked in FrameA?
Note: The content of FrameA is auto-generated, so I can't use an onClick event for the page in FrameA, I can only work within the pages that get displayed in FrameB.
IE8 supports the hashchange event that you can listen for. For all other browsers, you have to poll the value of location.hash using setInterval():
var lastHash = null;
function checkHash() {
if (window.location.hash != lastHash) {
lastHash = window.location.hash;
// Do your hash stuff
}
}
setInterval(checkHash, 100);
On - window.location.hash - Change? is a very similar question.