JSFiddle does not work properly on localhost

Question

1.00/5 (1 vote)

See more:

, +

I'm having a bit of trouble trying to get my JSFiddle to display and work properly locally. Heres the fiddle: http://jsfiddle.net/kelseyhisek/8vku6pta/

When I save the page source from JSFiddle, the spacing of columns seems off and the JQuery does not work at all.

If anyone could help me out I would HUGELY appreciate it! Thanks so much!

Posted 25-Oct-14 4:27am

Member 11179478

Add a Solution

Comments

[no name] 25-Oct-14 11:48am

How can that happen?? The problem is the jquery references are missing.Those values used are CDN there and they would not be loaded on the page source .
Thanks

Maciej Los 25-Oct-14 14:23pm

How we can help you?

bhagirathimfs 29-Oct-14 1:06am

It is working fine for me :). May be you are using external css and JS file and giving wrong JS or CSS path.

1 solution

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

bhagirathimfs · Answer 1 · 2014-10-28T19:08:00

May be you are using External JS and CSS file and giving wrong path in the root page.
You can use below code.

HTML

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <style>
        @import url("http://fonts.googleapis.com/css?family=Roboto:400,300,100,400italic,700italic,700");

        .delete {
            position: absolute;
            left: 0px;
            top: 0px;
            padding-top: 20px;
            padding-left: 10px;
            height: 50px;
            margin-right: 10px;
            width: 1%;
        }

            .delete:hover {
                -webkit-transition: width .2s ease-in-out;
                -moz-transition: width .2s ease-in-out;
                -o-transition: width .2s ease-in-out;
                transition: width .2s ease-in-out;
                width: 20%;
            }

        .days {
            display: inline-block;
            text-align: center;
            width: 166px;
            margin-top: 30px;
            font-family: "Roboto";
            font-weight: 400;
            font-size: 15px;
        }

        ul {
            float: left;
            list-style: none;
            margin-right: 10px;
            margin-left: 10px;
        }

        .colcontent {
            width: 1000px;
            top: 100px;
            height: 800px;
            position: absolute;
        }

        .connectable_list1 {
            /* background:blue;*/
            width: 166px;
            margin-bottom: 50px;
        }

        .connectable_list2 {
            /*background:red;*/
            width: 800px;
            margin-bottom: 50px;
        }

        .todo {
            clear: both;
        }

        .asgn {
            font-family: "Roboto";
            font-weight: 300;
            font-size: 13px;
            position: relative;
            float: left;
            width: 146px;
            height: 60px;
            margin-bottom: 2px;
            margin-right: 20px;
            padding-left: 30px;
            padding-top: 10px;
            background-color: #E8E8E8;
        }

        .td {
            position: relative;
            float: left;
            width: 146px;
            height: 60px;
            margin-bottom: 10px;
            padding-top: 10px;
            margin-right: 10px;
            padding-left: 30px;
            background-color: #E8E8E8;
        }
    </style>
</head>
<body>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
    <script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.0/jquery-ui.min.js"></script>
    <div class="headings">
        <ul>
            <li class="days">MONDAY</li>
            <li class="days">TUESDAY</li>
            <li class="days">Wednesday</li>
        </ul>
    </div>
    <div class="colcontent">
        <ul class="connectable_list1 connectedSortable">
            <li class="asgn"><span class='delete' style="background-color: blue;"><a href='#'>x</a></span>
                Assignment1</li>
            <li class="asgn"><span class='delete' style="background-color: red;"><a href='#'>x</a></span>Assignment2</li>
            <li class="asgn"><span class='delete' style="background-color: green;"><a href='#'>x</a></span>Assignment3</li>
            <li class="asgn"><span class='delete' style="background-color: green;"><a href='#'>x</a></span>Assignment4</li>
        </ul>
        <ul class="connectable_list1 connectedSortable">
            <li class="asgn"><span class='delete'><a href='#'>x</a></span>Assignment1</li>
            <li class="asgn"><span class='delete'><a href='#'>x</a></span>Assignment2</li>
            <li class="asgn"><span class='delete'><a href='#'>x</a></span>Assignment3</li>
            <li class="asgn"><span class='delete'><a href='#'>x</a></span>Assignment4</li>
        </ul>
        <div>
            <div class="todo">
                <ul class="connectable_list2 connectedSortable">
                    <li class="td"><span class='delete'>x</span>Todo1</li>
                    <li class="td"><span class='delete'>x</span>Todo2</li>
                    <li class="td"><span class='delete'>x</span>Todo3</li>
                    <li class="td"><span class='delete'>x</span>Todo4</li>
                </ul>
            </div>
        </div>
    </div>
    <script>
        $(function () {
            $('a').hide();
            $(".delete").mouseenter(function () {
                $(this).find('a').show();
            });

            $(".delete").mouseleave(function () {
                $(this).find('a').hide();
            });

            $(".connectable_list1").sortable({
                connectWith: '.connectedSortable'
            });
            $(".connectable_list2").sortable({
                connectWith: '.connectedSortable',
            });

            $('.delete').click(function () {
                $(this).parent("li").slideUp(200);
            });

            ('.delete').mouseOver(

            function () {
                $('a').show();
            });
        });
    </script>
</body>
</html>