Javascript Slider not showing and Graph tips

Question

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

What is your question? PHP is a server-side language, you can't make a slider in PHP. — , Jan 22 '15 at 23:49
You just answered it by telling me that.. I wanted to know if there any way to make it in PHP. But the slider still not appear on my page and I Dont know why! — MikiiTakagi, Jan 22 '15 at 23:51
All the code you showed here is not PHP, so I don't know what you're exactly trying to do now. The fiddle you showed works, so what's the problem exactly? — , Jan 22 '15 at 23:53
It working on fiddle but not on my website, maybe it how i insert the javascript in my page? Im new to PHP and Javascript and still dont know how it work correctly. — MikiiTakagi, Jan 22 '15 at 23:56
Perhaps http://stackoverflow.com/q/13829667/1544337 or http://docstore.mik.ua/orelly/webprog/jscript/ch12_02.htm is of help? — , Jan 22 '15 at 23:57
After multiple try the slider is still not there, i copied the javascript into my code.js and there still no slider showing. My menu is in javascript too and work fine! — MikiiTakagi, Jan 23 '15 at 00:26
I was going to sleep, but perhaps you can [edit] your question and include the full contents of the files, or a smaller version in which the issue can be reproduced? Then I'll have a look in the morning. — , Jan 23 '15 at 00:28
I think you have everything you need in those line if you want more just ask and you shall receive! — MikiiTakagi, Jan 23 '15 at 00:39
I see NMC has answered your question already. Glad to see it's solved :) — , Jan 23 '15 at 10:39

score 0 · Accepted Answer · answered Jan 23 '15 at 03:38

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>

Javascript Slider not showing and Graph tips

1 Answers1