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?
<!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" />
