Why Does This Simple Jsfiddle Not Work

Why does this code doesn't work in jsfiddle

The problem is because the CSS is not loading. If you check the console you can see an error like GET https://www.w3schools.com/lib/w3.css net::ERR_INSECURE_RESPONSE. Add the CSS on the right top section of the fiddle.

This happens because that link contains https while w3schools website does not have a secured certificate. If you try to access https://www.w3schools.com/lib/w3.css on the browser you will get an privacy error. Adding http instead of https and it will work in browser.

http file won't work in jsfiddle https because it's considered unsafe. You will get an error in the console like:

Mixed Content: The page at 'https://jsfiddle.net/u6qdfw5f/1/' was loaded over HTTPS, but requested an insecure stylesheet 'http://www.w3schools.com/lib/w3.css'. This request has been blocked; the content must be served over HTTPS.

I've also added the javascript load type to be No wrap - in <head> from the javascript dropdown, instead of the default onLoad, otherwise you will get an error like Uncaught ReferenceError: myFunction is not defined

Updated FIDDLE.

Why is my JSFiddle not working? (where to place script)

There was a double quote in your url for your external script.

Like this:

"https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js

I've updated a fiddle with the current url:

http://jsfiddle.net/gregborbonus/k37jqj2c/4/

Also, if you need to load jQuery, just click the Javascript button (top right of the javascript console with the gear next to it) and under "Frameworks and Extensions" drop down to the jQuery version you want.

Simple onload doesn't work in JSFIddle

Your first problem:

Onload

You have configured JSFiddle to run your JS when the load event fires.

Consequently, when the load event fires, you bind another load event handler.

Your new load event handler is never called because the load event has already fired.

Change the menu option to one of the "No Wrap" approaches.

Your second problem:

The load event fires on the window object, not the body element.

You need to assign the property to the right place.

onload = function(){
  alert("LOADED!");
}

Such: https://jsfiddle.net/n5jb0159/5/

simple javascript not working in jsfiddle

By default, jsFiddle puts all of your code within an onload handler, like this:

window.onload = function() {
    // ...your code here...
};

That means your alertme function isn't a global, and it has to be for onclick attributes to work.

There's a drop-down on the left, near the top, that controls this behavior. Change it from onLoad to one of the "no wrap" options to make your function global.

jsFiddle not working in Chrome

It's because the "language" is set as Javascript 1.7 in your jsFiddle.

Why does this only work in Firefox?

According to the versioning history, 1.7 was only ever supported in the Mozilla Firefox browser, hence why it works there and not in other browsers.

Solution:

Change the language from Javascript 1.7 to Javascript in the Languages section of your jsFiddle and it will work. I'm guessing you must have changed it to 1.7 specifically, because the default is normally just Javascript (you can see that by pasting your code into a new jsFiddle, where it will work as expected).

jsFiddle example.

JSFiddle does not work locally

Check the Console output in your browser (e.g. F12 in Chrome/IE, FireBug in FireFox).

Off the top of my head try replacing //ajax.googleapis.com with http://ajax.googleapis.com; or download the file and reference that file with a relative path.

When you're running locally your protocol is file:// and //host means "access host via the same protocol the page is using".

Also href="/css/... is absolute path so it'll look for the css file on your file system root (/ in unix, C:\ or D:\ in Windows) that can cause a styling issue.

Update

I'll try to walk through simply (as simple as handing network/file resources and 4 languages/libs at the same time can be ;)

I copied your code from the question into D:\test\fiddle.html and opened it in Chrome, then pressed F12. Get better acquainted with Chrome Developer Tools, web development without it is like cutting a 100 year old tree with a spreading knife. The basic usage is essentially: Right click > Inspect element.

GET file:///D:/test/jquery.js net::ERR_FILE_NOT_FOUND fiddle.html:6

The above line was modified by you after saving the page. It's because you included JQuery in the fiddle. Under Frameworks & Extensions set it to "No Library (Pure JS)" since you're including JQuery yourself with <script>. _That's the point of jsfiddle, that you don't have to write those tedious <script> tags.

GET file:///D:/css/normalize.css net::ERR_FILE_NOT_FOUND fiddle.html:7

Under Fiddle Options untick the Normalize CSS so this file won't be included. That file changes paddings and margins for a lot of elements, so to fix your layout add

ul {
    padding: 0;
}

GET file:///D:/css/result-light.css net::ERR_FILE_NOT_FOUND fiddle.html:8

This file is empty, safe to ignore.

GET file://ajax.googleapis.com/ajax/libs/jqueryui/1.10.0/jquery-ui.min.js net::ERR_FILE_NOT_FOUND fiddle.html:126

GET file://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js net::ERR_FILE_NOT_FOUND fiddle.html:125

As you see here it's trying to load file://... which is non-existent. So change your include lines to

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.0/jquery-ui.min.js"></script>

Uncaught ReferenceError: $ is not defined fiddle.html:92

Result of JQuery not included because of the schema being wrong (//).

You'll also need to move the two JQuery <script> tags before your $(window).load( script.

So here's your final file:

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <title> - jsFiddle demo by kelseyhisek</title>
  <style type='text/css'>
    @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;
    padding: 0;
    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>


<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.0/jquery-ui.min.js"></script>

<script type='text/javascript'>//<![CDATA[ 
$(window).load(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>


</head>
<body>
<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>

</body>


</html>