Basic concept for how javascript replaces an html input with something interactive?


Tags: javascript,css,comments

Problem :

This is a very low-level, conceptual question.

I have a content site where the users can rate comments left by other users using a dropdown form with two choices, +1 or -1.

I'd like to "transform" this into a nice-looking up/down arrow, a la reddit comments.

I understand that there's a way to do this through CSS + javascript, but I don't understand what that method is and how it works so I can begin looking into it. What exactly so I need to do to turn this dropdown into an up/down voting widget?

I don't need help with the actual ranking of the comments, the algo for it or anything, I just want to understand how to replace this UI element with something more friendly.



Solution :

The basic technique is to use javascript to hide the actual form element (probably via setting a style of display:none) and then add your widget via the DOM manipulation methods. Then, set onclicks on the up/down arrows to update the the value of the hidden form element, increasing/decreasing it by one each time.


    CSS Howto..

    How to layer elements with CSS position property?

    How to position content next to each other without table?

    How to change the background color of a div in HTML/CSS

    How can I apply CSS to a JPG server-side?

    How to create vertical list of items in CSS?

    How to implement padding-free sprites in css?

    How to apply a class on
  • when mouse is hovering on it?
  • How do URL fragment (the #stuff) interacts with CSS?

    How to remove hover state

    How to get the content of the bottom element of a flexbox to be 100% height its container

    CSS Fonts: Howto convert multiple TTF files into one file?

    How is CSS/HTML Rendered In Browsers?

    How can i make image size big using css?

    CSS: how to create responsive irregular shapes

    How to override custom placeholder css

    Show notification counter with bootstrap

    I have 3 divs in one row, how do I get the middle div to stay an exact width while the left and right div shrink in as the screen resizes smaller?

    How do I handle modal dialog fadeout in jQuery UI?

    how to apply ellipse effect in which contain space in string?

    How to fix background image inside div

    How to make divs that automatically wrap to the next row

    CSS display: table - How can I line up two cells to be in the center of another DIV using display: table?

    How to check css in unit test

    How to center
      in a page?

    background-image: url(“images/plaid.jpg”) no-repeat; wont show up

    How to create invoice / money reciept with html [closed]

    How can I force a dynamic
      to be 100% the height of it's parent, no more, no less?

    CSS: how to select parent's sibling [duplicate]

    How to make css-menu independent of the number of menu items?

    How to simplify my CSS stylesheet?