Tag: html5

在弯曲的路径上绘制旋转文本: 我想在曲线上显示文字。应旋转文本的每个字母以便与曲线正交。我发现的唯一现成的插件是来自鼓室的Arctext。不幸的是，它只根据半径渲染文本。这是我想要实现的一个例子：我对使用什么没有限制，跨浏览器兼容性也不是问题。唯一需要的是这个“东西”不应该在服务器端进行。它应该直接在客户端上更新（文本更改后）。编辑：更多信息呈现的文本将从最终用户设置。将使用自定义字体。可能是Cufon。

即使在状态更改后激活，也会应用CSS过渡？: 我有一个jQuery插件可以在屏幕上移动一个元素，但是有一个“动画”切换来显示幻灯片过渡与否。在尝试使用CSS Transitions而不是Javascript转换进行更改时，我遇到了这个，我不确定它是否是一个bug /怪癖，或者我只是做错了： var $item = $(‘#myItem’); if (!animate) { $item.removeClass(‘csstransitions’); // Class that has “transition:left 0.25s ease-out” $(‘#myItem’).css(‘left’, ‘300px’); // Move the element $(‘#myItem’).addClass(‘csstransitions’); // Re-apply transitions class } 当这样做的时候，css改变发生在转换类没有应用到元素但是立即应用之后，一些浏览器（Chrome和Safari，在我的测试中）仍然应用CSS转换，当我的逻辑时，它应该只是捕捉到新的位置。在这个jsFiddle中看到这个实际操作; 在Chrome或Safari中，单击“无延迟”按钮，并看到它仍然为框的位置设置动画，而“延迟”按钮（使用超时设置一毫秒后）不会为CSS更改设置动画。如jsFiddle中所示，我必须使用setTimeout调用（ setTimeout(function() { $el.addClass(‘csstransition’); }, 1); ）以在Chrome和Safari中获得正确的行为。这只是因为CSS过渡是前沿，或者我做错了什么，而且有一种更简单的方法可以暂时“转变”过渡？编辑：注意到这个问题是类似的，虽然这个问题的答案只是将两个调用分开，但问题仍然是“为什么我们（Web开发人员）需要将这两个调用分开？” 这是我们应该用来切换CSS过渡的方法吗？

当它滚动到另一个HTML元素时，动态地将CSS类添加到固定DIV: 我在StackOverflow上阅读了几个类似的问题，唉，没有一个解决方案对我有用。我想动态地向html元素添加一个css类，当它向下滚动页面经过另一个html元素时，当用户向上滚动页面时删除该类。具体来说，我想改变位置：固定DIV元素到位置：绝对当它到达页脚div的顶部时，这样有效地DIV元素停止固定到屏幕的底部并粘在页脚的顶部div，以便它保持在那里，同时用户继续向下滚动页面的其余部分。我尝试调整几个JavaScript代码片段，但没有一个按照我想要的方式工作。这是我最好的尝试： $(function() { var menu = $(‘#fixedbtn’); $(window).scroll(function() { var scroll = $(window).scrollTop(); if (scroll >= $(‘#footer-1’).offset().top) { // check the offset top menu.addClass(‘fixedPosition’); } else { // check the scrollHeight menu.removeClass(‘fixedPosition’); } }); }); 我想在#fixedbtn div中滚动超过＃footer-1 div的顶部时添加类“fixedPosition”，并在用户向上滚动时删除该类，以便＃footer-1退回离开视口底部。在这种情况下，使用页面顶部的固定像素距离对我不起作用。我想要事件触发器，当 div的顶部出现在用户的屏幕底部时，会将该类添加到div中。你们，代码诗人，能否指导我找到实现预期结果的正确解决方案？

根据选定的单选按钮隐藏节目: 我正在尝试使用一些JS来处理我一直在研究的表格。目的是隐藏用户是否未选择是。这是我在哪里坚持：HTML： Company Name Company Phone Number JS： $(document).ready(function () { var shcompany = $(‘#shcompany’); showHide(); mgift.change(function () { showHide(); }); function showHide() { var mgift = $(‘#rbMatchingGift’); var shcompany = $(‘#shcompany’); if (mgift.val() == “1”) { shcompany.show(); } else { shcompany.hide(); } } });

使用单个按钮将多个输入文件输出到不同的ID: 简而言之，以下是我要完成的工作： http ： //jsfiddle.net/n3r8conn/8/ 但是如图所示，我遇到了问题，它将按以下方式工作：用户点击按钮一次，文件从输入中选择，然后显示在files_1 id中，用户再次点击按钮，文件被选中，然后输出到files_id2，此部分仅显示上传部分，换句话说，除了在屏幕上显示图像之外，上面提到的所有内容。 Html COde： From Device JavaScript代码： $(‘#uploadDevice’).click(function(){ myGlobalCounter++; $( ‘#files_’ +myGlobalCounter ).val(‘Secret text ‘ + myGlobalCounter); }); CSS代码： .uploadDevice{ visibility : hidden; } 更新： From Facebook From Device .uploadDevice{ visibility : hidden; } $(“#buttonFile”).click(function(){ $(“#files”).trigger(‘click’); }); 脚本 function handleFileSelect(evt) { var $fileUpload = $(“input#files[type=’file’]”); if […]

不可编辑，可删除的textarea部分: 我有一个简单的textarea，它有一个默认值。我想每次都持有这个价值。用户不应删除此值，但他可以添加额外的字符串。 This is contstant 如上所述。它有一个默认值。我该如何保护这个价值？但是用户可以在下面的默认值之后添加一些内容。 This is contstant and extra things by user 那么如何使用默认值进行部分可编辑的textarea呢？

Bootstrap 4 – 在nav-link上删除活动类: 我正在使用具有活动类的nav-item创建Bootstrap 4 navbar 。我的问题是当我使用active类时，我无法从nav-item删除它如何删除nav-item上的活动类？这是我的HTML： LOGO BRAND Home (current) About us Services Dropdown Menu Glyphicons Available glyphs How to use Examples Dropdowns Example Aligninment options Headers Disabled menu items Button groups Basic example Button toolbar Sizing Nesting Vertical variation Button dropdowns Single button dropdowns Input groups Basic example Sizing Checkboxes and radio addons […]

防止输入失去焦点: 我有一个这样的网页： Random Thoughts Blog – Add a New Post! Admin Home Add Edit Delete Write a New Blog Post! <form name="NewPost" method="post" action="”> Title:<input id="title" name="Title" type="text" value="”/> Tags:<input style="float: right; width: 465px;" name="Tags" type="text" value="”/> Design by Jack R. Schaible <?php if ($errors != '') { echo '’; echo ‘alert(“‘ . $errors . ‘”);’; […]

如何随机翻转Div: 我创建了一个应用程序，其中所有div在hover时垂直翻转。我想让它随意而不hover。我该怎么做？ CSS .vertical.flip-container { position: relative; float: left; margin-left: 50px; } .vertical .back { transform: rotateX(180deg); } .vertical.flip-container .flipper { transform-origin: 100% 50px; } .vertical.flip-container:hover .flipper { transform: rotateX(-180deg); } .flip-container { perspective: 1000; } /* flip the pane when hovered */ .flip-container:hover .flipper, .flip-container.hover .flipper { transform: rotateY(180deg); } .flip-container, .front, .back […]