jQuery IP250 Session Three – follow up

jQueryLogoBanner
Just for fun here is a demonstration of a jQuery plugin called booklet. I used it to do a little review of .hide() .show() .slideDown() .slideUp() .toggle()

You will notice that a lot of the screen real-estate is taken up by large arrows on the sides. I turned on that option to support touch devices.

Here is a screenshot from my Windows 8 Phone  (234 kb)

Advertisements

4 thoughts on “jQuery IP250 Session Three – follow up

  1. Andy Dunn says:

    Hi Jim

    Can you help?

    I’m trying to implement an HTML5 range element slider to change the contents of a div when the user slides the slider.

    my html looks like this:

    and my jQuery like this:
    $(“slider”).change(function(){
    var sliderVal = this.value;
    $(“theMonarch”).html(“Hello”);
    });

    Eventually it’ll show a pic of the king/queen depending on the date in the slider, but for now I’d be happy for the event to trigger. Right now, nothing happens when I slide the slider.

    The html and resources are on the jquery website (http://dotnet.tech.ubc.ca/onlinework/jquery/andrew_dunn04.html) and the slider is under the ‘forms’ section of the website.

  2. Andy Dunn says:

    It stripped my html from the comment!

  3. jimubc says:

    Hi Andy,
    Quick thoughts.
    It might be easier to debug this if you separate this into a separate page, get it to work there, and then migrate it back into your integrated page.

    Things to do to get the event to fire.
    $(“slider”)
    should be
    $(“input[name=’slider’]“)

    and

    $(“theMonarch”)
    should be
    $(“#theMonarch”)

    See http://jsbin.com/izafiy/3/edit

    That should get you going. If there is more, please set up a simpler example (just this issue) in jsbin and we can discuss with the group in the lab next week.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s