How can I use an alert or form input to allow a user to set a value of a CSS parameter [closed]


Tags: javascript,jquery,html,css

Problem :

Basically what I want to do is allow a user to type in a value either in an alert on the press of a button, or in a form input field which is used on a button press. The number which has been input needs to be between 0 and 360.

CSS to be changed:

.hueshiftFilterEffect{
    -webkit-filter: hue-rotate(0deg); 
}

Thanks for any help.



Solution :

JSFiddle

Use the prompt function and assign its return value via element.css()

$('#btn').click(function(e){
    var w=prompt("Enter new hue:","");
    $('#box').css('-webkit-filter','hue-rotate('+w+'deg)');
});

    CSS Howto..

    How to Add Class to Bootstrap Thumbnails on Slider Change

    CSS - How to deactivate the :hover pseudo class in IE 6

    CSS How to animate a transition from opacity 0 upon hover

    How can i use “z-index” as an css attribute selector?

    how to reference background image urls in css through config entrys

    how to change css property of 2nd & 6rd DIV using jquery

    How to remove CSS and JS from a certain content-type in Drupal 7

    How do I vertical center text next to an image in html/css?

    How to change visibility of Calendar on textbox click

    How to make round circle links responsive in css?

    how to apply multiple css image filters using jquery

    How to make permanent changes to a website's CSS from within the browser?

    How to add tags/images on javascript fetched textarea data?

    How to ONLY target Chrome DevTools window in CSS?

    css how to float or display two elements of unknown widths next to each other inside a div of unknown width

    How to create CSS with 2 loops

    CSS how to hide resize divs while keeping it centerd

    How to style textbox using CSS in ASP.NET

    How to add table highlighting in PHP?

    How to overlap a child element of one div with`display:table-cell` over another div with `display:table-cell?`

    CSS how translate DIV with whole content in it

    How can I make an svg scale with its parent container?

    How to make blur effect without white light?

    Capybara how to check if 'li' of a given link has proper css class

    How To Center a Letterpress Effect?

    How to use CSS with Django forms?

    Text overlay over image on hover. How to stop other divs from moving

    How to achieve two multi-step forms, one form on each side using CSS transformation

    Textarea doesn't show newline in IE

    overlay showing in background instead of on top