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..

    How to add another two full width sections below (CSS)

    How to make a CSS transition work “backwards”?

    How can I align two icons on my webpage next to each other?

    jQuery increase box to show overflow contents

    How to change the height of div with the content of other div

    JSSOR slider: Image Gallery demo keeps showing highlight image on mobile

    how to make the osx-like border on css?

    How to resize a canvas without anti-aliasing?

    How to find all inputs which is not inside one div with css selector?

    How to prevent CSS inheritance where child selectors fail?

    Why isn't my div content showing?

    How to use 100% CSS background-image with scrolling content?

    How to apply CSS only to numbers in paragraph? (without )

    How to display a css animation in the center of the screen

    How to create hover effects for all links EXCEPT the one you hover on using javascript/jquery/css?

    How to use css property under a class only

    Javascript jQuery only shows Image element once in IE. FF works

    How to make this rounded shape with css [duplicate]

    How to style the first row of every tr group?

    How can I turn a background visibility on and off with jQuery?

    How to get the header and navbar on top?

    CSS: How does setting a right margin cause the element's parent to become visible in this example?

    How to have complex shadow background on variable height content area via CSS?

    Show div when hover another div using only css

    how to style xml tag attribute with css

    How to use CSS media query to scale background-image to viewing window

    nth-child's child is not shown

    How do I correctly position elements and lay out a page?

    How to fade multiple background colors after few seconds? [duplicate]

    How to assign CSS to mobile page in asp.net