Tell me more ×
Stack Overflow is a question and answer site for professional and enthusiast programmers. It's 100% free, no registration required.
up vote 1 down vote favorite

So I hit a problem earlier - my dropdown of options hits the bottom of the page and doesn't then show, so basically all I need to do is make it 'drop up'...

It's from a comic site, but it's hosted and so there are bits of code in the HTML that only work on the actual site, so I guess what would be best is to give you the link to the page and you can inspect element on firefox or what ever to see the code in action. Link to site page: http://mytestcomic.thecomicseries.com/comics/1/

The dropdown in question is right at the bottom of the page, named 'Post, Rate, Save & Load'. As you can see from higher up I've just copied the navigation buttons and dropdown from higher up so as the reader doesn't have to scroll back up to go to the next page of the comic (which I should add is just a test so I can work things out on it first then move the code over to the real thing).

My jQuery script is here:

<script>
$('.dropcon').hover(
    function () {
        $('.fallback', this).stop().slideDown(125);
    },
    function () {
        $('.fallback', this).stop().slideUp(125);
    }
);
</script>

If you need me to past the HTML/CSS in here as well I can but as I say it might be easier for you to see it for youself on the page.

Thank you!

share|improve this question

1 Answer

up vote 1 down vote accepted

You simply need a little additional CSS to use absolute positioning and make it relative to the bottom of the parent element:

.dropcon {
  position: relative;
}
.fallback {
  position: absolute;
  bottom: 0;
}
share|improve this answer
Thanks very much this works perfectly! :) Out of interest would you mind explaining in more detail why this works? Thanks again! – Finn Turnbull 4 hours ago
Well the absolute positioning removes the element from the document flow and instead the element's layout and positioning will be relevant to it's offset parent. Now that was a crap explanation so i'd recommend a good read of the HTML5 Rocks 'How browsers work' article and at least a skim read of the CSS visual formatting model spec. – i_like_robots 2 hours ago
Okay, thanks I'll have a read of those. :) – Finn Turnbull 2 hours ago

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.