I'm a total amateur at jQuery, HTML, css and everything and I'd be really grateful if anyone with some more knowledge could help me. This is a site I'm in the middle of making for my girlfriend: www.sharyncunneen.com.
If you click around on the buttons there you'll notice I've done some animated page transitions involving the opacity, size and position of the buttons. The problem is when I click the browser back button: if I click it at a reasonably slow pace the transitions still work fine but if I click several times fast in a row it's like the jQuery/javascript doesn't get time to catch up or something. I don't really know.
Do you need to see files or code? I won't include anything else yet. I think it's better to let you tell me what information would help you because I'm not sure about the best way to proceed on this forum and I'd like to learn from experienced users.
I don't see any transition at all o0
Anyway, you can use the jquery queue function.
Start a queue when starting the animation et clear it when your transition is finished. You can also limit the number of queued events to avoid the website getting crazy with speedy click.
Related
Is there a possibility to prevent pagePiling.js from moving the current pp-section when mousewheel is fired? Or even better, to force start moving after a delay?
My current issue is that i want to show an animation inside the pp-section before the pp-section starts to move. And for that i need a delay. Maybe I need something like an event beforeLoad which isn´t implemented there.
I work the first time with pagepiling.js so maybe i just dont think the right way, because i also didnt find any questions about this or a similar issue online. Any suggestions are welcome!
I'm currently trying to figure out how to animate the sprite properly without the help of extra libraries other than jQuery. This is the live demo of what I have right now.
Controls: A for left, D for right, Space for jump, left mouse click to fire.
Here's the problem: if I press the left and right keys really fast, the animation gets screwed up, try it yourself since It's kind of hard to describe the mess...
My code is very scrappy right now because I'm playing around with many methods, so please bear with me for now. Here's the JavaScript code. If you want to see the html and css, they are in the same directory.
$('#obj') is the object of the sprite.
I am too lazy to look at the links for your code. If you say it is acting crazy, sounds like you are not cancelling the animations before applying the next one. Call stop() before running the next animation.
$("#obj").stop().animate(...)
I'm working on horizontal website. I would like to create 2 buttons (left button and right button) which can help users to scroll to left and right.
The site that I'm working on
The functionality that I wanted to create is, when I mouseover the button the page will start and continue the scrolling action until the mouse move away from the button then the page stop scrolling.
I found something from codepen "http://goo.gl/uTQdzD" that is similar to what I looking for but that is not function in the way I wanted. It's required to keep clicking it only it can continue scroll, once it clicked then it only move a certain pixels distances and stop then have to click again... even I tried to change to mouseover, the same thing... I have to moving the mouse in and out the button only it can continue to scroll the page.
I'm not a professional web coder or developer but just a new guy. I Hope someone out here could help me out.
Thanks in advance.
Here you go: http://codepen.io/caseybaggz/pen/uBysA?editors=001
I changed the .click to a mouseenter event which is what you are looking for. Additionally, the increments that you noticed were happening because of the step variable being assigned 400. So, I just replaced the 400 with wWidth and within the mouseenter function, told it to scroll the bodyWidth.
I'm not totally sure why you would want to do this? The natural flow of web design is to design/build sites vertically. To have the user scroll horizontally is a little awkward regarding the UX and could be considered bad design…especially now that devices come into play.
Be sure to learn web-design and UX standards first before you get into a position for developing sites. It not only helps to contribute for bettering the web, but also the UX. ;)
Hope this helps and good luck!
I've got a question. I've been working on this site for a while, and I've hit a bit of a brick wall. I've thought this over a few times and I'm not sure how to go about this.
I've got 5 different configurations for content on a page, and I need to swap between them. What's supposed to happen, is when the user clicks on a button, a series of animations is supposed to happen, and ultimately replace the button and the top with the one that was pressed. The one that was at the top should return to its original position ("Home" should always be on top, "About" should always be just beneath that, save for when it's the current page).
My site is here, http://www.logicanddesign.ca, and all the javascript is open for you to see. Any help you guys could provide would really help. I'd like to do this without completely rewriting my site, but if it's the only way, I will.
Well, the first thing I'd like to point out is that you're associating the button_click function with the images instead of the divs containing them. You would be better off using the div tags for event handling.
Secondly, you only move the current button and the pressed button. To achieve the affect you're going for, you need to move the buttons in-between the default positions of buttonPressed and currentPage.
Moreover, you can't just statically define moveUp function for the button pressed and nothing else. Because sometimes you'll need to move the buttons between the button pressed and current button upwards.
As is apparant, you need to account for in-between moves when you set divs to animate. Possibly in the moveDivs function.
I made a fiddle representing what changes you could do to achive required effect, but I feel what I have written is a mess. The sort of mess which is worthy of nightmares, really...
In my opinion, you could create a javascript class to handle animations and movements. Making a class will make code much cleaner and you could indefinitely add buttons without breaking your code.
Could you please tell me how this photo animation effect is achieved - see the pictures that slide seamlessly to the left every say 3 seconds (the pictures just below the BIGSTOCKPHOTO logo).. Site- www.bigstockphoto.com
I have noted this effect being used in many other sites.. And none of them seem to employ flash for making this. Please let me know whether this is just JS or whether its purely a CSS based effect, and probably a place where i can read on how to make this.
Thanks.
here you go..
example:
http://cssglobe.com/lab/easyslider1.7/01.html
info:
http://cssglobe.com/post/5780/easy-slider-17-numeric-navigation-jquery-slider