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.
Related
Is there a relatively simple method for making the Bootstrap (v3) mobile menu to appear full height on screen (100%)?
It appears as though the menu will only overlay as much as the menu content that is within it (default behaviour in bootstrap.js). I just want to prevent users from scrolling/seeing the underlying page when they are viewing the mobile menu.
You could try this instead. I think it looks better than having a menu that takes the entire page and achieves the desired result.
https://jsfiddle.net/rjx3460f/4/
var mywindow = $('#window');
$('#navbar').on('show.bs.collapse', function(x) {
mywindow.css({visibility: 'hidden'});;
$('body').attr("scroll","no").attr("style", "overflow: hidden");
});
$('#navbar').on('hide.bs.collapse', function(x) {
mywindow.css({visibility: 'visible'});
$('body').attr("scroll","yes").attr("style", "");
});
The general idea is that you disable scroll on the page, and hide the content when the menu is open. Although you could just as easily just disable scroll. Or set the height of the menu to 100% when things open up.
Here is the menu taking up the entire thing. Very similar setup, but has a jumpy transition... I think you may need to create your own open transition to make it non jumpy, which is not impossible, but then no longer really bootstrap.
https://jsfiddle.net/rjx3460f/7/
#aduss's answer worked for me too but instead of assigning id's I used the bootstrap classes to target the menu,
var mywindow = $('body'), navbarCollap = $('.navbar-collapse');
navbarCollap.on('show.bs.collapse', function(x) {
mywindow.css({visibility: 'hidden'});
$('body').attr("scroll","no").attr("style", "overflow: hidden");
});
navbarCollap.on('hide.bs.collapse', function(x) {
mywindow.css({visibility: 'visible'});
$('body').attr("scroll","yes").attr("style", "");
});
I have a fixed sidebar and a fixed header with scrollable content in the main section of the page. The header is to be triggered on the scroll to hide the top portion of itself on scroll down and then show itself on scroll up. The sidebar can be triggered to hide and show itself with a button. When this happens the header gains back the full width of the page until the button is pressed to bring back the sidebar. The page loads with the sidebar opened.
So far I've been able to get the sidebar to transition off and back on the page properly. I also have the header working as intended on page load. However the issue I'm having is with the transition, more so recognizing the changed classes when the sidebar closes. I believe my issue is with the scroll javascript not recognizing the sidebar is closed because when scrolling it applies the classes to the header for when the sidebar is open. To test this I added a class called SEEME123 which never shows.
Below is the javascript for scrolling changes.
var exploreOpen = $('#explore').hasClass('open');
var exploreClosed = $('#explore').hasClass('closed');
$(function () {
var position = $(window).scrollTop();
if (exploreOpen) {
$(window).scroll(function () {
var scroll = $(window).scrollTop();
if (scroll > position) {
$('#wrapper-site-header').removeClass('explore-open--header-full');
$('#wrapper-site-header').addClass('explore-open--header-reduced');
} else {
$('#wrapper-site-header').addClass('explore-open--header-full');
$('#wrapper-site-header').removeClass('explore-open--header-reduced');
}
position = scroll;
});
} if (exploreClosed) {
$(window).scroll(function () {
var scroll = $(window).scrollTop();
if (scroll > position) {
$('#wrapper-site-header').removeClass('explore-closed--header-full');
$('#wrapper-site-header').addClass('explore-closed--header-reduced');
$('#wrapper-site-header').addClass('SEEME123');
} else {
$('#wrapper-site-header').addClass('explore-closed--header-full');
$('#wrapper-site-header').removeClass('explore-closed--header-reduced');
}
position = scroll;
});
} else {}
});
The javascript for the sidebar function toggles the open and closed classes on the sidebar, along with removing or adding the appropriate header class.
I don't understand why this isn't working as intended and would like to know how to resolve the issue. I've searched around attempting to understand where I screwed up, or to find an example where the scroll function does X because of Y. I've also attempted the above without variables (ie..
$(function () {
var position = $(window).scrollTop();
if (('#explore').hasClass('open')) {
), and as separate functions.
Anyway, here is a jsfiddle in case I missed something. https://jsfiddle.net/at0yxo0m/
Thank you all for your help and advice.
EDIT: Additional information.
I do have an earlier version of this layout where the scroll function only changes the header area that works with closing the sidebar. However the animations were clunky in general, and worse on mobile. Also to get everything to work right I had to wrap elements more than I thought was needed. So it was my goal to streamline as much as I could while getting the desired result.
I'm having issue specifically in chrome (52.0.2743.116, havent tried other versions) where after closing any of the dialogs in CKEditor or TinyMCE inline modes (link, table, colour picker etc) the page will scroll back to the top. This behaviour doesn't occur in Firefox, and I haven't tried IE.
The problem should be able to be reproduced in the ckeditor example here. To reproduce, select one of the long columns at the bottom, and scroll down such that the top of the div is a fair bit offscreen. Now click the Link button and press cancel, the page should snap to the top of the div.
Any ideas on how to fix this, whether it be a JS hack or just a simple configuration?
Thanks.
Next hack will help, just add to /CKEditor/config.js
CKEDITOR.on('instanceReady', function(ev) {
ev.editor.on('dialogHide', function() {
let height = (window.pageYOffset || document.documentElement.scrollTop);
window.setTimeout(function() { window.scroll(0, height); }, 0);
})
});
I'm currently developing a website that that has a fixed banner div that is centered, and I'm using the jQuery below to ensure that it scrolls correctly even though it is a fixed positioned div.
jQuery:
$(window).scroll(function() {
$('#top-content').css('left', -$(this).scrollLeft() + "px");
});
However, I have come across an issue within IE(version 9). The issue is that when the user scrolls the website (creating a minus left margin on the "top-content" div, to give the effect of scrolling) and then if they maximize the webpage, the left margin is still present causing the div to not be centered.
I have attempted to remedy this with the jQuery below, but as of yet no luck
$(window).resize(function() {
if ($("#top-content").width() < $(window).width()) {
$('#top-content').css('left:0px');
}
});
Any ideas?
You better do
$('#top-content').css('left', '0px');
In your resize event.
I have some CSS-driven parallax scrolling on my site, and I would also like to have a fixed top navigation bar appear when the user begins to scroll down the page. Currently, the nav bar only appears after you have scrolled PAST the end of the window (and disappears again when the window has "rubber banded" back into position). I'm using Chrome v38 on a Macbook. It looks like the overflow-x in my CSS is causing the scroll not to register/fire, but that's necessary for the parallax effect. Any help would be appreciated. Thanks.
CodePen example: http://codepen.io/anon/pen/jEPqYL (doesn't work exactly like in a browser, but that is my current code.)
My JS is:
(function($) {
$(document).ready(function() {
$(window).scroll(function() {
if ($(this).scrollTop() > 0) {
$('#header').fadeIn(500);
} else {
$('#header').fadeOut(500);
}
});
});
})(jQuery);