#157 ✓hold
Douwe M.

Fx.Slide improvements

Reported by Douwe M. | January 4th, 2010 @ 12:20 AM

Fx.Morph() not only the width/height when using direction: 'in', but also the margin/border/padding, so there won't be a shock when the element suddenly gets display: noneed, and not only the height/width disappears (which it already did while Fx.Morph()ing), but also the margin, border and padding.

I hope you understand what I mean...

Comments and changes to this ticket

  • MadRabbit

    MadRabbit January 8th, 2010 @ 01:24 PM

    • Tag changed from fx.morph, fx.slide, margin to fx.morph, fx.slide

    Didn't really get what's the actual problem. Could you please rephrase it and show some examples?

  • Douwe M.

    Douwe M. January 8th, 2010 @ 08:21 PM

    When using Fx.Slide() with direction: 'top' and how: 'out', what it actually does is Fx.Morph() the height of the element. This way, when the sliding element has margins or paddings applied, they don't slide away smoothly together with the height, but first the element gets height: 0px, and when this has finished, the margin and padding disappear with a shock (not smoothly), when Element#hide() is fired.

  • MadRabbit

    MadRabbit January 8th, 2010 @ 08:48 PM

    that's right, the slide and fade effects hide the element after their work, because it's an equivalent of hide/show method and you're supposed to use it with a proper block element.

    If for some reason you wan't to have it on an element with margins and don't wan't it to hide the element on the end, you can easily call it like .morph({height: '0px'}) I guess.

  • Douwe M.

    Douwe M. January 8th, 2010 @ 08:51 PM

    Yeah, I get that, but I would like Fx.Slide() to not only Fx.Morph() the height, but also the margin and padding... And what do you mean by 'proper block element'?

  • MadRabbit

    MadRabbit January 8th, 2010 @ 08:58 PM

    at the end the element receives style 'display' - 'none', that's why the margins and paddings get disappeared.

    blocks - are DIV elements. you shouldn't really use P tags for blocks, first it's semantically wrong, second they are buggy. pretty much the same for the FORM elements.

    a safe technique, would be to wrap the block you wanna toggle, with a block (DIV) tag without margins and slide it. then everything will be working just fine

  • Douwe M.

    Douwe M. January 8th, 2010 @ 09:11 PM

    Yeah, I know, that's what causes the ugly shock/jump at the end, instead of the whole element sliding away smoothly.

    Last time I checked <p> and <form> where block level elements too... And talking about semantics, I think using lots and lots of <div>s just to get some effects working isn't really the way to go either...

    What I'm trying to do is the following:
    I have a <p> that shows the 'status' of my login form, so it either shows that your password was incorrect, or that you will be redirected to the main page. I want this <p> to slide down when some new status message was received, and to slide up again just before sending the Xhr request.
    All my <p>s have a margin-bottom of 5px, so what happens is the 5px is applied just before the Fx.Slide()ing, and when Fx.Slide()ing out again, the 5px disappear only after the <p> itself has slid away smoothly. Of course, a 5px jump isn't really that frustrating, but something like 15px is unnecessarily ugly..
    I know using a <div> to wrap the <p> works, and that's what I'm doing now, but I think it would be nicer too slide away the margin/padding too...

    Just my thoughts

  • MadRabbit

    MadRabbit January 8th, 2010 @ 09:45 PM

    • State changed from “new” to “hold”

    one div is not a lots and lots of divs. if you have lots and lots of something, then you probably should think about the actual design, maybe write your own custom fx, it's really simple with our engine.

    and then we cannot fix those things for everyone, I could add the margin/padding changes, but then someone will appear saying "I don't like it, other frameworks don't do that, it screws my design".

    So I'd rather keep it simple as it is.

  • Douwe M.

    Douwe M. January 8th, 2010 @ 10:23 PM

    Well, I can't think of any situation in which sliding height -> sliding margin/padding -> hiding element would screw up the design, it essentially does the same as justing hiding the element... But I get what you mean, different people want different things. And I, for one, would really like some Option on Fx.Slide(), to not only Fx.Morph() the height, but also the margin, border and padding ;-)
    Don't put it on top of your list, but when you have resolved all other tickets (and other ideas of your own), and when you can't think of anything else to do, I would really like it if you thought about this feature again :-)

    (For now, I'll see if I can make my own Fx extension, as you suggested)

  • MadRabbit

    MadRabbit January 9th, 2010 @ 12:38 AM

    I've put it on hold, will see what we can do about it later

  • Douwe M.

    Douwe M. January 9th, 2010 @ 12:46 AM

    Okay, that's fine :-)

Please Sign in or create a free account to add a new ticket.

With your very own profile, you can contribute to projects, track your activity, watch tickets, receive and update tickets through your email and much more.

New-ticket Create new ticket

Create your profile

Help contribute to this project by taking a few moments to create your personal profile. Create your profile ยป

RightJS Core Tickets

Shared Ticket Bins

People watching this ticket

Pages