When I try to click a field the content goes away. I only want the x button to close the popup not the overlay or content. I also notice that when I double click on the #contactus and #contactus2 the popup goes away but not the overlay.
Please click on "View the lines" to see the popup.
Here is the fire code:
$(document).ready(function() {
$("#contactus").fancybox({
'hideOnOverlayClick':false,
'hideOnContentClick':false
});
$("#contactus2").fancybox({
'hideOnOverlayClick':false,
'hideOnContentClick': false
});
$("a#inline").fancybox({
'hideOnContentClick': false
});
});
to clarify what I said below:
you have a call to fancybox on the link with id=inline (you have two links with the same id, you should probably be using a class instead). the links with the id=inline are opening up their targets, which are div#contactus and div#contactus2. you are also calling fancybox on div#contactus and div#contactus2, which is causing those divs to open a fancybox.
see this fiddle.
it looks like this line:
$("#contactus2").fancybox({
'hideOnOverlayClick':false,
'hideOnContentClick': false
});
is causing a click on the div inside the fancybox to open ANOTHER fancybox inside. try removing that and clicking Houston to see if it works.
Related
I am using popup advertising in my website.So it basically opens ads when clicked inside body.
But I want to disable any popups when link with class donot is clicked.
Right now when below link is clicked , popup opens and the donot link wont work.
<a class="donot" href="http://google.com">link</a>
I want To disable all popup activities and open the link when class donot is clicked
I tried below
$(".donot").click(function(e) {
e.preventDefault();
});
I am unable to find anything in popupcode .Here is my adnetwork popup code http://jsfiddle.net/hsz2hyvw/
Here is demo of popup opening http://jsfiddle.net/hsz2hyvw/3/
Try this
$("body").click(function(e) {
if ($(e.target).hasClass('donot')) {
return false;
}
alert('d');
});
Working Demo Here
We have a baffling issue whereby when we try to open a modal dialog box from a parent page it opens with 2 vertical scrollbars next to each other. One controls the modal box, the other one controls the main page behind it.
To have 2 scrollbars is not ideal and have tried to implement a solution for this.
We added some javascript in the dialog box page which would set the style to overflow:hidden when the modal dialog is open.
<script>
function myOnLoad() {
window.parent.$('body').css('overflow', 'hidden');
}
and used....
<body onload="myOnLoad()">
This works and effectively removes the scrollbar in the page behind it (i.e it does what it should) however we also want to set the overflow back to ‘auto’ when the modal dialog is closed…
We have done this by adding this code..
<script type="text/javascript">
// close Modal
$("#close").click(function () {
window.parent.$('body').css('overflow', 'auto');
window.parent.$("iframe").attr('src', '');
window.parent.$(".modalDialog").removeClass('show');
});
However this does not seem to work as the modal dialog closes but the scrollbar is still hidden on the main page.
Can anyone tell me what I might be doing wrong here? I have tried different overflow properties but nothing seems to work
Ok try this, I think your page is reloading on click and thus executing your onload:
$("#close").click(function (e) {
e.preventDefault();
window.parent.$('body').css('overflow', 'auto');
window.parent.$("iframe").attr('src', '');
window.parent.$(".modalDialog").removeClass('show');
});
I think that using window.parent might be the problem since this refers to the parent of the iframe wich is gone. or something like that. just use jquery
you can try by just getting the body directly $("body"), asuming you are getting that click function to fire.
edit: i see this has been mentioned above
Add style to body as
body
{
padding-right:0px !important;
overflow-y:hidden !important;
}
i got page with multiple open/hide divs and the problem here is that everytime i try to click one to open or hide the screen jumps at the top of the page..
Anyone idea how to fix this? Javascript is used to hide divs.
Thanks!
$(function() {
$('a.hide').click(function() {
$(this).closest('.hideable').find('.hide-container').toggle();
});
$('a#hide-all').click(function() {
$('.hide-container').hide();
});
$('.hide-container').hide(); });
It sounds like you are using href="#", don't do that, build on things that work instead.
If you’re using an A tag to open close the DIV’s, it means that in Javascript you’ll need to disable the default action for the A tag.
In jquery for example:
$('a').click(function(e) {
e.preventDefault();
});
I've been trying to get this code to work. I have a hidden div that shows a flash video using the object/embed method.
This is the js code I'm using.
jQuery(document).ready(function(){
jQuery("a[id^='scrshot_']").fancybox(
{
'autoDimensions' : false,
'width' : 640,
'height' : 360
});
return false;});
I'm using this method I found on this site http://www.jdmweb.com/resources/fancy_videos and pretty easy to implement. I use dynamically created ID tags. BUT for some reason fancybox will open but the div inside stays hidden. When I use firebug to look at it, it shows the flash object inside but it still has the display:none attribute attached to it. How do you get it to show the contents inside that div and not the whole div? If the div is showing and use the link, fancybox open with the player fine. Obviously that wont work because I don't want the video to show until it launches in fancybox.
Example of my html code.
<a class='scrshot' id='scrshot_1' href='#showvid_1'>Click Here</a>
<div class='showvid' id='showvid_1'>my embedded code here</div>
Instead of hiding the div, make it visible but wrap it inside another div that is hidden.
(I don't know why fancybox doesn't toggle the visibility, rather annoying.)
try adding this to your jQuery(document).ready(function(){
jQuery('.scrshot').live('click',function(){
jQuery('.showvid').hide(); //hide any that might be open
jQuery(jQuery(this).attr('href')).show(); //show the div we clicked for
});
Have you looked at fancybox documentation/blog?
http://fancybox.net/blog (4. Show youtube clips. this must help);
http://fancybox.net/howto;
http://fancybox.net/api;
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');
};