更新: 为了消除一些困惑,我添加了一个小提琴,演示它应该如何工作,但它只是缺少 scrollspy:https://jsfiddle.net/kmdLg7t0/如何添加scrollspyto这个小提琴,以便菜单当我在特定部分时突出显示?
我创建了一个固定的左侧菜单,在浏览器宽度为<992px的平板电脑和移动设备上变成了一个非画布菜单 .当我在浏览器宽度> 992px上选择锚点链接时,它会关闭菜单并导航到锚点链接部分.
自定义JQuery代码: 这是我的自定义jQuery代码,当我点击锚链接时关闭Off-Canvas菜单:
// close off-canvas menu and navigate to anchor
$('.navmenu-nav li a').on('click', function() {
$('body').removeClass('bs.offcanvas');
});
Run Code Online (Sandbox Code Playgroud)
问题:
我决定添加一个bootstrap offscrollspy,它在浏览器宽度大于992px后按预期工作,但是当我将浏览器宽度调整到小于992px时,这会干扰自定义Jquery代码以关闭菜单并导航到锚链接.
这是小提琴:
Bootstrap ScrollSpy导致Off Canvas Menu和JQuery Code出现问题
我的GUESS:我猜这个问题的解决方案是使用jquery或javascript来阻止或删除data-target =".navmenu",当我的屏幕小于<992px时激活.或者,我们可以找到一种方法,只激活scrollspy后> 992px.我目前正试图解决这个问题,但我需要一个真正的jquery专家才能解决这个难题.
先决条件:
JS:
$(document).ready(function () {
toggleOffcanvas($(window).width() <= 992);
});
// simulate modal opening
$('.nav-link').click(function() {
if ($(window).width() > 992) {
$('.backdrop').hide(0, …Run Code Online (Sandbox Code Playgroud) javascript jquery scrollspy twitter-bootstrap-3 off-canvas-menu
我正在使用具有锚链接的jasny bootstrap画布菜单,以便在点击时导航到1月部分.当我点击锚链接时,我添加了一个jquery解决方案来关闭画布外菜单.
JQUERY:关闭Off-Canvas菜单并导航到Anchor Link区号:
$('.navmenu-nav li a').on('click', function(){
$(".backdrop").hide( 0, function() {});
$("body").removeClass("bs.offcanvas");});
Run Code Online (Sandbox Code Playgroud)
问题当关闭画布菜单处于活动状态时,上面的代码在992px浏览器宽度下工作得很好,但是当浏览器宽度超过992px时,关闭画布菜单变为固定的左菜单,但是当我点击锚链接时仍然会出现黑色背景.我试图在992px宽度之后使用removeAttr 数据目标和数据切换,但没有成功.我仍然是JQuery的新手,我似乎无法弄清楚这一点.
当我在992px宽度后单击锚点链接时,我该怎么做才能防止出现背景?
额外:当我选择992px宽度后的锚点链接时,菜单似乎也会跳转,当画布菜单成为固定的左菜单时,如何防止它跳转?
先决条件:
Bootstrap.min.css
Bootstrap.min.js
jasny-bootstrap.css
jasny-bootstrap.js
JQuery的:
/Close Modal when navigating to anchor */
$('.navmenu-nav li a').on('click', function(){
$(".backdrop").hide( 0, function() {});
$("body").removeClass("bs.offcanvas");
});
/Simulate Modal Opening */
$(".nav-link").click(function() { $("#navToggle").click() })
$('.navmenu').on('show.bs.offcanvas', function() {
$('.backdrop').fadeIn();
});
$('.navmenu').on('hide.bs.offcanvas', function() {
$('.backdrop').fadeOut();
});
/Close Modal on Resize */
$(window).resize(function() {
if ($(window).width() > 992) {
$(".backdrop").hide( 0, function() …Run Code Online (Sandbox Code Playgroud) jquery html5 bootstrap-modal twitter-bootstrap-3 jasny-bootstrap
将Bootstrap Carousel Slider和 Lightbox Gallery添加到单个页面中而没有重大问题似乎相当具有挑战性.
问题:当点击灯箱图片库时,它会打开图片库,同时Carousel滑块图像被图库图片劫持.罪魁祸首似乎是类:.item,img或.inner-carousel
是否可以将模态lighbox和carousel滑块添加到单个页面而不会出现任何问题?
要重新创建问题:单击图库,弹出模式,关闭窗口,现在轮播图片滑块已被替换.http://jsfiddle.net/2aasoyej/
HTML:
<div class="container">
<div class="row">
<h1>Bootstrap 3 lightbox hidden gallery using modal</h1>
<hr>
<div class="row">
<div class="col-12 col-md-4 col-sm-6">
<a title="Image 1" href="#">
<img class="thumbnail img-responsive" id="image-1" src="http://dummyimage.com/600x350/ccc/969696&text=0xD10x810xD00xB50xD10x800xD10x8B0xD00xB9">
</a>
</div>
<div class="col-12 col-md-4 col-sm-6">
<a title="Image 2" href="#">
<img class="thumbnail img-responsive" id="image-2" src="http://dummyimage.com/600x350/2255EE/969696&text=0xD10x810xD00xB80xD00xBD0xD00xB80xD00xB9">
</a>
</div>
<div class="col-12 col-md-4 col-sm-6">
<a title="Image 3" href="#">
<img class="thumbnail img-responsive" id="image-3" src="http://dummyimage.com/600x350/449955/FFF&text=0xD00xB70xD00xB50xD00xBB0xD00xB50xD00xBD0xD10x8B0xD00xB9">
</a> …Run Code Online (Sandbox Code Playgroud) 更新2: 我发现输入的标题由于某种原因被显示为错误消息,我使用了ignoreTitle:true来确保他的标题没有被显示为错误消息。
但是,现在我的新问题是,一旦输入有效的电子邮件地址,该错误消息仍不会消失。
如何解决我的验证错误消息,以便在输入字段有效时将其隐藏?
我是jQuery Validation的新手,我似乎无法弄清楚这个问题。在此问题上的任何帮助将不胜感激。谢谢!
更新内容2:http: //jsfiddle.net/psbq8vkj/9/
JQUERY:
$(".guestlist-form").validate({
ignoreTitle: true,
errorClass: "error-class",
validClass: "valid-class",
rules: {
emailaddress: {
required: true,
email: "Please enter your correct email address."
}
},
errorPlacement: function(error, element) {
$(".myerror").html(''); // clears previous error messages
error.appendTo( ".myerror");
},
messages: {
emailaddress: {
required: "Please enter your full email address."
}
}
});
Run Code Online (Sandbox Code Playgroud)
HTML:
<div id="updates" class="container-fluid">
<center>
<div class="title"><br />
<span class="signuptitle">Sign up to our daily newsletter.</span><br/>
</div>
<div …Run Code Online (Sandbox Code Playgroud) 我有一个非常大的网站,我想知道如何将一个HTML文件分成3个独立的HTML文件。为了将代码组织为整体的各个组成部分,如下所示:
Header.html
Body.html
Footer.html
Run Code Online (Sandbox Code Playgroud)
如何将html代码分成三个单独的html文件,但仍使它们作为一个整体一起工作?
已更新我构建了一个定价页面,该页面使用Stripe Checkout来使用产品 1 的一次性付款按钮和产品 2 的订阅付款按钮。
我的目标是将一次性付款按钮重定向到一次性付款的 Stripe Checkout,并单独将订阅付款重定向到定期付款的结账。
根据 STRIPE,这可以使用订阅作为 create-checkout-session.php(示例项目)中的 CheckoutSession 中的模式来完成:
结帐会话的模式。使用价格或设置模式时需要。如果结帐会话包含至少一项重复项目,则通过订阅。
与 Stripe 文档相反,以下代码行:'mode' => 'subscription',仅激活订阅付款,但不会重定向一次性付款。为了使一次性付款有效,我必须将其更改为:'mode' => 'payment',但是订阅付款不起作用。
这是有问题的 php 代码:
<?php
require_once 'shared.php';
$domain_url = $config['domain'];
// Create new Checkout Session for the order
// Other optional params include:
// [billing_address_collection] - to display billing address details on the page
// [customer] - if you have an existing Stripe Customer ID
// [payment_intent_data] - lets capture the …Run Code Online (Sandbox Code Playgroud) 我正在使用带有jQuery Validate插件的Twitter Bootstrap 3,但出于某种原因,当弹出验证错误消息时,它会拉伸我的输入组 - 插件框和图标.
正常[无验证]
如果你想解决问题,这就是我的小提琴:我的小提琴
我在网上尝试了多种解决方案,比如
GitHub 在Stack Overflow 上发出输入插件和输入插件问题
但无论我尝试什么,我似乎无法解决问题.
请告诉我如何在出现验证错误时阻止INPUT GROUP-ADDON拉伸.谢谢!
我的主要代码如下:
jQuery的
$('.login-form').validate ({
// validation rules for registration form
errorClass: "error-class",
validClass: "valid-class",
onError : function(){
$('.input-group.error-class').find('.help-block.form-error').each(function() {
$(this).closest('.form-group').addClass('error-class').append($(this));
});
},
rules: {
username: {
required: true,
minlength: 3,
maxlength: 40
},
password: {
required: true,
minlength: 7,
maxlength: 20
}
},
messages: {
username: {
required: "Please enter your username or email address",
minlength: …Run Code Online (Sandbox Code Playgroud) jquery jquery-plugins jquery-validate css3 twitter-bootstrap-3
我一直在尝试与角度与此安装NativeScript 教程在过去的两天,我一直运行到围绕在Android SDK无法正常安装的问题和冻结,并最终重新安装在尝试安装Android之前最新的JDK和JVE工作室.当我研究这个问题时,我想我找到了罪魁祸首:
当我运行Javac -version时,我不断获得JDK的旧版本,它声明:javac 1.6.0_45但是我有最新版本的Jdk 1.8.0_102.
我研究了这个问题,但只发现了复杂的解决方案,即可变路径或MAC解决方案.运行Javac -version时,如何更新JDK?
用户变量:路径
cmd> set PATH=%PATH%;%SYSTEMROOT%\System32\WindowsPowerShell\v1.0\;%NVM_HOME%;%NVM_SYMLINK%
Run Code Online (Sandbox Code Playgroud)
系统变量:路径
JAVA_HOME%/bin;C:\Python27\;C:\Python27\Scripts;C:\Ruby22-x64\bin;C:\ProgramData\Oracle\Java\javapath;C:\Program Files\Java\jdk1.6.0_45\bin;C:\Program Files (x86)\Beyond Compare 3;C:\Program Files (x86)\Brackets\command;C:\Program Files (x86)\QuickTime\QTSystem\;C:\Program Files (x86)\Windows Kits\8.1\Windows Performance Toolkit\;C:\Program Files\Microsoft SQL Server\130\Tools\Binn\;C:\Program Files\Git\cmd;C:\Program Files\dotnet\;C:\ProgramData\chocolatey\bin;C:\Program Files\Java\jdk1.8.0_102\bin;C:\Users\Godsnake\AppData\Local\Android\android-sdk\tools;C:\Users\Godsnake\AppData\Local\Android\android-sdk\platform-tools;%NVM_HOME%;%NVM_SYMLINK%;C:\Program Files\nodejs
Run Code Online (Sandbox Code Playgroud)
注意:我在使用Windows路径时是一个完整的菜鸟,我对环境变量一无所知,但我发现我安装的某些应用程序的路径都出现在系统变量中: Python,Node,Ruby,AngularJS2,AndroidSDK ..据说如果有人能够对用户变量和系统变量之间的使用,最佳实践和差异进行一些指导,这将是一个额外的好处.请给我一些指示,比如我是一个完全的初学者,当涉及到弄乱路径时.谢谢!