Tag: css

通过链接替换精灵图像: 我希望默认情况下在div中显示我的精灵的一部分，然后在div下方有一个文本菜单，当点击不同的链接时，显示的精灵部分会发生变化。这是我到目前为止的地方，并让我的精灵全部显示以下内容：指数 CSS .sprite { background-image: url(sprite1.png); background-repeat: no-repeat; display: block; } .sprite-caramel { width: 176px; height: 250px; background-position: 0 0; } .sprite-chocolate { width: 176px; height: 250px; background-position: -176px 0; } .sprite-empty { width: 176px; height: 250px; background-position: -352px 0; } .sprite-strawberry { width: 176px; height: 250px; background-position: -528px 0; } .sprite-vanilla { […]

响应式砌体布局问题: 我正在使用Masonry来布局我的网站，一切正常，但是有响应的问题。目前所有元素都设置为31.8％的宽度（也有一些边距等）。我假设通过调整浏览器窗口的大小，我仍然会保留3列，但是所有元素的宽度都会减小，但是不是这样，通过调整窗口的大小，一切都开始分崩离析，我无法分辨出这种奇怪的行为来自何处。你可以在这里看到我的现场演示网站： http ： //freshbeer.lv/test/index.html 我真的不知道是什么导致了这种奇怪的行为，所以我不知道在这里发布哪些代码，如果你知道哪些位可能导致它，告诉我，我会在这里添加它。编辑：有趣的是，在调整它并刷新窗口后，它看起来更好，但不完全正确。此外，我试图实现类似于这个http://tympanus.net/codrops/collective/collective-57/

将宽度设置为Iframe的父div标签: 我在div（如弹出窗口）中有一个iframe，其高度和宽度可以变化。我试图以所有可能的方式设置高度和宽度，但我没有成功。我无法理解原因。有人可以帮助我。这是一个jsbin 这是我认为应该工作的代码： #irmNPopupContainer { border: 2px solid; display: none; top: 10px; left: 10px; } #irmNPopupHdr { height: 30px; width: 100%; background: #F0F0F0; } W3 Schools X function showIrmNPopup(_title,_src,_width,_height){ //Assign source to iframe and set width and height of the iframe var iframeObj = document.getElementById(‘irmNPopupContentFrame’); iframeObj.src = _src; $(‘#irmNPopupHdr span:first-child’).text(_title); $(‘#irmNPopupContainer’).show(600); // $(‘#irmNPopupContainer’).outerWidth(_width); //$(‘#irmNPopupContainer’).outerHeight(_height); […]

如何使用Jquery / Javascript更改标签的CSS类: 我正在尝试根据所选页面更改仪表板上的选项卡类。我在仪表板中有3个选项卡 Dashboard Search Account Set up 现在，我想在选择特定选项卡时突出显示该选项卡。默认情况下，应突出显示“仪表板”选项卡。我有一个名为“current”的样式类，它突出显示选项卡。请指教。

如何用省略号“……”替换第一个溢出元素: 我有一个带有多个标签的div，div是固定的宽度和高度，我想用“……”替换溢出父版本的文本。 one one one one one one one one one one one one two two two two two two two two two two two two three three three three three three three three four four four four four four four four four four five five five five five five five five five five six […]

仅使用Javascript在滚动上显示/隐藏元素: 我正在构建一个非常轻的wp主题。侧边栏包含很少的小部件，仅填充两页长度。现在，当用户向下滚动时，当小部件不在视线范围内时，我想利用侧边栏的其余部分。如果文章很长，这将是非常好的。使用jquery的浮动元素很常见。正如我所说，这应该是非常轻松的主题。 jQuery很重。是否可以仅使用javascript，甚至只是出现和消失，以显示特定页面长度的元素？注意：此主题具有响应性。 [更新]问题解决了！谢谢大家。我为jQuery节省了100kb +带宽。作为对他人的参考，这是新脚本。 var width = window.innerWidth || document.documentElement.clientWidth; //Trigger the script only on browser width above 1150px. Recommended on responsive websites if (width > 1150){ function testScroll(ev){ //Will set the position to FIXED with TOP=80px when user scrolls 850px below. if(window.pageYOffset>850){document.getElementById(“targetID”).style.position = “fixed”;document.getElementById(“targetID”).style.top […]

html中的文本区域跳转焦点: 我有一个文本区域的HTML标签如下… Lorem ipsum 焦点我正在改变边框颜色和边框宽度它工作正常。当我专注于该元素文本区域框跳转页面上的问题（意味着移动一点……） CSS： textarea:focus { .br; border-style: solid; .shdw; } 所以任何解决这个问题的工作…………. 怎么abt使用box-shawdow属性…..我不知道使用它……..所以在这有任何帮助…………

显示基于先前下拉列表的第二个下拉列表。在代码点火器中: 我有两个下拉框，实际上我通过使用jquery和ajax通过调用id来完成此function，如果我选择一个它将出现在第二个选择框但我面临的主要问题是我使用的模板选择框使用一些名为“cho”的类名，好像我不使用这个类显然我的选择框看起来有线所以我喜欢它的样式。所以如果我在我的第二个选择框中使用这个类，结果显示然后function不会工作，但如果我不使用该类，那么它将工作所以我想要的是：我想使用css类并实现function我检查每个css文件但我不能找到cho类所以我认为如果我不能改变css文件可能是jquery有方法我将解决这个问题。这是我的第一个选择框，其中选择框和css工作正常。第二个选择框 – 没有css ..function成功使用CSS – function不会工作但css做：我的javascript： // option”).remove(); var category_id = $(‘#category’).val(); $.ajax({ type: “POST”, url: “stockInController/get_Items/”+category_id, success: function(items) { $.each(items,function(item_id,item_name) { var opt = $(”); opt.val(item_id); opt.text(item_name); $(‘#items’).append(opt); }); } }); }); }); html文件源的两个下拉列表 jeans shirts 项目：sdf bello gamer dsf blue

可折叠文件夹: 问题：我能够使用css创建一个可折叠的文件夹。但是，如果文件夹转到第二页，我无法确定如何按下该文件夹。目前，CSS如何工作，如果在其下面的文件夹下面有一个文件夹，它将重叠。我希望能够将文件夹推到另一个文件夹下面。我提供了一个关于我所说的话的图像： #primary_nav_wrap { margin-top:15px } #primary_nav_wrap ul { list-style:none; position:relative; float:left; margin:0; padding:0 } #primary_nav_wrap ul a { display:block; color:#333; text-decoration:none; font-weight:700; font-size:12px; line-height:32px; padding:0 15px; font-family:”HelveticaNeue”,”Helvetica Neue”,Helvetica,Arial,sans-serif } #primary_nav_wrap ul li { position:relative; float:left; margin:0; padding:0 } #primary_nav_wrap ul li.current-menu-item { background:#ddd } #primary_nav_wrap ul li:hover { background:#f6f6f6 } #primary_nav_wrap […]

超大 – 如何拉伸图像？: 我试图超大不要裁剪图像并拉伸它们以100％的宽度和高度填充背景（我不在乎图像是否扭曲）。我正在使用fit_always因此图像不会被裁剪并在CSS中： #supersized img { width:100%; height:100%; position:relative; display:none; outline:none; border:none; } HTML jQuery(function($){ $.supersized({ // Functionality slide_interval : 5000, transition : 1, transition_speed : 500, horizontal_center : 0, fit_always : 1, // Components slides : [ // Slideshow Images {image : ‘/img/main/home.jpg’}, {image : ‘/img/main/home-2.jpg’}, {image : ‘/img/main/home-3.jpg’}, {image : ‘/img/main/home-4-test.jpg’}, {image : ‘/img/main/home-4.jpg’} […]