I have a problem in lightbox. This is the link when i clicked login form appears.
<a href="index.php?g=login.html" title="Login Form"
rel="gb_page_center[425, 220,login.html]">Login</a>
When I click the link before page loads, page opens in new window. light box isn't working correctly. I need to block this link utill lightbox loads.
How can I do this in javascript?
click the top corner link login
Link: http://www.clubforeducation.com/
Did you try adding some attribute like onclick='return false;' ?
You might want to include your lightbox javascript code at the bottom of the page.
Or hide all your images initially while page is loading; once page is loaded, you can show all links again with something like below:
window.onload = function()
{
// note: using jquery here
$("a.lightboxlinks").css('display':'inline');
};
Related
I am using JQuery Mobile to load some content from a different page into an iframe in a popup and displaying that iframe content within that popup on my initial page.
My popup link is as follows:
<a href="#popupBasic" data-rel="popup" data-transition="pop" data-position-to="window">
My popup is defined as follows:
<div data-role="popup" id="popupBasic" data-overlay-theme="a" data-dismissible="false">
Close
</div>
As you can see it has a close button.
I open my popup when a list item in a listview is tapped as follows:
$('#myList').delegate('li', 'tap', function () {
var index = $(this).index();
$("#popupBasic #memberFrame").remove();
$("#popupBasic").append( '<iframe src="/myPage?id=' + index + '" height="400px;" width="100%;" id="memberFrame"></iframe>' );
});
As you can see this loads the page with a specific id based on the index, the popup opens and this content gets loaded in the iframe within the popup.
On my iframe content there is a button and a count, when the button is pressed the page refreshes and the count should be increased. This is done by the server. However while I can see the count is getting increased and the page looks it gets refreshed it appears the content within the iframe is getting cached or something as when the page refreshes the old count is there.
Two things to add to this:
1: If I then manually refresh the iFrame by right clicking on it and selecting the refresh frame option it works OK
2:The popup has a close button on it and when I click this the first time it doesn't close the popup, instead it looks like it refreshes the iframe content and this time the count is correct. Then pressing the close a second time actually closes the popup
The experience in #2 I find very odd and I was wondering if anyone could help point out why this might be occurring?
I am using popup anywhere plugin in joomla. I have to display article page detail on that popup at time of user log in. But here popup close on click out side of popup screen also, i dont want this. Popup should only close at time of clicking "Agree" button that article have.
Please let me know if you have any other plugins or ideas.
This should prevent the window from being closed by clicking away from the element:
$('#your-close-button').click(function(e){
e.stopPropagation();
});
Joomla has a modal window as part of its core code, which is based on the mootools Squeezebox. You can call up an iframe in a modal window which cannot close like this:
<?php JHTML::_('behavior.mootools'); ?>
<a href="http://www.example.com/page2.html" class="modal"
rel="{closable: false, handler:'iframe'}">
Click here to launch a popup</a>
If you then want page2.html to have a close button, you should add this script to the parent window,
<script>
function closepopup() {
SqueezeBox.close();
}
</script>
and create the button like this:
CLOSE!
I figured out how to make a modal window pop up as the page loads, but I was wondering how I can make it appear also after clicking on a link, so that if a first time user comes to the website, closes the onload modal window, and then wants to sign up, he can do so.
I got the code from: http://www.aspdotnet-suresh.com/2013/03/open-show-jquery-popup-window-on-page.html
and the website that i'm using it on is http://thewildernesswalk.businesscatalyst.com/
If you have a better solution than the tutorial i found (which would be great), I am all ears, but it seems like some of the other answers i found out there mess with the code that makes the nav stick to the top and the "back to top" button appear.
Thank you in advance
Assuming the code at the link you gave, you may insert the following in your HTML <body> in order to show the modal upon clicking hyperlink:
Click me!
<script>
var elem = document.getElementById('hyper');
elem.onclick = showModal;
function showModal() {
$('.popup').show();
return false;
}
</script>
I am using an Iframe with fancybox2, to open up a page which has a form which updates a database. What i am looking for is that when the fancybox is closed the parent page, which is a table of database results, automatically refreshes it's self.
My link to the iframe page is here:
echo "<a class='fancybox fancybox.iframe' href=\"add.php?ip_address={$ip_address}&id={$id}&userna={$username1}\" class=' btn btn-small' data-original-title='Add'>Add</a>";
I also have this code which i found in a different post, when i include this in the parent page, and click on the link, the fancy box starts but then immediatley closes and refreshes the page.
$("fancybox").fancybox({
afterClose : function() {
location.reload();
return;
}
});
I have tried several re-writes of this code but it either describes as above or just doesn't work. Any suggestions would be much appreciated.
try calling window.parent.location.reload();
I have a div in the middle of my web page that is placed in front of an iframe the with links along side of it. I would like to hide the div once any one of the links are clicked. How would I go about doing this using javascript? I am very new to this so please be as descriptive as possible so that I can understand.
Here is some of my html code. I have a number of links that appear in an iframe. I have the logo div positioned on top of the iframe and it loads when you enter the site. However I want to hide the logo when you click on anyone of the links.
<li>My Resume</li></br>
<li>My Course Work</li></br>
I used the jquery code noted by Dolours below along with extra coding within my the body of my html code, when you click on a link then the div disappears as I intended but then it reappears once you click on another link. I want it to disappear and stay away. Here is the additional code that I came up with
About Me
Does anyone know how I can make my logo stay away?
You can do this using jQuery:
// Get the iFrame jQuery Object
var $MyFrame = $("#iframeid");
// You need to wait for the iFrame content to load first
// So, that the click events work properly
$MyFrame.load(function () {
var frameBody = $MyFrame.contents().find('body');
// Find the link to be clicked
var link = frameBody.find('.link_class');
// Set the on click event for the link
link.on('click', function() {
// Hide the div inside the iFrame
$('#divID').hide();
});
});
You can use the code below
$('a').click(function() {
$('#divID').hide();
});
Assuming all links will load the iframe.