What I'm trying to achieve is basically have a code that will morph (move around the page) based on the part of the window which is currently viewed.
Scenario:
actual page height : 2000px
actual screen height( pc, laptop whatever ) : 800px
1 image of 600px
3 div's or virtual boxes ( just to prove what I want to do )
Workflow
When you open the page, you'd see the first part of the page with the image loaded in the first div.
What I want and need to achieve is when scrolling the page, and the focus would be on the second div (or the image simply gets out of focus - you can't see it no more),
the image would move (disappear from the first box) and appear in the second one, which is currently visible.
The idea might seem pretty easy but I'm not JavaScript savvy.
Ideally, the answer should include a way to load a JavaScript instead of that image.
The way you use the word focus can be misleading, as focus is a JS event that happens after an element is clicked. You need to get familiar with the jQuery scroll event and scrollTop. Here is similar Thread here in StackOverflow that you may want to read Jquery / Javascript find first visible element after scroll
Related
I have a rather large image (not my choice how it was given to me) I have a simple navigation structure and when I click on one of the links I want to be able to scroll to a certain point of the large jpg below the menu. It's one large image so using # isn't going to work. I assume this is going to need to be a javascript or jquery function, but I'm just how sure how to set that up. I've looked around but everything I found is for a slide show, where I just have one overly large image that I need to scroll down and up via a menu button. I tried having the a tag jump around the page, and that kind of worked, but it didn't scroll it just jumped.
I wish I had code to show, but nothing I have used worked.
You can use scrollTop property of element like body or any div to scroll at any position. see here created a pen for the same.
If you are going to animate the page scroll you will probably need to use jQuery's animate function.
$("html, body").animate({
scrollTop: 400 /*Desired offset position*/
}, 1000);
Take a look at this jsFiddle as an example.
You could also position anchors behind the image at the positions you need the page to scroll
See this jsFiddle
I'm using nanoscroller js to create a scrollable area in a div element. The problem is that I'm filling that div element with data with ajax (imagine facebook notifications). First there are 0 notifications, no data. Then I fill it with 10. The scrollbar isn't there. When I refresh the page (with 10 notifications now already there), it creates itself, because it knows there is more content than there is room.
How can I make it create the scroller when the data is filled?
Reinitialize the nanoScroller $("your scrollable").nanoScroller(); after you inserted the content...
like
$("your content div").append("something");
$("your scrollable container").nanoScroller();
#Jonatas Answer didn't work with me, then I figured out this one
$("#my_scrollable_container")[0].nanoscroller.reset();
I had a similar problem. My nano div originally fills the width of the screen and the amount of content does not require a scrollbar. But then a user action causes a second div to appear on the right side, making the nano div skinner and too small to display all the content -- but the scrollbar didn't appear (although I could still use the mouse wheel to scroll the nano content).
Neither of the answers provided worked for me, or maybe I applied them incorrectly. So I looked in the jquery.nanoscroller.js code (which I guess is what I should have done in the first place) and found the call is just:
$(".nano").nanoScroller();
No need to reference the div ID or anything. Each time the size of your nano div is changed, make this call and the nano scrollbar should adjust to fit. And if you have multiple nano divs in the page, this one call will reset all of them.
beware of use such a kinda :
$(".nano").nanoScroller();
cause if U have a lot of .nano DIV's and U Ajaxing data to ONE of them,
better use for example:
$("#FaceBookAjaxNotifi .nano").nanoScroller();
as Jonatas wrote..
(it boost performance dramatically in some situations)
I need a jQuery scroller to scroll my divs with auto scrolling facility. I am looking for something like jCarousel.
But there are limitations for this. What I want is one which;
1. Scrolls <div>s (or some html elements) and not just images. I may have something like the picture below, to scroll.
It is a text and image combination.
2. It should auto scroll contents
3. The slider should MARQUE continuously and should not rewind to beginning. The slider should not rewind (in the opposite direction) to go for first image/content after the last image/content.
What jcarousel is doing is in autoscroll mode, it shows a set of of images/contents at a time, stop for a while, and then immediately displays the next set. I don't want this and want to autoscroll contents smoothly in a loop. That is, first content should come after last content, in circular loop.
I can provide additional details. just post comments.
Anybody got what I am trying to say and what I want and suggest me a solution?
You can do this without a plugin with some fairly simple jQuery.
See an example here that I put together for another answer:
http://jsfiddle.net/6Dxg6/
Basically, the idea is you clone the contents of a wrapper, and then continually move the contents to the right/left the width of the original content and then reset. Works with any content.
That code even includes hover-stop functionality. Without that, the code is simpler still:
http://jsfiddle.net/qJZtp/1/
I'm creating a photo gallery website, and there are pages for browsing the photos, with a listing of thumbnails (yes just a regular photo site). The problem is that, I want thumbnails to fill up the available space (I know how to get that one). Actually, what I want to achieve is very similar to this: imagine you have a big number of (more than the screen area allows) thumbnails, and you have set overflow-y to hidden. The thumbs just fill up the space and it goes, off the screen. This would be what I wanted to have if the thumbs in the bottom didn't go off the screen. I need something more, let's say, "dynamic". I've got jQuery, but haven't been able to model the desired effect in my mind.
You should load the images dynamically as needed to improve performance. See the "Reduce the Number of DOM Elements" section in the Yahoo! Best Practices for Speeding Up Your Web Site. Use jQuery to check the size of the div in which you are rendering the images. Load just enough images to fill the div and then load more images on the fly as needed (on window resize or scroll). It is not clear to me exactly what you want to achieve so I can't be more specific than that.
Ok found the way into it anyway. I just load a big number of thumbs, set the overflow-y of the thumbs container to hidden, and by Javascript (actually jQuery), when I resize the window check if the thumbs top + height exceeds window's height. if it does, I simply hide that thumb, if it doesn't I simply show it. It works great!
Here is my current situation:
I have a web page containing a couple scrollable divs. Each of those divs contains a number of objects. I am using YUI to display popup menus of actions that can be performed on each object. Each object has its own menu associated with it that is constructed and displayed dynamically. The popup menus can be large and can overlap the bounds of the scrollable div.
From what I believe are issues with focus (the menus must be accessible), when I hover the mouse over an action that lies on top of an edge of the scrollable div, the div automatically scrolls, moving the content but leaving the menu stationary. Trying to move the menu dynamically when this happens is not something I want to do as I believe it would provide a poor user experience.
So I need to prevent this focused menu from scrolling the div. My idea for providing the best user interface is to prevent these inner divs from scrolling when a menu is open. This leaves the menu positioned in the optimal location to show the user which item is being acted upon. If the user wants to scroll the box, they can click to close the menu and then scroll normally.
How can I do this? I need a solution that works across the major browsers.
My first thought was to listen to the onscroll event for that particular element. Unfortunately, there does not seem to be an easy way from there to just prevent the scrolling from happening. For one, my JavaScript event code appears to execute after the actual scrolling has occurred.
Then, I thought that since my code is being run after the object has scrolled, I could just reset obj.scrollTop and obj.scrollLeft. Sure enough, this appears to work, though I am worried that on slow browsers the user will see the content inside the div "jump around". Also, it would be really nice if the amount the element scrolls is part of the event object. Is it stuck in there somewhere? I'm looking for an alternative to having to store the scrollTop and scrollLeft variables for this element and then using them while the scrolling is temporarily disabled.
What is the best way to solve this entire problem?
I agree with Anthony regarding the presentation of the functionality you're trying to disallow. If you're going to disable scrolling, then you should make that part of the page visually disabled or removed.
To that end, you can position a semi-transparent div on top of the scrollable div in question, which would capture the mouse events and visually show that the scrollable div is inactive for now. It would be hard to make cross-browser compatible and wouldn't be perfect, but then again very few client-side tricks like this are.
The simple answer is no you can't do this. Its doubly no if you want a cross-browser solution.
Providing the user with the clear affordance that something can be scrolled then denying them that is just plain poor UI design.
Ok so after your edit it turns out you are not actually trying to prevent the user from scrolling.
The main answer remains true though. It sounds as though the focus is going to rectangle (probably an anchor?) that is not fully in view and causes a scroll. Is there a reason this rectangle must get the focus? For accessibility?
What if you didn't have overflow: scroll and instead you used overflow: hidden and provided scroll up/down buttons that allowed the user to scroll when necessary? These buttons could of course be disabled easily.
Though it may not be the answer you are looking for, if you are to set the display value of the div to 'none' while the page loads (from the server) and then have an event wired to the page load (either pageLoad in ajax.net or attach it to the onload event via javascript) that will make the div display set to 'block' .. that would ensure that slower browsers wouldn't see the div 'jumping around' (could even put a 'loading' image in the div to show users it's doing something and not just invisible)
sorry i couldn't provide a more complex/fluent solution.
I found a way to work around this issue. By removing the menu element from the scrollable div and then appending it directly to document.body, the browsers all stop trying to scroll the div to reveal the focused element (even though the element is already completely visible).
Thanks to all for your time and your answers!