html - jQuery scrollLeft not working on click -
i have form user can use 'prev' , 'next' buttons navigate through form. here code , jquery:
<div id="slidewrapparq"> <div id="slide1"> <div class="parqinfo">regular physical activity fun , healthy, , increasingly more people starting become more active every day. being more active safe people. however, people should check doctor before start becoming more physically active. completion of questionnaire first step when planning increase amount of physical activity in life.</div> <div class="parqwrapinner"> <form action="/" method="post" id="parqform"> <div class="parqrow"> <div class="parqcell"><span class="red">q1: </span>has doctor / medical professional ever diagnosed heart condition , indicated should restrict physical activity?</div> <div class="parqcell"> <span>yes</span><input type="radio" name="q1" value="yes"> <span>no</span><input type="radio" name="q1" value="no"> </div> </div> <div class="parqrow"> <div class="parqcell"><span class="red">q2: </span>when perform physical activity, feel pain in chest? </div> <div class="parqcell"> <span>yes</span><input type="radio" name="q2" value="yes"> <span>no</span><input type="radio" name="q2" value="no"> </div> </div> <div class="parqrow"> <div class="parqcell"><span class="red">q3: </span>when not engaging in physical activity, have experienced chest pain in past month? </div> <div class="parqcell"> <span>yes</span><input type="radio" name="q3" value="yes"> <span>no</span><input type="radio" name="q3" value="no"> </div> </div> <div class="parqrow"> <div class="parqcell"><span class="red">q4: </span>do ever faint or dizzy , lose balance? </div> <div class="parqcell"> <span>yes</span><input type="radio" name="q4" value="yes"> <span>no</span><input type="radio" name="q4" value="no"> </div> </div> <div class="parqrow"> <div class="parqcell"><span class="red">q5: </span>do have injury or orthopaedic condition (such back, hip, or knee problem) may worsen due change in physical activity?</div> <div class="parqcell"> <span>yes</span><input type="radio" name="q5" value="yes"> <span>no</span><input type="radio" name="q5" value="no"> </div> </div> <div class="parqrow"> <div class="parqcell"><span class="red">q6: </span>do have high blood pressure or heart condition in doctor / medical professional prescribing medication?</div> <div class="parqcell"> <span>yes</span><input type="radio" name="q6" value="yes"> <span>no</span><input type="radio" name="q6" value="no"> </div> </div> <div class="parqrow"> <div class="parqcell"><span class="red">q7: </span>are pregnant? </div> <div class="parqcell"> <span>yes</span><input type="radio" name="q7" value="yes"> <span>no</span><input type="radio" name="q7" value="no"> </div> </div> <div class="parqrow"> <div class="parqcell"><span class="red">q8: </span>do have insulin dependent diabetes? </div> <div class="parqcell"> <span>yes</span><input type="radio" name="q8" value="yes"> <span>no</span><input type="radio" name="q8" value="no"> </div> </div> #<div class="parqrow"> <div class="parqcell"><span class="red">q9: </span>are 69 years of age or older , not used being active?</div> <div class="parqcell"> <span>yes</span><input type="radio" name="q9" value="yes"> <span>no</span><input type="radio" name="q9" value="no"> </div> </div> <div class="parqrow"> <div class="parqcell"><span class="red">q10: </span>do know of other reason should not exercise or increase physical activity? </div> <div class="parqcell"> <span>yes</span><input type="radio" name="q10" value="yes"> <span>no</span><input type="radio" name="q10" value="no"> </div> </div> <input type="hidden" name="memberguid" id="memberguid" value="0399589c-66bd-e211-8911-00155d007722" /> </form> <p class="point"><span class="red">* </span>if answered no questions can reasonably can safely increase level of physical activity gradually.</p> <p class="point"><span class="red">* </span>if health changes answer yes of above questions, seek guidance doctor.</p> <p class="point"><span class="red">* </span>if health changes answer yes of above questions, tell doctor / medical professional. ask whether should change physical activity plan.</p> </div> <div class="slidebuttons"> <a href="/~fitspace/index.php/membership?view=memberform1" class="signupformprev">prev</a> <a href="#" class="signupformnext">next</a> </div> </div> <div id="slide2"> sgfskgposgkporskgrspogk </div> </div> jquery:
jquery('.signupformnext').click(function(e) { jquery('#slidewrapparq').animate({scrollleft: "+=770"}, 500, "swing"); }); and css:
#parqwrapinner { min-height: 350px; overflow: hidden; width: 2310px; } #parqwrapper div#slide1, #parqwrapper div#slide2, #parqwrapper div#slide3 { display: block; float: left; height: 350px; position: relative; width: 770px; } the slide divs positioned next each other in #slidewrapparq div when button clicked div supposed slideleft in order bring next slide in. reason not working , have been trying sort last few hours! right selector have tested other jquery events on it. can see going wrong?
thanks
after reviewing jsfiddle, noticed didn't have of containers overflow set scroll, makes me think have misunderstanding scrollleft , how works.
with assumption in mind, think you're looking sliding effect can done without scrollable containers. jsfiddle quite chaotic created simple slider example using both scrollleft , left:
scrollleft | demo
$('.next').on("click", function (event) { event.preventdefault(); $("#content").animate({ scrollleft: '+=600' }, 600); }); $('.prev').on("click", function (event) { event.preventdefault(); $("#content").animate({ scrollleft: '-=600' }, 600); }); left (slide-like) | demo
$('.next').on("click", function (event) { event.preventdefault(); $("#contentwrapper").animate({ left: '-=600' }, 600); }); $('.prev').on("click", function (event) { event.preventdefault(); $("#contentwrapper").animate({ left: '+=600' }, 600); }); i made notes on css better understand scrollleft animation.
Comments
Post a Comment