Jump to content

Search In
  • More options...
Find results that contain...
Find results in...

OSUblake last won the day on November 30

OSUblake had the most liked content!


  • Posts

  • Joined

  • Last visited

  • Days Won


Everything posted by OSUblake

  1. That would definitely be useful! +1 for the stagger.
  2. Here's an interesting thread about interpolating colors. http://greensock.com/forums/topic/11721-question-about-interpolating-between-colors/ And here's the demo from that thread, which shows how to use getters/setters Rodrigo was talking about. Normally, I would wrap the element in a class like that, but I was trying to do a side-by-side comparison. http://codepen.io/osublake/pen/xGVVaN If you need help working with colors, I would recommend checking out xcolor. It's a jQuery plugin, but I have never actually used it like that before. I just borrow snippets of the code from time to time. There's basically a color function for every possible scenario. Demo http://www.xarg.org/project/jquery-color-plugin-xcolor/ Repo https://github.com/infusion/jQuery-xcolor/blob/master/jquery.xcolor.js
  3. Diaco's solution is clever. It's also a good way to create to different colored dashes. I was curious about what Jack said about using the correct number of dashes so I created a function to do that. Just pass in an array of the pattern and the length of your path. // Ex: var myDash = getDash([5,3,5], 500); function getDash(pattern, length) { var dash = []; var full = false; var len = pattern.length; var sum = 0; while (!full) { for (var i = 0; i < len; i++) { var val = pattern[i]; if (sum + val >= length) { full = true; break; } sum += val; dash.push(val) } } var last = length - sum; dash.length % 2 ? dash.push(0, last, length) : dash.push(last, length); return dash; } It seems to work great across all browsers. http://codepen.io/osublake/pen/jPRbjL/
  4. Sure. You just need to setup a condition to stop the function from being called again, or you could kill it. Condition: http://codepen.io/osublake/pen/WvWNyo Timed kill: http://codepen.io/osublake/pen/aOxbKj
  5. If it's just a circle, you can use a clip path. http://codepen.io/osublake/pen/doLyvQ/
  6. Just add an animation to your click function. Here's an example with a bunch of nested foo classes. It doesn't use jQuery, but it's the same concept. http://codepen.io/osublake/pen/MwRgrw/
  7. It's good that you are finding these problems. I keep coming across websites that won't work right in Chrome when a touch screen is present. Instead of testing for the pageXY, you could just pass in the touch. if (e.type === "touchmove" && e.changedTouches) e = e.changedTouches[0]; var hitTest = Draggable.hitTest(element, e);
  8. Well it sounds like you learned a little Angular during your hiatus
  9. I've never used Ionic, but it's just Angular and a CSS library. As long as you understand controllers, directives, and ngAnimate, I don't see why there would any problems.
  10. Thanks! I thought it was a pretty cool demo, but you're the only person who has acknowledged it. I don't know why it uses pageX/Y, but I ran into the same problem and I saw in the source code that it just creates a 1x1 rectangle to test. What touch problems are you having? I would just look at how Draggable handles them because they are spot on.
  11. Draggable uses pageX/Y for events, but you can create your own point like this. var x = e.clientX; var y = e.clientY; var point = { left: x, right: x + 1, top: y, bottom: y + 1 }; var hit = Draggable.hitTest(element, point); So here's your example with that... http://codepen.io/osublake/pen/zGbLja And here's a demo I made that demonstrates why hit testing a event might not be what you expect. http://codepen.io/osublake/pen/JoQbya
  12. Exactly. But those ms-dos days are making a comeback thanks to node based tools, so it wouldn't hurt to learn how to use the command line again.
  13. I think I experienced the same thing with my SVG plant generator, but it happened in Chrome too. I didn't spend much time investigating the problem, and instead just set the opacity to 0 until it was time to start. The onStart callback sets the opacity to 1. Here's what it looks like without the fix. Uncomment line 92 to fix it. http://codepen.io/osublake/pen/98c34a69bd1115e08ceb09f6ce9a325c/
  14. Your path is incorrect and will not work outside of your computer. Two dots is up a level which will allow you to access your images folder, assuming you have three folders js, css, and images right next to each other. background: url(../images/aanb1.jpg);
  15. OSUblake

    Dynamics to menu ?

    Ha! It took me awhile to even find the link in the first post. Can you add underlines to the links? The green text doesn't stand out that well from the other text.
  16. Yes. But did you know that you can tween to a CSS class? TweenLite.to(myElement, 1, { className: "+=myClass", onComplete: myCallback }); Or you can do it the hard way and hope the event fires. myElement.addEventListener("transitionend", myCallback);
  17. Here's the example from your PM. I'm not too familiar with Hammer, but to access properties or methods of the channel object, you need to return an object with whatever you want to be public on it. Before it was just returning an element. If you're not familiar with what I did, go lookup closures and the revealing module pattern because I don't think I can explain it that well. I use it in a lot of my CodePen demos as an easy way to create a class without using 'this' or prototype. http://codepen.io/osublake/pen/pJYNKj?editors=001
  18. Those are part of the TweenMax file and are put on the global scope. Try changing the module.exports http://greensock.com/forums/topic/11484-using-gsap-with-nodejs/?p=46714
  19. Lol. I never could figure out Dreamweaver. But Rodrigo is right about an IDE being a resource hog. My old computer had 16GB or ram, and it was constantly being used up. You can kind of test out VS Code without downloading it. The TypeScript Playground actually uses the same editor. Just start typing some JavaScript into the TypeScript side. As soon as you start typing, the intellisense will start working, and you can tab a choice, which also uses uses emmet. If you hover over a piece of code, it will display info like it's type or signature. Playground http://www.typescriptlang.org/Playground And here's a quick look at the intellisense feature http://www.johnpapa.net/intellisense-witha-visual-studio-code/
  20. I didn't include any animations on that demo, but all you would have to do is add them to the switch statement make sure they only run once.
  21. Didn't you already ask about this? If there's a conflict, remove one. How important is the CSS? Look at this example of a handling media queries with JavaScript. http://codepen.io/osublake/pen/vExQEy
  22. I don't understand the popularity behind Sublime and other text editors. I use those for viewing files. I like to use an IDE like Visual Studio or WebStorm, but those can take some time to learn, especially Visual Studio. There's a new Visual Studio editor called VS Code, which I really like. I would highly recommend checking it out. It's a text editor like Sublime, but it also includes some nice features like a debugger, a task runner to run things like Gulp, and it analyzes your code like its TypeScript so it can figure out errors. It's also available for Mac and Linux. https://code.visualstudio.com/
  23. Had I known that my demo was going to be so so popular, I would have written it differently. I really didn't think people would actually try to use the code line for line, so I didn't include a way to handle or manage any data. That said, there's nothing super complicated about the code. I even made a really basic version of it that should be pretty easy to understand. See if you can make your own version. The way I learned JavaScript was by recreating other people's work line by line, figuring out what every piece of code did. http://codepen.io/osublake/pen/pJKRWy And you don't need another library to filter anything, you just need to learn how to use arrays. Here are some array methods that you should learn: forEach, sort, filter, reduce, map, indexOf, some, every. You can find info about these in the link below, which has a list all of the array methods. https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array Here's the grid using filters. Study it. It uses most of those array methods. Open up the console and you will see that it is outputting json for the images, which could be used to rebuild the grid. Again, study the code, and then break it so you can figure out how things work and maintain it yourself. http://codepen.io/osublake/pen/gpqZKo/
  24. Why don't you just build your own queueing system? That way you can choose whether to add the animation to beginning or end. Maybe something like this. http://codepen.io/osublake/pen/xGMYmW/
  25. I learned that starting out in reverse trick from @Diaco, which is really nice because you don't have to pause the animation. Now all you have to do is reverse every animation except for the one you selected.