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.
Related
I made the following component in Angular.
It's basically a kind of tree component.
Please note the following:
The tree has several branches.
It consists of nodes in alternating colors.
And the selected node is marked by a blue dot.
The tree does not fit the screen, that's why there's a horizontal scroll bar.
Each node has a unique id (i.e. <div id="...">)
This component works fine, however. I don't know how to add the following feature:
When the focus changes, (in other words, a different node becomes active), I want this node always to be visible on the screen. That means that the webbrowser has to scroll to the left or right, automatically whenever a node is selected. It has to scroll or jump until the specific <div> is visible.
How can this be done using javascript or typescript ?
EDIT:
I want to use this javascript is the base for better navigation tools.
button to move back and forth in the tree
button to jump 10 nodes to left/right.
button to jump to the back.
button to jump to the start.
Also when a new node is added to the back of the tree, right now the user has to scroll all the way to the right, manually. I want it to be visible immediatly, automatically.
Those are my real objectives :)
If the only scroll mechanism you need is the automatic one, I would avoid trying to use the browser's built in scrolling mechanism altogether and just use ElementRef of the node to get its horizontal position relative to its container, and then apply a CSS 'translate' to move it as needed. It will be much easier this way to have it look "nice" with CSS transitions and animations. But if you would still need manual scroll behavior (i.e, the user still needs to be able to scroll with a scrollbar) youd have to program a scrollbar directive / solution as well, which may end up being more effort than the problem demands.
This page has a sort of hacky workaround for horizontal scrolling - https://css-tricks.com/pure-css-horizontal-scrolling/
The problem for me in the past with 'scrollTop' and 'scrollLeft' is you can't apply transitions to those attributes, so they end up looking very jerky without implementing custom easing functions in javascript.
This is a bit too tricky for my jQuery / javascript knowledge so i'm sorry to say i haven't really tried anything yet. I need some hints to get pointed in the right direction!
The problem is that i have a fixed element on my page, and when scrolling down this element will enter different wrappers, and while in that wrapper i need a smaller child element to "snap" to my fixed element and while it's in the element.
Kind of hard to explain, i made a static mockup here:
http://jsfiddle.net/ycmYc/
When "fixed cart button" reaches a price, i need it to attach and scroll with the cart button as long as it's inside the prices "product-div". When it leaves and enters the next the price should stay in the bottom of it's product and then snap to the cart-button again when the users is reaching it by scrolling up.
Well, again, sorry for not having tried anything but i am lost. If i had to do this without any help i think i'd go with waypoints.js but it feels far from optimal.
Any help MUCH APPRECIATED!
The fixed element will always have the same position, so i guess offset from the browser top could be used instead of keeping track of it's position. Always something ;)
Update:
Been working on it myself, and got it working downwards but not upwards:
Should clarify what i mean:
http://retype.se/temp/scrolltest/test.html
When scrolling by the price, it joins the button downwards and snaps loose when leaving the container. My problem now is making it snap to it and scroll back to its original position when scrolling upwards :)
Do you want it like this?
http://jsfiddle.net/ycmYc/39/
only result: http://fiddle.jshell.net/ycmYc/39/show/light/
updated:
How about this?
http://jsfiddle.net/ycmYc/93/
only result: http://fiddle.jshell.net/ycmYc/93/show/light/
this is just a brainfart, but maybe it gets things going (sry, dont have time for a fiddle). But I got the idea, of maybe trying to cheat optically.
What I mean is, to calculate the absolute positions of all price divs, hide them, and when the cart div reaches that position by scrolling, show the price div for x amount of pixel scrolling (or via z-indexes by making backgrounds, not sure what suits you better).
Hope this helps a bit, maybe I get time today to script it out.
It kinda depends on the constraints. You can detect the scroll position of a window with:
window.pageYOffset or document.documentElement.scrollTop.
If the divs are all the same size you could easily calculate which div the button is over and the position: fixed the price next to it.
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 am using the jScrollPane jQuery-Plugin on a -Box which is dynamically filled with content.
My problem is that on adding new content to the front of the old content, the maintainPosition option does not work. So I wrote my own code that moves the Scrollhandle back to it's original position.
The code works fine, but calling reinitialise() after adding the new content moves the handle to the top of the container just before my code reverts it's position. This results in a short flicker of the displayed content which is very disturbing.
Does anyone know a method to prevent the scroll handler to move to the top after calling "reinitialise()"?
Because noone has answered this question yet I've created a jsFiddle with my problem:
http://jsfiddle.net/hB4hE/1/
the calculation done on the second prepend link seems to solve the problem.
But if you run it StepByStep you see that the scrollbar is moved to top first.
Because I prepend many elements in my real environment this jumpy behavior is often visible.
So do you have an idea how to prevent it from jumping?
I didn't find any integrated solution to this, so I created a workaround:
1. calculate height of prepending elements
2. prepeding new elements
3. instantly scrolling down a distance equal to the height of the new prepended elements
Try using this setting: maintainPosition then you don't have to reposition yourself.
More information: http://jscrollpane.kelvinluck.com/settings.html#maintainPosition
I have seen a feature on a site I would like to emulate. I have intermediate php skill but am a novice javascript user. The feature is the site content displayed in divs which can be moved around on the screen and their position saved using cookies. This site: [url]www.nowgamer.com[/url] is where I saw it (latest podcasts, videos, reviews etc with filter)
How would I go about achieving this through javscript? I want to know how to connect javascript with the cookie so that the positions of the square divs are saved, as are the preferences of the content filter on each div. How can I achieve this?
Would this be a big job? Thank you for any help, I am working independently on this in my spare time so your contribution with advice is my lifeline.
As Zoidberg commented, its easy with JQuery or Yui, or any other javascript library that provides drag & drop functionality. They are almost easy to configure, checking at demo they give. They also expose certain events like beforeDrag, afterDrag, onDrop, etc. where you can fire a simple js function check the elements' dropped position store it in cookies. For setting cookies, there are world of code on internet.
Also, you might want to check floating absolute/relative positioning css, if your DOM divs are going to be floating around the page.
GoodLuck.
simplyharsh has the proper answer, but I'd like to expand on it a bit:
The basics of a draggable div aren't too complicated. You attach an onclick handler to initiate the dragging. Internally, that's accomplished by changing the div's CSS so it's position: absolute. Then you start monitoring mouse movements (basically onmousemove) and changing the div's top and left according to the movements you've captured.
Dropping is a bit more complicated. You can always just release the mouse and leave the div wherever you ended up moving it, but that leaves it absolutely positioned and therefore outside of normal document flow. But dropping it "inside" some other element means a lot of prep work.
Because of how mouseover/mouseout/mouseenter events work, they WON'T work while you're dragging an element - you've got your draggable div under the mouse at all times, so there's no mouseenter/leave events being fired on the rest of the page. jquery/mootools and the like work around it letting you specify drop zones. The locations/sizes of these zones are precalculated and as you're dragging. Then, as you're dragging, the dragged object's position is compared to these precalculated drop zone locations for every move event. If you "enter" one of those zones, then internally the libraries fire their mouseenter/mouseleave/mouseover events to simulate an actual mouseenter/leave/over event having occured.
If you drop inside a zone, the div gets attached as a child of that zone. If you drop outside, then it will usually "snap back" to where it was when you initiated the drag.
Resizing is somewhat similar, except you're adjusting height and width instead of top and left.