小编Mar*_*mes的帖子

让scrollTo在iOS上的iframe中工作

我在mysite.com上有一个页面,它使用iframe从subdomain.mysite.com中提取内容.我正在使用iframe-resizer脚本(https://github.com/davidjbradshaw/iframe-resizer)来确保iframe的高度始终与其内容的高度相匹配.像魅力跨浏览器/操作系统一样工作.

在iframe中是一个带有客户端验证的长格式.如果用户尝试提交表单并且它没有完全验证,我使用scrollTo(在iframe内的表单页面上)将页面滚动到表单的顶部,在表单中显示详细的错误消息.这一切都适用于桌面浏览器(Mac和Windows)以及所有Android设备 - w/r/t scrollTo滚动到iframe中表单的顶部.

但是,在iOS上,它不起作用 - 滚动到iframe内部的窗体顶部不会发生.我已经读过,自2011年以来,你需要在iOS上打开iframe滚动的能力 - 我不确定这样做是否能解决我的问题.我读到了添加style ="overflow:auto; -webkit-overflow-scrolling:touch;" 到围绕iframe的div,并尝试了这个,但它没有任何影响.

我还不知道我是否找不到合适的解决方案让它在iOS中运行,或者如果在iOS上没有办法让scrollTo在iframe内部工作.思考?

iframe jquery scrollto ios

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

删除/隐藏添加到购物车消息的Woocommerce但保留/显示优惠券应用消息

我正在尝试删除或隐藏我的WooCommerce结帐页面顶部的添加到购物车消息(我已删除购物车页面,因此此消息显示在结帐页面上).我尝试将其添加到我的CSS中:

.woocommerce-message {display: none;}. 
Run Code Online (Sandbox Code Playgroud)

虽然这隐藏了我想要的添加到购物车消息,但它也隐藏了优惠券应用消息,我不想隐藏它.

接下来,我尝试了functions.php文件中Business Bloomer博客的代码片段:

// Removes Product Successfully Added to Cart

add_filter( 'wc_add_to_cart_message', 'custom_add_to_cart_message' );

function custom_add_to_cart_message() {

echo '<style>.woocommerce-message {display: none !important;}</style>';

}
Run Code Online (Sandbox Code Playgroud)

这隐藏了文本,但是应用于div的类的样式.woocommerce-message仍然是可见的,包括背景颜色,填充等等.所以我在页面顶部留下了一个矩形,里面没有文字.

有关如何完全隐藏.woocommerce-messagediv只是为了添加到购物车消息,但不是.woocommerce-messag优惠券应用消息或任何其他消息的e div的任何想法将不胜感激!

php wordpress woocommerce

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

使搜索表单可访问:标签与aria-label对比aria-labelledby

我的搜索表单的当前HTML如下所示:

<form action=“/search/” method="post">
<input onclick="this.value='';" type="text"  name="searchquery" id="searchbox"  value="Search this site” class="swap_value" />
<input type="image" src=“/images/searchbutton.gif" id="searchbutton" alt="" />
</form>
Run Code Online (Sandbox Code Playgroud)

我想让搜索表格可访问.据我了解,从无障碍W3.org:https://www.w3.org/WAI/tutorials/forms/labels/和a11ymatters.com:http://www.a11ymatters.com/pattern/accessible-search/,我需要添加一个不会直观显示的标签,并为搜索按钮提供说明,如下所示:

<form action=“#” method="post">
<label class=“search-label” for=“search”>Search this site:</label>
<input onclick="this.value='';" type="text"  name="searchquery" id="searchbox"  value="Search this site” class="swap_value" />
<input type="image" src=“/searchbutton.gif" id="searchbutton" alt=“Search Button“ />
</form>
Run Code Online (Sandbox Code Playgroud)

添加CSS:

.search-label {
  border: 0;
  clip: rect(0 0 0 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px; 
}
Run Code Online (Sandbox Code Playgroud)

W3.org文章说你可以使用label,aria-label或aria-labelledby来识别表单控件,但它没有说明哪种是最佳实践.有谁知道哪一个是首选/最佳实践?alt标签是否足以识别我的搜索按钮,或者是否需要标签呢?

非常感谢!

html forms search accessibility

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

标签 统计

accessibility ×1

forms ×1

html ×1

iframe ×1

ios ×1

jquery ×1

php ×1

scrollto ×1

search ×1

woocommerce ×1

wordpress ×1