jsbin
Collaborative JavaScript Debugging App
JS Bin - Collaborative JavaScript Debugging a live pastebin for html, css & javascript and a range of processors, including scss, coffeescript, jade and more...
I am reposting/rephrasing this as another user here advised. The code below works in jsbin but not in jsfiddle (clink on links). Does anybody know why?
The problem originated in my attempt to include this code in a blogger post (http://tetsingmaps.blogspot.ca/)
Thanks in advance for trying to help
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false">
</script>
<script type="text/javascript">
var overlay;
TQOverlay.prototype = new google.maps.OverlayView();
function initialize() {
var latlng = new google.maps.LatLng(42.345393812066433, -71.079311590576168);
var myOptions = {
zoom: 13,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
var swBound = new google.maps.LatLng(42.255594, -71.18282318115234);
var neBound = new google.maps.LatLng(42.43519362413287, -70.9758);
var bounds = new google.maps.LatLngBounds(swBound, neBound);
var srcImage = "http://www.jefftk.com/apartment_prices/apts-2011-06.png";
overlay = new TQOverlay(bounds, srcImage, map);
}
function TQOverlay(bounds, image, map) {
this.bounds_ = bounds;
this.image_ = image;
this.map_ = map;
this.div_ = null;
this.setMap(map);
}
TQOverlay.prototype.onAdd = function() {
var div = document.createElement('DIV');
div.style.border = "none";
div.style.borderWidth = "0px";
div.style.position = "absolute";
var img = document.createElement("img");
img.src = this.image_;
img.style.width = "100%";
img.style.height = "100%";
img.style.opacity = .5;
img.style.filter = 'alpha(opacity=50)';
div.appendChild(img);
this.div_ = div;
var panes = this.getPanes();
panes.overlayLayer.appendChild(div);
}
TQOverlay.prototype.draw = function() {
var overlayProjection = this.getProjection();
var sw = overlayProjection.fromLatLngToDivPixel(this.bounds_.getSouthWest());
var ne = overlayProjection.fromLatLngToDivPixel(this.bounds_.getNorthEast());
var div = this.div_;
div.style.left = sw.x + 'px';
div.style.top = ne.y + 'px';
div.style.width = (ne.x - sw.x) + 'px';
div.style.height = (sw.y - ne.y) + 'px';
}
TQOverlay.prototype.onRemove = function() {
this.div_.parentNode.removeChild(this.div_);
this.div_ = null;
}
</script>
</head>
<body onload="initialize()">
<div id="map_canvas" style="width:100%; height:100%"></div>
<div id="legend">
<b>$/bedroom</b>
<br><br>
<font color="#FF0000">█</font> $1800+<br>
<font color="#FF2B00">█</font> $1700+<br>
<font color="#FF5600">█</font> $1600+<br>
<font color="#FF7F00">█</font> $1500+<br>
<font color="#FFAB00">█</font> $1400+<br>
<font color="#FFD500">█</font> $1300+<br>
<font color="#FFFF00">█</font> $1200+<br>
<font color="#7FFF00">█</font> $1100+<br>
<font color="#00FF00">█</font> $1000+<br>
<font color="#00FF7F">█</font> $900+<br>
<font color="#00FFFF">█</font> $800+<br>
<font color="#00D5FF">█</font> $700+<br>
<font color="#00ABFF">█</font> $600+<br>
<font color="#007FFF">█</font> $500+<br>
<font color="#0056FF">█</font> $400+<br>
<font color="#002BFF">█</font> $300+<br>
<font color="#0000FF">█</font> $300-<br>
<br>
as of 6/2011<br>
<a rel='nofollow' href="index.html">current</a><br>
<a rel='nofollow' href="rooms-2011-06.html">$/room</a><br>
(<a rel='nofollow' href="/news/2011-06-18.html">details</a>)
</div>
Source: (StackOverflow)
Whatever Ember.js links I was including on jsbin is no longer working. So I would like this thread to have the latest working template/skeleton of Ember.js for jsBin.
Source: (StackOverflow)
So in order to change Jsbin's theme one can go to console and write
jsbin.settings.editor.theme = "theme-you-want";
as I read here.
I like monokai theme but unfortunately there is a big drawback about dark themes. When you get your cursor on a line, whole line turnes white (like marking the whole line). The problem is that text is also white and I can't see text! Does anyone else have this problem and a possible workaround?
Source: (StackOverflow)
So I am learning JavaScript.... I have gone way past this basic stuff in my learning but can't figure out why this wont work:
function message(){
alert("message");
}
<button onclick="message()">Click me</button>
On Js Bin all is ok http://jsbin.com/uwutut/1/edit
On Js fiddle the alert is not triggered!! http://jsfiddle.net/vincentieo/D2dxA/
It is the exact same code...copy and paste so no reason why js fiddle is being fussy??
Source: (StackOverflow)
I noticed strange behaviour of JS Bin runner when I execute the following code:
var ask = prompt("test");
while(ask!=="yes"){
ask = prompt("test");
}
I get this kind of error:
Exiting potential infinite loop at line 4. To disable loop protection:
add "// noprotect" to your code
I was wandering why is that happening ? (The execution of that code works fine in site code)
Source: (StackOverflow)
I'm new to JavaSript, and I like JS Bin, but on desktop no thing is the same for development. Is there a way to work with JS Bin without access to the website?
Source: (StackOverflow)
That is a warning stemming from snippets like:
a="hello\
world"
Apparently JsBin does not support the line continuation character unless a specific option is set.
How to set the mentioned multi-string option?
Thanks.
Source: (StackOverflow)
I am trying to add and push additional objects in my application. I have reproduced the case in this jsBin
To Achieve that I have followed this tutorial, which does exactly what I want.
I have a list of invoices and any invoice is composed by transactions. I can create a new invoice in my invoices create route where I want to add and push any single transaction.
actions: {
add: function() {
var newTransaction = Ember.Object.create({
name: "New Transaction",
quantity: null,
selectedFare: null,
isDone: false
});
return this.get("content").pushObject(newTransaction);
}
In my template this is how it looks
<tr>
{{#each controller}}
<td>{{name}} {{input type=checkbox value=isDone checked=isDone}} {{input valueBinding=quantity}} {{view Em.Select prompt="test" contentBinding="controllers.fare.content" optionLabelPath="content.name" optionValuePath="content.id" selectionBinding="controllers.fare.selectedFare" }}</td>
{{/each}}
</tr>
Unfortunately I can not really see the error in the console. I don't know what is going wrong.
If from the template you remove{{#each controller}}{{/each}}, you can see one single transaction.
What's wrong in my code?
Source: (StackOverflow)
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
<!-- JQuery code -->
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<!-- Script which refreshes each element every 5 seconds -->
<script>
setInterval(reloadElements, 5000);
function reloadElements() {
$('#refresh').load(location.href+' #refresh');
}
</script>
</head>
<body>
<p id="refresh">
This is some paragraph text. <br />
<ul>
<li> List item one. </li>
<li> List item two. </li>
</ul>
</p>
</body>
</html>
This HTML file will always reside locally on the client.
The whole reason I wrote this script was so that my page can automatically reflect changes made to the file (i.e. I shouldn't be required to manually refresh the page). I have a C++ application which writes to this HTML file (only changes the content of the <p id="refresh"> tag).
My test machine is running Windows XP 32 bit.
Behaviour on Google Chrome, Version 26.0.1410.64 m:
When I run Chrome with the --allow-file-access-from-files parameter and without any command line arguments and modified the .html file using a text editor, the changes did not get displayed on the browser.
Behaviour on Internet Explorer, Version 8.0.6001.18702, Mozilla Firefox, Version 20.0.1:
Modification of only the paragraph text works (i.e. the changes are reflected). Modifying the list elements or adding anything after the list doesn't get reflected.
Behaviour on JS Bin:
As expected, after opening the web page and modifying the .html file using a text editor, the changes were reflected on the browser when the 5 second interval expired.
I currently need only support Internet Explorer, Google Chrome and Mozilla Firefox.
Why is there this difference? What am I doing wrong? Is there a better way to achieve what I want?
PS: This happens to be my first web-page code.
UPDATE:
I fixed the Firefox and Internet Explorer issues thanks to the helpful suggestions of squint (see comments below). I basically put the contents of the <p> element in a separate .html file and I modified the JQuery load to load that file. Don't know how this makes a difference though.
Source: (StackOverflow)
I thought I would share this answer for others, since it took me some time to figure out:
I am using jsbin and jsfiddle for testing web pages. I have many javascript and CSS files (as well as images referenced from the CSS files). I am using DropBox to store the folders and files with Javascript and CSS. The issue is that Dropbox changed their policy recently with Public Folders. If you share a link to a CSS file from a non-public folder you will NOT get the CSS (text/css) mime type, but a nicely formated text/html. In JSBIn (firebug) you will see and error like:
The stylesheet https://www.dropbox.com/s/y9ms5jr6zqdans2/leaflet.css was not loaded because its MIME type, "text/html", is not "text/css".
Source: (StackOverflow)
I have working code that I want to demo with JsBin but I can't get the AngularJS directive templateUrl to work (it does work with the template value).
http://jsbin.com/guvok/ is trying to reference http://jsbin.com/razit/ but fails.
For the sake of completeness and posterity here's the code:
hello.html
<!DOCTYPE html>
<html ng-app="hello">
<head>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.19/angular.min.js"></script>
</head>
<body>
<div hello></div>
</body>
</html>
hello.css
.hello__content {
background: #fff;
}
hello.js
var meter = angular.module('hello', [])
.directive( 'hello', function() {
return {
restrict: 'A',
replace: true,
//template: '<p class="hello__content">hello</p>',
templateUrl: 'http://jsbin.com/razit/',
};
});
template.html
<p>hello, world</p>
Source: (StackOverflow)
I have problem with debugging js code written in js bin with chrome.
Everytime when i edit/click run with JS new source file is generated and old breakpoint are not being hit.
Do you have any solution for this problem?
Source: (StackOverflow)
Can someone explain why awesome tools like JS Bin give errors like:
Runner: Permission denied to access property 'scrollX'
when I'm trying code like:
<button onClick="exit();">Exit</button>
<script>
function exit() {
window.location = 'http://www.youtube.com/';
}
</script>
...that work fine if they are called from a regular file in the browser?
Thanks.
Edit: Correction Firefox gives the error.
Source: (StackOverflow)
I'm trying to get ajax to work in JSBIN like demonstrated in this video. What have I don't wrong. Seems like it ought to work!
$(document).ready(function(){
$.ajax({
type: "get",
url: "http://jsbin.com/ipefom/1/js",
dataType: "json",
success: function(returnedData){
console.log(returnedData)
}
});
});
http://jsbin.com/ocerag/3/edit
I don't understand where my parseerror comes from.
Source: (StackOverflow)