小编Rus*_*pez的帖子

使用jQuery动画旋转单词

我想创建一个排版效果,并希望旋转一部分句子.我尝试过使用jQuery动画.

我想动画一下单词.这是我的代码

window.setInterval(function() {
  $("#tchange").animate({
    "top": "-=15px"
  }, 100).fadeOut("fast");
  $('#tchange').text("Xyz").css('top', '-10px').slideDown("slow");
}, 2000);
Run Code Online (Sandbox Code Playgroud)
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h1 class="remove-bottom" style="margin-top: 40px">
        Get on the Current Release.<br>
        Boost your 
        <span id="tchange">
            Competitiveness
        </span>
    </h1>
Run Code Online (Sandbox Code Playgroud)

css jquery html5

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

所选<datalist>项的值

我正在使用<input type='text'>Element和a <datalist>来为表单提供用户名建议.一切都按预期工作,我的所有用户都出现了.

但是,当用户提交表单时,我希望根据输入在我的数据存储中选择正确的用户.不幸的是,名称并不是唯一的,并且有可能存在重复.为了避免这种情况,我的所有用户都有一个唯一的ID也是一部分<datalist><options>标签.

除了输入的文本值,我有什么方法可以阅读其他内容吗?是否有对所选datalist元素的引用?我可以根据文本输入检索用户的ID吗?

<input type="text" class="form-control" name="userName" placeholder="Type a user's name" value="" list="user-datalist" required autofocus>

<datalist id="user-datalist">
  <option id="53c911ea609252c600632dfe" value="Mr Smith">Mr Smith</option>
  <option id="53c911ea60925sdfs4e444eg" value="John Snow">John Snow</option>
  <option id="53c911ea6034534535k345th" value="John Snow">John Snow</option>
  <option id="53c911ea60925234234234er" value="Mickey Mouse">Mickey Mouse</option>
</datalist>
Run Code Online (Sandbox Code Playgroud)

html javascript jquery html5

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

如何在.galleria中添加替代文本?

如何使用jquery.galleria.js在缩略图和大图像中添加替代文本?

$(window).load(function() {
      Galleria.loadTheme('http://www.bulogjatim.com/wp-content/themes/duotive-fortune/js/jquery.galleria.template.js');
      $("#galleria").galleria({
        width: 880,
        height: 439,
        transition: 'fadeslide'
      });
    );
Run Code Online (Sandbox Code Playgroud)
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="galleria" class="galleria-wrapper">
  <a class="image-wrapper" href="http://veithen.github.io/images/icon-stackoverflow.svg">
    <img src="http://veithen.github.io/images/icon-stackoverflow.svg" />
  </a>
</div>
Run Code Online (Sandbox Code Playgroud)

jquery

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

文本区域的Dojo验证

我试图第一次使用dojo,所以这可能是显而易见的.

我有一个非常简单的表单,其中有一个textarea需要填写.

<script src="http://ajax.googleapis.com/ajax/libs/dojo/1.10.3/dojo/dojo.js"></script>
<form id='form1' action="" method="" dojoType="dijit.form.Form">
  <label for="dob">desc:</label>
  <textarea class='multilinecontrol' dojoType="dijit.form.Textarea" selected='true' required='true'></textarea>
  <button type='submit' id="next" name="next" dojoType="dijit.form.Button">
    Next</button>
</form>
Run Code Online (Sandbox Code Playgroud)

我添加了'required'属性,因此我可以确保表单在用户可以继续之前有效.

然而,当表单显示时,textarea周围有一个红色的焦点环,其他小部件都不像这样,它真的很烦人.

知道怎么摆脱它吗?

我可以通过放置某种默认文本来破解它,比如'把东西放在这里'然后我必须做额外的验证工作 - 我现在无法解决该怎么做.

validation dojo textarea required

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

raphael将对象从一个容器拖放到另一个容器

我已经能够将元素拖放到同一张纸中.现在我需要能够将raphael元素从一个纸容器拖放到另一个纸容器中.这是一个例子:

从第一个svg拖到第二个svg

html中的第一个svg元素

<svg style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);" xmlns="http://www.w3.org/2000/svg" version="1.1" width="500" height="260">
  <rect style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);" x="10" y="15" width="64" height="64" r="5" rx="5" ry="5" fill="#ffc0cb" stroke="#000">
  </rect>
</svg>
Run Code Online (Sandbox Code Playgroud)

html中的第二个svg元素

<svg style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);" </svg>
Run Code Online (Sandbox Code Playgroud)

首先,有可能吗?如果可能的话,请给我一些线索如何做到这一点.谢谢!

html svg raphael

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

Firefox不会播放SVG中定义的关键帧动画作为背景图像嵌入

我在文件中的块内定义SVG@keyframeanimationS <style>,我使用该background-image属性嵌入到页面中.

动画在Chrome和Safari中完美运行,但在Firefox中则不然.在Firefox中查看图像本身时,动画将按预期工作.

    .loader {

      height: 3.375rem;

      width: 3.375rem;

      background: url("http://www.haaretz.co.il/htz/images/htz-spinner.svg");

    }
Run Code Online (Sandbox Code Playgroud)
<div class="loader"></div>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 160 160">
  <style>
    .alef {
      fill: #fff
    }
    .alef-bg {
      fill: #09A5D9
    }
    .commet-wrapper {
      -ms-transform: translate(76px, 76px) scale(-1, .57) skewY(50deg);
      -webkit-transform: translate(76px, 76px) scale(-1, .57) skewY(50deg);
      transform: translate(76px, 76px) scale(-1, .57) skewY(50deg);
    }
    .commet {
      fill: #067194;
      -webkit-animation: color-change 2s linear infinite .8s, spin 1s linear infinite;
      animation: color-change 2s linear infinite .8s, spin …
Run Code Online (Sandbox Code Playgroud)

html firefox animation svg keyframe

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

Raphaeljs IE8 setViewBox无法正常工作

我使用RaphaelJS生成SVG.我的SVG宽度和高度是1024px.我使用setViewBox因为包含它的div比510px宽度和高度小.

使用IE8 RaphaelJS生成VML但setViewBox不起作用,生成的VML 大小为1024px.

我如何才能使VML响应?

paper = Raphael(document.getElementById("SVGDiv"));

paper.canvas.id = 'paper';
paper.setViewBox(0,0,1024,1024);
paper.setViewBox(0,0,1024,1024);
image = paper.image("",0,0, 1024, 1024);
text = paper.text(512, 512, '');
if( isIE() > 8 || isIE() == false){
    paper.setSize("100%","100%");
}
Run Code Online (Sandbox Code Playgroud)

vml viewbox raphael internet-explorer-8

6
推荐指数
0
解决办法
220
查看次数

Fancybox中的SVG

我需要在fancybox中使用svg图像.

<div id="data">
  <svg width="400" height="110">
    <rect width="300" height="100" style="fill:rgb(0,0,255);stroke-width:3;stroke:rgb(0,0,0)">
      Sorry, your browser does not support inline SVG.
  </svg>
  <img src="http://fc03.deviantart.net/fs71/f/2011/260/e/1/circle_png_by_xdicsii-d4a2odp.png" />
  <a id="inline" href="#data" style="margin-left:15px;">Full Screen</a>
</div>
Run Code Online (Sandbox Code Playgroud)

我想获得id为"data"的div的全屏.

当我点击"全屏"时,我正在使用带有jpg图像的id为"data"的div全屏,但不是svg图像(将其渲染到div中)

html javascript svg fancybox

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

xhtml2pdf 子元素显示父元素的边框

希望有人可以解决这个问题。在 Google 上还没看到有人用过它。

我在 Python 中使用 xhtml2pdf,尝试生成一个带有页眉、页脚的简单文档,我的内容是带有标题的文本块。我希望在每个内容周围都有边框,但我却在每个子元素周围都有边框。

这是我的 HTML

@page {
  size: letter;
  border: 0;
  @frame header_frame {
    -pdf-frame-content: header;
    border: 0pt solid white;
    left: .75in;
    width: 7in;
    top: .5in;
    height: 1.5in;
  }
  @frame content_frame {
    border: 0pt solid white;
    left: .75in;
    width: 7in;
    top: 1.5in;
    height: 7.5in;
  }
  @frame footer_frame {
    -pdf-frame-content: footer;
    border: 0pt solid white;
    left: .75in;
    width: 7in;
    top: 9.5in;
    height: 1in;
  }
}

h1 {
  padding-top: 5pt;
}

.desc {
  margin-top: 3px;
  margin-bottom: 3px;
  padding: …
Run Code Online (Sandbox Code Playgroud)

css python xhtml2pdf

5
推荐指数
0
解决办法
1248
查看次数

SyncFusion JS图表 - 工具提示表现不对

我正在使用SyncFusion for Javascript在我的应用中呈现图表.我有一个StepChart,有几个系列,连续的X轴和数据点之间的不等间隔.当用户悬停特定点时,我想显示带有描述的工具提示.但它没有按预期工作.有时,工具提示会显示错误的点,对于某些点,它们根本不会显示.

错误的工具提示

似乎有一些聪明的算法决定应该为每个区域显示什么工具提示......不幸的是,它对我不起作用.仅当用户的鼠标正好在点上时显示工具提示就足够(因为我的点很大).

$(function() {
  $("#container").ejChart({
    primaryXAxis: {
      valueType: 'datetime',
      range: {
        min: new Date(1422874800000),
        max: new Date(1422878400000),
        interval: 5
      },
      intervalType: 'Minutes'
    },
    primaryYAxis: {
      title: {
        text: 'Value'
      },
      range: {
        min: 0,
        max: 300
      }
    },
    commonSeriesOptions: {
      type: 'stepline',
      enableAnimation: true,
      marker: {
        shape: 'circle',
        size: {
          height: 12,
          width: 12
        },
        visible: true
      },
      border: {
        width: 2
      },
      tooltip: {
        visible: true,
        format: "#point.x#<br/>#series.name# value is #point.y# " …
Run Code Online (Sandbox Code Playgroud)

html javascript svg syncfusion

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