Tag: html5

居中canvas

如何使用HTML5 canvas标记页面以便canvas 占80%的宽度 具有相应的像素高度和宽度,以有效地定义比率(并且在canvas拉伸至80%时按比例保持) 垂直和水平居中 你可以假定canvas是页面上唯一的东西,但是如果有必要的话,随便把它封装在div 。

inputtypes不是“提交”时的HTML5validation

我正在使用HTML5validation字段。 我点击button,使用JavaScript提交表单。 但是HTML5validation不起作用。 它只有在inputtypes被submit时才起作用。 除了使用JavaScriptvalidation或更改submittypes之外,我们可以做其他事吗? 这是HTML代码: <input type="text" id="example" name="example" value="" required> <button type="button" onclick="submitform()" id="save">Save</button> 我在提交函数submitform()提交表单。

你怎么能得到CSS像素/设备的像素比例?

我想findCSS像素和设备像素之间的比例。 编辑 :我应该已经意识到,这只是缩放级别。 我已经添加了关于缩放级别的规范引用的答案 。 CSS像素是我们用于几乎所有的单位 – 这是什么element.style.width,element.clientWidth,element.offsetWidth等。 设备像素是浏览器实际绘制的像素。 在设备像素中测量了一些属性,例如window.screen.width,这是用户放大时不会改变的屏幕尺寸(例如1024)。 动机:当用户放大时,我想增加一个canvas的宽度和高度(同时保持style.width和style.height具有相同的CSS像素值),scale()上下文,并在较高级的canvas上重绘。 我在Surfin的Safari上看过Quirksmode的两个视口和高DPI的 故事 ,但他们都没有说如何得到这个比例。 到目前为止,我唯一的想法是收集mousemoves并测量event.clientX的变化除以event.screenX的变化,或以编程方式使用moz–min-device-pixel-ratio创build媒体查询,使用getComputedStyle()来testing规则是否匹配,并用二分search进行缩小。 我希望有一个更简单/更可靠的方法。 编辑 :我试过用Chrome,Safari和Firefox 4使用@media (-webkit-min-device-pixel-ratio:1)查询,显然Webkit将这个属性当作一个常量设备像素来屏蔽像素比例不会随着缩放而改变),而Firefox 4将其视为设备像素与CSS像素比率(放大时会增加)。 因此,在Firefox 4中,我可以使用二进制search来发现CSS像素/设备像素比例,但不能使用Webkit。

Symfony2禁用HTML5表单validation

我只想使用服务器端validation来validation我的表单。 但是,如果浏览器支持HTML5,则使用symfony2添加到表单的HTML5属性进行validation,所以我需要阻止HTML5validation。

我如何显示所有localStorage保存的variables?

我想要访问保存在特定页面上的所有localStoragevariables。 我怎么做? 我想显示它,就像我会显示一个数组与join()函数

如何在node.js中处理POST请求

嗨,我是Nodejs的新手目前我试图用node.js处理post请求我写了一个名为server.js的java脚本文件,它在浏览器上显示一个表单。 我想要使​​用表单值并将其张贴在HTML中。 对于示例窗体包含用户名,存储库,分支和一个提交button,所以我想填写表单后,当用户提交使用提交button,那么他应该能够看到这些值的HTML方面。 my server. js code is : var http = require('http'); http.createServer(function (request, response) { response.writeHead(200, {'Content-Type': 'text/html'}); response.end('<html><body>' + '<h1>XYZ Repository Commit Monitor</h1>' + '<form method="post" action="." enctype="application/x-www-form-urlencoded"><fieldset>' + '<div><label for="UserName">User Name:</label><input type="text" id="UserName" name="UserName" /></div>' + '<div><label for="Repository">Repository:</label><input type="text" id="Repository" name="Repository" /></div>' + '<div><label for="Branch">Branch:</label><input type="text" id="Branch" name="Branch" value="master" /></div>' + […]

HTML5 websockets:打开连接的最大数量?

HTML5 websockets(并且已经有一段时间了 )是一个热门话题,因为它们优雅地实现了服务器端的 实时 推送 。 我目前有一个由Tomcat 7.0.30 支持的 websocket的工作应用程序,其中包括websocket支持 。 但将其转移到生产环境中会引起问题。 主要我想知道每个浏览会话可能同时运行( 打开 )的最大连接数量; 浏览会话意味着单个浏览器选项卡或窗口。 打开websocket连接是否加起来可以由Web服务器同时处理的最大连接数? 例如Apache中的MaxClients 。 相反, 浏览器自身限制的单个浏览会话的Web套接字的最大数量是多less? 正如本博文所示,截至2012年4月,不同的浏览器支持不同数量的开放式 websocket连接。 (我个人会瞄准每个浏览会话打开一个WebSocket;但是这个信息仍然是很好的知道)。 TL / DR: 什么限制了每个浏览会话可能的websockets的数量? 是客户吗? 服务器? 还是两者的结合? ws:和wss:连接是否适用相同的限制?

如何使用HTML5video的VLC直播stream?

我尝试了HTTP Ogg / Theora,并且可以正常使用Chrome浏览器,但不能使用Firefox 7。 VLCconfiguration: 为了testing,我已经使用以下vlc命令行configurationstream式传输桌面: vlc.exe屏幕://:screen-fps = 30:screen-caching = 100:sout =#transcode {vcodec = theo,vb = 800,scale = 1,width = 800,height = 600,acodec = none} http {mux = ogg,dst =:8181 / desktop}:no-sout-rtp-sap:no-sout-standard-sap:ttl = 1:sout-keep HTML5video标签configuration: <video id="video" src="http://my_host_name:8181/desktop" type="video/ogg; codecs=theora" autoplay="autoplay"/> 有任何想法吗?

使用HTML5 websockets实现基于web的实时video聊天

有谁知道如何使用HTML5 websockets在Web应用程序中实现IP语音/video? 如果我可以用PHP或者Python来实现这个function将会很好,因为我(不幸的是)现在还不知道其他的编程语言。 一个好的教程将做,以及已经build立的解决scheme,我不得不支付。 UPDATE1: 增加了video,因为它不仅与audio/ voip相关。 UPDATE2: 第一个HTML5video会议应用程序已经创build。 看我自己的答案

在第一个事件之前延迟HTML5:无效的伪类

我最近发现:invalid伪类在页面加载后立即应用于required表单元素。 例如,如果你有这样的代码: <style> input:invalid { background-color: pink; color: white; } input:valid { background-color: white; color: black; } </style> … <input name="foo" required /> 然后你的页面将加载一个空的粉红色的input元素。 对HTML5进行validation是非常好的,但我不认为大多数用户希望表单在他们有机会input任何值之前进行validation。 有什么办法可以延迟伪类的应用,直到影响该元素的第一个事件(表单提交,模糊,更改,任何合适的)为止? 没有JavaScript可以做到这一点?