CODEWITHSUNDEEP
javascriptjqueryscrollhidden
Savageman
Savageman

Reputation: 9487

Change the scroll of an hidden div

I have an hidden div with a fixed height and a scrollbar. I would like to change the scroll position, but the browser won't le me do it, as the div is hidden. The scrollTop property will stick to 0.

Also, I don't want to show and hide the div back, which causes flickering.

If anyone knows how to do it, it'll be really helpful.

Thanks!

Upvotes: 10

Views: 5636

Answers (3)

BrunoLM
BrunoLM

Reputation: 100351

You can save the scroll using jQuery's data function.

function SaveScroll(val)
{
    $(the_element).data("Scroll", val);
}

function Show()
{
    var element = $(the_element);

    // prevent from showing while scrolling
    element.css
    ({
        position: "absolute",
        top: "-50000px",
        left: "-50000px",
        display: ""
    });

    // Scroll to the position set when it was hidden
    element.scrollTop(element.data("Scroll"));

    // show the element
    element.css
    ({
        position: "",
        top: "",
        left: ""
    });
}

This might do the trick

You maybe can just use visibility: hidden instead of display: none. The visibility keeps the element where it is. I believe it is the exact same thing as opacity: 0, but it is a cross-browser solution.

Upvotes: 3

Savageman
Savageman

Reputation: 9487

My question was not complete. The div is not hidden on his own. It's part of a container div, which is hidden. The inner div displays with his parent.

<div class="container hidden">
    <div id="some_div">Content</div>
    <div id="my_div">I wanted to scroll this one</div>
    <div id="other_div">Content</div>
</div>

We use jQuery came up with a custom "onShow" event.

So now we can do this:

$('#my_div').bind('show', function() {
    handle_scrollTopOffset();
});

When the show event is bound, it adds the class .onShow to the div. And the jQuery.fn.show() function has been overridden to trigger the 'show' event on the childs which have the .onShow class.

Thanks everyone for their suggestions. I'm sorry I provided a uncomplete question. I'll give all the details next time.

Upvotes: 2

fantactuka
fantactuka

Reputation: 3334

To prevent div flickering and fix <div> unavailability for scripts you can use position hiding instead of "display: none;":

.hidden {
  position: absolute !important;
  left: -9999px !important;
  top: -9999px !important;
}

Upvotes: 2

Related Questions