Javascript Slider not showing and Graph tips


Tags: javascript,php,jquery,css,slider

Problem :

I know im doing something wrong since i dont know javascript yet. My slider is not showing on the website but everything else yes. Here is my code:

Html

<head>
    <meta charset="utf-8" />
    <title>Hellequin - Class - Cra</title>
    <link href="../../css.css" rel="stylesheet" type="text/css" media="screen" />
    <script src="//ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.3.min.js"></script>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
    <script src="../../code.js"></script>
</head>

<body>
    <table>
         <tr>
                <td>
                    <div class="container">
                        <div id="slider"></div>
                    </div>
                    <br />
                    <table border="1" width="100" height="50">
                        <tr>
                            <td>
                                <input type="text" id="ElephantInfo" />
                            </td>
                        </tr>
                        <tr>
                            <td>
                                <div id="Elephant">Please slide !</div>
                            </td>
                        </tr>
                    </table>
                </td>
            </tr>
        </table>
</body>

Css

.container {width : 70%; margin: 0px auto;}
#elephant{
    margin-bottom:5px;
    border : 1px solid black;
    width : 50px;
    height : 20px;
    line-height : 20px;
    position : relative;
    text-align : center;
}

Javascript

$(document).ready(function () {
    $(function () {
        var elephantArr = new Array("",
            "200",
            "199",
            "198",
            "197",
            "196",
            "195",
            "194",
            "193",
            "192",
            "191",
            "190",
            "189");
        var initialValue = 1,
            min = 1,
            max = 200;
        $("#slider").slider({
            value: initialValue,
            min: min,
            max: max,
            step: 1,
            slide: function (event, ui) {
                $("#elephantInfo").val(ui.value);
                $("#elephant").text(elephantArr[ui.value]);
                $("#elephant").css("left", "10px");
            }
        });
        $("#elephantInfo").val(initialValue);
        $("#elephant").text(elephantArr[initialValue]);
        $("#elephant").css("left", "10px");
    });
});

And if there any tips about how to customize how the slider look like, im open to suggestion!

PS: Sry for the bad language..



Solution :

Jquery slider is part of the Jquery UI package. In your current code, you are loading jquery 1.8.3 multiple times.

Add these lines to include both the css and js file from the jQuery UI and don't forget to remove one jquery include.

<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/themes/smoothness/jquery-ui.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script>

    CSS Howto..

    ASP.NET DataBoundField DataFormatString, how can I add html correctly?

    How to select a css class as selected dynamically in mvc

    How to use a responsive background image that centers differently in both portrait & landscape?

    How do I float 3 elements right above each other and one left?

    How to overide all css style classes in an input field without effecting other elements?

    How to add css to Vaadin / Maven project?

    How to add link without ruining transition CSS/HTML

    How do i add an external CSS file as well as CSS in the HTML file?

    how to convert this site to a mobile site or make it liquid?

    how to use CSS positioning in 100% width layout

    How to center a navbar

    How to remove spacing between tags?

    Font-family not showing correctly on my website

    How to add header in a row of a table

    How to change html background dynamically

    CSS: How to get rid of the extra space of first line of a paragraph?

    How can I overlay an image in a fluid layout (zurb foundation)

    how to create inline style with :before and :after

    how to remove white space in justified css

    How to align text next to an icon with CSS?

    How do I add a the bootstrap 'form-control' class to a select using the Simple_Form gem?

    How to set DIV's width based on CSS indexes

    How to deal with collapsing margins on html & body?

    how to edit a css selector in order to shorten the amount of characters used in file

    How can I scale the space taken by a scaled element

    How Do I Perfectly Center a Float Element in Between Two Floated Elements?

    How to not apply a webpage's CSS on the div I am inserting into it via content scripts?

    How to strikethrough empty div

    How to change the body background for three different div-s

    How do I change the text inside a button?