Horizontal JS page scrolling on button click - javascript

I'm looking for pretty much the same navigation function that is used on http://mercertavern.com/ but without the scrollbar itself. I only want it to scroll when a menu item is clicked. Any simple code for this? Everything that is a clue in the right direction is appreciated. Thanks!

Related

Ideas About How Speed Up Page With Javascript

I've built that page. and it's using the framework vue.js 2 and Jquery.
It's blowing out my head because that page is very slow.
Could you expert guys help me with some idea about how to speed up it.
Thank Guys.
The page is that:
http://softwareapqp.com.br/teste/public/pecas/21/cronograma
you can click in "editar" button and in blue button which opens you can try to drap and drop it. You'll see how it's realy slow.
or, you can click in "Desenvolvimento Fornecedores" or "adicionar atividade" and see how the modal is slow to open.
Had a quick look, your right it's not a seamless experience. It doesn't look like a problem with JavaScript, this is more of a UI/UX problem. One thing stood out, you have a horizontal scroll inside a vertical scroll inside the vertical scroll of the page itself.
Maybe you can have panels with left right panning navigation arrows that asynchronouously loads content when the user clicks the arrows instead of scrollable windows. This way, you're only loading what the user can see and scrolling the page wouldn't be such a pain. Only load the data/HTML when it's useful, otherwise it's just bloating up your memory/DOM.

How to get navbar to appear on scroll?

Here's an example: https://www.waveapps.com/pro-network/
As you begin to scroll the nav-bar will disappear and then re-appear. How might I achieve something like this?
I am using Rails as my framework, along with Twitter Bootstrap.
Any help would be greatly appreciated.
Cheers!
You can set an event handler for the scroll event and use the scrollTop() function to get the current scroll position.
Here's a tutorial: http://www.sutanaryan.com/how-to-create-fixed-menu-when-scrolling-page-with-css-and-jquery/

Sidebar menu foldout on hover

I would like to add to my page a sidebar menu that looks like the one on http://feedly.com/#discover
The way it works is that when you hover the sidebar, the menu shows up. When the mouse is out of the sidebar, the menu hides.
As an extra (feedly does not have it) I'd like that the content is pushed to the right when the menu folds out.
Could anyone please tell me how that could be made?
I tried looking into their source or find something similar, but couldn't...
Any indication on where to start looking would be very much appreciated!
This tutorial and demo may be of some help.
http://tympanus.net/codrops/2013/08/28/transitions-for-off-canvas-navigations/
It has an example of the push out side menu. You'll have to change the events to be on mouseover and mouseout of the toggle button and the side menu itself.

Why is half my webpage unclickable when I am using a stick up nav menu and how do I fix it?

I have created a menu on my website that is suppose to stick to the top of the screen as you scroll down the page, It works perfectly, but there is one problem. I cannot click any were on the top 50% of the screen making the website unusable. http://streamportal.comuv.com/StreamPortal/Test.html this is a test copy (not the true site). can someone take a look at this and tell me what to do? If you need any more info from me please let me know.
This is what I a using to make the menu stay stick while scrolling, thanks to the help of gfrobenius, `http://jsfiddle.net/wHF97/
Remove this:
<div style="height:1000px"> //Remove the height
</div>
It's the div after id="cssmenu"

Scroll in selectyze plugin

In the jQuery plugin selectyze (https://github.com/alpixel/Selectyze) that replace the standard selectbox (dropdown) there is a smal "problem" thats kinda irritating and I hope somebody maybe have a solution.
Problem
When expand the list and then place the pointer to a option and scroll the list scroll to the bottom, then when continue scrolling the page start to scroll also.
Example
http://demos.myjqueryplugins.com/selectyze/
Expand a select-menu then scroll.
Code
https://github.com/alpixel/Selectyze
I hope anybody maybe know what to edit to make the scroll of page stop when scroll in the selectbox. Thanks!
I have done it using this and extending the Selectyze js events.
Lets try it:
http://jsbin.com/ododut/5/

Categories