Jump to content
GreenSock

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

ve1jdramas

Members
  • Posts

    5
  • Joined

  • Last visited

ve1jdramas's Achievements

Newbie

Newbie (1/14)

0

Reputation

  1. @jamiejefferson ah ok the chrome link was pretty helpful, I know how to use the developer tools for HTML & CSS but the console was a little unfamiliar to me so that was pretty helpful! But I am having trouble understanding the solution. For step 1 I don't understand what I am suppose to define openElement and closeElement as. And for step 2 so I will not be using a function anymore? Here is what I have so far: $(function(){ var $window = $(window); //Window object var scrollTime = 1.2; //Scroll time var scrollDistance = 320; //Distance. Use smaller value for shorter scroll and greater value for longer scroll $window.on("mousewheel DOMMouseScroll", function(event){ event.preventDefault(); var delta = event.originalEvent.wheelDelta/120 || -event.originalEvent.detail/3; var scrollTop = $window.scrollTop(); var finalScroll = scrollTop - parseInt(delta*scrollDistance); var scrollTween, finalScroll; $window.on("mousewheel DOMMouseScroll", function(event){ event.preventDefault(); var delta = event.originalEvent.wheelDelta/120 || -event.originalEvent.detail/3; var scrollTop = $window.scrollTop(); finalScroll = scrollTop - parseInt(delta*scrollDistance); createScrollTween(); }); var openElement = ; var closeElement = ; openElement.on("click", function(e) { //code to open modal $('#myModal').modal('show'); // kill the tween. scrollTween.kill(); }); closeElement.on("click", function(e) { // code to close modal $('#myModal').modal('hide'); // create the tween again. createScrollTween(); }); }); }); Thanks for the response!
  2. I have the 2 files needed for the smooth scrolling included in the bottom of my index.html, with all my other JS, those 2 files are: <script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/gsap/latest/TweenMax.min.js"></script> <script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/gsap/latest/plugins/ScrollToPlugin.min.js"></script> And the smooth scroll worked before I tried your solution, but maybe I am using an outdated version of GSAP? And as far as the scrollTo for the menu I figured that would we the better way to do it, its a little intimidating though for my first week of JS. I plan to try it after I get this sorted though. I really appreciate you helping out though first place someone has actually tried to help me! I'm glad to be here. UPDATE: I realized I didn't include my .js for the smooth scrolling in my index.html from my last edit, added it in but this did not fix it. The page does not scroll with the mouse wheel at all now. Also added jsfiddle in my main post but its not much help.
  3. Ok so I gave that shot but I had no success, there is no error in console as well. Smooth scrolling is just not working, you can check it out here. I even tried copying your code 100% still didn't work I thought the difference might be between "createScrollTween();" and "scrollTween.kill();" but that was not it. Any other ideas on what it might be?
  4. Hey from Las Vegas Rodrigo! Thanks for the warm welcome! Ok so I am trying to get your solution to work but I think my ,js is a little off again (I'm like a week days into javascript) it looks correct to me as per the getbootstrap.com docs. Check out this updated .js: $(function(){ var $window = $(window); //Window object var scrollTime = 1.2; //Scroll time var scrollDistance = 320; //Distance. Use smaller value for shorter scroll and greater value for longer scroll $window.on("mousewheel DOMMouseScroll", function(event){ event.preventDefault(); var delta = event.originalEvent.wheelDelta/120 || -event.originalEvent.detail/3; var scrollTop = $window.scrollTop(); var finalScroll = scrollTop - parseInt(delta*scrollDistance); var scrollTween; function createScrollTween() { scrollTween = TweenMax.to($window, scrollTime, { scrollTo : { y: finalScroll, autoKill:true }, ease: Power1.easeOut, overwrite: 5 }); } openElement.on("click", function(e) { //code to open modal $('#myModal').modal('show'); }); closeElement.on("click", function(e) { // code to close modal $('#myModal').modal('hide'); }); }); }); What I am I missing here?
  5. Ok I am using bootstrap 3, and the modal feature for my portfolio. I have it set up fine and everything works, but when I add my smooth scrolling javascript the mouse wheels scrolls in the background when you have the modal opened. I used this tutorial. Which helped me get smooth scrolling working with TweenMax and ScrollToPlugin. Here is my js for the smooth scrolling: $(function(){ var $window = $(window); var scrollTime = 1.2; var scrollDistance = 170; $window.on("mousewheel DOMMouseScroll", function(event){ event.preventDefault(); var delta = event.originalEvent.wheelDelta/120 || -event.originalEvent.detail/3; var scrollTop = $window.scrollTop(); var finalScroll = scrollTop - parseInt(delta*scrollDistance); TweenMax.to($window, scrollTime, { scrollTo : { y: finalScroll, autoKill:true }, ease: Power1.easeOut, overwrite: 5 }); }); }); You can see my site without the above javascript here: Correct modal scrolling With the above javascript: Error modal scrolling jsfiddle, for some reason the remote content does not display in the modal (on localhost as well) so you cant see it scroll, but you can play with the js here. I attempted to make a jsfiddle but the way I am displaying the contents in the modal doesn't work in jsfiddle for some reason (this was mentioned after I did some research) anyway just scroll to the 3rd section (portfolio) and click an image to see what I am talking about. My modal code is just the stock bootstrap moal and I also tried this with bootbox.js and the same issue happened, so I don't think that is the issue. I have been trying to figure this out for a week now with no success if someone could take a look would be greatly appreciated.
×