Tag: html

滑块高度图像

我有一个带缩略图的图像滑块，我有一点问题。 当您单击最后一个图像的缩略图时，下面的缩略图以及旋转木马中的箭头会稍微跳一下。 任何其他图像都不会发生这种情况。 这是一个小问题，但它让我发疯，我不知道为什么会发生这种情况，因为我确保所有的图像都是相同的高度。 这是codepen 。 $(document).ready(function(){ $(‘#imgDetail’).animate({ opacity: ‘1’ },300); }); $(document).ready(function(){ // get all images loaded var images = $(“.unidoor-class”); // thumbnails containers var thumbnailContainer = $(“#thumbnails”); // generate thumbnail images generateThumbnails(images, thumbnailContainer); // listeners for controls arrows $(“.prev-next-button”).on(“click touchstart”, function() { // get the images var currentImageIndex = images.index($(“.unidoor-class[data-active=true]”)); var isPrevious = […]

使用javascript在两个地方绘制单个DOM元素

我正在使用jQueryUI创建一个大型可排序卡表，每个表都由一个嵌套div标签的大树组成，并使用CSS进行样式化。 当我在某些条件下拖动一张卡片时，我想在拖动时创建一个稍微透明的卡片“克隆”，它会徘徊在“真实”卡片的右侧，但我不想实际复制所有的HTML为了达到这种视觉效果。 那么，是否可以使用javascript在两个不同的地方在网页上绘制相同的DOM元素而不实际复制HTML？ 感谢任何回答的人。

根据哈希值淡化和替换图像与其他图像

首先，这是我讨厌的疯狂代码 因此，每当哈希值发生变化时，我都会想要用jQuery淡入淡出效果替换这个图像。 我想要它也检查onLoad上的哈希值。 现在我有一个疯狂的代码，我很确定无法正常工作，因为我是一个新的Javascript开发人员。 这是一个可怕的代码。 如果代码有效，它会这样做： //Home Hashes var home = [ “#home”, “#news”, “#team”, “#cont”, “#about”, “#FAQ”]; 它会检查每个数组中的散列，如果它在一个数组中找到匹配，它将淡出当前图像，将它们切换出来，并淡入新图像。根据它所在的数组，它会选择不同的形象。 （顺便说一句，在更改图像时，它正在更改html中的src。） 我使用它根据您在网站上的位置更改我的徽标。 我的网站有不同部分的不同徽标。

单击动画标题栏，向下滑动打开的面板，如何再次单击以在凸起的栏和关闭面板上设置动画？

我有一个带有标题栏的容器和一个隐藏在其下方的面板，直到单击标题栏，然后slideDown面板并将标题栏上升几个像素。 这很好用。 打开后我需要做的是单击标题栏并将其放回到其起始位置，同时仍然关闭面板并再次隐藏。 当我在打开后单击标题栏时，面板关闭并消失，但标题栏仍然处于抬起位置（因为我没有任何东西可以将其降低）。 我尝试过几种不同的选择。 HTML Specials & Events text text text Tulalip Resort-Casino Calendar Portal jQuery的 $(document).ready(function () { var $spTitle = $(‘#specialsEventsTitle’); var $promobox = $(‘#revealDown’); $($spTitle).click(function () { $spTitle.animate({ top: ‘8px’ }); if ($promobox.height() > 0) { $promobox.animate({ height: 0 }); } else { $promobox.animate(‘slow’).animate({ height: ‘100%’ }); } }); });

居中Divs网格（动态生成）

我已经尝试过来自SO和其他来源的每一个技巧，但对于我的生活，我无法将这个盒子网格放在中心位置。 我试图让整个网格在页面上居中。 这是一个小问题（将预览面板向左拖动一下，这样你就得到至少两列。）： http ： //jsfiddle.net/valgaze/0w77ccvj/1/ 框的网格是内联块。 通过施加利润来实现这一目标是一种愚蠢的方式，但由于种种原因这是不可取的。 必须有一些我缺少的东西，我将不得不提出任何见解！ 这是一个简化版本： #gridArea{ background-color:#FFF300; display: -moz-inline-stack; display: inline-block; border-style: dotted; border-width: 1px; margin: 0 auto; } .wrap{ text-align: center; } .card{ background:#000; padding:19px 16px; float:left; margin-right: 10px; margin-bottom: 18px; width:350px; height:100px; display: inline; text-align: center; } HERE’S DATA HERE’S DATA HERE’S DATA HERE’S DATA HERE’S DATA HERE’S […]

jQuery显示基于月份的日期

我有月份和年份选择器，因为我使用了这段代码： $(function() { $(‘.date-picker’).datepicker({ changeMonth: true, changeYear: true, showButtonPanel: true, dateFormat: ‘MM yy’, minDate: 0, onClose: function(dateText, inst) { $(this).datepicker(‘setDate’, new Date(inst.selectedYear, inst.selectedMonth, 1)); } }); }); .ui-datepicker-calendar { display: none; } Date : $(function() { $(‘.date-picker’).datepicker({ changeMonth: true, changeYear: true, showButtonPanel: true, dateFormat: ‘MM yy’, minDate: 0, onClose: function(dateText, inst) { $(this).datepicker(‘setDate’, new Date(inst.selectedYear, […]

设置Meteor JS Helper的返回值，将其动态注入模板

编辑： 鉴于下面的答案，使用Meteor Deps似乎是理想的游戏，因为我想在两个不同的模板之间共享数据，它应该对发生的任何变化都有反应。 澄清一下：我的数据来源是Template.reactiveTable ，目的地是Template.buttons 。 当reactiveTable的数据发生变化时，我希望按钮能够反映这一点。 结束编辑 我希望根据表的内容（特别是 值）设置buttons的值。 buttons.html： {{#each testButtons }} {{ name }} {{/each}} 使用这种硬编码，它按预期工作（两个按钮呈现标记为Alice和Bob UI.registerHelper(‘testButtons’, function () { return [ { name: “Alice” }, { name: “Bob” } ] } ) 模板很乐意接受并呈现此对象数组 。 但是，当我动态生成对象数组时。 目标：对于我的h1标签中包含的每个唯一单词，生成一个按钮（几乎像博客标签）。 通过下面的代码片段替换我的助手代码（使用jquery解析 标签，生成数组以发送到模板）。 假设html是： foo bar baz 然后在控制台中运行以下片段，将创建uniqStrings = [ “foo”, “bar”, “baz”]; 如预期的。 $( ‘h1’ […]

使用焦点和焦点时，下拉不会打开

我有两个相同类的下拉菜单让我们称之为下拉菜单，我用jquery下拉菜单： $(‘.dropdown’).focus(function () { //Fiddle with this dropdown }).focusout(function () { //Fiddle with this dropdown }); 当我在具有相同类别（下拉列表）的两个下拉列表之间跳转时，下拉列表不会立即打开而是获得焦点，我必须再次单击它才能打开它。 它似乎与我在操作它时启用和禁用列表中的选项这一事实有关。 有解决方法吗？ （我试图使用模糊而不是聚焦，并出现同样的问题） 谢谢！ 编辑： 的jsfiddle JS： $(‘.dropdown’).focus(function () { var selectListIndex = $(this).attr(‘selectedIndex’); $(‘.dropdown’).each(function() { $(‘option:nth-child(‘ + (selectListIndex + 1) + ‘)’, $(this)).attr(‘disabled’, ”); }); }).focusout(function () { var selectListIndex = $(this).attr(‘selectedIndex’); $(‘.dropdown’).not($(this)).each(function() { $(‘option:nth-child(‘ + (selectListIndex […]

得到不是数字（NaN）错误html / js

我先点击单选按钮时出现NaN错误。 当我点击第一个按钮时，该页面有一个单选按钮，它表示NaN，剩下的2个按钮没有响应 这是我的HTML <input type="hidden" name="totalamount" id="totalamount" value="” / 我也提到了我的JS $(document).ready(function(){ $(‘input[name=rmr]’).click(function () { //make sure one is checked if($(‘input[name=rmr]:checked’).length > 0) { $(‘#finalamount’).html($(“#totalamount”).val() * $(“input[name=rmr]:checked”).val()); } }); });

在DIV中水平滚动项目而不是垂直滚动？

有没有人知道浮动元素的有效方法，以便它们在容器中水平滚动而与垂直方向相反？ 例如，假设我有这样的布局： something something something something something 据我所知，如果我给“容器”一个定义的高度和宽度，所有“项目”都可以浮动，以便“容器”将水平滚动。 但是，如果我不知道会有多少“项目”呢？ 如果我不知道物品的数量，那么我不知道容器应该多宽…… 有什么想法或建议吗？ 仅CSS的建议是理想的，但我不反对使用jQuery插件，如果有人有任何建议。