jquerymobilefadeto

.fadeTo not working on my code, but works fine with same code on w3School. Why?

So basically this works on w3School but not in my live environment. Here is the code:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> 
        <title>Vecta Corp. Mobile</title>
        <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" />
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
    <script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
          <script>
    $(document).ready(function(){
        $("#5").click(function(){
            $("#yourview").fadeTo(1000, 0.05);
        });
    });

        </script>
    </head>

    <body>
    <section data-role="content">

            <h2>Dr. Tint SolarPill Tint</h2>
            <h3>See how SolarPill looks from inside your tinted car</h3>

            <p><img alt="" src="images/tintshade.png" id="yourview" style="width:347px;"></p>
<p style="width:350px;">
<input id="5" value="5%"  style="font-size:12px;width: 36px;margin-left: 18px;" type="button">

</p>


        </section>
    </div>
</body>
</html>

Here is the : w3school link and paste this code into it and try for yourself:

    <!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script>
$(document).ready(function(){
    $("#5").click(function(){
        $("#yourview").fadeTo(1000, 0.4);
    });
});
</script>
</head>
<body>

<p><img alt="" src="http://www.mobile-tinting.com/img.png" id="yourview" style="width:347px;"></p>

<input id="5" value="5%" style="font-size:12px;width: 36px;margin-left: 18px;" type="button">
</body>
</html>

Is this a conflict with jquery mobile as that is literally the only difference between the two codes. Or am I doing something wrong here?

Solution

  • I just made a few examples on this Codepen. It seems a common problem that button inputs are unclickable (it seems to be due to jQuery Mobile). You can try a few other way to achieve what's you are trying to do:

    1. Use a <button> tag instead
    2. Use a <a> tag, setting the data-role attribute to button so it adopts the button style.