Changing text colour with JQuery alongside scrolling code

Question

I have a page in which the user can click on a date in the sidebar, which automatically adds that date to a form, and also scrolls down to the form using AnimateScroll.js . This works fine.

I also have a button in the main part of the page that, when clicked, again uses AnimateScroll to scroll up to the top of the list of dates so the user can click their desired one. This too works fine, but what I'd like to do is also highlight the paragraph above the dates list in red so the user clearly sees what they're supposed to do. AnimateScroll is called like this:

 <a class="button" onclick="$('#dates').animatescroll({scrollSpeed:700,easing:'easeInOutSine'});">Book Now</a>

I'm sure I should be able to add something else to the code executed onclick, probably jQuery, but I don't know what that is. Can you help?

Answer 1

There are several ways to do this. One quick way is:

• Just embed this line of code there

  $('#dates').css('color','red');

(In case the container where the date appears has the id 'dates', otherwise check the class or id of the container and change the selector accordingly).

Answer 2

Give an id to the paragraph Say id="Paragraph" <p id="Paragraph"> Please chhose the date</p>

Now, Add a line in your onclick

<a class="button" onclick="$('#Paragraph').css('color','red'); $('#dates').animatescroll({scrollSpeed:700,easing:'easeInOutSine'});">Book Now</a>

This will acheive what you want..!!

Answer 3

for maintanance it would be MUCH nicer to write the javascript in an external javascript file. also for many buttons you don't need to write the onclick every single time you can just have it at one place

<a class="button" href="javascript:;">Book Now</a>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script type="text/javascript">
    $(document).ready(function(){
        $('.button').on('click',function(){
            $('#dates').css({
                'font-size' : '10px',
                 width : '30px',
                 height : '10px'
             });
            $('#dates').animatescroll({scrollSpeed:700,easing:'easeInOutSine'});
        });
    });
</script>