SitePoint Sponsor

User Tag List

Results 1 to 14 of 14
  1. #1
    SitePoint Guru
    Join Date
    Jun 2009
    Posts
    789
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)

    plain JS: SLIDE element

    is there a slide function in plain Javascript?

    I have to slide an element from one point to another.... and it has to slide in exactly 0.24 secs. from one pt to another... ;-o )

    but I'll be happy if I just get it to slide for now...;-)

    thank you...

  2. #2
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,312
    Mentioned
    177 Post(s)
    Tagged
    8 Thread(s)
    Hi Maya,

    There isn't a slide() function in Pain JavaScript, although obviously you can program your own.
    Is there any reason you don't want to use jQuery for this?
    Animation is one area where jQuery excels and makes a developper's life much easier.
    You can also build a custom version of jQuery and just pull in the animation functionality if it is size you are worried about.

  3. #3
    SitePoint Guru
    Join Date
    Jun 2009
    Posts
    789
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    hi Pullo,

    it's for a test.. they insist on plain JS... (sigh...)

    but well, there was a time constraint, I had to hand in already.. but that's ok... if I can I want to figure out if I can do it over the weekend, and maybe just send it to the guy again anyway...

    and of course you're right, I'm sure in real life no one in their right mind would do stuff like this with with JS...

    the JS issue is slowly getting frustrating for job-seekers... a few years ago we all had to learn at least jQuery, and some other libraries (I only know jQuery....) they were all the rage, and you had to know them...

    now they're going back to, oh but well, you do need to know how to do all this complicated with plain JS too, of course... it's getting ridiculous... and some job descriptions contain a mind-boggling amount of JS libraries, some weird ones I've never even heard of..... (and they do know they will never find someone who knows all of them...)

    in my particular experience, every single place where I have worked in the last 4 years or so, they have used nothing but jQuery, absolutely nothing else...

    thank you for your response... have a good weekend....

  4. #4
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,312
    Mentioned
    177 Post(s)
    Tagged
    8 Thread(s)
    Hi,

    I'm off to bed now, so sorry for the short reply.
    I found this: http://stackoverflow.com/questions/3...without-jquery
    Maybe it it'll help.

    Let us know how you get on.

  5. #5
    SitePoint Guru
    Join Date
    Jun 2009
    Posts
    789
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    on the contrary, Pullo.... thank you for your response.... I will look @ url you posted.....

    gute Nacht.... schlaf gut....:-)

  6. #6
    SitePoint Guru
    Join Date
    Jun 2009
    Posts
    789
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    actually in case you're curious, here are the JS instructions:

    a) When I click on the "Swap Vertical" button, the two buttons swap vertical positions in 0.24 seconds. (i.e., the bottom button moves up and the top button moves down, but both buttons retain their horizontal position.)

    b) When I click on the "Swap Horizontal" button, the two buttons swap horizontal positions in 0.24 seconds.

    c) The button animations should accelerate at the beginning, and should not decelerate at the end.
    "accelerate"??? man, I had never even heard of "accelerating" elements with JS.....;-o
    (accelerate "at the beginning".... only at the beginning... and yeah, I'll make sure I don't "decelerate" at the end....;-) man, anyone would think they write computer games or something, but they don't, they just do corporate websites...;-)

    thanks again....

  7. #7
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,598
    Mentioned
    24 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by maya90 View Post
    and of course you're right, I'm sure in real life no one in their right mind would do stuff like this with with JS...
    Of course they would - they'd usually have a library of functions for providing all the common parts of the processing though for example a collection of JavaScript functions such as JQuery.

    JQuery is not a separate language, it is just a few functions written in JavaScript that can make writing compex JavaScript easier. It is actually way overkill for a simple process such as slide() as you would only be using a small fraction of the library code.

    I have a series of tutorials on making elements move about the page that starts at http://javascriptexample.net/anim11.php - it makes use of a much smaller set of common functions that just provide the functionality needed for this type of script.
    Stephen J Chapman

    javascriptexample.net, Book Reviews, follow me on Twitter
    HTML Help, CSS Help, JavaScript Help, PHP/mySQL Help, blog
    <input name="html5" type="text" required pattern="^$">

  8. #8
    SitePoint Guru
    Join Date
    Jun 2009
    Posts
    789
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    thank you very much, felgal...

    yes I know jQuery is not a separate language... I know exactly what it is.....;-) and when I try to do hard stuff in plain JS I realize how much goes on "behind the scenes" in jQuery (& other libraries too, I suppose.....)

    thank you very much for the url you posted.... I can't now, but I will it check it tomorrow for sure....

    thank you... have a good day....

  9. #9
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    23,592
    Mentioned
    411 Post(s)
    Tagged
    6 Thread(s)
    Off Topic:

    Quote Originally Posted by Pullo View Post
    Pain JavaScript
    Is it really that bad?

  10. #10
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,526
    Mentioned
    83 Post(s)
    Tagged
    3 Thread(s)
    If you've used to jQuery, you would have heard of accelerating and decelerating As the term "easing".

    There's a good suite of easing demos over at http://jqueryui.com/effect/#easing
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  11. #11
    SitePoint Guru
    Join Date
    Jun 2009
    Posts
    789
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    hi Paul.....:-)

    yes of course I have used "easing" in jQuery (mosly in conjunction with cycle plugin (there's an "easing" plugin with all sorts of transition effects...)

    thank you!!

  12. #12
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,312
    Mentioned
    177 Post(s)
    Tagged
    8 Thread(s)
    Off Topic:

    Quote Originally Posted by ralph.m View Post
    Is it really that bad?
    Sure is! I would use jQuery to brush my teeth if I could. Everything else is just pain and agony.


    Back on topic: how did you get on, Maya?

    @felgall ; your demo didn't work for me in the latest Chrome.
    The text just sits there, when I'm guessing it should move.

  13. #13
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,598
    Mentioned
    24 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by Pullo View Post
    @felgall ; your demo didn't work for me in the latest Chrome.
    The text just sits there, when I'm guessing it should move.
    There are a series of tutorials there that show step by step how to build an animation script. The element in the first tutorial doesn't move - that tutorial is just showing how to build an independent element that can be made to move.
    Stephen J Chapman

    javascriptexample.net, Book Reviews, follow me on Twitter
    HTML Help, CSS Help, JavaScript Help, PHP/mySQL Help, blog
    <input name="html5" type="text" required pattern="^$">

  14. #14
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,312
    Mentioned
    177 Post(s)
    Tagged
    8 Thread(s)
    Oh ok. Sorry!

    I just looked at the source, saw this:

    Code JavaScript:
    (function() {
      var anim = new $O('myobj');
      anim.moveto('200px','300px');
      anim.setVisibility('visible');
    })();

    and thought I had missed something.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •