小编skB*_*ore的帖子

为什么 getComputedStyle() 没有获取实际的宽度和高度是否存在任何回调或事件

我处于这种情况，我需要等待图像加载，一旦图像加载，我需要获取其计算的高度，以便我可以相应地设置黄色选择器。

问题：根据计算的图像高度，我设置黄色颜色选择器。它随机与 setTimeout() 一起使用，但我不想要这种方法。

let images = ['https://via.placeholder.com/150','https://via.placeholder.com/110/0000FF/808080%20?Text=Digital.com','https://via.placeholder.com/80/0000FF/808080%20?Text=Digital.com'];

let image = `<img src="${images[Math.floor(Math.random()*images.length)]}"/>`


document.getElementById('content').innerHTML = `<div class="box">${image}</div>`;

//actual code

let height = window.getComputedStyle(document.querySelector('.box'), null).getPropertyValue('height');

let imageWidth = window.getComputedStyle(document.querySelector('.box img'), null).getPropertyValue('width');

console.log('height',height,'width',imageWidth);

wrapImage = `<div style="width:calc(${imageWidth} + 10px);height:calc(${height} + 10px);position:absolute;left:0;top:0;border:1px solid yellow;"></div>`;

document.querySelector('.box').insertAdjacentHTML('beforeend',wrapImage);

Run Code Online (Sandbox Code Playgroud)

.box{
   width:100%;
   height:auto;
   border:1px solid red;
   position:relative;
}

Run Code Online (Sandbox Code Playgroud)

<div id="content">

</div>

Run Code Online (Sandbox Code Playgroud)

使用 setTimeout 它可以工作，但我不想要这种方法，我想要callback或一些event一旦元素准备好

let images = ['https://via.placeholder.com/150','https://via.placeholder.com/110/0000FF/808080%20?Text=Digital.com','https://via.placeholder.com/80/0000FF/808080%20?Text=Digital.com'];

let image = `<img src="${images[Math.floor(Math.random()*images.length)]}"/>`


document.getElementById('content').innerHTML = `<div class="box">${image}</div>`;

//actual code

setTimeout(() => { …

Run Code Online (Sandbox Code Playgroud)

html javascript css

skB*_*ore

2021 11-21

11
推荐指数

4
解决办法

2164
查看次数

如何在mxgraph中固定拖动步骤

嗨，我正在寻找每个拖动项目的拖动步骤，可以说 200px

下图展示了它：

我已经搜索了很多，但没有找到任何与此相关的解决方案。

问题：虚drag框步骤应设置为200px，换句话说，应跳至200px

全视图Codepen： https ://codepen.io/eabangalore/pen/GaPzJw ? editors = 1000

下面的代码段不起作用，请参见上面的codepen

<!--
  Copyright (c) 2006-2013, JGraph Ltd
  
  Dynamic toolbar example for mxGraph. This example demonstrates changing the
  state of the toolbar at runtime.
-->
<html>
<head>
	<title>Toolbar example for mxGraph</title>

	<!-- Sets the basepath for the library if not in same directory -->
  <script type="text/javascript">
    mxBasePath = 'https://jgraph.github.io/mxgraph/javascript/src';
    
    
    
   function setGraphData(){
      var graphState = {"tagName":"mxGraphModel","children":[{"tagName":"root","children":[{"tagName":"mxCell","attributes":{"id":"0"}},{"tagName":"mxCell","attributes":{"id":"1","parent":"0"}},{"tagName":"mxCell","attributes":{"id":"2","style":"","vertex":"1","parent":"1"},"children":[{"tagName":"mxGeometry","attributes":{"x":"400","y":"130","width":"100","height":"40","as":"geometry"}}]},{"tagName":"mxCell","attributes":{"id":"3","style":"","vertex":"1","parent":"1"},"children":[{"tagName":"mxGeometry","attributes":{"x":"661","y":"101","width":"100","height":"40","as":"geometry"}}]}]}]};
      
      localStorage.setItem('graphState',JSON.stringify(graphState));
    }
    
    	function html2json(html){
		if(html.nodeType==3){
			return …

Run Code Online (Sandbox Code Playgroud)

javascript jquery node.js mxgraph

skB*_*ore

2019 06-11

9
推荐指数

1
解决办法

261
查看次数

为什么jquery文件上传总是将单个文件发送到后端

我面临多个文件上传的问题。

问题是：

如果我上传2 files只1文件被发送到后端。
仅最后一个文件发送到服务器（跳过其他文件，换句话说，只有1个文件发送到后端）

问题：我遇到一种情况，在每次输入时我都可以浏览多个文件并可以单击提交。我希望每个文件都应该发送到服务器。

这里：jsfiddle显示我的问题：http : //jsfiddle.net/eabangalore/jyteus6c/2/

注意：请console.log检查是否全部files发送到服务器。

下面是我的代码：

var filesUploadList = [];

function initializeMultipleFileUpload(){
    fileList.forEach(function(obj){
    
         $('input[data-id="'+obj.identifier+'"]').fileupload({
              url: 'https://jsonplaceholder.typicode.com/posts',
              autoUpload: false,
              maxChunkSize: 10*1024*1024, // 1MB
              maxRetries: 10,
              dataType: 'json',
              multipart: false,
              sequentialUploads: true,
              replaceFileInput: false,
              progress: function(e,data){
                  console.log('Progress for file Name:  ',data.data.name);
             },
          }).on("fileuploadadd", function (e, data) {
              filesUploadList.push(data.files[0])
          });
          
    });
}

var fileList = [
     {'fileNo':1,identifier:111},
     {'fileNo':2,identifier:222},
     {'fileNo':3,identifier:33}
];
var inputFileStr = '';
for(var i = …

Run Code Online (Sandbox Code Playgroud)

javascript jquery node.js blueimp jquery-file-upload

skB*_*ore

2019 09-15

9
推荐指数

2
解决办法

194
查看次数

为什么动画没有像预期的那样发生在盒子底部

我正试图animation点击预期如下的方框

单击框时,它必须向右移动到300px或最右边,然后它应该到底部.

注意:如果是使用tweenMax (GSAP).然后解决方案最受欢迎.

如图所示:

这是codepen:https ://codepen.io/anon/pen/ajXqLL

$(function(){
  $('.box').on('click',function(){
      $('#wrapper').append(this);
      $(this).addClass('elementToAnimate');
   });
});

Run Code Online (Sandbox Code Playgroud)

		div.box{
		  height: 100px;
		  width: 200px;
		  background:red;
		  display: inline-block;
		  text-align:center;
		  color:#fff;
		  font-size:26px;
		  margin: 0px;
		  float: left;
		}
		div.box:active{
		  background:yellow;
		}
		div.box2{
		  background:green;
		}
		div.box3{
		  background:orange;
		}


     
@keyframes yourAnimation{
    0%{
        transform: translateX(100px) translateY(20%);
        }
    40%{
        transform: rotate(xx) translateX(120px) translateY(40%);
        }

     60%{
        transform: rotate(xx) translateX(150px) translateY(50%);
        }

      80%{
        transform: rotate(xx) translateX(200px) translateY(90%);
        }

}

.elementToAnimate{
    animation: yourAnimation 3s forwards 0s linear;
}

Run Code Online (Sandbox Code Playgroud)

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> …

Run Code Online (Sandbox Code Playgroud)

javascript jquery css3 jquery-animate tweenmax

skB*_*ore

2018 08-18

8
推荐指数

1
解决办法

250
查看次数

如何使标记动态标记正在进行的任何地方

我的标记有问题，我希望标记可伸缩以在进度条上的任何位置标记

如下图所示

问题：我想在进度条上选择任意点并能够拉伸标记，该标记可以是多个标记点。

我不知道如何使用下面的代码：

var player = videojs('demo');

player.markers({
   markerStyle: {
      'width':'9px',
      'border-radius': '40%',
      'background-color': 'orange'
   },
   markerTip:{
      display: true,
      text: function(marker) {
         return "I am a marker tip: "+ marker.text;
      }
   },
   breakOverlay:{
      display: true,
      displayTime: 4,
      style:{
         'width':'100%',
         'height': '30%',
         'background-color': 'rgba(10,10,10,0.6)',
         'color': 'white',
         'font-size': '16px'
      },
      text: function(marker) {
         return "This is a break overlay: " + marker.overlayText;
      },
   },
   markers: [
      {time: 9.5, text: "this", overlayText: "1", class: "special-blue"},
      {time: 16,  text: "is", overlayText: "2"}, …

Run Code Online (Sandbox Code Playgroud)

html javascript jquery video.js

skB*_*ore

2019 11-25

8
推荐指数

2
解决办法

210
查看次数

Electron TypeError:$(...).当我尝试使用它时,jstree不是一个函数

我正在使用jstree我从这里下载代码https://www.jstree.com/

发现jstree.js从dist folder投入我的/js/jstree.js

导入的jstree是这样的:

if(inElectron()){
    window.jQuery = require('./js/jquery.min.js');
    window.$ = window.jQuery;
    window.jstree = require('./js/jstree.js');
}

Run Code Online (Sandbox Code Playgroud)

当我尝试使用它时:

$('#jstree').jstree();// for just demo with minimal code (其实我在这里使用完整的代码http://jsfiddle.net/t4s7dz52/)

我收到以下错误:

"TypeError:$(...).jstree不是一个函数

注意:我可以在jQuery整个项目中使用,因此import error两者js都不在同一个文件夹中

请提前帮助我!!!!

javascript jquery jstree

skB*_*ore

2018 10-29

7
推荐指数

1
解决办法

718
查看次数

为什么视频没有播放,第一次播放时会动态改变它无法播放

我正在使用videojs插件动态播放我的视频点击每个视频,但它不会播放我做错了什么.

$(function(){
  
    $('.player-src').on('click',function(){
       //alert($(this).attr('data-src'));
       var videosrc = $(this).attr('data-src');
       videojs('my_video_1', {
			  sources: [{
			    src: videosrc,
			    type: 'video/mp4'
			  }, {
			    src: videosrc,
			    type: 'video/webm'
			  }]
			});
   });

});

Run Code Online (Sandbox Code Playgroud)

ul{
  display:block;
  list-style: none;
  background:#eaeaed;
  padding:15px;
}

li.player-src{
     padding: 12px;
    background: orangered;
    color: #fff;
    display: inline-flex;
    margin: 12px;
    cursor: pointer;
}

Run Code Online (Sandbox Code Playgroud)

<link href="https://vjs.zencdn.net/7.3.0/video-js.css" rel="stylesheet"/>
<script src="https://vjs.zencdn.net/7.3.0/video.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul >
  <li class="player-src" data-src="/local/filename.mp4">play-video1</li>
  <li class="player-src" data-src="https://vjs.zencdn.net/v/oceans.webm">play-video2</li>
  <li class="player-src" data-src="/local/filename.mp4">play-video3</li>
  <li class="player-src" data-src="https://vjs.zencdn.net/v/oceans.webm">play-video4</li>
  <li class="player-src" data-src="/local/filename.mp4">play-video5</li>
</ul>



 <video id="my_video_1" class="video-js vjs-default-skin" width="640px" height="267px" …

Run Code Online (Sandbox Code Playgroud)

javascript video jquery video.js

skB*_*ore

2018 11-13

7
推荐指数

1
解决办法

597
查看次数

如何使 videojs 标记可滑动或可移动

markers每当它与搜索一起滑动时，我都想移动它。我希望我的标记与jqueryui-slider完全slidable 一样

问题：我希望我的markers（两者）都像jqueryui-range滑块一样可滑动，如下例中的视频所示：

var player = videojs('example_video_1'); function markplayer(){ var inTimeOutTimeList = [6.333,27.667]; for(var i = 0; i < inTimeOutTimeList.length; i++){ player.markers.add([{ time: inTimeOutTimeList[i], text: inTimeOutTimeList[i] }]); var icon = (i == 0) ? '[' : ']'; $(".vjs-marker[data-marker-time='"+inTimeOutTimeList[i]+"']").html(icon); } }; player.markers({ breakOverlay:{ display: true, displayTime: 120, style:{ 'width':'100%', 'height': '30%', 'background-color': 'rgba(10,10,10,0.6)', 'color': 'white', 'font-size': '16px' } }, markers: [ {time:10, startTime:10, endTime:60, text: "this", overlayText: "1", class: "special-blue"}, ] }); …
Run Code Online (Sandbox Code Playgroud)

javascript video jquery video.js

skB*_*ore

2020 02-27

7
推荐指数

2
解决办法

1080
查看次数

为什么wavesurferjs溢出父div

我有问题 wavesurferjs

它正在溢出父 div

这是第一次发生，并且是在调整父 div 的大小时发生的

在调整大小时它应该适合父 div

问题： 当父母div调整大小时waveform应该调整自己以适应

如下图所示：

这是我的代码：

var wavesurfer = WaveSurfer.create({ container: '#waveform', // waveColor: 'violet', waveColor: '#5B88C8', progressColor: '#264E73', hideScrollbar: true, cursor: false, drag: false }); wavesurfer.load('https://ia800301.us.archive.org/15/items/fire_and_ice_librivox/fire_and_ice_frost_apc_64kb.mp3'); wavesurfer.enableDragSelection({ drag: false, slop: 1, loop : false, }); wavesurfer.on('region-created', function (region) { console.log(region.start, region.end); }); wavesurfer.on('ready', function (readyObj) { wavesurfer.addRegion({ start: 0, // time in seconds end: wavesurfer.getDuration(), // time in seconds color: 'hsla(100, 100%, 30%, 0.1)', loop: …
Run Code Online (Sandbox Code Playgroud)

javascript jquery wavesurfer.js

skB*_*ore

lucky-day

7
推荐指数

1
解决办法

1066
查看次数

如何在保持 4:3 纵横比的任何分辨率下将 10 个图像放入全屏行

您好，我想将 10 个图像放入全屏宽度的行中，保持4:3纵横比

问题：我想将 10 个图像恰好放入全宽行中，保持4:3图像的纵横比

注意：我的用例是故事板，图像之间没有任何间距

这是我当前的代码渲染方式

这是我尝试过的

ul { height: 100%; list-style: none; display: flex; padding: 0; margin: 0; } li { height: 100%; display: flex; list-style: none; justify-content: center; } img { width: 100%; height: 100%; }
Run Code Online (Sandbox Code Playgroud)
<div style="width:100vw;height:71px;border:1px solid red;"> <ul> <li> <img src="https://i.ibb.co/qy7h4qk/Screenshot-from-2021-10-15-12-09-31.png"/> </li> <li> <img src="https://i.ibb.co/qy7h4qk/Screenshot-from-2021-10-15-12-09-31.png"/> </li> <li> <img src="https://i.ibb.co/qy7h4qk/Screenshot-from-2021-10-15-12-09-31.png"/> </li> <li> <img src="https://i.ibb.co/qy7h4qk/Screenshot-from-2021-10-15-12-09-31.png"/> </li> <li> <img src="https://i.ibb.co/qy7h4qk/Screenshot-from-2021-10-15-12-09-31.png"/> </li> <li> <img src="https://i.ibb.co/qy7h4qk/Screenshot-from-2021-10-15-12-09-31.png"/> </li> <li> <img src="https://i.ibb.co/qy7h4qk/Screenshot-from-2021-10-15-12-09-31.png"/> …
Run Code Online (Sandbox Code Playgroud)

html css

skB*_*ore

2021 11-10

7
推荐指数

3
解决办法

638
查看次数

标签统计

javascript ×9

jquery ×8

html ×3

video.js ×3

css ×2

node.js ×2

video ×2

blueimp ×1

css3 ×1

jquery-animate ×1

jquery-file-upload ×1

jstree ×1

mxgraph ×1

tweenmax ×1

wavesurfer.js ×1

标签 统计

小编skB_ore的帖子

标签统计