Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums JavaScript show/hide

  • This topic is empty.
Viewing 14 posts - 76 through 89 (of 89 total)
  • Author
    Posts
  • #241894
    Shikkediel
    Participant

    It’s only missing the flashing effect when closing a widget.

    That’s kind of a shortcoming in the original functionality, it requires for the shadow element to be put outside of the widget and be positioned with javascript. A css approach is a lot cleaner.

    Edit – much had to be altered… but here’s a version that does the animations with jQuery so it’s a lot easier to tweak the effect.

    Link

    $('.widget-hide').click(function() {
    
      $(this).closest(matter).next(haze).stop().fadeTo(200,0.3).delay(300).fadeTo(50,0);
    });
    

    When clicking the close button the shadow first fades to opacity 0.3 in 200ms, waits 300ms then fades out completely in 50ms.

    fadeTo(200,0.3).delay(300).fadeTo(50,0)
    
    #241895
    Beverleyh
    Participant

    TS decided to use another draggable script

    Yes I know but being as its a combination of the work we’ve both done, and the “box-shadow on move” was a feature I already implemented (noted here https://css-tricks.com/forums/topic/showhide/page/3/#post-241293), I thought you’d extract that part too :)

    #241896
    Shikkediel
    Participant

    It’s cool, gotta admit I kinda overlooked it while mostly checking your page that’s without the draggable script…

    Replicating the original effect turned out to not be very doable with a box-shadow alone by the way.

    :-s

    #241897
    Shikkediel
    Participant

    I’m actually also not that great with css animations and am only now learning that you can stack transitions and animate box-shadow separately.

    #241918
    Allie_P
    Participant

    That’s kind of a shortcoming in the original functionality, it requires for the shadow element to be put outside of the widget and be positioned with javascript. A css approach is a lot cleaner.

    Edit – much had to be altered… but here’s a version that does the animations with jQuery so it’s a lot easier to tweak the effect.

    Oh, that’s not what I meant.
    I was talking about the navigation menu at the top. That’s what should flash when you close one of the widgets. Take a look here.

    #241928
    Shikkediel
    Participant

    Okay, that was probably wasted time then. Lol.

    For what you mentioned, another small plugin is needed. Colour animations aren’t a standard option.

    http://www.bitstorm.org/jquery/color-animation/

    Would be a single line of code but I’m not sure with which pen to proceed. Is the first or second example more to your liking?

    Edit – I think I’d prefer to use the latest example… the styling was made a lot cleaner as well.

    #241933
    Shikkediel
    Participant

    Wow, what was I thinking before @Beverleyh… your two lines of code are about a hundred times more elegant than the spaghetti I put together.

    Using jQuery animations for it as in the latest pen has it advantages though when it comes to control. And using the special easing plugin, the choice of effects is pretty neat as well.

    I’ve added the flashing background colour for the menu by the way. That was a piece of cake.

    $('.widget-hide').click(function() {
    
        $(this).closest(matter).next(haze).stop().fadeTo(200,0.3).delay(300).fadeTo(50,0);
        /* this line */ $('.navigation').animate({'background-color': 'black'}, 40).animate({'background-color': '#ddd'});
    });
    
    #242089
    Allie_P
    Participant

    @Shikkediel @Beverleyh
    It looks and works real good now. Thank you both very much for your help.

    One other question, though… would it be possible to have each navigation link open multiple widgets? Not opening widgets from other links, but simply opening several widgets instead of only one…

    #242133
    Shikkediel
    Participant

    That looks rather hard to achieve if they should also have individually placed random positions. But relatively easy to achieve by using a single widget with multiple child elements…

    #242137
    Allie_P
    Participant

    relatively easy to achieve by using a single widget with multiple child elements…

    How so?

    I forgot to mention that they should then have to be closed one by one.

    You’d close the first one (any of them) and the link would reappear in the navigation menu just like it does now. Then as you close the remaining widgets and the navigation link is already there, it should only flash. I hope that was not too confusing…

    #242172
    Shikkediel
    Participant

    Okay, I understand what you are saying but that would mean the script has to be rewritten extensively as far as I can see. Maybe @Beverleyh can have a glance if it’s doable for her without a whole lot of effort. Not underestimating her skills, I suspect not though.

    #242384
    Allie_P
    Participant

    @Shikkediel, I’ve found an issue with the shadow effect.

    The widget and its respective shadow should behave as a single element, meaning that when you have one widget partially on top of another the shadow of the widget that’s on top should also be on top of the other widget.

    If you look at the yellow widget you’ll notice that its shadow is behind the blue widget. It shouldn’t, it should be in front of it.

    Is that fixable?

    http://i.imgur.com/RVMlK2Q.png

    #242386
    Shikkediel
    Participant

    Fixed. :-)

    Link

    #242424
    Beverleyh
    Participant

    Okay, I understand what you are saying but that would mean the script has to be rewritten extensively as far as I can see. Maybe @beverleyh can have a glance if it’s doable for her without a whole lot of effort. Not underestimating her skills, I suspect not though.

    Sorry, I haven’t logged on in over a week – I’m still on holiday at the moment. The timing isn’t great as I have a new website launch booked when I get back, so I’m not sure if this is something I’ll be able to look at again for a few weeks, if at all. It would require a re-write for sure and unfortunately I don’t have much free time ATM. Sorry.

Viewing 14 posts - 76 through 89 (of 89 total)
  • The forum ‘JavaScript’ is closed to new topics and replies.