小编Gus*_*Wal的帖子
用于发布和获取的Ajax教程
我需要一个简单的ajax教程或案例研究,用于简单的输入表单,我想通过输入表单发布用户名,输入表单将其发送到数据库并回复结果.
欢迎任何推荐这样的教程,因为我只有一个使用Mootool但我正在使用jQuery搜索一个!
推荐指数
解决办法
查看次数
是否可以在没有滚动条的情况下计算视口宽度(vw)？
如标题中所述,是否可以vw仅在css中计算没有滚动条的情况？
例如,我的屏幕宽度为1920px.vw回来1920px,太好了.但我的实际身体宽度只是像1903px.
有没有办法让我1903px只用css 检索值(不仅是直接的孩子body),还是我绝对需要JavaScript呢？
推荐指数
解决办法
查看次数
在safari 9.1.2上导航后禁用滚动
推荐指数
解决办法
查看次数
浮动元素到底部
我的问题非常具体,从他/她阅读它的那一刻起就会困扰任何Web开发人员.所以要小心!
我已经为我正在建设的网站制定了布局.这个想法是<hr/>页面上有倾斜的元素,文本将环绕到(见下图.黑线表示<hr/>)
你看到的是一些橙色条纹.这些的每一个是具有宽度的浮动元件10px,然后20px,再30px等黑线代表在那里停止,并且因此在那里切断该文本.
正如您可能猜到的那样,大橙色区域是一个浮动元素,宽度为0,其高度为100%其父级减去70个其他浮动元素(条纹)的高度,即70px.
问题:这似乎不可能.我得到的是这个:
由于这些小条纹都1px很高,无论如何它们都会出现.但是最大的一个依赖于父母的高度.如果我要修正父母的身高,那就行了.但我希望盒子是动态的.这意味着我应该能够更改内部文本.此外,如果我要修复它的高度,上下缩放页面看起来是灾难性的.
我需要做的是:第一个大浮动元素应该占用它所需的空间(100% - 70px),而不是给它的父级一个固定的高度,同时保持浮动.
我将用我所能提供的所有声誉来奖励解决这个问题的人,因为这已经困扰了我好几个月.
对于试图解决问题的人.有一些想法可能会有所帮助:
- 表格单元格可以将元素对齐到底部
- 我试过很多方面的旋转.太糟糕了,没有颠倒的文字.
- 我已经尝试将边距,填充和边框添加到第一个浮动div.到目前为止,没有一种组合可行.
- 我实际上并不希望元素浮动.这就是我选择尝试的方式,因为我不知道另一种方法来围绕元素包装文本.您可以自由尝试任何您想要的东西,只要内部文本可以更改,并且在放大或缩小时看起来像正常情况一样好.
- 我认为唯一的解决方案是使用Javascript来计算div需要的高度.
以下是填入小提琴的所有代码
编辑:我想我确实知道解决方案.我只是不知道如何编程.
使用Javascript,浏览器应计算容器内容(文本,图像,边距等)的高度.然后,#lw应该改变到那个高度.在那之后,#lw应该缩小1px.在此之后,应该检查内容是否发生了变化.如果发生这种情况,浏览器应检查内容高度的高度是否大于#lw+ 70px 的高度.如果它没有高于此值,则应重复该过程.如果确实如此,#lw应该再次缩小1px,并且该过程应该停止.调整窗口大小时,该过程应从头开始.
这似乎是一个工作的地狱,如果我认识JS,我会很感激地接受挑战.我想我要去Codecadamy了.
编辑:
与此同时,我提出了一个不太复杂的问题版本.我已经研究过css-shapes,并发现这些将允许我做70个浮动元素所做的事情,只有一个元素.我已经制作了另一组文件,但是它需要一个js文件才能工作.我在这里要做的是将HTML和CSS粘贴为代码,并链接到js代码.
就像旧版本一样,代码应该测量最佳高度.在我的代码中,我添加了一个<script>标签,其中包含应该发生的事情的确切描述.
我想我开始看起来很懒,因为我无法提供有关实际Javascript代码的任何输入.
HTML
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="css/stylesheet.css">
<script src='js/shapes.polyfill.min.js'></script>
</head>
<body>
<div id="container">
<div id="polybreak"></div>
<p>
Lorem ipsum dolor sit …推荐指数
解决办法
查看次数
如何在rails中的simple_form中使用CSS将两个div放在同一行？
将两个div放在同一行上是一个老问题.但是在rails中使用simple_form时我找不到解决方案.我想要做的是在同一行显示内容及其标签.标签的宽度为125px(.left),内容位于右侧(.right).标签中的文本与右侧对齐,内容中的文本与左侧对齐.
这是HTML:
<form id="new_production" class="simple_form new_production" novalidate="novalidate" method="post" action="/projects/1/productions" accept-charset="UTF-8">
<div style="margin:0;padding:0;display:inline">
<input type="hidden" value="?" name="utf8">
<input type="hidden" value="2UQCUU+tKiKKtEiDtLLNeDrfBDoHTUmz5Sl9+JRVjALat3hFM=" name="authenticity_token">
</div>
<div class="left">Proj Name?</div>
<div class="right">must have a name</div>
<div class="input string required">
这是CSS:
.simple_form div.left {
float: left;
width: 125px;
text-align: right;
margin: 2px 10px;
display: inline;
}
.simple_form div.right {
float: left;
text-align: left;
margin: 2px 10px;
display: inline;
}
但是,在结果中,有一个换行符,如下所示:
Proj Name?
must have a name
简单形式的erb代码是:
<div class="left">Proj Name?</div><div class="right"><%= @project.name %></div> …推荐指数
解决办法
查看次数
CSS网格 - 当溢出时,如何让所有列/行均匀生长
我觉得我在这一点上缺少一些东西,因为我观察到的行为并不完全一致.
我正在使用JavaScript生成随机网格.我在网格上设置了许多列和行,然后分别设置单元格的起始值和结束值.我想要的是,当溢出时(即,单元格的内容高于我想要的最小值,50px),单元格会增长,同一行上的单元格也会增长.看到这个小提琴
我在这里使用
grid-template-rows: repeat(4, minmax(50px, auto));
但是,正如您所看到的,由于某种原因,只有第3行增长而不是第4行.这可以通过将该行设置为来修复
grid-template-rows: repeat(4, minmax(50px, 1fr));
但这会导致所有行在发生溢出时均匀增长,这不是我想要的.看到这个小提琴
另外,奇怪的是,当我溢出第6个单元而不是第4个单元时,它确实有效.看到这个小提琴.第2和第3行均匀生长,因为第6行占据了两者.这也是我在第一个例子中期望和想要的行为.
这是一个错误吗？在Chrome和Firefox上也是如此,所以我觉得我只是遗漏了一些东西.
推荐指数
解决办法
查看次数
我的脚本用似乎没有理由的东西改变了一些值
所以我一直在研究一个在鼠标坐标处产生气泡的脚本.这是一个非常基本的脚本,可以计算一些随机不透明度,随机大小等等.
var transform = (function () { // This piece is to test whether transform should be prefixed or not
var testEl = document.createElement('div')
if (testEl.style.transform == null) {
var vendors = ['Webkit', 'Moz', 'ms']
for (var vendor in vendors) {
if (testEl.style[ vendors[vendor] + 'Transform' ] !== undefined) {
return vendors[vendor] + 'Transform'
}
}
}
return 'transform'
})()
var bubbles = {}
bubbles.chance = 0.08 // Chance for a bubble to spawn at mousemove
bubbles.delay = 50 // …推荐指数
解决办法
查看次数
无法将图像放在图像上
编辑:解决方案必备 display: inline-block;
我正在尝试将iframe放在图像上.但是,无论我将边距权限设置为什么,它都会保持在同一位置.约为背景图像的1/5.
HTML
<div class="backgroundimage">
<img src="http://truespeed.ca/wp-content/uploads/2016/06/tvscreen.png" alt="null" />
<iframe class="Youtube" width="479" height="269" src="https://www.youtube.com/embed/6ydYvG52K-E" frameborder="0" allowfullscreen></iframe>
</div>
CSS
.backgroundimage {
display: inline-block;
position: relative;
top: 70px;
bottom: 46px;
}
.Youtube {
position: absolute;
left: 280px;
bottom: 46px;
right: 380px;
}
还有我的问题图片:
推荐指数
解决办法
查看次数
Javascript检查字符串是否只包含特定字符
如果给定字符串只有一个特定字符但该字符出现的次数,我想返回true.
例子:
// checking for 's'
'ssssss' -> true
'sss s' -> false
'so' -> false
推荐指数
解决办法
查看次数
System.Data.Entity.Infrastructure.UnintentionalCodeFirstException未被用户代码处理HResult = -2146233079
我正在使用Entityframework和使用数据库的存储库模式.当我尝试连接到数据库时,我收到以下错误
System.Data.Entity.Infrastructure.UnintentionalCodeFirstException未被用户代码处理HResult = -2146233079
protected override void OnModelCreating(DbModelBuilder modelBuilder)
{
throw new UnintentionalCodeFirstException();
}
我该如何解决？
推荐指数
解决办法
查看次数
尝试让 CORS 适用于 4chan API
介绍
我正在编写一个脚本，它将改变人们在线程内查看 4chan 的方式，并添加一些功能。
在 4chan 线程中，当您上传图像时，服务器将生成与原始文件同名的缩略图，并保存该图像以供人们查看，但名称为 unix 时间戳。当您单击缩略图时，它src会更改为其父级的href，这意味着图像的名称只是时间戳，根本不是一个有用的名称。
这有两个问题
- 当线程出现 404 错误时，您可能无法再打开图像，因为它已从服务器中删除。
- 您下载的图像名称与显示的名称不匹配。
在此 SO 答案中，您可以看到唯一能够处理所有类型文件（我应该能够加载 jpg、png、gif 和 webm）的无损方法是对服务器进行查询，请求文件，读取它并将其转换为数据 URI。当图像缓存在src属性内时，我可以（根据此 SO 答案）简单地添加download具有原始文件名的属性，我的两点将得到解决。
问题
我使用Chrome 扩展Styler将以下脚本注入到 4chan 中。
$(function(){
if ($('body').hasClass('is_thread')) {
$.getScript("http://my.url/updater.js").done(function() {
$('html').addClass('done')
}).fail(function() {
$('html').addClass('done failed')
})
}
})
然后，我的 url 处的脚本将加载到文档本身中，并从那里开始执行自己的操作（我计划与某些人共享代码，这就是我（暂时）将脚本放在服务器上的原因）。
脚本内部有一个部分会循环所有新帖子并尝试再次请求该文件。
var $media = $post.find('img, video')
if ($media.length) {
$.ajax({
url: $media.parent().attr('href'),
method: 'GET',
success: function (data) {
console.log(data)
},
error: …推荐指数
解决办法
查看次数