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/
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 just need to display the images in the very center of the page. The images will be different widths but should still be centered. I have custom arrow pointers and I want the other images to be hidden while the other fades out and a new one in.
I've found jquery cycle and stuff but I couldn't center the slideshow to the center of the page for some strange reason.
Any advice?
What plugins can I alter (just replace images) to get what I want?
http://www.proglogic.com/learn/javascript/lesson10.php
not sure if you are still looking for this, as its been awhile since your post - but this is a very simple slideshow using javascript and a table. the image is displayed with "previous" and "next" links below, which can of course be changed to whatever you want. the only possible issue is that it uses html tables which are frowned upon (unless completely necessary). it is however, very easily center-able using css. good luck!
Checkout Anything Slider. That seems to be what you are looking for.
I'm working on an iTunes-like jQuery scroll based on this script.
My version is here and is either a lot or not much different depending on how you look at it.
I'm trying to get the items on the right to scroll giving an illusion of continuity. How would you go about doing that?
Just copy the elements (clone().appendTo(...)) and then when you reach one end, get half of the elements from the opposite side and attach them at the end.
I'm trying to recreate an effect in jQuery, where an element (<li> <img>) will be cycled and has a fading effect when hovered. The '<li>' contains '<img>' (image screenshots). When the mouse is on top of element it will keep cycling all that are in '<ul>' with a fading effect. When the mouse is away it will stop cycling the list. I also want to add a pager where you can navigate to the list.
My Existing Code:
link text
My Problem: the current code has some problem with the pagination, it added all images that can be seen on the code. Instead of 1-8 only, it continued to add another 1-8 and another.
Second problem is, It also start cycling and fading when the page loads. The cycling and fading should only be working when the mouse is on top of the element.
I don't know if the 'Cycle Plugin' (Plugin Home Page) is really required on this approach, I wan't it to be minimal as much as possible. I just use 'Cycle Plugin' because it's a quick answer to my problem.
Thanks and merry xmas!
Edits
remove and added a link
I could be wrong, I'm not familiar with this plugin, but it seems like you need an ID for each slideshow you have instead of using a class like you are.
I've setup a JSFiddle with your code and tweaked it. Below is how each slide should function.
starts on mouse over and stop on mouse out
changes on mouseover of the nav
changes when the nav is clicked
The link I gave you in the comments to your question should guide you to the available options for this plug-in. In case you missed it, here it is: plugin options