Build a jQuery counter with onclick event? - javascript

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!

Related

Get out of jQuery IF context

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...

Menu animation in Meteor

I'm trying to work with Meteor, React and FlowRouter.
I didn't work with animation in Meteor yet and I don't know where to start, but..
I am really impressed by the animation on this site (yeah, I don't only searching there hah :)
When we press to the menu icon then: all the current layout moves to the right and takes the half of the screen. on the left half of the screen me can see simple list menu. all this behavior happens really smoothly.
That is the question.
What technologies to use to make animation effects like that? Or may be you know how exactly to make this effect?? Actually I want to find the way make something like this using Meteor and React.
Very thank you for your answers!
Update
What do you know about Famo.us?

Move elements on scroll vertically and horizontally (Jquery/Javascript)

A friend asked me if I could help her out with a project she's working on. She wants to bring over a message and wants to do this with a website where the users can just scroll and read stuff.
Here you can check out a PDF that show what she is trying to accomplish:
https://www.dropbox.com/s/bew7rw1uzjv8nwc/INFOpagina.pdf
When you start scrolling around slide 4 and 5 you should get the idea, words and images change from position when you scroll.
So my question now is, do you guys know any Javascript or Jquery plugins that could help me achieving this? I already searched a lot on google but can't really find any stuff that's really appropriate.
Thanks, would really appreciate the help.
jQuery Scroll Path Plugin is the perfect JQuery plugin for you.

Raphael Drag + iPhone = Sad Camera App

Web app here:
http://www.digitaltransitions.com/visualizer/visualizer.html
Main javascript here:
http://www.digitaltransitions.com/visualizer/visualizer.js
Relevant functions are at bottom of visualizer.js, named "dragger" "move" and "up".
I was a programmer a decade ago, and recently took it back up to help my company create a web app that helps our customers visualize how a specific lens will look on a specific camera.
Never mind the info wall (info request form); feel free to put in any garbage entries. Or you can add the function unlock(); at the end of the window.onload and it will bypass the info wall screen and go straight into the app.
I've been very proud to get this far. But now I am majorly stuck and have been banging my head against the wall.
My web app passed testing on Mac_Safari, Mac_Chrome, Mac_Firefox. But it failed testing on an iPhone4s and iPad1; the sliders for focal length (the ##mm gizmo in the top right which changes how "zoomed" the lens is) do not function correctly. When the user grabs the slider some of the time it correctly slides back and forth, but other times it will jump to the far left of the screen at which point the app stops working at all.
Any thoughts would be greatly appreciated!!
By the way, if you were wondering how to create a custom Google Docs Form with validation and a custom confirmation page I got my methodology from here:
http://www.morningcopy.com.au
I'd say your first job is to determine if this your bug, or Raphael's bug. I'd start by switching out your "move" method with an empty method, and see what happens.
Another debugging approach would be to put a fixed-position div down in the corner of the page, and spit the x/y values into it, so you can see in real-time what the numbers look like.
I'd guess that you're running into a mathematical difference in how touch-points are calculated vs. how mouse-cursor-position is calculated.
Based on the hack you added, it looks like Raphael might be sending you a NaN value for Dx?

jQuery UI Right-Click Menu AND General Advice Needed

So, recently I have been trying to build a user interface form builder that is almost entirely drag and drop. Kind of like Dreamweaver or visual studios I suppose. You guys can see it for yourselves HERE! I am trying to get a right-click menu thing going, however upon getting this working, I realized that it really conflicted with both the draggable and resizable methods. I don't have to right click at all, however when I go to resize or drag, it won't let me stop it. My cursor gets stuck either resizing or dragging, and requires vigorous clicking and shaking to free it. So, I'm assuming that I need a different plugin. Does anybody know of a stress free simple right-click menu that is hopefully compatible with jquery ui? I've tried google but most of them are simply a different version of the one I've already been using.
My second question is much more vague. As I previously mentioned, I'm trying to make a form builder. I'm wondering what the best way to go about this is as I feel sort of lost. My biggest problems right now are figuring out how I'm going to parse everything into code and export it. Does anybody know of anyone else who has attempted this or something similar? Is there any sort of guide?
I know the second questions has potential to be rather annoying, so feel free to only focus on the first one. Any help is appreciated, and I thank everybody who helps me.
EDIT: Just realized that you guys may not know how to use the builder. So far, all you can do is drag panels out onto the building space, and then drag tables within the panels. You can resize the building space, and panels vertically, and you can resize tables both vertically and horizontally. You can move panels and tables within their parent elements. Right click a panel or table for the contextmenu.
EDIT: So I think I found a context menu that will suffice, here it is. So, I guess that only leaves giving me advice on how to go about constructing this form builder.

Categories

Resources