Jquery dynamically change css style

Question

    <style type="text/css">
        .style1
        {
            width: 50%; //must to be dynamically change == e.pageX
            height: 100%;
        }
    </style>

<script type="text/javascript">
    jQuery(document).ready(function () {
        $(document).mousemove(function (e) {
            $('.changes').val(e.pageX);
        });
    });
</script>

<asp:Image ID="Image1" runat="server" cssClass="changes style1"  ImageUrl="~/8.jpg"/>

How I can change with jquery width: **%; in style1 == e.pageX

Image width follow to mouse without any click and page reload.

Zoltan Toth · Accepted Answer · 2012-09-18 10:24:44Z

1

jQuery(document).ready(function () {
    $(document).mousemove(function (e) {
        $('.changes').width(e.pageX);
    });
});

edited Sep 18, 2012 at 10:24

answered Sep 18, 2012 at 10:16

Zoltan Toth

47.8k12 gold badges132 silver badges138 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

marc_s · Accepted Answer · 2016-01-16 09:27:42Z

You don't need to change the style val you just need to change the style width attribute value by using $("element").width()

You can do it like this:

<style type="text/css">
.style1
  {
    width: 50%; //must to be dynamically change == e.pageX
    height: 100%;
  }
</style>

<script type="text/javascript">
    jQuery(document).ready(function () {
        $(document).mousemove(function (e) {
            $('.changes').width(e.pageX);   // See the jQuery width [here][1]
        });
    });
</script>

<asp:Image ID="Image1" runat="server" cssClass="changes style1"  ImageUrl="~/8.jpg"/>

billyonecan · Accepted Answer · 2012-09-18 10:21:23Z

0

I think this is what you wanted:

jQuery(document).ready(function() {
    $(this).mousemove(function(e) {
        $('.style1').width(e.pageX);
    });
});

Here's a fiddle

answered Sep 18, 2012 at 10:21

billyonecan

20.3k9 gold badges44 silver badges66 bronze badges

Collectives™ on Stack Overflow

Jquery dynamically change css style

3 Answers 3

Comments

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Related