小编Cho*_*uan的帖子

Bootstrap Scrollspy会导致Off-Canavas菜单出现问题

更新: 为了消除一些困惑,我添加了一个小提琴,演示它应该如何工作,但它只是缺少 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专家才能解决这个难题.

先决条件:

  • Bootstrap.min.css
  • Bootstrap.min.js
  • jasny-bootstrap.css
  • jasny-bootstrap.js

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

10
推荐指数
1
解决办法
638
查看次数

某些浏览器大小后删除模态背景(jasny bootstrap)

我正在使用具有锚链接的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宽度后单击锚点链接时,我该怎么做才能防止出现背景?

额外:当我选择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

9
推荐指数
1
解决办法
481
查看次数

Modal Lightbox Gallery和Carousel Slider不兼容?

将Bootstrap Carousel SliderLightbox 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&amp;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&amp;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&amp;text=0xD00xB70xD00xB50xD00xBB0xD00xB50xD00xBD0xD10x8B0xD00xB9">
                    </a> …
Run Code Online (Sandbox Code Playgroud)

html javascript css twitter-bootstrap bootstrap-modal

6
推荐指数
1
解决办法
2350
查看次数

有效时验证错误消息不会隐藏

更新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)

jquery html5 jquery-validate css3 jquery-validation-engine

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

将大型html文件分成三个较小的html文件的最佳方法是什么?

我有一个非常大的网站,我想知道如何将一个HTML文件分成3个独立的HTML文件。为了将代码组织为整体的各个组成部分,如下所示:

Header.html

Body.html

Footer.html
Run Code Online (Sandbox Code Playgroud)

如何将html代码分成三个单独的html文件,但仍使它们作为一个整体一起工作?

html html5 code-organization

3
推荐指数
2
解决办法
6724
查看次数

Stripe Checkout 出现错误:同一页面上有一次性 + 订阅付款按钮?

已更新我构建了一个定价页面,该页面使用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)

javascript php json stripe-payments

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

Bootstrap-3:使用jQuery验证消息输入Group-Addon STRETCHES

我正在使用带有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

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

安装了最新的JDK 1.8.0,但我的Javac -version仍然显示旧版本(Windows 7 - 64)

我一直在尝试与角度与此安装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 ..据说如果有人能够对用户变量和系统变量之间的使用,最佳实践和差异进行一些指导,这将是一个额外的好处.请给我一些指示,比如我是一个完全的初学者,当涉及到弄乱路径时.谢谢!

java android environment-variables javacv nativescript

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