AJAX Horizontal Scrolling with scrollbar - javascript

I need to create something like this site, I found many jQuery infinite scrolling scripts that allow you to load contents using AJAX while you're scrolling. What I need is very similar, except I want it to be horizontal and I want to set the size of the scroll bar according to the amount of contents I have. If you check out this website you'll see that you can jump from page one to page lets say 3 without loading the second page. Any idea how they do that ? their scroll bar is draggable too ! This is exactly what I need but don't know how. Any help is appreciated.

jQuery lazyload works with horizontal scrolling too.
Look at this example that I created here.
The site you are linking to is not a "horizontal scrolling" page. That's actually pagination not scrolling. If you want to do pagination then you don't need any plug in at all. Just call your AJAX when page or tab link clicked.

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.

Topbar covering webpage header

I'm making a website and want a navigation bar that stays at the top of the screen. I can do this fine but when I scroll to top it goes above header. How do I get it to stop scrolling with the user before the top of the page? I have watched countless tutorials but none seem to work. I think I need JavaScript to unstick the bar at a certain height, but unsure how. Also how do I restick it when the user scrolls back down?
Yes, you will need JavaScript to handle this. It is not too complicated, but you will basically need to add an event handler for the scroll event on the window, and inside the handler you can check the scrollTop of the window to see how much has been scrolled. When it has been scrolled "enough" (usually the height of your header) you can then switch the position of the header to fixed.
You can see a demo about it on the excellent CSS Tricks, and there are many tutorials and plugins that can help with this.
Yes, as danwellman said, you need js.
I have a small code I used in my webpage.
// Highlight the top nav as scrolling occurs
$('body').scrollspy({
target: '.navbar-fixed-top',
offset: 51
});
You need a file like "scrolling-nav.js" or anything you prefer. And in your html, don't forget to call it.
// In the end or in the beggining you call your js file
<script src="...(filepath)/scrolling-nav.js"></script>
There are many more cool possible snippets you can find. This is really to keep the navbar fixed after the offset of '51'. You can also add the smoothed movement to the webpage section after selecting a menu button.. If you have a onepage website, for example. This would also be js.
Good luck. :)

Sticky Navgiation Problems

I was wondering if you could help.
I am currently putting together a site that requires a parallax scroll and sticky navigation.
The navigation must start below image 1 (Blue) and then stick to the top in a fixed format after you've scrolled past image 1(blue).
I have tried many options and at present, I have got the navigation to stick to the top and then reappear once image1 (Blue) has been passed - but it starts at the top.
I have tried some jQuery plugins and they have not worked, could it be the way I have got my script formatted? As some is embedded directly into the page and not an external file?
Here is my link: http://bella-web.co.uk/sticky-nav/
and would love some feedback as to how I am going to get this to work.
Thanks in advance,
Ben.
You should be able to add navigation menu that starts in the middle of the page and sticks when it reaches the top using the jQuery plugin jQuery Waypoints, the plugin doesn't just work out of the box, so please read the docs.

jQuery - Continuously scroll div on hover

I wish to build a shelf of content much like on Netflix where when you hover over arrows on either end the shelf scrolls at a continuous speed. Ideally, I would also like to make it so when you click the arrows it scrolls a chunk along, so you have the option to click like made to get through a shelf quickly.
This will be using lazy loading so you don't need to worry about repeating content, but obviously it won't have a set width (other then the outside container being 100% with overflow scroll.
Also, this needs to be actually scrollable, so it will work on tablets/phones.
I have no idea here to start so any directions would be great.
Thanks,
Jake!
Image of netflix shelf.
UPDATE: Check out the Smooth Div Scroll jQuery plugin. It slides continuously through the image, you can hover the mouse on the div and manually scroll back- and forward.
Original answer:
I might be off with that, but check out these two plugins:
jQuery Coverflow plugin or the jQuery Imageflow plugin
I think the keyword you are looking for is "flow" and there are multiple flow plugins for jQuery. Hope this helps.
Best regards,
Michael

How to keep on adding/showing items on my page while scrolling the vertical bar

Thanks a lot for all ur supports...Now I've a problem to resolve..I want to scroll the vertical bar and show the items in the page to appear as the scroll will go down(the way it happens in facebook page..It keeps on adding lists,items,comments,images as u keep on dragging the vertical scroll bar down)...Right now I don't have any code segment to use..and I've least idea regarding this..Please help me out..Preferable language/script could be asp.net,html,javascript,css,C# as I don't have any knowledge on PHP and MySQL..
This is called infinite or continuous scrolling, and it's mostly done in combination with jQuery.You can find some links below - though i couldn't find a working demo (and i know nothing about asp.net).
http://www.eggheadcafe.com/tutorials/asp-net/b8381915-06d9-4538-b4bb-5ac2a8e73f34/implementing-continuous-scrolling-ui-pattern-in-aspnet.aspx
http://weedallaboutit.wordpress.com/2011/10/13/infinite-scrolling-with-an-asp-net-webform-jquery-and-a-little-bit-of-code/
http://studentguru.gr/b/xinarisc/archive/2011/05/29/infinite-scrolling-with-jquery-amp-asp-net.aspx

Categories