Tag: css

Bootstrap 4导航栏有两行，底行可折叠

我希望2个导航栏显示在两个单独的行中，所有链接（可折叠项目）位于底部，顶部和标题和切换按钮位于顶行。 像这样： —————————————————— ONE_________BIG_________TITLE [Toggle] —————————————————— Nav items Icon Links Forms … —————————————————— 顶行将在移动和桌面设备中展开，但切换按钮应隐藏在桌面上。 底行将在桌面上展开，并在移动设备上折叠。 通过将所有内容包装在一个div.navbar中并使用display：table定位和垂直对齐徽标/标题并相互切换，我能够在bootstrap 3中执行此操作。 仅在桌面设备中，滚动后，我希望底行固定在顶部。 我曾经在bootstrap 3中使用词缀来实现这一点，任何想法如何用新版本来做到这一点？ 同样在移动设备中，未折叠的顶行应固定在顶部。 这是我的bootstrap 3代码： #navcollapse { top: 0; width: 100%; z-index: 10050; } @media (max-width: 767px) { #navcollapse { position: static; } } #topnavrow.affix { top: 0; width: 100%; z-index: 10050; } @media (min-width: 768px) { […]

流体图像上的Jquery JCropfunction

所以我在我的图像上实现了JCrop，现在必须进行设计更改，才能使图像变得流畅。 我的图像现在有max-height:100%;max-width:100%并且它在没有JCrop的情况下相应地缩放，但是对于JCrop它没有，这是因为JCrop在初始化时为图像设置了固定的witdth和height，例如： display: none; visibility: hidden; width:540px; height:430px; $(‘#feature’).children(‘img’).eq(0).removeAttr(‘style’); $(‘#feature’).children(‘img’).attr(‘style’,’display: none; visibility: hidden; width:100% !important;height:100% !important;’); 但无济于事，它只是打破了JCrop。 我只需要使图像和Jcrop本身调整并保持窗口大小调整的比例。 关于如何解决这个问题的任何想法？ 谢谢！ 编辑 JSFIDDLE – > http://jsfiddle.net/EHQKH/2/ 只需擦除javascript，你应该看到它在窗口/框架resize时resize，而Jcrop则没有

jQuery – .css（）不工作？

Exclaimer，这主要是片段代码，因为我不知道怎么解释这个。 请不要讨厌：3 jQuery代码应该为“#dd.show”设置“max-height”属性。 那么有人可以告诉我为什么这不起作用： $(“#btn”).on(“click”, function() { $(“#dd”).toggleClass(“show”); }); var dv = document.getElementById(“dd”); var item = dv.getElementsByTagName(“A”); $(“#dd.show”).css(“max-height”, item[0].offsetHeight * item.length + “px”); body { margin: 10px; } #btn { background-color: red; color: black; border: none; outline: none; width: 100px; height: 100px; font-size: 20px; -webkit-transition: all .4s ease; transition: all .4s ease; } #btn:hover { […]

旧的IE中不存在Fancybox覆盖

我已经制作了这个测试页面，用于在网站上使用fancybox，它可以在PC上的所有Mac浏览器，iOS和非IE浏览器上使用。 Windows 8上的最新IE也没问题。 但是在XP上的IE8,7和6不会在页面上显示透明覆盖或弹出框阴影，并且弹出窗口下的页面上的链接仍然是可点击的（我不想要）。 （注意，测试页面上的弹出图像不一定是正确的最终图像 – 没关系）。 可能我已经搞砸了某个地方的js（除了能够改变非常基本的配置，我在js中没有专业知识）。 我注意到fancybox演示页面在旧IE中运行良好。 我不喜欢旧IE中的盒子阴影，但我需要叠加的模态行为。 我会非常感激地收到任何错误指示。

Fancy Box Overlay在IE8中不起作用

我遇到了FancyBox和IE8的问题。 出于某种原因，IE8无法识别fancybox叠加层上的背景透明度。 它适用于IE7及更早版本以及Chrome，Safari和Firefox。 您可以在以下url查看问题： http ： //seabagsc.nexcess.net/tote-bags/kevlar-tote.html 任何帮助将非常感激。 谢谢！ 查

如何通过双击而不是单击来触发链接（标记）？

是否有任何方法可以保持所有hover效果，但只有在双击时才会触发标记链接（到另一个页面）？ 谢谢！ 任何纯JavaScript的答案？ （没有jQuery）

如何让Animate jQuery方法在div结束时停止？

我正在尝试创建一个定制的旋转木马，它已经具有以下function： 您可以使用鼠标左右移动，也可以在移动设备/平板电脑上滑动。 您可以使用按钮向左或向右移动。 但是，问题是一旦达到div的结尾，按钮就不会停用。 相反，一切都在不断变化。 见下图： 看看jsFiddle： http ： //jsfiddle.net/vnkRw/2/ $(“#left”).click(function() { $(“.wrapper”).stop(true, true).animate({left: “-=125px”}, 500); }); $(“#right”).click(function() { $(“.wrapper”).stop(true, true).animate({left: “+=125px”}, 500); }); 一旦到达终点，我该如何停用按钮？ 例如，在这里： 左侧按钮应该停用，因为没有更多的div要显示。 当然，右边也是如此： 目标：到达结束时停用按钮。

jQuery动态元素 – 未应用样式

我有2个Button ，当点击时，添加一个新段落或删除当前段落。 这是使用jQuery完成的。 我还使用jQuery在hover将段落文本的颜色从黑色更改为红色。 我遇到的问题是，在使用jQuery添加新段落后，hover效果未应用于它。 它适用于原始段落，但不适用于动态创建的段落。 当我查看页面的source code时，我看到原始段落应用了内联样式，但不是我通过jQuery添加的样式。 我一直在网上寻找最后一小时试图寻找解决方案但到目前为止没有一个对我有用。 我发现了一些类似的问题，但解决方案要么对我不起作用，要么我没有正确应用它们。 问题是我几个小时前开始学习jQuery ，因此不能确定我是在修复某些东西还是让它变得更糟。 此外，我所看到的大部分问题都与jQuery Mobile有关，当我在PC上工作时，这让我更加困惑。 http://jsfiddle.net/2Xh75/ HTML Add line Remove line Original Line Original Line Original Line jQuery的 $(document).ready(function(){ //Add line $(“button:nth-of-type(1)”).click(function(){ $(“#p_wrap”).append(“New Line”); }); //Remove line $(“button:nth-of-type(2)”).click(function(){ $(“p:last-of-type”).remove(); }); //Hover effect $(“p”).hover( function(){ $(this).css(“color”, “red”); }, function(){ $(this).css(“color”, “black”); } ); }); // Document Ready […]

HTML5拖放问题

谢谢你看这篇文章 我有一个jsFiddle页面来展示我的问题我的js小提琴 #div1 {width:200px;height:200px;padding:10px;border:1px solid #aaaaaa;} #div2 {width:200px;height:200px;padding:10px;border:1px solid #aaaaaa;} #div3 {width:200px;height:200px;padding:10px;border:1px solid #aaaaaa;} function allowDrop(ev) { ev.preventDefault(); } function drag(ev) { ev.dataTransfer.setData(“Text”,ev.target.id); } function drop(ev) { ev.preventDefault(); var data=ev.dataTransfer.getData(“Text”); ev.target.appendChild(document.getElementById(data)); } Drag the image you want into this box! Main Image Image 2 Image 3 基本上发生的是当我将图像拖动到上面的div（有3个div）时，我希望能够让图像保持原样并且不会从原始位置消失 。 拖动图像的div也应该捕获图像， 如果新对象拖动到同一个div （之前已经放下另一个图像）， 新图像应该覆盖旧图像 。 另一个问题是如果我有一个带有表单post的提交按钮，通过获取div1，div2，div3的值，浏览器是否能够捕获用户输入？ 例如drag1，drag2或drag3。 […]

显示突出显示的文本或任何表行为空的问题

当用户单击导出按钮时，我正在使用jsPDF API将数据导出到PDF。 当存在突出显示的文本时生成PDF时，或者任何表行中没有值时，我将遇到问题。 生成的PDF中未显示突出显示的文本颜色，如果表中包含任何空白值，则表格未在生成的PDF中正确显示。 请在线演示https://plnkr.co/edit/GfXDGHWNHh2Mb89In7zK?p=preview 演示： var app = angular.module(“app”, []); app.controller(“myController”, [“$scope”, function($scope) { $scope.export = function() { // var pdf = new jsPDF(‘landscape’); var pdf = new jsPDF(‘p’,’pt’,’a4′); var pdfName = ‘test.pdf’; //var options = {pagesplit: true,’width’: 550}; var options = { pagesplit: true,’width’: 500 }; var $divs = $(‘.myDivClass’) var totalDiv = […]