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)
或者有机会在移动设备上尝试检查模式吗?
我懒惰地使用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) 在这里你可以看到相同的视频正在加载两次.它是一个自动播放视频,我只想在页面底部第二次使用(首先是页面顶部).如何防止浏览器第二次下载? 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)
我有一个可以定位的具有已知 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)当用户停止播放视频时,如何隐藏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
我正在尝试创建一个人体,单击后会显示所属部分。目前,这是通过 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创建它并为齿轮设置动画,但正如你可以看到的那样,如果你运行我的代码,我正在努力追随:
你知道怎么解决这个问题吗?
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)有没有办法(也许通过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)
我想在我的 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) 我想隐藏 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) 我有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)我在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) 有没有办法在 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) css ×5
php ×4
woocommerce ×4
wordpress ×4
jquery ×3
javascript ×2
amp-html ×1
cart ×1
checkbox ×1
checkout ×1
dropdown ×1
google-amp ×1
hide ×1
iframe ×1
lazy-loading ×1
mobile ×1
product ×1
video ×1
youtube ×1