Here is the codepen: http://codepen.io/BrandonJF/pen/KGwyC
In case the page can't be accessed, a copy of the code is below.
Now, what I have been doing is using Brackets, and opening a folder in Brackets that contains a completely blank style.css page, completely blank init.js page, and an almost blank index.html page (this page at least has the following code:
<!DOCTYPE html>
<!--
-->
<html lang="en">
<head>
</head>
<body>
</body>
</html>
I paste the CodePen HTML in the body tag of index.html. I paste the CodePen CSS into style.css . I paste the CodePen Javascript into init.jss
I have also tried pasting the CodePen Javascript into the body tag of index.html, using the tag "script" around the JS code.
Any ideas what I am doing wrong?
So Clueless!
CodePen HTML:
<div id="container">
<header>
<h1>Task List</h1>
Clear all
</header>
<section id="taskIOSection">
<div id="formContainer">
<form id="taskEntryForm">
<input id="taskInput" placeholder="What would you like to do today?" />
</form>
</div>
<ul id="taskList"></ul>
</section>
</div>
CodePen CSS:
#import url(http://fonts.googleapis.com/css?family=Open+Sans:400, 300, 600);
* {
padding:0;
margin:0;
}
body {
background:url('http://dribbble.com/images/attachments/attachments-bg.png?1');
background-color:#2a2a2a;
font-family:'Open Sans', sans-serif;
}
#container {
background-color: #111216;
color:#999999;
width:350px;
margin: 50px auto auto auto;
padding-bottom:12px;
}
#formContainer {
padding-top:12px
}
#taskIOSection {
}
#taskInput {
font-size:14px;
font-family:'Open Sans', sans-serif;
height:36px;
width:311px;
border-radius:100px;
background-color:#202023;
border:0;
color:#fff;
display:block;
padding-left:15px;
-webkit-transition: all 0.30s ease-in-out;
-moz-transition: all 0.30s ease-in-out;
-ms-transition: all 0.30s ease-in-out;
-o-transition: all 0.30s ease-in-out;
}
#taskInput:focus{
box-shadow: 0px 0px 1pt 1pt #999999;
background-color:#111216;
outline:none;
}
::-webkit-input-placeholder {
color: #333333;
font-style:italic;
/* padding-left:10px; */
}
:-moz-placeholder {
/* Firefox 18- */
color: #333333;
font-style:italic;
}
::-moz-placeholder {
/* Firefox 19+ */
color: #333333;
font-style:italic;
}
:-ms-input-placeholder {
color: #333333;
font-style:italic;
}
header {
margin-top:0;
background-color:#F94D50;
width:338px;
height:48px;
padding-left:12px;
}
header h1 {
font-size:25px;
font-weight:300;
color:#fff;
line-height:48px;
width:50%;
display:inline;
}
header a{
width:40%;
display:inline;
line-height:48px;
}
#taskEntryForm {
background-color:#111216;
width:326px;
height: 48px;
border-width:0px;
padding: 0px 12px 0px 12px;
font-size:0px;
}
#taskList {
width: 350px;
margin:auto;
font-size:19px;
font-weight:600;
}
ul li {
background-color:#17181D;
height:48px;
width:314px;
padding-left:12px;
margin:0 auto 10px auto;
line-height:48px;
list-style:none;
overflow:hidden;
white-space:nowrap;
text-overflow:ellipsis;
}
CodePen Javascript:
$(document).ready(function () {
var i = 0;
for (i = 0; i < localStorage.length; i++) {
var taskID = "task-" + i;
$('#taskList').append("<li id='" + taskID + "'>" + localStorage.getItem(taskID) + "</li>");
}
$('#clear').click(function () {
localStorage.clear();
});
$('#taskEntryForm').submit(function () {
if ($('#taskInput').val() !== "") {
var taskID = "task-" + i;
var taskMessage = $('#taskInput').val();
localStorage.setItem(taskID, taskMessage);
$('#taskList').append("<li class='task' id='" + taskID + "'>" + taskMessage + "</li>");
var task = $('#' + taskID);
task.css('display', 'none');
task.slideDown();
$('#taskInput').val("");
i++;
}
return false;
});
$('#taskList').on("click", "li", function (event) {
self = $(this);
taskID = self.attr('id');
localStorage.removeItem(taskID);
self.slideUp('slow', function () {
self.remove();
});
});
});
EDIT: To anyone who stumbles upon this post, here are the things that made my code work. As per jswebb's suggestion, I referenced what I needed in the head of the index.html.
So the head tag looks like this now:
<head>
<link type="text/css" rel="stylesheet" href="css/styleok.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
</head>
Make sure that when you are writing the link tag, the href="YOURCSSFILENAME.css" includes all the correct folders!!!
Best wishes to all.
The CodePen you linked to utilizes jQuery; however, when using a text editor and writing to a blank HTML file, you need to link to the jQuery library - have you done this?
If not, place an external source link to the Google-hosted jQuery script file in between <head> and </head>, using the following:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
Let me know if that solves the issue for you!
EDIT: To solve the CSS issue you are having, you need to follow the same procedure for the external sheet; in general, sandboxes allow functionality without linking different files, but when working in text editors, you must supply the connection between stylesheets, JS files and the HTML page.
To link to your external CSS sheet, put the following in between <head> and </head>:
<link type="text/css" rel="stylesheet" href="style.css" />
This is the standard procedure for adding links to external CSS. If the sheet is open in the Brackets editor, it should provide you with 'style.css' when you start typing it in.
Once you do the above, place the CSS from the CodePen into that CSS file, and then save all of the sheets you're working in. Everything should work - let me know if that solved your issues!
I have the same answer here:
How do I take code from Codepen, and use it locally?
Right click on the result frame and choose View Frame source. And you can copy the source code and paste it in your own text-editor.
Ensure you are not missing jQuery which is a dependancy for the javascript
While copying javascript from codepen, it was adding some addition checks whilst compiling the coffeescript. So just use http://js2.coffee/ in order to convert the coffeescript into javascript preview, which you can then use in your code.
Related
This question already has answers here:
jQuery not working with my HTML at all?
(3 answers)
Closed 4 years ago.
This code to append to a to-do list works in the editor in a Codecademy tutorial, but using the same code in CodePen, nothing happens when I type text into the form box and hit submit (whereas in Codecademy, the entered text is added below the form box). It's not just an issue with CodePen, either; the same thing happened after entering it into Atom.
To see how it works you can view my CodePen, but I'll also enter the code used below for convenience.
Here's the HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>To Do</title>
<link rel="stylesheet" href="stylesheet.css"/>
<script src="script.js"></script>
</head>
<body>
<h2>To Do</h2>
<form name="checkListForm">
<input type="text" name="checkListItem"/>
</form>
<div class="button">Add</div>
<br>
<div class="list"></div>
</body>
</html>
And the JavaScript:
$(function() {
$('.button').click(function() {
let toAdd = $('input[name=checkListItem]').val();
// inserts specified element as last child of target element
$('.list').append('<div class="item">' + toAdd + '</div>');
});
$(document).on('click', '.item', function() {
$(this).remove();
});
});
Why the discrepancy? Is something wrong with the code?
You need to enable jQuery. Also, if you want to clear the input field after adding a new item you can do this:
$('input[name=checkListItem]').val('');
Here's a working solution!
$(function() {
$('.button').click(function() {
let toAdd = $('input[name=checkListItem]').val();
console.log(toAdd);
// inserts specified element as last child of target element
$('.list').append('<div class="item">' + toAdd + '</div>');
$('input[name=checkListItem]').val('');
});
$(document).on('click', '.item', function() {
$(this).remove();
});
});
h2 {
font-family: Helvetica;
color: grey;
}
form {
/* needed for the same property/value to work to display the button next to form */
display: inline-block;
}
input[type=text] {
border: 1px solid #ccc;
height: 1.6em;
width: 15em;
}
.button {
/* makes button display next to form */
display: inline-block;
vertical-align: middle;
box-shadow: inset 0px 1px 0 0 #fff;
/* starts at top, transitions from left to right */
background: linear-gradient(#f9f9f9 5%, #e9e9e9 100%);
border: 1px solid #ccc;
color: #666;
background-color: #c00;
font-size: 0.7em;
font-family: Arial;
font-weight: bold;
border-radius: 0.33em;
/* padding is space between element's content and border. First value sets top and bottom padding; second value sets right and left */
padding: 0.5em 0.9em;
text-shadow: 0 1px #fff;
text-align: center;
cursor: pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<h2>To Do</h2>
<form name="checkListForm">
<input type="text" name="checkListItem"/>
</form>
<div class="button">Add</div>
<br>
<div class="list"></div>
Uncaught ReferenceError: $ is not defined
at pen.js:1
Blockquote
Hey, Its always advisable to look at browser console to check what the error is. 60% of your problems will be solved by just looking at console. and next 40 % be be solved by debugging the javascript code using chrome browser. This is the error that is thrown along with other few errors. It means that you have not included Jquery library in your html. Please import it using this cdn link
https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js
or as mention by Andrey Petrov
You have to add jQuery support to your CodePen snippet. Click on "settings" in JavaScript window, then pick "jQuery" from "Quick-add" dropdown in the bottom of "Pen Settings" window.
You will have to link to jQuery dependency manually so your code can work flawless outside sandboxes like Codeacademy, CodePen, JSFiddle etc.
Here is how to use jQuery from CDN: http://jquery.com/download/#using-jquery-with-a-cdn
Basically, you will end up adding something like this:
<script src="https://code.jquery.com/jquery-3.3.1.min.js"
integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
crossorigin="anonymous"></script>
before the <script src="script.js"></script> line.
When I add the below script to my Web page:
<script type="text/javascript" src="https://www.brainyquote.com/link/quotebr.js"></script>
This script adds below JavaScript in my web page:
var br=document;
br.writeln("<b>Quote of the Day</b><br>");
br.writeln("Many of life's failures are people who did not realize how
close they were to success when they gave up.<br>");
Now I do not want "Quote of the day" in my webpage. How can I modify it?
If you open this link https://www.brainyquote.com/link/quotebr.js you can see the code this Js file is adding in my webpage.
Place the script in an element that can be targeted with CSS and set the <b> for that element to display:none;. Optinaly, you can also hide the <br> it includes as well with .quote-of-the-day b + br.
.quote-of-the-day b, .quote-of-the-day b + br {display:none}
<div class="quote-of-the-day">
<script type="text/javascript" src="https://www.brainyquote.com/link/quotebr.js"></script>
</div>
This gives you a lot of freedom to style as you see fit. For instance, the bellow inlines the author and places the quote in a styled blockquote.
.quote-of-the-day b, .quote-of-the-day br {display:none}
.quote-of-the-day {
padding: 1em;
border-left: 4px solid #ddd;
background: #f0f0f0;
margin: 1em;
color: #333;
}
.quote-of-the-day a {
text-decoration: none;
color: #c55;
font-style: italic;
}
.quote-of-the-day a:before {
content: '\00a0\2014\00a0';
color: #333;
cursor: default;
}
<blockquote class="quote-of-the-day">
<script type="text/javascript" src="https://www.brainyquote.com/link/quotebr.js"></script>
</blockquote>
select that piece of code and remove it.
$("b").each(function() {
$(this).empty(); // $(this).remove();
});
be more selective:
$("b").each(function() {
if($(this).text() == "Quote of the Day")
$(this).empty(); // $(this).remove();
}
});
Add this code after including script from BrainyQuote:
<script type="text/javascript">
document.body.innerHTML = document.body.innerHTML.replace("<b>Quote of the Day</b><br>", "");
</script>
Try this.
<script type="text/javascript">
document.getElementsByTagName('b')[0].remove();
</script>
I had working code until I tried to make the style.css page apply only to a certain div on the index.html file. This is the current code I have: http://codepen.io/anon/pen/LEXxeM
All that I did (which made it stop working) was completely wrap the style.css page in "adder { }", and put all the code in the body in a div tag.
Any ideas as to why this was an incorrect step?
In case codepen can't be accessed, below is the code.
HTML:
<!DOCTYPE html>
<!--
-->
<html lang="en">
<head>
<link type="text/css" rel="stylesheet" href="css/styleok.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="js/init.js"></script>
</head>
<body>
<div class="adder">
<div id="container">
<header>
<h1>Task ListO</h1>
Clear all
</header>
<section id="taskIOSection">
<div id="formContainer">
<form id="taskEntryForm">
<input id="taskInput" placeholder="Add your interests here..." />
</form>
</div>
<ul id="taskList"></ul>
</section>
</div>
</div>
</body>
</html>
CSS
#import url(http://fonts.googleapis.com/css?family=Open+Sans:400, 300, 600);
adder {
* {
padding:0;
margin:0;
}
body {
background:url('');
background-color:#2a2a2a;
font-family:'Open Sans', sans-serif;
}
#container {
background-color: #111216;
color:#999999;
width:350px;
margin: 50px auto auto auto;
padding-bottom:12px;
}
#formContainer {
padding-top:12px
}
#taskIOSection {
}
#taskInput {
font-size:14px;
font-family:'Open Sans', sans-serif;
height:36px;
width:311px;
border-radius:100px;
background-color:#202023;
border:0;
color:#fff;
display:block;
padding-left:15px;
-webkit-transition: all 0.30s ease-in-out;
-moz-transition: all 0.30s ease-in-out;
-ms-transition: all 0.30s ease-in-out;
-o-transition: all 0.30s ease-in-out;
}
#taskInput:focus{
box-shadow: 0px 0px 1pt 1pt #999999;
background-color:#111216;
outline:none;
}
::-webkit-input-placeholder {
color: #333333;
font-style:italic;
/* padding-left:10px; */
}
:-moz-placeholder {
/* Firefox 18- */
color: #333333;
font-style:italic;
}
::-moz-placeholder {
/* Firefox 19+ */
color: #333333;
font-style:italic;
}
:-ms-input-placeholder {
color: #333333;
font-style:italic;
}
header {
margin-top:0;
background-color:#F94D50;
width:338px;
height:48px;
padding-left:12px;
}
header h1 {
font-size:25px;
font-weight:300;
color:#fff;
line-height:48px;
width:50%;
display:inline;
}
header a{
width:40%;
display:inline;
line-height:48px;
}
#taskEntryForm {
background-color:#111216;
width:326px;
height: 48px;
border-width:0px;
padding: 0px 12px 0px 12px;
font-size:0px;
}
#taskList {
width: 350px;
margin:auto;
font-size:16px;
font-weight:600;
}
ul li {
background-color:#17181D;
height:48px;
width:314px;
padding-left:12px;
margin:0 auto 10px auto;
line-height:48px;
list-style:none;
overflow:hidden;
white-space:nowrap;
text-overflow:ellipsis;
}
}
JS:
$(document).ready(function () {
var i = 0;
for (i = 0; i < localStorage.length; i++) {
var taskID = "task-" + i;
$('#taskList').append("<li id='" + taskID + "'>" + localStorage.getItem(taskID) + "</li>");
}
$('#clear').click(function () {
localStorage.clear();
});
$('#taskEntryForm').submit(function () {
if ($('#taskInput').val() !== "") {
var taskID = "task-" + i;
var taskMessage = $('#taskInput').val();
localStorage.setItem(taskID, taskMessage);
$('#taskList').append("<li class='task' id='" + taskID + "'>" + taskMessage + "</li>");
var task = $('#' + taskID);
task.css('display', 'none');
task.slideDown();
$('#taskInput').val("");
i++;
}
return false;
});
$('#taskList').on("click", "li", function (event) {
self = $(this);
taskID = self.attr('id');
localStorage.removeItem(taskID);
self.slideUp('slow', function () {
self.remove();
});
});
});
Thank you.
Normally for these one off or different pages I would consider adding a style class directly to the body tag, rather than wrapping all the content in an additional div, since it serves no semantic purposes and it is really for styling only purposes.
<body class="adder">
<div id="container">
<!-- other code -->
</code>
</body>
Then add some specific styles for your custom styles pages in the same stylesheet. These need to be declared after the original definition.
/* adder overrides */
.adder #container {
background-color: #0094FF;
}
.adder header {
background-color:#00FF7F;
}
.adder #taskEntryForm {
background-color:#0043FF;
}
Since the style .adder #container is more specific in this instance this is what will get applied. It's a compound set of styles, so first the stlye #container will be applied and then the styles from .adder #container will override anything that is specific in this class.
If you are using Google Chrome then press F12 and you can see the style chain in the Elements tab (as well as change them in that window for learning/demo purposes)
Demo on CodePen
your CSS syntax is incorrect. Unless you were working with SASS in which case it would be ok. Remove adder.
I also see no point to wrapping your CSS in this adder class? It add's nothing HTML/CSS wise. If you explain what you're actually trying to achieve then maybe we can assist a bit more.
Below is a simple example of using css.
#outer{
background-color:grey;
height:100px;
width:100px;
}
#inner{
border:1px solid green;
width:100px;
height:100px;
margin:10px;
}
#outer > #inner{
color:red;
line-height:100px;
text-align:center;
margin:0;
}
<div id="outer">
<div id="inner">
Hello
</div>
</div>
<div id="inner">
Hi
</div>
I have a div with an id outer and two divs with an id inner out of which one is inside the outer div and the other is outside the outer div.
The css for inner div which is inside the outer div is written inside #outer > #inner{}
and the css for both div with an id - inner is written inside #inner{}
I have given a margin of 10 px for inner div but that isn't applied for the one which is inside the outer div.
this happened because the code which is inside #outer > #inner{} is overriding the code which is inside #inner{}
You can target a css based on id using '#' or class using '.' or html elements or Pseudo-class.
you can get a complete reference for css in this link
Okay, so here is my Javascript code in which I cannot troubleshoot why this is not working. Basically, I will have multiple drop-down menus all with the class of 'dropdown' and I want to change a particular dropdown (show contents of the division) when an image is clicked. I have already confirmed that the Javascript is properly linked to the JS and CSS files. I have also confirmed that the onClick methos is working properly for the image buttons that control the dropdown menus. When the image is clicked, it will send a parameter to a function that regulates the drop down. Here is the JS:
var current;
var get = function(name) {
current = document.getElementsByClassName(name);
}
var show = function(menu) {
get('image');
if(current[menu].src === 'plus.png') {
current[menu].src = 'minus.png';
get('dropdown');
current[menu].style.display = 'block';
} else {
current[menu].src = 'plus.png';
get('dropdown');
current[menu].style.display = 'none';
}
}
Edit Here is the full HTML:
<!DOCTYPE html>
<head>
<title>Gwiddle - Site Creator</title>
<link rel='stylesheet' type='text/css' href='stylesheet.css' />
<script type='text/javascript' src='script.js'></script>
</head>
<body>
<div id='banner'><p>Gwiddle Site Creator</p></div>
<div class='center'>
<p>Tools<img src='plus.png' class='image' onClick='show(0)' /></p>
<p>Options<img class='image' src='plus.png' onClick='show(1)' /></p>
<p>Code<img class='image' src='plus.png' onClick='show(2)' /></p>
</div>
<div class='dropdown'>
<p>Test</p>
</div>
</body>
</html>
CSS:
* {
font-family:Verdana;
}
body {
padding:0;
margin:0;
}
img {
display:inline;
margin-left:.3em;
width:.8em;
height:.8em;
}
.center {
width:100%;
text-align:center;
}
.center > p {
font-size:1.4em;
}
.dropdown {
display:none;
width:100%;
margin:1em 0 1em 0;
}
#banner {
font-size:2em;
color:white;
width:100%;
background-color:#3399FF;
margin-bottom:1em;
text-align:center;
box-shadow:0 2px 5px 2px #CCCCCC;
padding:.5em 0 .5em 0;
}
#banner p {
margin:0;
}
#tools {
color:red;
}
This script works fine for me in Chrome 37 with the script in the page. It might not be supported in your browser
GetElementsByClassName Support.
You could try using jquery:
$('.image')[menu] ...
Since you stated that it shouldn't be your browser, are you sure that the page can find that javascript file? Does an alert('test'); get called if added to the script?
I am currently experimenting with JavaScript and I'm having trouble changing the style of the links on my landing page. What I have is four boxes in the top right of the page that when clicked change the theme of the landing page. I was able to get the background and text to change when the boxes are clicked, but hyperlinks remain unchanged. I have read several other posts asking similar questions but I was unable to adapt the code to my situation.
I have tried using getElementById, and getElementByclassName but neither produced the result I was looking for. The getElementById was able to change one of the links but the rest remained unchanged. I'm guessing it only works on one link because the id can only be used once per page?
The current JavaScript code is written as four separate functions, but I was thinking perhaps it would be better to use one case statement?
I have left a link to jsfiddle, but for some reason the onclick function does not work at jsfiddle. Any help would be greatly appreciated.
Thank you!
http://jsfiddle.net/F4vte/
HTML
<body>
<div id="container">
<form>
<input type="button" id="color-box1"
onclick="colorText1();">
<input type="button" id="color-box2"
onclick="colorText2();">
<input type="button" id="color-box3"
onclick="colorText3();">
<input type="button" id="color-box4"
onclick="colorText4();">
</form>
<div id="centerText">
<h1 id="name">Donald Price</h1>
<div id="underline"></div>
<div id="nav">
Blog
Projects
Contact
Resume</p>
</div>
</div>
</div>
</body>
JavaScript
function colorText1(){
document.getElementById("name").style.color="#A32DCA";
document.getElementById("underline").style.color="#A32DCA";
document.getElementById("nav").style.color="#A32DCA";
document.bgColor = '#96CA2D';
}
function colorText2(){
document.getElementById("name").style.color="#8FB299";
document.getElementById("underline").style.color="#8FB299";
document.bgColor = '#FFFFFF';
}
function colorText3(){
document.getElementById("name").style.color="#484F5B";
document.getElementById("underline").style.color="#484F5B";
document.bgColor = '#4BB5C1';
}
function colorText4(){
document.getElementById("name").style.color="#FFFFFF";
document.getElementById("underline").style.color="#FFFFFF";
document.bgColor = '#00191C';
}
CSS
body {
font-family:Helvetica,Arial,Verdana,sans-serif;
font-size:62.5%;
width:960px;
padding-left:3px;
margin:auto;
}
#underline {
border-bottom:3px solid;
}
#container {
width:50em;
margin-left:auto;
margin-right:auto;
margin-top:30%;
z-index:2;
}
/*color box settings*/
#color-box1,#color-box2,#color-box3,#color-box4 {
position:absolute;
top:0;
width:50px;
height:50px;
float:left;
-webkit-transition:margin .5s ease-out;
-moz-transition:margin .5s ease-out;
-o-transition:margin .5s ease-out;
border-color:#B5E655;
border-style:solid;
margin:15px;
}
#color-box1:hover, #color-box2:hover, #color-box3:hover, #color-box4:hover {
margin-top: 4px;
}
#color-box1 {
background-color:#96CA2D;
right:0;
}
#color-box2 {
right:50px;
background-color:#FFFFFF;
}
#color-box3 {
right:100px;
background-color:#4BB5C1;
}
#color-box4 {
right:150px;
background-color:#00191C;
}
#centerText {
width:50em;
text-align:center;
}
#nav {
padding:20px;
}
#nav a {
padding-left:2px;
font-size:20px;
text-align:center;
}
a:link {
color:#000;
text-decoration:none;
}
a:visited {
text-decoration:none;
color:#999;
}
a:hover {
text-decoration:none;
color:red;
}
a:active {
text-decoration:none;
}
Aside from what #j08691 said about needing to run your existing script in the header,
just add color:inherit; to your #nav a selector in your css.
#nav a {
padding-left:2px;
font-size:20px;
text-align:center;
color:inherit;
}
This way when you change the color of #nav that color will be inherited by your links (a).
Live Demo
You can't just set the color of the div to change the color of the links. You need to get the a elements and change their style. There are probably better ways to do this, but just to illustrate, you can iterate through the child nodes of the div:
function colorText1() {
document.getElementById("name").style.color = "#A32DCA";
document.getElementById("underline").style.color = "#A32DCA";
var children = document.getElementById("nav").childNodes;
for (var i=0; i < children.length; i++) {
if (children[i].tagName == 'A') {
children[i].style.color = "#A32DCA";
}
}
document.bgColor = '#96CA2D';
}
See it working on the updated jsFiddle.