- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
大家下午好
我被一个 JavaScript/CSS/HTML 问题困住了,让我花点时间解释一下
我为我运行的网站编写了一个报价系统 ( http://www.liquidationmadeeasy.co.uk/quote.html )
我遵循了一个使用框架集的示例,以便为报价创建不同的阶段,但没有导航到单独的页面。效果很好。
在每个字段集上,我引入了一个范围输入。我将执行一个计算,它会强制用户输入一个数值。
然后我按照另一个教程介绍了一个显示范围控件的选定值的气泡。
当页面加载时,它会在每个范围控件的一侧绘制气泡。然而,当我导航到第二个框架集时,所有元素的气泡都绘制在页面中间(不在正确的位置)并且全部在彼此之上。
当用户从范围控件中选择一个值时,气泡会在正确的位置重新绘制。
我想在用户离开第一阶段时自动重绘报价第二阶段的所有气泡。
我假设这是失败的,因为我重置了仅在用户更改值时触发的更改事件的范围输入值
谁能给我指出正确的方向
HTML
<form id="msform" method="post" action="quoteresult.php">
<!-- progressbar -->
<ul id="progressbar">
<li class="active">Debts</li>
<li>Assets</li>
<li>Contact</li>
</ul>
<!-- fieldsets -->
<fieldset>
<h2 class="fs-title">What You Owe</h2>
<h3 class="fs-subtitle">Your companys financial possition</h3>
<label for="overdraft">Overdraft:</label>
<input type="range" name="overdraft" id="overdraft" value=0 min=0 max=1000000 step="500" />
<output for="overdraft">1</output>
<label for="vat">VAT:</label>
<input type="range" name="vat" id="vat" value=0 min=0 max=1000000 step="500" />
<output for="vat">1</output>
<label for="paye">PAYE:</label>
<input type="range" name="paye" value=0 min=0 max=1000000 step="500"/>
<output for="paye">1</output>
<label for="corporationtax">Corporation Tax:</label>
<input type="range" name="corporationtax" value=0 min=0 max=1000000 step="500" />
<output for="corporationtax">1</output>
<label for="tradecreditors">Trade Creditors:</label>
<input type="range" name="tradecreditors" value=0 min=0 max=1000000 step="500" />
<output for="tradecreditors">1</output>
<label for="rent">Rent:</label>
<input type="range" name="rent" value=0 min=0 max=1000000 step="500" />
<output for="rent">1</output>
<input type="button" name="next" class="next action-button" value="Next" />
</fieldset>
<fieldset>
<h2 class="fs-title">Asset Values</h2>
<h3 class="fs-subtitle">What are you assets worth?</h3>
<label for="debtors">Debtors:</label>
<input type="range" name="debtors" value=0 min=0 max=1000000 step="500" />
<output for="debtors">1</output>
<label for="fixtures">Fixtures:</label>
<input type="range" name="fixtures" value=0 min=0 max=1000000 step="500"/>
<output for="fixtures">1</output>
<label for="stock">Stock:</label>
<input type="range" name="stock" value=0 min=0 max=1000000 step="500" />
<output for="stock">1</output>
<label for="vehicles">Vehicles:</label>
<input type="range" name="vehicles" value=0 min=0 max=1000000 step="500" />
<output for="vehicles">1</output>
<label for="cash">Cash:</label>
<input type="range" name="cash" value=0 min=0 max=1000000 step="500" />
<output for="cash">1</output>
<label for="plant">Plant/Machinery:</label>
<input type="range" name="plant" value=0 min=0 max=1000000 step="500"/>
<output for="plant">1</output>
<label for="property">Property:</label>
<input type="range" name="property" value=0 min=0 max=1000000 step="500" />
<output for="property">1</output>
<label for="other">Other:</label>
<input type="range" name="other" value=0 min=0 max=1000000 step="500" />
<output for="other">1</output>
<input type="button" name="previous" class="previous action-button" value="Previous" />
<input type="button" name="next" class="next action-button" value="Next" />
</fieldset>
<fieldset>
<h2 class="fs-title">Personal Details</h2>
<h3 class="fs-subtitle">We will never sell it</h3>
<input type="text" name="fname" placeholder="First Name" />
<input type="text" name="lname" placeholder="Last Name" />
<input type="text" name="company" placeholder="Company Name" />
<input type="text" name="phone" placeholder="Phone" />
<input type="text" name="email" placeholder="Email" />
<input type="button" name="previous" class="previous action-button" value="Previous" />
<input type="submit" name="submit" class="submit action-button" value="Submit" />
</fieldset>
</form>
CSS
/*form styles*/
#msform {
width: 400px;
margin: 50px auto;
text-align: center;
position: relative;
}
#msform fieldset {
background: white;
border: 0 none;
border-radius: 3px;
box-shadow: 0 0 15px 1px rgba(0, 0, 0, 0.4);
padding: 20px 30px;
box-sizing: border-box;
width: 80%;
margin: 0 10%;
/*stacking fieldsets above each other*/
position: absolute;
}
/*Hide all except first fieldset*/
#msform fieldset:not(:first-of-type) {
display: none;
}
/*inputs*/
#msform input, #msform textarea {
padding: 15px;
border: 1px solid #ccc;
border-radius: 3px;
margin-bottom: 10px;
width: 100%;
box-sizing: border-box;
font-family: montserrat;
color: #2C3E50;
font-size: 13px;
}
/*buttons*/
#msform .action-button {
width: 100px;
background: #27AE60;
font-weight: bold;
color: white;
border: 0 none;
border-radius: 1px;
cursor: pointer;
padding: 10px 5px;
margin: 10px 5px;
}
#msform .action-button:hover, #msform .action-button:focus {
box-shadow: 0 0 0 2px white, 0 0 0 3px #27AE60;
}
/*headings*/
.fs-title {
font-size: 15px;
text-transform: uppercase;
color: #2C3E50;
margin-bottom: 10px;
}
.fs-subtitle {
font-weight: normal;
font-size: 13px;
color: #666;
margin-bottom: 20px;
}
/*progressbar*/
#progressbar {
margin-bottom: 30px;
overflow: hidden;
/*CSS counters to number the steps*/
counter-reset: step;
}
#progressbar li {
list-style-type: none;
color: white;
text-transform: uppercase;
font-size: 9px;
width: 33.33%;
float: left;
position: relative;
}
#progressbar li:before {
content: counter(step);
counter-increment: step;
width: 20px;
line-height: 20px;
display: block;
font-size: 10px;
color: #333;
background: white;
border-radius: 3px;
margin: 0 auto 5px auto;
}
/*progressbar connectors*/
#progressbar li:after {
content: '';
width: 100%;
height: 2px;
background: white;
position: absolute;
left: -50%;
top: 9px;
z-index: -1; /*put it behind the numbers*/
}
#progressbar li:first-child:after {
/*connector not needed before the first step*/
content: none;
}
/*marking active/completed steps green*/
/*The number of the step and the connector before it = green*/
#progressbar li.active:before, #progressbar li.active:after{
background: #27AE60;
color: white;
}
JavaScript
//jQuery time
var current_fs, next_fs, previous_fs; //fieldsets
var left, opacity, scale; //fieldset properties which we will animate
var animating; //flag to prevent quick multi-click glitches
$(".next").click(function(){
if(animating) return false;
animating = true;
current_fs = $(this).parent();
next_fs = $(this).parent().next();
//activate next step on progressbar using the index of next_fs
$("#progressbar li").eq($("fieldset").index(next_fs)).addClass("active");
//show the next fieldset
next_fs.show();
//hide the current fieldset with style
current_fs.animate({opacity: 0}, {
step: function(now, mx) {
//as the opacity of current_fs reduces to 0 - stored in "now"
//1. scale current_fs down to 80%
scale = 1 - (1 - now) * 0.2;
//2. bring next_fs from the right(50%)
left = (now * 50)+"%";
//3. increase opacity of next_fs to 1 as it moves in
opacity = 1 - now;
current_fs.css({'transform': 'scale('+scale+')'});
next_fs.css({'left': left, 'opacity': opacity});
},
duration: 800,
complete: function(){
current_fs.hide();
animating = false;
},
//this comes from the custom easing plugin
easing: 'easeInOutBack'
});
});
$(".previous").click(function(){
if(animating) return false;
animating = true;
current_fs = $(this).parent();
previous_fs = $(this).parent().prev();
//de-activate current step on progressbar
$("#progressbar li").eq($("fieldset").index(current_fs)).removeClass("active");
//show the previous fieldset
previous_fs.show();
//hide the current fieldset with style
current_fs.animate({opacity: 0}, {
step: function(now, mx) {
//as the opacity of current_fs reduces to 0 - stored in "now"
//1. scale previous_fs from 80% to 100%
scale = 0.8 + (1 - now) * 0.2;
//2. take current_fs to the right(50%) - from 0%
left = ((1-now) * 50)+"%";
//3. increase opacity of previous_fs to 1 as it moves in
opacity = 1 - now;
current_fs.css({'left': left});
previous_fs.css({'transform': 'scale('+scale+')', 'opacity': opacity});
this.redraw();
},
duration: 800,
complete: function(){
current_fs.hide();
animating = false;
},
//this comes from the custom easing plugin
easing: 'easeInOutBack'
});
});
$(".submit").click(function(){
document.getElementById("msform").submit();
return false;
})
$(function() {
var el, newPoint, newPlace, offset, newTop;
$("input[type='range']").change(function() {
el = $(this);
width = el.width();
newPoint = (el.val() - el.attr("min")) / (el.attr("max") - el.attr("min"));
offset = -1.3;
newTop = el.position().top - 10;
newLeft = el.position().left + width + 10;
if (newPoint < 0) { newPlace = 0; }
else if (newPoint > 1) { newPlace = width; }
else { newPlace = width * newPoint + offset; offset -= newPoint;}
el
.next("output")
.css({
left: newLeft + "px",
top: newTop + "px"
})
.text(el.val());
})
.trigger('change');
});
最佳答案
这不是建议的解决方案,但我必须这样发布它,以便我可以上传我的结果的屏幕截图。我逐字复制了您的 HTML、CSS 和 JS(当然,我必须适本地包装 HTML),但我没有遇到您描述的错误。我尝试使用两个不同的 jQuery CDN 文件:
以下是在 Firefox 29.0.1、Chrome 35、Safari 6.1.4 和 IE10 中呈现的第二阶段“ Assets 值(value)”的屏幕截图。前三个在 Mac OS X 10.7.5 上,后者在 VirtualBox/上运行的 Windows 8 VM 上。顺序是 Firefox、Chrome、Safari、IE:
如您所见,除 Firefox 外,所有浏览器的渲染都在某种程度上被破坏,但您描述的错误并未出现。我还注意到您链接到的网站:http://www.liquidationmadeeasy.co.uk/quote.html...在 Firefox 29 中似乎也能正常工作:
您想发布您用于测试的确切浏览器版本吗?
附言
与您的问题无关,但请注意,您的大多数 HTML 元素都有“for”属性,这些属性指向“name”属性而不是“id”属性。参见 <label> element in MDN documentation .
以下标签就是这种情况:
第一个字段集:
<label for="paye">PAYE:</label>
<input type="range" name="paye" value=0 min=0 max=1000000 step="500"/>
<output for="paye">1</output>
<label for="corporationtax">Corporation Tax:</label>
<input type="range" name="corporationtax" value=0 min=0 max=1000000 step="500" />
<output for="corporationtax">1</output>
<label for="tradecreditors">Trade Creditors:</label>
<input type="range" name="tradecreditors" value=0 min=0 max=1000000 step="500" />
<output for="tradecreditors">1</output>
<label for="rent">Rent:</label>
<input type="range" name="rent" value=0 min=0 max=1000000 step="500" />
第二个字段集:
<label for="debtors">Debtors:</label>
<input type="range" name="debtors" value=0 min=0 max=1000000 step="500" />
<output for="debtors">1</output>
<label for="fixtures">Fixtures:</label>
<input type="range" name="fixtures" value=0 min=0 max=1000000 step="500"/>
<output for="fixtures">1</output>
<label for="stock">Stock:</label>
<input type="range" name="stock" value=0 min=0 max=1000000 step="500" />
<output for="stock">1</output>
<label for="vehicles">Vehicles:</label>
<input type="range" name="vehicles" value=0 min=0 max=1000000 step="500" />
<output for="vehicles">1</output>
<label for="cash">Cash:</label>
<input type="range" name="cash" value=0 min=0 max=1000000 step="500" />
<output for="cash">1</output>
<label for="plant">Plant/Machinery:</label>
<input type="range" name="plant" value=0 min=0 max=1000000 step="500"/>
<output for="plant">1</output>
<label for="property">Property:</label>
<input type="range" name="property" value=0 min=0 max=1000000 step="500" />
<output for="property">1</output>
<label for="other">Other:</label>
<input type="range" name="other" value=0 min=0 max=1000000 step="500" />
关于范围输入的 JavaScript 位置问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/23872497/
关闭。这个问题是off-topic .它目前不接受答案。 想要改进这个问题? Update the question所以它是on-topic用于堆栈溢出。 关闭 12 年前。 Improve thi
我有一个动态网格,其中的数据功能需要正常工作,这样我才能逐步复制网格中的数据。假设在第 5 行中,我输入 10,则从第 6 行开始的后续行应从 11 开始读取,依此类推。 如果我转到空白的第一行并输入
我有一个关于我的按钮消失的问题 我已经把一个图像作为我的按钮 用这个函数动画 function example_animate(px) { $('#cont
我有一个具有 Facebook 连接和经典用户名/密码登录的网站。目前,如果用户单击 facebook_connect 按钮,系统即可运行。但是,我想将现有帐户链接到 facebook,因为用户可以选
我有一个正在为 iOS 开发的应用程序,该应用程序执行以下操作 加载和设置注释并启动核心定位和缩放到位置。 map 上有很多注释,从数据加载不会花很长时间,但将它们实际渲染到 map 上需要一段时间。
我被推荐使用 Heroku for Ruby on Rails 托管,到目前为止,我认为我真的会喜欢它。只是想知道是否有人可以帮助我找出问题所在。 我按照那里的说明在该网站上创建应用程序,创建并提交
我看过很多关于 SSL 错误的帖子和信息,我自己也偶然发现了一个。 我正在尝试使用 GlobalSign CA BE 证书通过 Android WebView 访问网页,但出现了不可信错误。 对于大多
我想开始使用 OpenGL 3+ 和 4,但我在使用 Glew 时遇到了问题。我试图将 glew32.lib 包含在附加依赖项中,并且我已将库和 .dll 移动到主文件夹中,因此不应该有任何路径问题。
我已经盯着这两个下载页面的源代码看了一段时间,但我似乎找不到问题。 我有两个下载页面,一个 javascript 可以工作,一个没有。 工作:http://justupload.it/v/lfd7不是
我一直在使用 jQuery,只是尝试在单击链接时替换文本字段以及隐藏/显示内容项。它似乎在 IE 中工作得很好,但我似乎无法让它在 FF 中工作。 我的 jQuery: $(function() {
我正在尝试为 NDK 编译套接字库,但出现以下两个错误: error: 'close' was not declared in this scope 和 error: 'min' is not a m
我正在使用 Selenium 浏览器自动化框架测试网站。在测试过程中,我切换到特定的框架,我们将其称为“frame_1”。后来,我在 Select 类中使用了 deselectAll() 方法。不久之
我正在尝试通过 Python 创建到 Heroku PostgreSQL 数据库的连接。我将 Windows10 与 Python 3.6.8 和 PostgreSQL 9.6 一起使用。 我从“ht
我有一个包含 2 列的数据框,我想根据两列之间的比较创建第三列。 所以逻辑是:第 1 列 val = 3,第 2 列 val = 4,因此新列值什么都没有 第 1 列 val = 3,第 2 列 va
我想知道如何调试 iphone 5 中的 css 问题。 我尝试使用 firelite 插件。但是从纵向旋转到横向时,火石占据了整个屏幕。 有没有其他方法可以调试 iphone 5 中的 css 问题
所以我有点难以理解为什么这不起作用。我正在尝试替换我正在处理的示例站点上的类别复选框。我试图让它做以下事情:未选中时以一种方式出现,悬停时以另一种方式出现(选中或未选中)选中时以第三种方式出现(而不是
Javascript CSS 问题: 我正在使用一个文本框来写入一个 div。我使用以下 javascript 获取文本框来执行此操作: function process_input(){
你好,我很难理解 P、NP 和多项式时间缩减的主题。我试过在网上搜索它并问过我的一些 friend ,但我没有得到任何好的答案。 我想问一个关于这个话题的一般性问题: 设 A,B 为 P 中的语言(或
你好,我一直在研究 https://leetcode.com/problems/2-keys-keyboard/并想到了这个动态规划问题。 您从空白页上的“A”开始,完成后得到一个数字 n,页面上应该
我正在使用 Cocoapods 和 KIF 在 Xcode 服务器上运行持续集成。我已经成功地为一个项目设置了它来报告每次提交。我现在正在使用第二个项目并收到错误: Bot Issue: warnin
我是一名优秀的程序员,十分优秀!