September 15, 2013

jsfiddle same codes display different results on html

Coding Freak’s Question:

I put http://jsfiddle.net/48Hpa/19/ same codes to HTML, but I get different results ……………………………………………………………………………………………………………………………………………….. why is that?

enter image description here

<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title></title>

    <link type="text/css" rel="stylesheet" href="style.css" />
    <link type="text/css" rel="stylesheet" href="http://code.jquery.com/ui/1.9.2/themes/smoothness/jquery-ui.css" />
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.js"></script>

    <script>

        $(document).ready(function () {

            $(function () {
                $("#slider1").slider({
                    range: "min",
                    value: 36,
                    min: 12,
                    max: 36,
                    slide: function (event, ui) {
                        $(".amount1").val(ui.value);
                        writesum();
                    }
                });
                $(".amount1").val($("#slider1").slider("value"));
            });

            $(function () {
                $("#slider2").slider({
                    range: "min",
                    value: 50000,
                    min: 1,
                    max: 50000,
                    slide: function (event, ui) {
                        $(".amount2").val(ui.value);
                        writesum();
                    }
                });
                $(".amount2").val($("#slider2").slider("value"));
            });


            function writesum() {
                var months = $('.amount1').val();
                var credits = $('.amount2').val();
                var payment = parseFloat(Number(credits) / Number(months))
                var rounded = payment.toFixed(2);
                $('.amount3').val(rounded);
            }

        });

    </script>

</head>
<body>
     <input type="text" class="amount1" />

        <div class="container">
            <div id="slider1"></div>
        </div>

        <input type="text" class="amount2" />

        <div class="container">
            <div id="slider2"></div>
        </div>

        <div class="sonuccontainer">
            <div class="bilgilendirme">aylık ödeme miktarınız</div>
            <input type="text" class="amount3" />
        </div>
</body>
</html>

JsFiddle use a CSS reset file to reset all browsers default styling. That might be the cause.

But the blue is coming from your style definition:

.ui-slider .ui-slider-handle { outline-color: transparent; background: blue; position: absolute; top: -8px; left: -8px; z-index: 2;  border-radius: 70px;  width: 30px; height:30px; cursor: pointer; }

If it is not showing on your page, means there is something wrong in your page or the styles are being overridden.

Looking at your html, the CSS of jQuery Ui is loaded after your local CSS, so the styles from it are overriding your styles.css Switch them and put styles.css at last.

<link type="text/css" rel="stylesheet" href="http://code.jquery.com/ui/1.9.2/themes/smoothness/jquery-ui.css" />
<link type="text/css" rel="stylesheet" href="style.css" />

Author: Nabin Nepal (Starx)

Hello, I am Nabin Nepal and you can call me Starx. This is my blog where write about my life and my involvements. I am a Software Developer, A Cyclist and a Realist. I hope you will find my blog interesting. Follow me on Google+

...

Please fill the form - I will response as fast as I can!