小编wil*_*ill的帖子

如何抵消谷歌地图api V3中的中心点

我有一张谷歌地图,半透明面板覆盖了该区域的一部分.我想调整地图的中心点,以考虑部分遮挡的地图部分.见下图.理想情况下,十字准线和引脚放置的位置将是地图的中心点.

我希望这是有道理的.

原因很简单:缩放时,需要将地图置于十字准线上而不是50%50%.此外,我将在地图上绘制标记并按顺序移动它们.当地图以它们为中心时,它们也需要处于偏移位置.

提前致谢!

我正在建设的地图样机

javascript google-maps-api-3

75
推荐指数
7
解决办法
7万
查看次数

使用HTML数据标记和jQuery存储和使用数组

我试图在HTML数据标记中存储一个数组.例如:

<div data-locs="{'name':'London','url':'/lon/'},{'name':'Leeds','url':'/lds'}">
Run Code Online (Sandbox Code Playgroud)

我正在使用jQuery访问该数据.我意识到这是存储为一个字符串,我已经尝试了各种方法将其转换为数组,但我已经碰壁了.如果你看看这个jsFiddle页面,你会看到我正在尝试做的一个完整的例子.

http://jsfiddle.net/B4vFQ/

有任何想法吗?

谢谢!

html arrays jquery

37
推荐指数
2
解决办法
6万
查看次数

防止在父级而非子级上的touchmove默认值

我正在为iPad创建一个小的Web应用程序,我有几个元素,我阻止用户滚动,防止touchmove事件的默认.但是,我有一种情况,我需要用户能够滚动子元素.

我试过使用e.stopPropagation(); 但没有运气!我还尝试检测手指下的元素并放入e.preventDefault(); 在if语句中,但再次,没有运气.或者也许我只是混淆了......

有任何想法吗?从#fix div中删除.scroll div是最后的手段,因为它会引起各种令人头疼的问题.


编辑

我设法对它进行排序.好像我不明白使用.stopPropagation(); 哎呀!

工作代码:

<div id="fix">

    <h1>Hi there</h1>

    <div class="scroll">
        <ul>
            <li>List item</li>
            <li>List item</li>
            <li>List item</li>
        </ul>
    </div>

    <div class="scroll">
        <ul>
            <li>List item</li>
            <li>List item</li>
            <li>List item</li>
        </ul>
    </div>

</div>
Run Code Online (Sandbox Code Playgroud)

和Javascript:

$('body').delegate('#fix','touchmove',function(e){

    e.preventDefault();

}).delegate('.scroll','touchmove',function(e){

    e.stopPropagation();

});
Run Code Online (Sandbox Code Playgroud)

javascript jquery touch ipad

24
推荐指数
3
解决办法
4万
查看次数

Webkit溢出滚动触摸iPad上的CSS错误

如果您在最新版本的iOS上的iPad设备上访问此页面,则可以按照此步骤操作.

http://fiddle.jshell.net/will/8VJ58/10/show/light/

我有两个新的-webkit-overflow-scrolling元素:touch; 适用的财产和价值.左手灰色区域内容丰富,可以纵向或横向滚动.右边只会在横向滚动.

如果从横向开始(在横向上刷新),您可以使用惯性滚动滚动这两个区域.效果很好.现在将iPad翻转成纵向,只有左​​侧区域会滚动.这是预期的.但当你翻回景观时,右手区域将不再滚动,而左手区域仍然很好.

很明显如何阻止这种情况发生,但我并不总是有足够的内容来填补这个区域.

那么任何想法?

在此先感谢,
威尔:)

css webkit ipad ios

22
推荐指数
2
解决办法
2万
查看次数

扩展jQuery的.on()以使用移动触摸事件

我试图使用jQuery移动事件而不使用jQuery mobile的其余部分.

https://github.com/jvduf/jquery-mobile-events/blob/master/jquery.mobile.events.js

该片段可以启用它们,并且可以正常工作,但不能使用.on()事件处理程序.例如:

$('a').on('tap',function(){
    console.log('Hi there!');
});
Run Code Online (Sandbox Code Playgroud)

但它确实与.live()一起使用,但现在已经折旧了.

所以我的问题; 有没有办法扩展.on()功能,以包括点击事件和其他?完整列表如下:

  • touchstart
  • touchmove
  • touchend
  • orientationchange
  • 龙头
  • taphold
  • 刷卡
  • swipeleft
  • swiperight
  • scrollstart
  • scrollstop

谢谢 :)

javascript mobile jquery touch

9
推荐指数
1
解决办法
2万
查看次数

是否可以在IE中使用所需的属性?

我有这样的代码:

<input required>
Run Code Online (Sandbox Code Playgroud)

在良好的浏览器中,我可以像这样使用jquery为输入添加一类错误:

$('input[required]').addClass('error');
Run Code Online (Sandbox Code Playgroud)

但它在IE中不起作用.否则,我会诉诸于此,但它不是那么整洁......

HTML:

<input data-required=true>
Run Code Online (Sandbox Code Playgroud)

使用Javascript:

if( $('input').data('required') ) $('input').addClass('error');
Run Code Online (Sandbox Code Playgroud)

有任何想法吗?

谢谢,
威尔

编辑:

是的,我正在使用HTML5.

IE实际上解释了这个:

<input required>
Run Code Online (Sandbox Code Playgroud)

如:

<input required="">
Run Code Online (Sandbox Code Playgroud)

所以有可能检查这样:

if( $('input').prop() == undefined )
Run Code Online (Sandbox Code Playgroud)

但同样,这是一种混乱的做事方式,特别是考虑到只有IE才有问题.此代码适用于所有其他浏览器.

我基本上问是否有一种检查方法是跨浏览器和整洁.我也许是一个完美主义者!;)

forms validation jquery html5 internet-explorer

6
推荐指数
1
解决办法
2万
查看次数

使用jQuery委派Hammer.js事件

我已经开始使用Hammer.js(https://github.com/eightmedia/hammer.js),这是一个很棒的小脚本,但我不确定如何使用jQuery的.on()事件处理程序委派事件.

我在这里设置了一个小jsfiddle示例:http://jsfiddle.net/will/3dUKu/1/

var i = 0;
// How would I apply hammer to this situation?
$('nav').on('click', 'button', function() {
    $('<button id="' + i + '">Extra button ' + i + ' (' + $(this).attr('id') + ')</button>').appendTo('nav');
    i++;
});
Run Code Online (Sandbox Code Playgroud)

jquery events touch hammer.js

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

How can I fill a polygon with a texture using svg?

I'm currently using svg.js - but I am very welcome to alternative suggestions - is there any way I can create a polygon and then apply a repeating texture to it?

Below is an example of what I am attempting to achieve. Here is a jsFiddle which shows my best attempt. This works, but the image doesn't repeat so if you increase the size of the polygon the effect is lost.

我正在创建一个图像,然后是两个多边形.一个用于形状,另一个用于阴影.然后我用多边形掩盖图像.

image.maskWith(polygon.fill({color: '#FFF'}));
Run Code Online (Sandbox Code Playgroud)

我们的想法是,不是创建许多不同形状,彩色和纹理的PNG,我们将能够创建一个纹理并使用svg.js来调整其他所有内容.

提前致谢 :)

带纹理的多边形示例

javascript svg svg.js

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