I am using TinyMCE 6 editor here. I have run into a problem that the menus picker not sticking to the menubar. It only happens when I have scrolled down the page, i.e. body.scrollTop > 0 .
Say, I have scrolled down the page a little and I click on the File item on the menu bar. The File menu will appear way below the menu bar (with a huge offset). Please image for reference.
I see that this problem doesn't only happen for menu, but anything that is "floating" on top of editor - for examples, the font size window and the colour picker window when I try to change text size/colour.
However, if I scroll the page to the very top, then the menus(and other "floating" boxes/windows) will appear at the right position.
I wonder if this is a bug or something I have mis-configured. Anyway I can fix this - may be by changing the tinymce.js? If not, are there any other options that I can avoid this problem? Perhaps, make the menu to appear "inline", like horizontally right below the menu bar or something like that to avoid "floating" of any boxes?
Related
I am coding with React and I am trying to make a horizontal scrollable menu at the top of my application. When I have scrolled and selected a tab, I want this to be animated such that it floats nicely to the middle of the visible menu. The current selected menu tab can be outside of the view (e.g. if I have scrolled horizontally far away from it).
So when I click Tab no. 4:
I want this to happen (that Tab no. 4 are smooth sliding to the center of the menu:
You can use some great plugins like this in order to achieve desired functionality
Can you direct me or give me some advice please on how to create a navigation bar (Angular 1, jQuery, css, etc) that behaves like Google Chrome bookmarks bar when the page is resized. Basically as the page size gets smaller a new button/symbol (>>) appears on the bar. Buttons from the right that cannot fit due to the smaller resolution move under the >> symbol. If you press the symbol a drop down appears with the hidden buttons. When the page reaches mobile resolution of course I will switch to mobile menu, but I need this step between the full menu and the mobile.
Google Chrome browser manages bookmarks bar view when you resize the page in a great way. If in Chrome you have a lot of bookmarks two arrows (>>) appear on the right side and when you make the window smaller more bookmarks hide under these arrows.
Thanks a lot for your help.
Making menu div overflow:auto would be simplest solution. Here's plunk for that
http://plnkr.co/edit/vAYTGgNnQtH1iE2vsIpS?p=preview
For your particular requirement, here is horizontal slider with arrows in the end to handle scroll
https://codepen.io/mahish/pen/RajmQw
I have a fixed header which has a button (menu icon) on it. Whenever I scroll down the header will show (as it’s fixed). When I click on the menu button the menu is then also in a fixed position on the right hand side. When I scroll down both header and menu show which is fine. THE PROBLEM is when I initially scroll down half way down the page AND THEN click on the menu button the menu (div) is at the top-when I scroll a bit then it displays. There's a delay in this. Do you know how I can get the menu to display regardless of where I am on the page (in terms of y position)????
Top is set as 100px for the menu in a class (as the headers height is 100px-so i want the menu to show under it) BUT obviously if I’m already half way down the page the menu still takes into account the top: 100px however, I want it to change because I’ve scrolled down so the top position value would be different.
Any help??
Taking a shot in the dark, I think your problem is where your fixed position checks are taking place - I.E, I'm guessing they're within the .scroll event of the window.
Before you scroll down, and you click on the menu button, it is set to display block in its initial position - which is correct, because you haven't scrolled down yet.
However, if you scroll down first, then display the menu - it's still going to display in it's initial position - because the check is in your .scroll event - which you haven't fired while the menu has been open.
Try applying the position check in the button logic too.
I'm working on a responsive website and want to make an overlay menu like on play.google.com.
My layer get's dynamicaly the height of the window to fill the screen from top to bottom and get's "position:fixed" to stay where it is.
I do "window.scroll(0,100)" to vanish the navigation bar. But when I try to scroll inside my menu by touch the whole page scrools up and shows the navition bar again. Then it's no longer possible to scroll the page. The result of this behavior is, that man menu is now to long and the bottom of the menu is no longer visible on the page.
On the google play website they used something that the navigation bar never vanishes and I think this could help to avoid my problem also, but I haven't found out how to do that, yet.
I hope someone of you has some experiance in that.
thanks in advance
Frank
My head is about to explode as I try to figure out the reason why my dropdown menu stops working as soon as the page jumps to an anchor. There is some JS involved in the jump, too, but the same problem existed even with a plain html anchor jump.
The page is at http://mincovlawyer.com/doc/euro-excellence
As you load the page, please hover over "The Law", "About" and "The Goodies" and see how the dropdown is supposed to operate.
Then click any of the links in the sidebox to the right, for example Alt. #1.
Then hover over the menu items again and observe that no dropdowns emerge anymore.
I would immensely appreciate any guidance in this regard.
The rollover breaks even if you just scroll down the page. The rollover menu is positioned absolute and the navigation is positioned fixed. You could add 'position:fixed' to your rollover menu or you could add the scroll offset in your drop down menu code.
To set 'position:fixed':
At line 8 of the anylinkmenu.css file, change the position:absolute to position:fixed.
It looks like they're working, but they are above the top of the page. Before clicking on any of the links, scroll down just a little bit. Then hover over "The Law" and you'll see your menu shifted vertically.
Now that's a lot of code...
Where's your menu created? The mouse-over stuff
Question1:
Why even using any javascript for an inline-anchor? Using #links scrolls to said position anyways, even without JS?!