1. Hello!

    First of all, welcome to MapleLegends! You are currently viewing the forums as a guest, so you can only view the first post of every topic. We highly recommend registering so you can be part of our community.

    By registering to our forums you can introduce yourself and make your first friends, talk in the shoutbox, contribute, and much more!

    This process only takes a few minutes and you can always decide to lurk even after!

    - MapleLegends Administration-
  2. Experiencing disconnecting after inserting your login info? Make sure you are on the latest MapleLegends version. The current latest version is found by clicking here.
    Dismiss Notice

Website suggestion: regarding top announcement bar with yellow font

Discussion in 'Accepted' started by Precel, Feb 14, 2019.

  1. Precel
    Offline

    Precel Zakum Retired Staff

    1,797
    247
    460
    Nov 13, 2018
    Male
    12:42 PM
    Precel
    Priest
    100
    Spirit
    upload_2019-2-14_8-17-34.png

    This bar.

    When you move/refresh the page, it starts over from the right, making you wait for 30 seconds to be able to read again. For most users it's not a problem, but new users might appreciate being able to read it.

    I looked up how to fix it, but there was only one relevant result: https://stackoverflow.com/questions/37198394/how-to-continue-marquee-after-after-page-is-refreshed

    Note: The answer given in that link is not thorough and I don't think it has what we're trying to do here. On another note, marquee tag is obsolete so it'd be a good idea to transition over to JS anyway.

    So I digged further and found this that might be able to be used in conjunction with above link (albeit quite messy solution for a small problem). https://stackoverflow.com/questions/32770490/how-to-keep-elements-non-refreshed

    Or maybe there is a way to just keep marquee scrolling with JS. I'm not very familiar with the language so I'm not sure.


    Another suggestion would be to set the start position of the texts further to the left so that we can read at least a portion of it while it scrolls.
     
    • Friendly Friendly x 2
  2. Bambo
    Offline

    Bambo Stone Golem

    117
    41
    135
    Jul 26, 2017
    Male
    Hanoi, Vietnam
    11:42 PM
    FPBambo
    F/P Wizard
    143
    Spirit
    come back qt imy f4
     
    • Friendly Friendly x 1
  3. Kimmy
    Offline

    Kimmy Administrator Staff Member Administrator Game Moderator

    10,963
    10,998
    551
    Sep 9, 2014
    The Netherlands
    5:42 PM
    Moderator Post
    We are using different ways for the scrolling text depending on the browser. The reason for this is because some browsers are super laggy on specific methods, so by ""fixing"" that we use different methods to make it as smooth as we can for each browser. I am not sure if each method have an easy to implement solution. I am fine with the suggestion though if it is FeroxAnimaFeroxAnima
     
    • Like Like x 1
    • Friendly Friendly x 1
  4. FeroxAnima
    Offline

    FeroxAnima Web Developer Staff Member Web Developer

    162
    91
    178
    Dec 29, 2017
    Male
    6:42 PM
    Zelretch/HerSlave
    Bishop
    181
    Horny/Muse
    Hehe, thanks, but I assure you I didn't implement this blindly :') Chrome specifically handles <marquee> tags well, so for Chrome we use that; but if you'd try to open the ML website in any other browser and then inspect the source, you'd notice it's definitely not just a simple <marquee> tag up there anymore. x)
    Sadly, since marquee elements have never been properly defined anywhere and every browser kinda implemented them "however it felt like doing so" (i.e nothing defines the speed/direction/"smoothness"/etc of a marquee element's animation), they've simply become obsolete while it was decided to make it official that the only way to create a "marquee effect" properly is to make developers take direct control of the animation -- using CSS/Javascript. So since Chrome does implement it nicely, I decided for Chrome I can use <marquee> for now; for other browsers it is manually animated.

    I already tried it when I made this and it just doesn't look good. Or at least, I didn't manage to make it look good. ;-;

    As for your main point, that of refresh killing the scrolling text, however -- I see what you mean and I'll try to come up with a neat solution. Sadly I'm super swamped IRL right now and don't have much time to dedicate to the website so I'm not sure when I'm gonna get around to doing it. ;-;

    Thanks for the feedback :heart:

    EDIT: Ninja'd by Kimmy :D
     
    • Great Work Great Work x 1
    • Friendly Friendly x 1
  5. Motto
    Offline

    Motto Skelegon

    1,068
    1,139
    428
    Jun 30, 2018
    Male
    Mars
    5:42 PM
    PogShad Motto
    Islander
    201
    What about a first animation that makes the text appear after 0.05 sec after page loading? And starts scrolling to mid section faster, to later on slow down?

    Would make the text appear "like" it was positioned in the middle but by smoothly moving it to center to after move normally.
    Not sure if it's actually nice though.
     
  6. FeroxAnima
    Offline

    FeroxAnima Web Developer Staff Member Web Developer

    162
    91
    178
    Dec 29, 2017
    Male
    6:42 PM
    Zelretch/HerSlave
    Bishop
    181
    Horny/Muse
    I tried a bunch of stuff but anything I tried seemed to kill the "MapleStory in-game notice" feel. ;-;
    I'm thinking in the direction of making the entire message show on mouse hover or something. Do you guys think that'd solve the problem or is that not intuitive enough? (Or, in other words -- if you wanted to read the entire message, do you see yourselves trying to put your mouse on top of it or clicking it or something?)
     
  7. OP
    OP
    Precel
    Offline

    Precel Zakum Retired Staff

    1,797
    247
    460
    Nov 13, 2018
    Male
    12:42 PM
    Precel
    Priest
    100
    Spirit
    That would definitely help. Good idea!

    Something like this?: https://www.w3schools.com/css/css_tooltip.asp
     
  8. FeroxAnima
    Offline

    FeroxAnima Web Developer Staff Member Web Developer

    162
    91
    178
    Dec 29, 2017
    Male
    6:42 PM
    Zelretch/HerSlave
    Bishop
    181
    Horny/Muse
    For example, yes!
    My thougts were either:
    1. A tooltip, similar to the one that shows when you hover on sad Kimmy in the vote page when you can't vote (which is the same kind of tooltip in your link):
    upload_2019-2-14_20-39-2.png
    (Except on hover on the notice section and containing its contents as text, of course.)

    2. A title attribute:
    upload_2019-2-14_20-41-36.png

    or,
    3. Simply showing the entire notice unanimated while the cursor is in the notice section. (Kinda "covering" the animation with a static message while the mouse is up there.)


    But I'm leaning towards a tooltip like #1 (mostly because it's a very simple solution and I'm drowning in hw atm XD).
     
    • Great Work Great Work x 1
  9. OP
    OP
    Precel
    Offline

    Precel Zakum Retired Staff

    1,797
    247
    460
    Nov 13, 2018
    Male
    12:42 PM
    Precel
    Priest
    100
    Spirit
    I'm also in favor of tool tip, since it's more visible and nicer looking than the attribute.

    Covering up the whole animation would suffice too, but I think it's better to let it continously scroll for aesthetic and consistency.

    Edit: a foreseeable problem with #1 would be getting the size of tool tip box right. I'm not sure if it can be dynamic with just CSS?
     
  10. FeroxAnima
    Offline

    FeroxAnima Web Developer Staff Member Web Developer

    162
    91
    178
    Dec 29, 2017
    Male
    6:42 PM
    Zelretch/HerSlave
    Bishop
    181
    Horny/Muse
    I'm also not sure about whether the tooltip is dynamically-sized by default, but it's cool; I'll look into it and can also use js to set the size if needed c:
    I'll try to get around to it soon!
     
    Last edited: Feb 15, 2019
    • Friendly Friendly x 1
  11. FeroxAnima
    Offline

    FeroxAnima Web Developer Staff Member Web Developer

    162
    91
    178
    Dec 29, 2017
    Male
    6:42 PM
    Zelretch/HerSlave
    Bishop
    181
    Horny/Muse
    upload_2019-2-15_12-25-22.png
    I hope that's a bit better c:
     
    • Great Work Great Work x 2

Share This Page