小编Jul*_*anJ的帖子

用不变形的图像填充一个圆圈

我有一个网站,用户可以上传未知尺寸的照片。我正在尝试找出如何使图像成为固定大小的圆圈。我可以创建圆圈并创建圆形图像,但我不知道如何防止图像在放入圆圈时变形。有没有办法用任何图像填充固定大小的圆圈而不扭曲图像(最好居中)?我在这里做了一个小提琴。非常感谢。

#circle {
  border-radius: 50%;  
  width: 100px;
  height: 100px;
}
Run Code Online (Sandbox Code Playgroud)
<div><img src="https://source.unsplash.com/MUnoV4capRk/600x300" alt="" id="circle"></div>
Run Code Online (Sandbox Code Playgroud)

html css

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

为什么我不能编辑表单的文本字段?

我有一个表单,我在Twitter Bootstrap 3中使用.表单将数据发布到mysql数据库,占位符值从数据库回显.我<textarea>在'bio'字段中使用了输入,但由于某种原因,占位符文本在这里表现不同.我无法删除光标并像其他字段一样编辑特定的单词.为什么是这样?

<div class="form-group">
    <form class="" action="" id="edit_profile" method="post">
        <label>
                Name
              </label>
        <input id="user_name" name="user_name" type="text" placeholder="<?php echo $user_name ; ?>" value="<?php echo $user_name ; ?>" class="form-control input-md" required="">
</div>
Email
</label>
<input id="user_email" name="user_email" type="text" placeholder="<?php echo $user_email; ?>" value="<?php echo $user_email; ?>" class="form-control input-md" required="">
</div>

Bio
</label>

<textarea style="width:100%" value="<?php echo $bio; ?>" placeholder="<?php echo $bio; ?>" name="bio"></textarea>
</div>
<input type="hidden" name="user_id" value="<?php echo $_SESSION['user_session'] ?>">

<button type="submit" class="btn btn-small btn-green pull-right" id="submit">

              Save …
Run Code Online (Sandbox Code Playgroud)

html twitter-bootstrap

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

使用CSS移动前景图像

我正在尝试使用CSS移动前景图像,因此它与背景图像重叠一点.我似乎无法让前景图像移动到任何地方,我只是无法弄清楚我做错了什么.谁能指出我正确的方向?看我的小提琴.

HTML:

<img src="http://image.tmdb.org/t/p/w1000/aUYcExsGuRaw7PLGmAmXubt1dfG.jpg" style="-webkit-mask-image: -webkit-gradient(linear, left top, left bottom,   from(rgba(0,0,0,1)), to(rgba(0,0,0,0)))"
    width="auto" height="400" class="backgroundImg">
<div class="frontImg">
<img  src="http://image.tmdb.org/t/p/w150/2i0JH5WqYFqki7WDhUW56Sg0obh.jpg" class="" height="300" width="auto">
 </div>
Run Code Online (Sandbox Code Playgroud)

CSS:

body{
 background: black;
}
.background{
  position: absolute;
  left: 0px;
  top: 0px;
  z-index: -1;
}
.frontImg{
  position: absolute;
  left:200;
  top:500;
  z-index: 1;
}
Run Code Online (Sandbox Code Playgroud)

html css

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

如何将文本保留在div内?

我有一个页面显示从 mysql 数据库中检索的文本。

我不明白为什么我不能让文本在 div 中显示为文本块。相反,它溢出了 div。(我正在使用引导程序 3)这是一个小提琴

<div class="container">
  <div class="row">
    <!---MAIN COLUMN------>
    <div class="col-xs-12 col-md-6 col-sm-8 col-lg-6 col-centered">
      <h2>
        How to keep the text inside the div?
      </h2>

      <div class="mytext">
        fdsnkfhskghkgskghsdkghdskghdsklhgkdlsghds
        khgkdshgdksghdsklghdskg hkdslhgkdshgkdshgkdshgkd
        shgksdlhgksdhgkdslhgkdshgkdshgkdshgksd hgkldshgkd
        shgkldshgkhdsgkhdskghdskhgkdlshgkdshgkldsh
        gkdshgklhds kghdskghdskl
        <small>
        </small>

      </div>

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

html css

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

为什么jQuery替换只能工作一次?

我有一些jQuery代码,每次提交表单时都会替换div中的数据.由于某种原因,该replaceWith功能只更换div一次?谁能告诉我我错过了什么?

HTML

<div class="count"></div>
Run Code Online (Sandbox Code Playgroud)

jQuery的

$(document).ready(function(){
  $("#like_unlike").submit( function(e) { //Second Form
    e.preventDefault();
    var url = "update_likes.php"; //Grab URL from form
    var formdata = $(this).serialize();
    console.log(formdata);   
    $.post(url, formdata, function(response) {
      //Post the form
      $('.count').replaceWith(response);
    });
  });
}); 
Run Code Online (Sandbox Code Playgroud)

html jquery

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

仅将jquery代码应用于移动设备

我在网站上使用fullcalendar ,并且希望在较小的屏幕尺寸上稍微不同地设置事件样式。如果窗口低于特定大小,如何触发下面的代码?

eventAfterRender: function(event, element, view) {
    $(element).css('height','10px');
}
Run Code Online (Sandbox Code Playgroud)

jquery

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

声明一个变量以便稍后在代码中使用?

我试图理解如何声明一个我以后可以在我的jquery代码中使用的变量.下面我试图使用var id但似乎在我尝试使用它时忘记了alert(id).我怎样才能做到这一点?非常感谢.

$(document).ready(function() {

$('.credit_btn').on('click', function() {

   //Declare variables

    var id = ($(this).prop("value"));
    var test_id = $(this).parent().parent().attr("id");

    //Load modal
    $('.modal-container').load('modalbox.php?id=' + id, '&position_id=' + test_id,
      function() {
        $('#myModal').modal({
          show: true
        });
      }
    );
  });

  $(document).on("click", ".myBtn", function() {

    alert(id); //Var id is lost.

  });
}); //close doc
Run Code Online (Sandbox Code Playgroud)

javascript jquery

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

在同一页面上多次显示wavesurfer.js

我有一个页面,使用 php 在一页上显示多个音频文件。这工作正常,但我试图使用 wavesurfer.js 显示每个文件的波形。由于某种原因,我的 JavaScript 无法正常工作,我无法弄清楚为什么(我看不到任何波形)。希望有人可以提供帮助。谢谢。

html

echo "<ul>";
while ($row = mysqli_fetch_array($user_query, MYSQLI_ASSOC)) {
$f = $row["filename"];
$id = $row['id'];
$path='scan_file/'.$f.'';
 echo '<li>'.$id.'</li>';
 echo '<li>'.$f.'</li>';
  echo '<li>'.$path.'<li>';
 echo '<li><audio controls><source id="'.$id.'" title="'.$f.'" src="scan_file/'.$f.'"/></audio>
</li>';
echo '<li><div class="wave" data-path="scan_file/'.$f.'" data-id="'.$id.'"></div></li>';
} 
echo "</ul>";
Run Code Online (Sandbox Code Playgroud)

jQuery

<script type="text/javascript">
$('.wave').each(function(){
 var wavesurfer = Object.create(WaveSurfer);
var id = $('.wave').attr('data-id');
var path = $('.wave').attr('data-path');

console.log(id);
console.log(path);
 wavesurfer.init({
  container: 'wave',
    waveColor: 'violet',
    progressColor: 'purple'
 });
 wavesurfer.load($(this).data('path'));
});
</script>
Run Code Online (Sandbox Code Playgroud)

javascript jquery wavesurfer.js

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

如何在使用jQuery保持空间的同时淡出元素?

我正在使用一段jQuery代码隐藏表格单元格,同时保留空间.它工作得很好,但我想知道如何让元素淡出.我尝试添加,.fadeOut()但无法让它工作.

$(this).closest('td').css('visibility', 'hidden');
Run Code Online (Sandbox Code Playgroud)

jquery

0
推荐指数
1
解决办法
240
查看次数