Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript

Matthew Stewart
Matthew Stewart
9,214 Points
Posted by Matthew Stewart
Matthew Stewart
9,214 Points

scroll positions and function looping

Hey everyone!

I'm currently working on a website where on mobile, I want a certain section to be fixed to the bottom of the screen. In addition I'd like for there to be a button in which I can click and have that section take over the screen.

Right now I have this working with the following code

    $('.expandISI').click(function() {

        // Move ISI to top position
        $('.isiMob').css("top", "0");

        // Ensure Scroll is set to top of ISI text block
        $(document).scrollTop("0");

        // Change isi position so scrolling can occur
        $('.isiMob').css("position", "absolute");

        // Switch out arrow image
        $('.expandISI').attr("src", "../injectaferContent/img/arrowDown2.png");

        // Move ISI back
        $('.expandISI').click(function(){

            // Move ISI to bottom position
            $('.isiMob').css("top", "75%");

            // Change isi position to fixed
            $('.isiMob').css("position", "fixed");

            // Switch out arrow image
            $('.expandISI').attr("src", "../injectaferContent/img/arrowUp.png");

        })

    });;

So I have this functioning BUT I'd really like that when you close the section to be able to go back to the original Y position of the document that you were on when you opened it.

Also, this functionality only seems to be working once when the page is loaded – afterwards it seems to have stopped working.

Any ideas??

Here is the link of the site for reference – keep in mind this is only a functionality for tablet & mobile so you'll have to resize your browser or use dev tools to view – right now it's set for screens 768px and lower.

http://www.flashpointmedica.com/_share/injectafer/patient/template/index.html

2 Answers

eck
eck
43,038 Points
eck
eck
43,038 Points

I think you can accomplish what you are looking for by simply toggling a class on your ".isiMob" element when the arrow is clicked. To toggle the class, this is the only jQuery you would need: 

// Click the arrow button
$('.expandISI').click(function() {

    // Toggle the "open" class to the parent element with the class "isiMob"
    // While you don't need to use the parents() method, it will allow for minor performance increases when 
    // selecting an element by class.
    // toggleClass() will add a class if the element does not have it, or remove it if it does.
    $(this).parents( '.isiMob' ).toggleClass('open');

});

Now all you need to do is create the css to get the results you want. Here is a sample of what I think is helpful for you:

.isiMob {
    position: fixed;
    top: 75%;
}

.isiMob.open {
    position: absolute;
    top: 0;
}

.expandISI {
    width: 25px;
    height: 17px;
    background: url("../injectaferContent/img/arrowUp.png") no-repeat;
}

.open .expandISI {
    background: url("../injectaferContent/img/arrowDown2.png") no-repeat;
}

I also recommend using the background property for the button image. If you do, be sure that the url value is relative to your stylesheet.

I hope this helps, and if you have any questions, let me know :D

Matthew Stewart
Matthew Stewart
9,214 Points
Matthew Stewart
Matthew Stewart
9,214 Points

Erik Krieg Thanks so much! This does solve the larger problem I was having which is that it would only toggle once. Looks like I was really over-complicating things

However, I'm still having the issue that if the user opens this ISI section after they have already been scrolling through the site – it doesn't go to the top of the section.

Right now I'm just using 

// Click the arrow button
$('.expandISI').click(function() {

    // Toggle the "open" class to the parent element with the class "isiMob"
    // While you don't need to use the parents() method, it will allow for minor performance increases when
    // selecting an element by class.
    // toggleClass() will add a class if the element does not have it, or remove it if it does.
    $(this).parents( '.isiMob' ).toggleClass('open');

    $(document).scrollTop(' 0 ');

});

That way it at least will go to the top but I would like it to back to the same point the user was at on the page if they had already scrolled further down.

I'm not really sure how to approach this so if you have any pointers it would be awesome! Thanks so much for your help!!