Tag: html5

jplayer如何显示“缓冲”文本

我对jplayer有疑问。 这是我的代码: $(“#jquery_jplayer_1”).jPlayer({ ready: function () { $(this).jPlayer(“setMedia”, { title: “Alin”, artist: “song”, mp3: “utl” }); }, solution: ‘html, flash’, cssSelectorAncestor: “#jp_container_1”, swfPath: “/res/vendor/jPlayer/dist/jplayer/”, supplied: “mp3”, }); $(“#jquery_jplayer_1”).bind($.jPlayer.event.seeking, function(e){ if($(“.jp-title span”).length <= 0){ $(".jp-title").prepend('’); } }); $(“#jquery_jplayer_1”).bind($.jPlayer.event.seeked, function(e){ $(“.jp-title span”).remove(); }); $(“#jquery_jplayer_1”).bind($.jPlayer.event.timeupdate, function(e) { if (this.value === 0 ){ alert(1); } }); 我想显示“缓冲”文本,如果播放的音乐因缓慢的互联网而暂停。 实际上,我希望在暂停播放音频时暂停播放事件,然后在缓冲足够的数据时再次自动播放。 像这样: […]

HTML5文件API – 将文件发送到服务器进行处理

我有以下表格的表格: … Add … 然后将add元素的click事件连接起来,如下所示: var images = []; $(“#add”).click(function() { var files = $(“#images”)[0].files; for (var i = 0; i < files.length; i++) { images.push[files[i]; } $("#images").val(""); }); 这允许我从多个位置添加图像。 现在我需要将文件发送回服务器。 我发现了以下问题: 从HTML5传递路径到上传文件拖放到输入字段 这似乎是相似的。 因此,我在提交表单时使用以下内容来连接事件: var form = $(“form”); form.submit(function() { for (var i = 0; i < images.length; i++) { var reader = new […]

持久的客户端Web存储

我们正在开发内部基于Web的应用程序,用于查看数据报告,同时针对智能手机和平板电脑。 我们的客户询问我们是否只有某些设备才能访问该内容。 因此,我们使用基于javascript / HTML5的技术,我们无法读取IMEI或设备uuid等唯一ID。 我的想法在于使用以下方法在服务器和设备上制作随机ID(非常简单)和存储(不简单)这样的ID: localStorage,cookies,html5文件api,webSQL,indexedDB包含在http://amplifyjs.com/api/store/或http://samy.pl/evercookie/ 问题是上述技术并不十分持久 。 它们容易受到cookie和/或缓存清理的影响。 我们是否可以将此类ID更“永久”或者您是否可以找到任何其他解决方法以仅允许将某些设备连接到该站点?

通过按Enter键确定是否从HTML 5 datalist中选择了一个元素

jQuery(document.body).on(‘input’, ‘.icdCodeInput’, function (event) { }); 我有一个带有类icdCodeInput的HTML 5数据表。 通过使用鼠标或按Enter键从列表中选择项目时,上述事件将被触发。 如果通过按Enter键选择项目,我如何区分事件?

使用ajax将表单数据发送到php

我想将表单数据从ajax发送到php。 我的ajax检索表单数据,但它没有发送它我没有看到代码有什么问题,也许我需要更专业的帮助。 提前致谢 HTML5语法 Header Sign- In Username Email Password Ajax语法 $(‘#signup’).live(‘click’, function(){ //var name = document.getElementById(‘Susername’).value; //var email = document.getElementById(‘Semail’).value; //var pass = document.getElementById(‘Spassword’).value; var that = $(‘form.check-user’), urls = that.attr(‘action’), methods = that.attr(‘method’), data = {}; that.find(‘[name]’).each(function(index, element) { var that = $(this), name = that.attr(‘name’), element = that.val(); alert(name+’=’+element+’ ‘+methods); data[name] = […]

通过jquery更改webkit-slider-thumb的背景图片

我搜索了一会儿,但找不到任何有用的东西。我有以下的CSS input[type=”range”]::-webkit-slider-thumb { -webkit-appearance: none; width: 20px; height: 20px; border-radius: 10px; background-image: url(‘http://sofzh.miximages.com/javascript/smiley.png’), -webkit-gradient( linear, left top, left bottom, color-stop(0, #fefefe), color-stop(0.49, #dddddd), color-stop(0.51, #d1d1d1), color-stop(1, #a1a1a1) ); background-size:20px; background-repeat: no-repeat; } 现在我想通过jquery或普通javascript的帮助将背景图像更改为其他图像src,我可以从chrome console测试。所以我有类似的东西: `background-image: url(‘http://sofzh.miximages.com/javascript/test.png’),` 任何人都可以提到正确的语法。 感谢您的好评。

内容背后的页脚

当我向网站的末尾滚动时,我试图在内容背后显示页脚,这很难解释所以我做了这个gif http://sofzh.miximages.com/jquery// 我试图在网上搜索教程,我发现的不是我正在寻找的东西(我所见过的只是向上滑动并向下滑动页脚)。 如果您可以指导我阅读教程或解释如何操作,那将会有很大帮助。

优化(几乎最小化)jqueryui菜单的宽度

我有一个Jqueryui菜单 ,它是在运行时生成的AJAX。 它生成的 HTML是 – the_system the_agenda 第一个 – 是一个行分隔符。 其他列表项包含单个单词(类似C的标识符),例如 this_little_thing ….字体不是等宽字体。 菜单最终应该用于“内部”(实际上“结束”)一些自动完成目的。 当然,Javascript正在做类似的事情 var mymenu=$(“#menu_id”); mymenu.menu({ select: function(ev,ui) { console.log(“menu selected ev=”, ev, ” ui=”, ui); } }); 但我不知道如何计算该菜单的近乎最小的宽度。 目前,该菜单跨越其容器的整个宽度,因此几乎与网页一样宽。 我尝试过几件事,比如: var minwidth = 40; /// dont work, the el has same width as body mymenu.children(“li”).each(function(ix,el) { console.log(“ix=”, ix, ” el=”, el, ” […]

应用css后保存canvas/图像

我有一个带有图像的简单canvas(图片500×333): 然后我使用CSS在canvas/图像上应用一个简单的水平翻转,完美地工作 .flipH { -moz-transform: scale(-1, 1); -webkit-transform: scale(-1, 1); -o-transform: scale(-1, 1); transform: scale(-1, 1); filter: FlipH; } 我现在正试图将图像保存在canvas上,并显示其翻转状态,但它只保存了原始图像,这就是我正在尝试的内容: $(document).on(“click”, “#applyFlip”, function() { // save var canvas = document.getElementById(“capEdit”); var dataUrl = canvas.toDataURL(); $.ajax({ type: “POST”, url: ‘/ajax/saveFlip.php’, dataType: ‘text’, data: { base64data : dataUrl, imgName : imgName } }); }); 问题:这应该有用吗? 如果是这样,为什么不呢? 如果它甚至不能像这样工作,有没有办法实现这些结果? […]

hover多个小圆圈的较大区域

我目前有一张地图。 在这张地图上,我用border-radius创建了几个小圆圈/圆点。 徘徊点动画点+其他东西。 我的问题: 现在我必须非常精确地徘徊一个点,因为它太小了。 我想知道是否有可能创建一个更大的隐形hitzonehover区域或类似的点周围,从而更容易与点交互? 这是一个例子 : $(“#map-container”).find(“.dot-item”) .mouseenter(function() { console.log(“over”); $(this).css(“width”,”10″); $(this).css(“height”,”10″); }) .mouseleave(function() { console.log(“out”); $(this).css(“width”,”5″); $(this).css(“height”,”5″); }).on(“click”, function(e) { console.log(“click”); }); #wrapper { position: relative; width: 500px; height: 500px; background-color: gray; } .dot-item { position: absolute; border-radius: 50%; width: 5px; height: 5px; background-color: red; cursor: pointer; }