小编Kry*_*hey的帖子

在Samsung和Apple的默认浏览器中出现样式错误,Chrome工作正常

http://www.ergotopia.de/ergonomie-shop/ergonomische-kissen/orthopaedisches-sitzkissen的移动页面看起来应该是正确的(如何检查Chrome),但在智能手机默认浏览器上它看起来像左边.在智能手机Chrome浏览器上,它看起来也很正常,但不幸的是大多数人都使用默认浏览器.

在此输入图像描述

我试着通过以下方式实现奇怪的外观类"product-info",但没有任何改变.你知道这里有什么不对吗?

.product-info { 
    clear:both;
    float:left;
    display:block;
}
Run Code Online (Sandbox Code Playgroud)

或者有机会在移动设备上尝试检查模式吗?

css mobile responsive-design

13
推荐指数
1
解决办法
1655
查看次数

在水平滑块中延迟加载图像

我懒惰地使用jquery lazyload和一个阈值加载此站点上的图像:https://bm-translations.de/#leistungen

//Lazyload Images with Threshold https://www.appelsiini.net/projects/lazyload
$(function() {
    $("img.lazy").lazyload({
        threshold : 400
    });
}); 
Run Code Online (Sandbox Code Playgroud)

所以图像src被替换为data-original.当我滚动到元素时,它应该将其更改src为.

但出于某种原因,它加载引导滑块中的图像太慢(当我点击它或它的自动滑动一些图像没有加载),你可以看到.如何调整此代码,以便它也适用于此?

滑块的结构如下:https://www.w3schools.com/bootstrap/bootstrap_carousel.asp

Carousel JS是:

$('#myCarousel').carousel({
        interval: 9000,
    });

    // handles the carousel buttons
    $('[id^=carousel-selector-]').click( function(){
      var id_selector = $(this).attr("id");
      var id = id_selector.substr(id_selector.length -1);
      id = parseInt(id);
      $('#myCarousel').carousel(id);
      $('[id^=carousel-selector-]').removeClass('selected');
      $(this).addClass('selected');
    });

    // when the carousel slides, auto update
    $('#myCarousel').on('slide.bs.carousel', function (e) {
      var id = $('.item.active').data('slide-number');
      id = parseInt(id)+1;
      $('[id^=carousel-selector-]').removeClass('selected'); …
Run Code Online (Sandbox Code Playgroud)

jquery lazy-loading jquery-lazyload

10
推荐指数
1
解决办法
5045
查看次数

如果第二次只是同一个视频,如何防止相同的视频加载两次

在这里你可以看到相同的视频正在加载两次.它是一个自动播放视频,我只想在页面底部第二次使用(首先是页面顶部).如何防止浏览器第二次下载? https://tools.pingdom.com/#!/cQ1xMb/https://bm-translations.de/km.php 有关此页面的问题:https://bm-translations.de/km #kontakt(滚动a咬到"zufriedene Kunden"

<video autoplay="autoplay" loop="loop" class="imgWindowwidth center"><source src="./bilder/krystian-manthey-referenzen.mp4" type="video/mp4"/></video>
Run Code Online (Sandbox Code Playgroud)

在此输入图像描述

javascript video jquery

10
推荐指数
2
解决办法
314
查看次数

仅使用伪元素创建 css 徽章

我有一个可以定位的具有已知 ID 的元素。我怎么能只用 css 创建一个像这样的畅销书徽章?我无法更改 html。

在此处输入图片说明

我知道如何创建它,但前提是我可以编辑 html,而我不能:

.box {
  width: 200px; height: 300px;
  position: relative;
  border: 1px solid #BBB;
  background: #EEE;
}
.ribbon {
  position: absolute;
  right: -5px; top: -5px;
  z-index: 1;
  overflow: hidden;
  width: 75px; height: 75px;
  text-align: right;
}
.ribbon span {
  font-size: 10px;
  font-weight: bold;
  color: #FFF;
  text-transform: uppercase;
  text-align: center;
  line-height: 20px;
  transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
  width: 100px;
  display: block;
  background: #79A70A;
  background: linear-gradient(#9BC90D 0%, #79A70A 100%);
  box-shadow: 0 3px 10px -5px rgba(0, 0, 0, …
Run Code Online (Sandbox Code Playgroud)

css css-selectors pseudo-element

8
推荐指数
1
解决办法
2893
查看次数

停止视频时隐藏youtube iframe中的"更多视频"

当用户停止播放视频时,如何隐藏Youtube iframe中的"更多视频"部分?

例:

<iframe width="750" height="420" src="https://www.youtube/embed/cZnsLVArIt8?rel=0&iv_load_policy=3" frameborder="0" allowfullscreen></iframe>
Run Code Online (Sandbox Code Playgroud)

在此输入图像描述

我无法在此处找到任何解决方案:https://developers.google.com/youtube/player_parameters

youtube iframe

7
推荐指数
3
解决办法
5865
查看次数

纯CSS交互人体

我正在尝试创建一个人体,单击后会显示所属部分。目前,这是通过 Javascript 完成的,并且仅测试所属身体部分的名称。

我想知道是否有一种方法可以只用 css 来实现这种交互式人体?有什么想法可以实现这一目标吗?

window.onload = function () {
    const pieces = document.getElementsByTagName('svg');
    for (var i = 0; pieces.length; i++) {
        let _piece = pieces[i];
        _piece.onclick = function(t) {
            if (t.target.getAttribute('data-position') != null) document.getElementById('data').innerHTML = t.target.getAttribute('data-position');
            if (t.target.parentElement.getAttribute('data-position') != null) document.getElementById('data').innerHTML = t.target.parentElement.getAttribute('data-position');
        }
    }
}
Run Code Online (Sandbox Code Playgroud)
.human-body {
    width: 207px;
    position: relative;
    padding-top: 240px;
    height: 260px;
    display: block;
    margin: 40px auto;
}
.human-body svg:hover {
    cursor: pointer;
}
.human-body svg:hover path {
    fill: #ff7d16;
}
.human-body svg { …
Run Code Online (Sandbox Code Playgroud)

css

6
推荐指数
1
解决办法
6156
查看次数

心脏,心脏和动画齿轮与CSS

这是我们的标志: 在此输入图像描述

我们想用css创建它并为齿轮设置动画,但正如你可以看到的那样,如果你运行我的代码,我正在努力追随:

  • 心不在装备之内
  • 如果我把心脏放在它的动画中,但只有齿轮应该有动画
  • 目前心率(蓝线)不是用css完成的,因为我不知道如何解决这个问题

你知道怎么解决这个问题吗?

body{background: #fff;}

.parent{
  display: flex;
  height: 500px;
}

.gear{
  position: relative;
  width: 200px;
  height: 200px;
  margin: auto;
  background: black;
  border-radius: 50%;
  animation-name: spin;
  animation-duration: 4s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}

.gear .center{
  position: absolute;
  top: 25px;
  left: 25px;
  z-index: 10;
  width: 150px;
  height: 150px;
  background: #fff;
  border-radius: 50%;
}

.tooth{
  position: absolute;
  top: -25px;
  left: 75px;
  z-index: 1;
  width: 45px;
  height: 250px;
  background:black;
}

.tooth:nth-child(2){
  transform: rotate(45deg);
}

.tooth:nth-child(3){
  transform: rotate(90deg);
}

.tooth:nth-child(4){
  transform: …
Run Code Online (Sandbox Code Playgroud)

css css-animations

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

在 WooCommerce 存档页面上悬停切换产品图像

有没有办法(也许通过functions.php)在将鼠标悬停在产品的第一个附加图库图像上时更改woocommerce商店(存档页面)中的产品图像?我找不到如何针对两者。我想它一定是这样的:

add_action( 'woocommerce_shop_loop_item', 'change_image_on_hover', 10 );
function change_image_on_hover() {
     $product->get_gallery_image_ids();
     print 'woocommerce_gallery_image';
}
Run Code Online (Sandbox Code Playgroud)

在此处输入图片说明

php wordpress woocommerce hook-woocommerce

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

在 WooCommerce 中设置最小订单金额

我想在我的 WooCommerce 商店中设置最低订单金额。如果未达到金额但仍然可以结帐,以下代码完美地显示了通知。未达到最低金额时如何禁用结帐按钮?

add_action( 'woocommerce_checkout_process', 'wc_minimum_order_amount' );
add_action( 'woocommerce_before_cart' , 'wc_minimum_order_amount' );

function wc_minimum_order_amount() {
    // Set this variable to specify a minimum order value
    $minimum = 50;

    if ( WC()->cart->total < $minimum ) {

        if( is_cart() ) {

            wc_print_notice( 
                sprintf( 'Your current order total is %s — you must have an order with a minimum of %s to place your order ' , 
                    wc_price( WC()->cart->total ), 
                    wc_price( $minimum )
                ), 'error' 
            );

        } else {

            wc_add_notice( 
                sprintf( 'Your current …
Run Code Online (Sandbox Code Playgroud)

php wordpress checkout cart woocommerce

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

在 Woocommerce 变量产品下拉列表中隐藏变体属性值

我想隐藏 woocommerce 产品页面下拉列表中显示的特定变体。我能够隐藏“选择一个选项”,但我正在努力做同样的事情,value="2,5 kg"例如

这是我隐藏“选择一个选项”的代码:

add_filter( 'woocommerce_dropdown_variation_attribute_options_html', 'remove_choose_an_option'); 
function remove_choose_an_option( $html ){ 
    $html = str_replace('<option value="">' . __( 'Choose an option', 'woocommerce' ) . '</option>','',$html);
    return $html; 
}
Run Code Online (Sandbox Code Playgroud)

value="2,5 kg"但是如何隐藏例如的变化呢?示例产品: https: //www.keimster.de/produkt/gekeimtes-gesundes-muesli/

我也尝试过使用 css,但是这两个都不起作用

#groesse > option[value=2,5 kg], #groesse > option:nth-child(1) {display: none;}
Run Code Online (Sandbox Code Playgroud)

php wordpress woocommerce dropdown taxonomy-terms

2
推荐指数
1
解决办法
5571
查看次数

检查是否检查了所有输入

我有2个按钮和2个输入."买"按钮只应在检查两个输入时触发其默认功能.如果没有,它应该用红色边框标记它们.我在这做错了什么?

jQuery(function($) {
	$('.checkedterms:checked').length == $('.checkedterms').length
	$("#upsellyes").click(function(e) {
		$(".checkedterms").change(function(){
			if (!$('.checkedterms:checked').length == $('.checkedterms').length) {
				e.preventDefault();
				$("#terms-required").addClass('invalid');
			} 
			else {
				$("#terms-required").removeClass('invalid');
			}
		});
	});
});
Run Code Online (Sandbox Code Playgroud)
.invalid {
  border: 1px solid red;
}
Run Code Online (Sandbox Code Playgroud)
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="terms-required">
<input type="checkbox" class="checkedterms" name="terms" id="terms" style="position: absolute;"><label for="terms" class="checkbox" style="display: inline-block!important;font-weight:normal!important;margin-left: 25px;">I have read <a href="#" >Allgemeinen Geschäftsbedingungen</a>.<span class="required">*</span></label><br />
<input type="checkbox" class="checkedterms" name="terms" id="terms" style="position: absolute;"><label for="terms" class="checkbox" style="display: inline-block!important;font-weight:normal!important;margin-left: 25px;">I have read <a href="#" >Widerrufsbelehrung</a>.<span class="required">*</span></label><br />
</div><br>
<a href="#" id="upsellyes">buy</a><br><br>
<a href="#">no …
Run Code Online (Sandbox Code Playgroud)

javascript checkbox jquery

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

隐藏元素但不包含仅使用css的嵌套子元素

我在AMP-Page中有类似的东西(我不能改变结构,!important因为AMP不可能):

<p class="test">hide me <a>show me</a></p>
Run Code Online (Sandbox Code Playgroud)

如何实现隐藏父机器人的html而不是嵌套的a-tag?我尝试了这个没有成功:

.test{display:none;}
.test a{display:block;}
Run Code Online (Sandbox Code Playgroud)

并且:

.test:not(a){display:none;}
Run Code Online (Sandbox Code Playgroud)

css hide amp-html google-amp

0
推荐指数
1
解决办法
68
查看次数

在 woocommerce 存档页面和加售/相关产品中显示自定义产品价格

有没有办法在 WordPress 仪表板中启用后端字段,以在存档页面和加售/相关产品中显示每个产品的自定义价格,但将价格保留在产品摘要中?

示例:产品 A 的价格为 10 欧元,但我想改为显示“6 欧元/公斤起”。

最简单的方法是使用一个自定义字段,该字段覆盖了 ,woocommerce_template_loop_price但此代码不起作用,但我不明白为什么。

add_action('woocommerce_template_loop_price', 'shopprice_change', 10, 2);
function shopprice_change ($price, $product) {
    global $post, $blog_id;
    $post_id = $post->ID;
    $price = get_post_meta($post_id, 'shoppricechange', true);
    return $price;
    wp_reset_query();
}
Run Code Online (Sandbox Code Playgroud)

更新

我找到了一种解决方案,可以在不更改单个产品页面的情况下更改存档页面中的价格:

function cw_change_product_html( $price_html, $product ) {
    $unit_price = get_post_meta( $product->id, 'shoppricechange', true );
    if (is_product()) return $price_html;
    if ( ! empty( $unit_price ) ) {
        $price_html = '<span class="amount">' . wc_price( $unit_price ) . '</span>';  
    }
    return $price_html;
}
add_filter( 'woocommerce_get_price_html', …
Run Code Online (Sandbox Code Playgroud)

php wordpress product custom-fields woocommerce

0
推荐指数
1
解决办法
2866
查看次数