我有一个网站,用户可以上传未知尺寸的照片。我正在尝试找出如何使图像成为固定大小的圆圈。我可以创建圆圈并创建圆形图像,但我不知道如何防止图像在放入圆圈时变形。有没有办法用任何图像填充固定大小的圆圈而不扭曲图像(最好居中)?我在这里做了一个小提琴。非常感谢。
#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)
我有一个表单,我在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) 我正在尝试使用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) 我有一个页面显示从 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)
我有一些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) 我在网站上使用fullcalendar ,并且希望在较小的屏幕尺寸上稍微不同地设置事件样式。如果窗口低于特定大小,如何触发下面的代码?
eventAfterRender: function(event, element, view) {
$(element).css('height','10px');
}
Run Code Online (Sandbox Code Playgroud) 我试图理解如何声明一个我以后可以在我的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) 我有一个页面,使用 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) 我正在使用一段jQuery代码隐藏表格单元格,同时保留空间.它工作得很好,但我想知道如何让元素淡出.我尝试添加,.fadeOut()但无法让它工作.
$(this).closest('td').css('visibility', 'hidden');
Run Code Online (Sandbox Code Playgroud)