标签: jsfiddle

JSFIddle不使用Jquery

在研究这个问题的答案时,我创造了这个jsfiddle.由于某种原因,它不起作用,当我使用firebug的错误consol时它返回".show"不是一个函数.这让我相信jsfiddle错误地加载jQuery.JSFiddle和jQuery之间是否存在任何已知问题?我的代码是不正确的(BTW当我.show("slow")改为.style.display = "inherit"它工作正常,这就是为什么我认为它必须是jQuery的问题...)

一个工作的JSFiddle将不胜感激.

javascript jquery jsfiddle

1
推荐指数
1
解决办法
6630
查看次数

jQuery在jsFiddle中工作,但不在我的计算机上

我是jQuery的新手,整天都在试图确定这个脚本在jsFiddle中运行但不在我的计算机上的原因.我没有服务器设置,我只是从桌面启动浏览器中的html.

代码在这里工作正常:http://jsfiddle.net/9Dubr/164/.但是当我创建以下html文件时:

<html>
<head>
<title>this better work</title>

<script src="jquery-latest.js"></script>
<script type="text/javascript">
$('#submit').click(function(){
    $('#myfrom').fadeOut("slow", function(){
    var dot = $("<div id='foo'>Goodmorning Mr. Patti<br/><br/>Thank you.</div>".hide();
    $(this).replaceWith(dot);
    $('#foo').fadeIn("slow");
    });
    });
    </script> 
<style type="text/css">

#container{
width:342px;
height:170px;
padding:10px;
background-color:grey;
}
#myform{
width:322px;
height:100px;
color:#6F6F6F;
padding: 0px;
outline:none;
background-color:white;
}
#foo{
width:322px;
height:100px;
color:#6F6F6F;
padding: 0px;
outline:none;
background-color:white;
}
#submit{
color:#6F6F6F;
padding: 10px 2px 0px 0px;
margin: 0px 0px 0px 0px;
outline:none;
}
</style>
</head>
<body>
<div id="container">
<div id="myform">
<p> blah …
Run Code Online (Sandbox Code Playgroud)

jquery jsfiddle

1
推荐指数
1
解决办法
1955
查看次数

如何设置jsfiddle的javascript版本?

我想在jsFiddle中使用javascript的yield关键字(类似于C#yield return).我知道 yield这只适用于Firefox,我想进行一次性模拟,因此它不必是跨平台的.是否可以将jsFiddle的javascript设置为1.7版?

javascript jsfiddle

1
推荐指数
1
解决办法
748
查看次数

谷歌在jsFiddle中映射

我正试图在jsFiddle中实现谷歌地图问另一个问题,但我看不到地图:http: //jsfiddle.net/hashie5/aknYP/

我在资源中添加了gmap脚本

如何在jsFiddle中显示地图?

function initialize() {
var myLatlng = new google.maps.LatLng(50.965049,5.484231);
var myOptions = {
  zoom: 14,
  center: myLatlng,
  mapTypeId: google.maps.MapTypeId.ROADMAP
}

var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

var contentString = 
    '<div id="infowindow">' +
    'Galaconcert<br />' +
    'Jaarbeurslaan 2-6<br />' +
    '3690 Genk' +
    '</div>'
;

var infowindow = new google.maps.InfoWindow();

var marker = new google.maps.Marker({
    position: myLatlng,
    map: map,
    title: 'Galaconcert'
});
google.maps.event.addListener(marker, 'click', function() {
    infowindow.setContent(contentString);
    infowindow.open(map, marker);
});
}
Run Code Online (Sandbox Code Playgroud)

javascript google-maps jsfiddle

1
推荐指数
1
解决办法
4973
查看次数

为什么我的极其基本的CSS代码在jsFiddle和jsBin上产生不同的输出?

两个不同的输出,但完全相同的超基本代码:

CSS

input {
  display: block;
  min-width: 200px;
  padding: 10px;
}
Run Code Online (Sandbox Code Playgroud)

HTML

<input type="text" />
<input type="text" />
<input type="submit" value="Register" />
Run Code Online (Sandbox Code Playgroud)

jsFiddle上生成以下输出(这里是现场演示),

在此输入图像描述

但这个输出在jsBin(这里的现场演示)

在此输入图像描述

我已经在最新的Firefox和Chrome中测试了这一点(各处都有相同的差异).在一个简单的裸.html文件中,它看起来像在jsBin btw ...

html css jsfiddle jsbin

1
推荐指数
1
解决办法
259
查看次数

jsfiddle jquery ajax没有按预期返回数据

我正在尝试对jsfiddle进行jquery ajax调用但是遇到了问题:

var ajax1 = function () {
    return $.ajax({
        type: "post",
        url: "/echo/json/",
        data: {
            name: "thomas!"
        },
        dataType: 'json'
    });
};

var res = ajax1();
console.log(res);
Run Code Online (Sandbox Code Playgroud)

将整个延迟对象打印到控制台.它包括responseText我认为可能是我应该尝试访问的内容,但我未定义.

console.log(res.responseText);
Run Code Online (Sandbox Code Playgroud)

我之前用HTML 尝试了一次,一切似乎都有效,但JSON由于某种原因失败了.

javascript ajax jquery jsfiddle jquery-deferred

1
推荐指数
1
解决办法
651
查看次数

代码仅适用于jsfiddle

这个问题中,我问过,我如何根据div的数量生成一种颜色的阴影.@DonJuwe提出了一个完美的解决方案和演示:http://jsbin.com/xakifequ/1/edit JSBin中的源代码

但是,当我尝试使用jsfiddle或JSBin中的代码时,它只是不起作用.所以我从JSBin下载了源代码,打开了.html文件,我得到的是:下载时会发生什么

有人可以解释一下,为什么会这样?

html javascript jquery jsfiddle jsbin

1
推荐指数
1
解决办法
358
查看次数

jQuery代码没有在JSFiddle中执行

我还在学习jQuery,我在网上提到了一些教程.我从这个站点获取了我的代码并将其插入JSFiddle以尝试但它没有工作:

http://www.leniel.net/2012/10/javascript-regex-jquery-to-match-only-english-characters-in-input-textbox.html#sthash.XQxbhteA.1FTBwPAJ.dpbs

HTML

<input id="mytextbox" style="width:300px" placeholder="Only English letters are allowed here...">
Run Code Online (Sandbox Code Playgroud)

JS

$("#mytextbox").on("keypress", function(event) {

    // Disallow anything not matching the regex pattern (A to Z uppercase, a to z lowercase and white space)
    // For more on JavaScript Regular Expressions, look here: https://developer.mozilla.org/en-US/docs/JavaScript/Guide/Regular_Expressions
    var englishAlphabetAndWhiteSpace = /[A-Za-z ]/g;

    // Retrieving the key from the char code passed in event.which
    // For more info on even.which, look here: http://stackoverflow.com/q/3050984/114029
    var key = String.fromCharCode(event.which);

    //alert(event.keyCode);

    // For the keyCodes, look …
Run Code Online (Sandbox Code Playgroud)

html javascript regex jquery jsfiddle

1
推荐指数
1
解决办法
154
查看次数

Javascript不适用于jsfiddle

我正在研究jsfiddle,但javascript文件似乎没有添加到我的html中.当屏幕达到一定宽度时,我正试图从我的页脚上的div中删除一个类.我正在使用bootstrap,我有以下页脚:

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<body>
<footer>
<div class="container">
    <div class="row">
      <div class="col-xs-12 col-sm-6 col-md-6 col-lg-6">
        <h2><b>Heading1</b></h2>
        <p><small>aaaaaaaaaaaaaaaaaaaaaaa</small></p>
        <p><small>aaaaaaaaaaaaaaaaaaaaaaa</small></p>
        <p><small>aaaaaaaaaaaaaaaaaaaaaaa</small></p>
      </div>
      <div class="col-xs-12 col-sm-6 col-md-6 col-lg-6">
        <div class="text-right" id="footer-right">
          <h2><b>Heading2</b></h2>
          <p><small>aaaaaaaaaaaaaaaaaaaaaaa</small></p>
          <p><small>aaaaaaaaaaaaaaaaaaaaaaa</small></p>
          <p><small>aaaaaaaaaaaaaaaaaaaaaaa</small></p>
        </div>
      </div>
    </div>
  </div>
</footer>

    <!-- jQuery library -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

    <!-- Latest compiled JavaScript -->
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
</body>
Run Code Online (Sandbox Code Playgroud)

现在,我希望在屏幕宽度为500px时删除"text-right"类:

JAVASCRIPT

var readaptClasses = function(){
  var width = $(window).width();
  alert(width);
  if (width < 500){
    $("#footer-right").removeClass("text-right"):
  }
  else {
    $("#footer-right").addClass("text-right"):
  }
};

$(document).ready(readaptClasses);
$(window).on('resize', readaptClasses);
Run Code Online (Sandbox Code Playgroud)

什么都没发生...

javascript jquery jsfiddle twitter-bootstrap-3

1
推荐指数
1
解决办法
346
查看次数

“ HTMLCanvasElement”上的“ toDataURL”:可能无法导出污染的画布

在Chrome浏览器中,当尝试从远程URL测试画布绘图图像时,在jsfiddle上收到以下错误。

错误:无法在“ HTMLCanvasElement”上执行“ toDataURL”:可能无法导出污染的画布。

在S3存储桶上,我具有以下CORS策略,该策略允许跨资源共享:

<?xml version="1.0" encoding="UTF-8"?>
<CORSConfiguration xmlns="http://s3.amazonaws.com/doc/2006-03-01/">
<CORSRule>
    <AllowedOrigin>*</AllowedOrigin>
    <AllowedMethod>GET</AllowedMethod>
</CORSRule>
</CORSConfiguration>
Run Code Online (Sandbox Code Playgroud)

如果我使用jsfiddle卷曲图像作为原点,则会得到:

curl -H 'Origin: https://fiddle.jshell.net' -I 'https://i.ezr.io/products3/472_ARDSCR.jpg?h=45&w=165&fit=scale' HTTP/1.1 200 OK Cache-Control: public,max-age=31536000 Last-Modified: Wed, 07 Feb 2018 23:42:47 GMT Server: imgix-fe Content-Length: 6371 Accept-Ranges: bytes Date: Fri, 16 Mar 2018 17:10:20 GMT Age: 3173253 Connection: keep-alive Content-Type: image/jpeg Access-Control-Allow-Origin: * X-Content-Type-Options: nosniff X-Served-By: cache-lax8630-LAX, cache-sea1027-SEA X-Cache: HIT, HIT

<?xml version="1.0" encoding="UTF-8"?>
<CORSConfiguration xmlns="http://s3.amazonaws.com/doc/2006-03-01/">
<CORSRule>
    <AllowedOrigin>*</AllowedOrigin>
    <AllowedMethod>GET</AllowedMethod>
</CORSRule>
</CORSConfiguration>
Run Code Online (Sandbox Code Playgroud)
var Rack = {
  init: function(params) …
Run Code Online (Sandbox Code Playgroud)

cors jsfiddle html5-canvas

1
推荐指数
1
解决办法
7814
查看次数