小编Fre*_*all的帖子

用于移除移动Web应用程序中的地址栏的跨平台方法

我正在开发一个移动网络应用程序,我正在尝试删除地址栏.它很容易,除非它<body>的自然高度不够高,不允许滚动.尝试我可能找不到可靠的iphone/android,跨设备方法确保<body>足够高以允许地址栏消失.我见过的许多方法都依赖于screen.height它使得页面比它需要的更加严格.它应该非常高,足以让地址栏消失,不会更高!

有没有人有一个完美处理这个的脚本?我需要确定页面的高度减去iphone和android的地址栏.

我试过了:

screen.height //too tall
window.innerHeight //too short
document.documentElement.clientHeight //too short
document.body.clientHeight //almost but too short
Run Code Online (Sandbox Code Playgroud)

允许JQUERY.

javascript jquery android web-applications mobile-safari

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

较少的CSS计算

这是我想做的.不确定它是否可能与LESS CSS,但我有一种感觉,我只是找不到语法.

@height : 50px;
@wrap   : 25px;
@bgsize : ((@wrap/@height)*100)+'%';
Run Code Online (Sandbox Code Playgroud)

所以@bgsize == 50%,我尝试过的所有内容都会导致脚本失败.

css less

8
推荐指数
2
解决办法
1715
查看次数

从JavaScript获取SVG文件作为字符串

    $.get('/vectorimage.svg', function(svg){

        //returns undefined
        console.log(svg.getElementsByTagName('svg')[0].innerHTML);

        //returns undefined
        console.log(svg.documentElement.innerHTML);

        //returns document
        console.log(svg);
    });
Run Code Online (Sandbox Code Playgroud)

我希望将响应作为字符串简单明了.

javascript ajax jquery svg

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

clearInterval无法正常工作

这很可能只是我的挫折语法错误.但resizeTime只是不清楚.无论多次使用clearInterval,计时器都会继续运行.有什么想法吗?我发布了我的真实代码:

  var resizeTime; // declared outside of wrapper function to INSURE no second declaration will occur
  var myTransitionEvent = whichTransitionEvent();

  $(window).bind('adapt', function(){
        console.log('start', resizeTime);
        resizeTime = setInterval(function(){
              console.log('go', resizeTime);
              methods.relayoutChildren.apply(self);
        }, 5);
        setTimeout(function(){
        console.log('sNend', resizeTime);
              clearInterval(resizeTime);
        },1000);

  });

  $('#allies-wrap').bind(myTransitionEvent, function(){
        console.log('end', resizeTime);
        clearInterval(resizeTime);
        methods.relayoutChildren.apply(self);
  });
Run Code Online (Sandbox Code Playgroud)

以下是chrome的示例日志:

  start undefined
  start 8215
  (10) go 8218
  start 8218
  start 8221
  (256) go 8224
  (2) sNend 8224
  (9) go 8224
  sNend 8224
  (3) go 8224
  sNend 8224
  (2596) go 8224
Run Code Online (Sandbox Code Playgroud)

对于那些不知道chrome日志的人,(2596)意味着2596次出现相同的日志.

javascript jquery

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

d3从酒吧过渡到馅饼和背部

现场演示

所以我认为应该允许所有单轴数据以所有基本方式显示; 至少从馅饼到酒吧.理想情况下,这将是一个动画过渡,但那就是难度.

获得饼图很容易,就像获得条形图一样.这是我到目前为止:

# fields
width   = 750
height  = width/2
margin  = 20
radius  = (height-(margin*2))/2

# helpers
pie     = d3.layout.pie().value (d) -> d 
arc     = d3.svg.arc()
    .outerRadius(radius)
    .innerRadius(radius/4)
x       = d3.scale.linear().domain([0, 100]).range [0, width]

$http.get('/Classification_Top_10_by_Count.json').success (data) ->

    percents = (parseFloat item.Percent for item in data).sort d3.ascending

    svg      = d3.select('#svgStage').append('svg')         
        .attr('width', width+(margin*2))
        .attr('height', height+(margin*2))

    svg.data([percents])

    g = svg.append('g')
        .attr('transform', "translate(#{radius},#{radius})")

    paths   = g.selectAll 'path'

    paths.data(pie).enter().append('path')
        .attr('d', arc)

    toBars = ->
        g.selectAll('path').transition().duration(2000) 
            .attr 'd', (d, index) ->
                # this …
Run Code Online (Sandbox Code Playgroud)

animation coffeescript d3.js

8
推荐指数
2
解决办法
2247
查看次数

coffeescript fat arrow访问不是父母'这个'

这非常有效

    @nav.on 'click', ->
        _this.mover _this.nav.index $(@)
Run Code Online (Sandbox Code Playgroud)

但我想知道我是否可以使用胖箭而不是这样

    @nav.on 'click', =>
        @mover @nav.index $(????)
Run Code Online (Sandbox Code Playgroud)

但我会落实到位@,这将导致this代替_this?

jquery coffeescript arrow-functions

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

SVG甜甜圈切片作为路径元素(环形扇区)

好的,这不是一个错误,但我对如何通过Bézier曲线在点之间获得完美的圆弧感到困惑.

我需要这样的形状:

在此输入图像描述

所以我从中心点,半径和角度计算出这样的四个角点,用下面的公式计算:(x?,y?)=(x + dcosα,y + dsinα),这在我的coffeescript看起来像这样:

x1 = centerPointX+outerRadius*Math.cos(currentAngle)
y1 = centerPointY+outerRadius*Math.sin(currentAngle)
x2 = centerPointX+innerRadius*Math.cos(currentAngle)
y2 = centerPointY+innerRadius*Math.sin(currentAngle)
x3 = centerPointX+outerRadius*Math.cos(currentAngle2)
y3 = centerPointY+outerRadius*Math.sin(currentAngle2)
x4 = centerPointX+innerRadius*Math.cos(currentAngle2)
y4 = centerPointY+innerRadius*Math.sin(currentAngle2)
Run Code Online (Sandbox Code Playgroud)

如何获取我所拥有的信息并生成具有完美圆形曲线的路径元素?

(PS我对SVG很新,如果你想帮助我使用d =的正确语法,那将很酷,但我总是可以自己写.我想要帮助的挑战更多是与Bézier有关.

更新/解决方案

使用下面的答案,下面的指导是我实际使用的功能:

annularSector = (centerX,centerY,startAngle,endAngle,innerRadius,outerRadius) ->               
    startAngle  = degreesToRadians startAngle+180
    endAngle    = degreesToRadians endAngle+180
    p           = [ 
        [ centerX+innerRadius*Math.cos(startAngle),     centerY+innerRadius*Math.sin(startAngle) ]
        [ centerX+outerRadius*Math.cos(startAngle),     centerY+outerRadius*Math.sin(startAngle) ]
        [ centerX+outerRadius*Math.cos(endAngle),       centerY+outerRadius*Math.sin(endAngle) ]
        [ centerX+innerRadius*Math.cos(endAngle),       centerY+innerRadius*Math.sin(endAngle) ] 
    ]
    angleDiff   = endAngle - startAngle
    largeArc    = (if (angleDiff % (Math.PI * …
Run Code Online (Sandbox Code Playgroud)

javascript svg

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

如何实现像jQuery这样的链式方法调用?

所以我(仍然)完全爱上了全能的jQuery,我有自己不断增长的实用程序库,我想在java脚本对象中编写代码.为了简化我的其他前端开发人员,我想保持类似于jquery的语法.所以我想要这样的东西:

 foo(argument).method(argument);
Run Code Online (Sandbox Code Playgroud)

我一直在尝试这样的事情:

var foo = function(str){
    this.str = str;
}

foo.prototype = {
    alertTest  :  function(additional){
         alert(this.str + ' ' + additional);
    }
}
Run Code Online (Sandbox Code Playgroud)

那就是foo('你好').alertTest('world); 提醒'你好世界'

我知道这是可能的,但我不是一个OO人,需要帮助才能让这件事变得简单.请帮忙.我还打算有很多foo().bar(); 类型函数,如foo().somethingelse(); 和foo().anotherthing(); .我做了几次尝试,但我在这里努力奋斗.还必须有一个非常紧凑的方式来做到这一点.

谢谢大家!

javascript object

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

jade:在mixin参数中转义html

我尝试过的:

mixin simpleDivInject(text)
    div 
        h1 #{text}


mixin simpleDivInject("line one <br/> line two")
Run Code Online (Sandbox Code Playgroud)

期望的结果

<div>
    <h1>line one <br/> line two</h1>
</div>
Run Code Online (Sandbox Code Playgroud)

实际结果

<div>
    <h1>line one &lt;br/&gt; line two</h1>
</div>
Run Code Online (Sandbox Code Playgroud)

我怎样才能达到预期的效果.我已经尝试了一些其他的东西(比如将字符串存储在一个变种中),但到目前为止还没有运气.

javascript pug

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

android获取纵向和横向的可用高度和宽度

所以我在我的活动中写了以下方法:

private void setDisplayMetrics(){

    DisplayMetrics metrics = this.getResources().getDisplayMetrics();
    int dh       = metrics.heightPixels;
    int dw       = metrics.widthPixels;

    if(dw < dh){
        deviceWidth  = dw;
        deviceHeight = dh;
    }else{
        deviceWidth  = dh;
        deviceHeight = dw;
    }

    System.err.println("--------------> dh : "+deviceHeight+" | dw "+deviceWidth);

}
Run Code Online (Sandbox Code Playgroud)

它的效果非常好,从某种意义上说,它可以让我获得屏幕的总宽度和高度,具有极高的准确性和可靠性(这就是我要求它做的事情).

这是问题所在.在较旧的Android设备上,屏幕尺寸与应用程序可以占用的尺寸相同,上面的脚本可以帮助我设置应用程序中元素的大小.但是使用android ICS我在屏幕底部有这个图形按钮栏,它会影响我的整个策略.

在此输入图像描述

我真正想要的是能够在一种方法中同时获得纵向视图和横向视图的可用应用维度.无论上图所示的条形图如何,这些尺寸都是准确的.

有谁知道如何实现这一目标?

java android android-layout

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