Our current scenario is a web page (created by us) displayed within an iframe in someone elses website. The iframe contains a kendo panelbar, and as you expand items, you can scroll further and further down the page as the height of the content increases. A button can be clicked to open a bootstrap modal, but if you are scrolled down the page then the modal appears at the top, sometimes completely out of view. You can see that it has opened because the background darkens slightly, as expected, but you have to scroll up the page in order to view the modal. It only seems to be a problem on ios, and does seem to happen in both safari and chrome. We have tested it on ios 10.3.3.
Here is a picture of the bug in action:
The iframe is as follows:
<iframe src="..." width="100%" height="500" frameborder="0" marginheight="0" marginwidth="0">
I have tried manually scrolling the modal into view, but it doesn't seem to work as expected inside the iframe. The function I am using to try and scroll the modal into view is as follows:
(function ($) {
$.fn.scrollTo = function () {
$('html, body').animate({
scrollTop: $(this).offset().top + 'px'
}, 'normal');
return this; // for chaining...
}
})(jQuery);
This is triggered by the 'shown' event for the modal:
$("#contactUs_modal").on('shown.bs.modal', function (e) {
$("contactUs_modal").scrollTo();
$("#name").focus();
});
I have also tried scrollIntoView, scrollTop etc. with no luck, and $(window).scrollTop(0); scrolls the background to the top, not the modal.
Any suggestions would be much appreciated, I've pretty much run out of ideas.
It looks like a bootstrap modal scrolling issue rather than an iFrame issue.
Related
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
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.
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?
i have a long scrolling page with lots of divs, one below the other. i would like to scroll automatically when you visit (or reload) the site to scroll from top to a specific div near of the bottom. to jump there isnt a problem, but i want the "scroll" effect. ive checked out scrollTo() but i dont get it to work.
my first attempt was something like
$(document).ready(function () {
$.scrollTo('#div5'); });
but it doesnt fire anything. a little bit help needed :)
thanks
Try this:
$('html, body').animate({
scrollTop: $('#div5').offset().top
}, 500);
http://jsfiddle.net/nTwLm/2/
I have an HTML file with an element inside it with id="start_section".
I want that when the page loads it will scroll down to this element so i added the following scrip:
jQuery(document).ready(function()
{
// scroll 20px above this div
jQuery('html, body').animate({ scrollTop: (jQuery('#start_section').offset().top)-20 }, 800);
});
Now, it's working just perfect on the first time the page is loaded.
But, As soon as the Activity is recreated for some reason, like orientation change, something weird happens: The page is reloaded, and then instead of scrolling down to the specific element, it is scrolling all the way to the bottom of the page.
I tried to disable the cache but it didn't help.
Any Ideas?
Try to just use "jQuery('body')" instead of "jQuery('html, body')"