I modified this code from another project. I want a slider that goes both directions. I did not want to siled all panels at once. Like I see a lot of sliders do. I wanted the content to show in kind of an “in-demand” once requested way. This being one of my first jQuery projects, I figured I would learn, so I tried it out. I seem to get pretty much what I wanted. The place I am stuck with is this. I cannot seem to get out of the IF statement context in the sliderMultipanel function. I need this, so I can determine the direction the animation should flow in, based on the click. I have read a lot and learned some about bubbling and (stopping) propagation, but I don’t know if I am going down the correct path. The IF statement seems to keep on starting the counting over. This makes for unexpected results. So what gets evaluated by the IF is only sometime correct, also it does random weird behavior. However, it is correct if its context is outside of the IF or click function (see lines 66-73). Can some show a way this can be done? To be clear I want to properly determine the number of the nav button click so the slider can go in the requested direction. Thanks
CodePen of project
if ( (mySlider.panelCompare + 1) < mySlider.currentPanel || !mySlider.panelCompare...
Related
I was hoping to get pointed in the right direction to start a build I'm attempting. Just getting used to jQuery and not really sure what I'm looking for exactly - hopefully my description below should explain it accurately.
I'm looking to build a slider or counter of sorts, with each slide being two sets of coordinates (ie 22°33'N and 44°55'E) and when the user clicks on a navigation button the coordinates scrolls through to the next set (ie 66°77'N and 88°99'E) perhaps jumbling the numbers as the transition happens.
Now I'm aware this might be a very rudimental question so please excuse my ignorance.
Any help would be highly appreciated!
I am having a slight issue with using dragabilly in angular, the problem is odd because it was working until I made some changes to how the content using packery is loaded in, specifically adding a level of nested repeats. When I do this, packery still runs correctly, however it seems dragabilly only runs on the first object.
The html looks like -
<div class="item gs-w" ng-class="widget.size" ng-repeat="widget in contentHere" packery-angular >
<!-- nested repeat -->
<div ng-repeat="side in widget.sides" ng-show="side.active">
So it's just a nested repeat where packery runs off of the outer items, and again, the packery element works fine. It broke when I Added in the nested repeat - these objects have multiple faces which I hide with that side.acive you see there, however the drag handle is inside the nested repeat and I think this may be the problem, or perhaps the nested is taking a bit longer to load in and it doesn't recognize the handle in time? I'm not too sure and that's where I could use some direction.
Here is the directive - http://jsfiddle.net/yq4zwLzs/ . The only thing I added to it was that mobile UA check to try and turn off dragabilly on mobile devices because it's unnecessary at that point. I Tried taking that off it doesn't seem to effect anything.
Here is a plunker of it in action -
http://plnkr.co/edit/HSVztH3vlf5VI1lf1tFR?p=preview
Forgive the ugliness - but if you look, you can move around the top item, but not the bottom item. That is where I am stuck and I cannot seem to figure out how or why this is happening. You can drag the items by the .handle (title element). I would appreciate any help as I seem to be stuck here.
Thanks for reading!
Update
It seems even if I put the .handle outside of the inner repeat, it still has the same problem. Perhaps it has to do with the order the inner repeat and the angulary packery run?
Update 2
It appears the drag handle logic is not working at all, you can drag by anything, not just .handle
Update 3
I am almost certain this has to do with the nested ng-repeat (perhaps it interacting in conjunction with how the directive runs on the object), because no matter what I try, as long as I have the nested repeat, I have the same issue. If I pull it off it goes back to working as normal, however It will be hard to achieve my desired goal without it :(.
Also - if i turn
var draggable2 = new Draggabilly(element[0], {handle: '.handle'} );
into
var draggable2 = new Draggabilly(element[0] );
It works fine. I need a drag handle though, as there will be content inside these divs the user will interact with, and I don't want the div moving around when they are clicking around inside it. Maybe if there is a way to initiate dragabilly a little bit later?
Looks like it might be a digest issue, as if you stick the Draggabilly creation in a $timeout it works as expected
if(!isMobile()){
$timeout(function(){
var draggable2 = new Draggabilly(element[0], {handle: '.handle'} );
$rootScope.packery.bindDraggabillyEvents(draggable2);
})
}
http://plnkr.co/edit/qxv1VWPHZEKX3pVHgBi2?p=preview
One thing of note i noticed whilst fiddling around with it, is if you use a different option than handle, for example { axis: 'x'} then it works without the need for the $timeout.
I find my problem a little bit difficult to ask about, because I don't know how to explain it or how to even start searching for an answer. I will try here because I'm really stuck and I know Stack Overflow always helps me find a way to keep going and learning. See if someone can open my eyes.
What I'm looking forward to is to achieve a similar effect as the navigation in uzik's page: (see the grey banner at the bottom? well, that). So, yes, I know how to overlap two divs and just slide one or the other on top using jQuery. In fact, there's this demo that shows how to do that and more beautifully (very interesting link to keep ;) ).
But my problem is something else. Notice that when you click on the slider that will overlap the main content, the url changes. That's what I would like to achieve and I don't know if both divs (main content and overlapping content) are on the same page and the url is being changed using some js; or if the overlapping div is, in fact loaded from an external source.
In my case, I would like to load from an external page. Say, for instance, someurl.com and someurl.com/blog. The aim is, having both preloaded (I guess) to slide one on top of the other.
Is this even possible? I would like to think it is. I can follow js and jQuery instructions more or less, but need some guidance as to where to start off searching info, specifically on the loading content from some other url part.
Any tip is appreciated.
Kind regards, Bea.
I've been trying to make a row-marking script to help me read text online. When I read books I always use a ruler or paper. Online, I don't have this option and usually get lost in text.
W - move div up
S - move div down
JS fiddle for my current effort (S = down, W = up)
The best thing I could come up with is to have equal row height for all text-elements, but makes styling quite hard. Also, I would like to be able to run it in the console to enable it on any website (or install it as a add-on).
Is there some better way to design a tool like this, that makes it more capable and adaptive to unknown content?
I can of course select text and I do that a lot. Usually, it results in me selecting only some words-> attention goes to that word, which is kind of what I want to avoid.
I could also use a secondary window, which I do sometimes. But it's a bit wobbly and as soon as you click it disappears.
A div that follows mouse-pointer is a possibility, but it's too shaky and feels like something got stuck on your finger.
EDIT: I updated the fiddle with the changes. I kept the javascript because without it you won't be able to move the ruler to the lower parts of the text.
Updated reading-ruler
Instead of JavaScript you could set a position: fixed for the .ruler. It will stay in the same place all the time so you can read the text with the .ruler element below it.
Here is the jsFiddle. http://jsfiddle.net/RxDpP/1/
I am currently trying to code my own JS drag and drop script (out of sheer curiosity and boredom, I know it would be much easier with a framework). My aim is a fully working Firefox3 version , IE can wait for now.
I just got stuck on a weird bug. When I drag the div for the first time, it works ok. When I drag it for the second time, it does not stick after releasing the button and I have to click once more to get it down. Third and consequent drags work flawlessly again (!?!).
Please see [the original page][1] (as I said, FireFox only for now) for an idea of what happens. The whole thing is done as a div with two events (onmousedown and onmouseup) using document.captureEvents(Event.MOUSEMOVE) for the intermediate movement. The script can be found [here][2] (disregard the bottom ajax part, it is prepared for some additional tricks and the bug stays if I take it out).
Please let me know if you have encountered something similar in the past or if you see a mistake somewhere. I know there may be better ways to go around the whole thing but I am specifically looking for a way to make my approach work.
EDIT: Chrome and Safari work.
EDIT: Taking the links offline, working on new version.
Well first up this works for me in FF3 if that's what you're asking.
This isn't going to be what you want to hear, but I strongly recommend you pick up a DnD method from mootools or jquery or similar. Just from an efficiency standpoint, DnD is a horrible thing to code up (done it a few times myself) and if you're not capable (no offence meant here) of resolving the numerous bugs that come up it's just going to be a huge drain of your time compared to just going with a robust mature implementation off the shelf. It is a hard thing to do.
If you do what to continue with your own code (as an exercise or out of pride - I can appreciate that :) ) this kind of problem is typically the result of either an event not being captured where you think it is because some other event got in the way first, a flag not being set where you think it is, or (or because of) an error which breaks out of your code at an unexpected point. Try and trace logically what's happening by logging out the event triggers.
If you could define how it wasn't working in more detail I might be able to trace it further (since I seemingly can't replicate), but I do suggest you explore the benefits of a solid library.