I am trying to automatically scroll to a anchor when opening a fancybox iframe like so: www.example.com/posts#header.
It kinda works but it scrolls to the wrong position, either too far up or way too far down (mostly way too far down).
I tried using the jQuery ScrollTo plugin but it also scrolls to the wrong position and additionally "pops out" the page from the fancybox to the whole window.
Would be thankful for any tips on how to get this working!
Related
I am using Gatsby for the first time and I have started with the Cara starter template.
I have added a link to the hero that would scroll to the next sections (projects) when clicked.
The link does take you to the next section, however the scroll bar remains scrolled all the way to the top of the bar. Meaning that you cannot scroll back up the page. (Strangely now when you scroll to the bottom of the page, the footer is not aligned with the bottom of the page, but you can now scroll all the way back to the top of the page again.)
I tried using various techniques; a standard anchor tag referencing an id, using gatsby-plugin-smoothscroll to scrollTo() the element, and all have this same end result.
I'm not sure what is causing this behaviour, but maybe it is something to do with the layout or some conflicting scrolling or offsetting. I would appreciate any help to get me back on track.
I have hosted what I have done so far, so that you can see the issue I am having:
https://portfoliositemain36740.gatsbyjs.io/
This issue happens only in iOS 8 (8.1 to be exact). It does not reproduce in iOS 7.
The use-case: Scrolling inside an element with scrollable (long) content.
If the page is not zoomed-in - it works as expected.
When you zoom-in the page - it stops working, the page is scrolled instead (as if you reached the end of the scrollable content). The effect is continuous: the higher the zoom - it's less possible to scroll the content.
Test page: here
Open the link in your iOS 8 Safari - see that the list element is scrollable.
Now zoom-in the page and try to scroll the content of the list - the page is scrolled instead of the items inside the list.
I've placed the red markers so it will be easy to see that the page is scrolled.
I've tried different CSS rules and even JS to prevent the page from scrolling (that still does make the content of the element scroll).
Has anyone encountered this behaviour or has a suggestion how to fix it? I really don't want to implement content scrolling with JS.
Disabling the zoom on the page (with meta viewport) is not an option for me.
Hi guys I'm getting some strange behavior using Firefox with in combination with onMouseOver and onMouseOut - Events.
I got this code i.e:
<a href='examplelink' onmouseover='showPopup();' onmouseout='hidePopup();'>My example link</a>
This shows a popup onmouseover and hides it onmouseout. Fine in every other browser, except for Firefox.
The problem is, when I hover the link on the top of the link, everything seems to work. But when I hover the link on the lower third, the cursor changes all the time from mouse pointer to default cursor and the popup opens and hides and opens and hides and ...
Anyone here has this problem too?
Sounds like your showPopup shows the popup under the pointer, so that of course triggers a mouseout on the link, which hides the popup, so now the pointer is over the link again, triggering a mouseover, etc.
I am using TextArea tags in my web project, that shall never show scrollbars.
This can easily be accomplished using
TEXTAREA { overflow: hidden }
All browsers that I need (IE, FF, Chrome) hide the scrollbars, as intended.
However Internet Explorer and Chrome will scroll to the current cursor position anyway, while Firefox does not scroll anymore at all. You can move the cursor into the invisible area and type, but you will not see, what you are doing.
Can this be solved?
Regards,
Steffen
EDIT: Because I have not found the source of the problem and I would really like to solve this, I leave this question open. However I found a really bad workaround: We now use overflow: scroll on that TEXTAREA, put it into a DIV, measure the width and height of the horizonal and vertical scrollbars, increase the size of the TEXTAREA by that values and set overflow:hidden to the DIV effectivly clipping away the scrollbars. They get invisible to the user but Firefox still scrolls. Not nice but working.
As far as I can tell, Firefox is behaving as I'd expect given the semantics behind overflow:hidden.
That said, and having read your comments above, you can quite easily mimick the behaviour you want with a small bit of jQuery.
Here's the code I've written:
$('textarea').bind("focus keyup", function(){
var $current = $(this);
$current.scrollTop(
$current[0].scrollHeight - $current.height()
);
});
This will basically scroll the textarea to the bottom when you focus on it and as you type. It may need tweaking to account for edits being done further up in the content.
Here's a Working Demo
I'm building my first jQuery plugins. One is a tab-views switcher thing, and the other is a sliding pager thing. They can both be seen on this test page: http://test.benlwilliams.com/powerwash/
The problem I'm having is with the slider plugin called, blwslider(). The implementation can be found at the bottom of the test page.
I want to be able to have any number of sliders to be independent of one another. The slider on the top works perfectly, but the slider on the bottom will not animate the sliding.
The bottom slider has 2 pages, and starts on the first page. You can see by clicking on the arrows that they appear and disappear correctly, as if the page had turned, but no animation is actually happening to turn the page. What makes me really confused is that if I use Firebug and put some "stops" in the turnPage function, all the variables have the correct values. I can't find any reason why the page is not turning.
I also considered that maybe only the first appearance of a .blwslider() is working for some reason. But I already swapped the order of the two chuncks of slider code, and still the slider with the #slider2 chunck refuses to work.
All the code is visible with firebug, but let me know if I need to post something specific. Thanks!
So it turns out it has nothing to do with the plugin's implementation or structure, but rather a math problem when the slider has only two pages.