Position Fancybox 2 to the Top of Viewport - javascript

I am using Fancybox 2. I would like it positioned to the top of the viewport.
I tried the following code:
$(".fancybox").fancybox({
topRatio:0
});
This positions fancybox to the top of the page, not the viewport. This works if a person isn't scrolling down the page, however, when a person starts to scroll down the page fancybox is out of the screen.
Screenshot of Fancybox when scrolled:
I have Fancybox in an iframe and wonder if that may be part of the problem?
How do I get Fancybox to always stay within the viewport?
UPDATE
In attempting to get this to work it would be best if it opens outside of the iFrame. I attempted the following code:
$( ".fancybox" ).click(function(e){
parent.$.fancybox({
href: this.href
});
return false;
});
and
$( ".fancybox" ).click(function(){
parent.$.fancybox();
return false;
});
In both cases it doesn't work and there are no errors.
How do I get this to work?

Related

Trigger 2 events on href? Scroll to top, then load

I have a question, I would like to trigger a specific event in javascript or jquery on a webpage. The page has an animation effect during page loads (the screen and content splits in two and slides open revealing the next content). This works fine when the content on the page fits and doesn't need to be scrolled. However when content needs to be scrolled, the effect doesn't look as good. Is there anyway to trigger an href to scroll back to the top of the page and THEN load the href link/target? In basic terms something like "on click scroll to top and then load link" Any help would be great! Thanks
One could use jquerys animate to scroll to the top, then if that finished redirect:
$("a").click(function() {
$("html, body").animate({ scrollTop: 0 }, "slow", ()=> location.href = this.href );
return false;
});
try it

Content is overlapping with Menu

Create a html page for mobile some part of content is showing on Menu bar.
Only the bottom content is showing on menu bar how to avoid it ?
and also I want to disable scroll-bar when menu button is clicked & enable when content is touched using Mobile.
I tried below code but its disabliling but not enabling scrollbar when content screen is clicked on mobile :(
My Javascript :
$(document).ready(function() {
scrollTopPos = $( document ).scrollTop();
allowScrolling = true;
$(document).scroll(function() {
if(allowScrolling === false) {
$( document ).scrollTop( scrollTopPos );
} else {
}
});
$( "#mobile-toggle" ).click(function() {
$('body,html').css('overflow', 'hidden');
$("#divCls").css('display','None')
});
$(document).on('touchmove', function(e) {
e.preventDefault();
showDiv()
});
});
function showDiv() {
document.getElementById('divCls').style.display = "block";
}
It's hard to tell without the full code, but in terms of keeping the menu at the front you can just use CSS to se the Z-index of the DIV. In terms of the scroll, add a CSS rule trigger within your JavaScript to set Overflow to Hidden then set it back to scroll when you click the close button.
Also, if only parts are spilling over then be weary of the page size, if you're using a slide in menu that is hidden to the side then slides the whole page over, then mobile users can swipe it shut but the open button will not work unless you use the jquery swipe functionality so again, the z index and a bit of doodling with the script to make the menu sit over the page would fix this. Again, more script would be handy :P

Fancybox inline popup on mobile not moving with page scroll

I am working on this website:
http://www.fairfaxandroberts.com.au/
And I am using fancybox for inline popup:
http://fancyapps.com/fancybox/
When you visit the site you can see the popup that is shown down below the instagram feed when you scroll.
On desktop and larger version it is working well, but on mobile versions the popup is shown when you scroll below insta feed, but it stays on the position where it is shown, it doesn't move with the page scroll behind.
The jQuery code I use to display Fancybox is this:
$(window).scroll(function() {
var y = $(window).scrollTop();
var insta_feed_top = $("#slide-55").offset().top;
if (y > insta_feed_top) {
$(window).off('scroll');
$(".fancybox_newsletter")
.fancybox({
helpers: {
overlay: {
locked: false
}
}
}).trigger('click');
}
});
What can be the issue guys? I tried a lot, saw the documentation on the site, but nothing works.
[SOLUTION]
Guys after debugging on the mobile, I found that the position was changing on absolute for mobile devices. I just changed the position to be fixed, added some top and left margin and everything looks perfect.
Thanks again.

iframe scrollbars during resize of fancybox 2

I set up a fancybox to load a form as an iframe. Fancybox autosizes depending on the size of the iframe content. This works well. But if I send the form now and have errors the iframe content get higher so the fancybox has to resize which happens.
But during resize I see ugly scrollbars till the lightbox has resized to match the new content.
Is there any possbility to adjust fancybox without having scrollbars during that? Probably a css property overflow: hidden; at the right events right in time could do the trick?
My setup of fancybox is very basic
$(".popup").fancybox({
type: 'iframe',
padding: 0
});
The solutions is this:
I was reading trough the documentation of FancyBox 2 and I adjusted my settings to:
$(".popup").fancybox({
type: 'iframe',
padding: 0,
iframe: {
scrolling : 'no'
}
});
This hides scrollbar. But the resize happens to late. It takes about 1 second after display of new content until fancybox resizes to the new content dimensions in the iframe.
If the site which is loaded in the iframe is owned by yourself. You can add the following jquery Code into the <body> of the page loaded in the fancybox iframe:
<script>
(function() {
parent.$('.fancybox-inner').height($('body').innerHeight());
parent.$.fancybox.reposition();
})();
</script>
Fancybox resizes now immediately after content is loaded.
Not sure about your exact case but adding
function myFunc(){
$(".fancybox-iframe").attr("scrolling", "no");
}
should remove the scrollbar from the iframe once and for all.
You can add this as a call back function for the fancybox.
'callBackOnShow': myFunc()

Scroll to Specific Div not working in Fancy box Popup

I have a Fancy Box Popup , it has a long page which scrolls, but I want it to scroll up to the header Div on top of that popup when i click on Go to top button. How can i force it to scroll.
Here is my code for scrolling :
<script>
$('#goTop').click(function (){
$('html, body').animate({scrollTop:$(".wrap").offset().top}, 750);
return false;
});
</script>
Why is it not scrolling, there are no errors in console , plus i have used the code on normal page , it works there . but it doesnot works in fancy box. Any solution ?
Here is the Image of my Popup :
You need to scroll the actual modal window, not the document's <body>.
$('#goTop').click(function (){
$(this).closest('.fancybox-inner').animate({scrollTop: 0}, 750);
return false;
});
Where fancybox-inner is the class given to the fancybox which has a fixed height and CSS overflow-y: scroll.
$('.fancybox-overlay').animate({
scrollTop: $('.fancybox-overlay').scrollTop() + $("#div").offset().top
});

Categories

Resources