Saturday, September 21, 2024
Saturday, July 20, 2024
Friday, July 12, 2024
CSS Counter Sets
<!DOCTYPE html>
<html>
<head>
<style>
ol {
counter-reset: section;
list-style-type: none;
}
li::before {
counter-increment: section;
content: counters(section,".") " ";
}
</style>
</head>
<body>
<ol>
<li>item</li>
<li>item
<ol>
<li>item</li>
<li>item</li>
<li>item
<ol>
<li>item</li>
<li>item</li>
<li>item</li>
</ol>
</li>
<li>item</li>
</ol>
</li>
<li>item</li>
<li>item</li>
</ol>
<ol>
<li>item</li>
<li>item</li>
</ol>
</body>
</html>
====================Output========================
Friday, July 5, 2024
Tuesday, July 2, 2024
Easy Accordion with Plus/Minus Icons
<!doctype HTML>
<html>
<head>
<meta content="text/html; charset=UTF-8" />
<title>Web Code Addict Accordion</title>
</head>
<body>
<div class="accordion_container">
<div class="accordion_heading">First Accordian Head<span class="plusminus">+</span>
</div>
<div class="accordion_content" style="display: none;">
<p>First Accordian Body, it will have description</p>
</div>
<div class="accordion_heading">Second Accordian Head<span class="plusminus">+</span>
</div>
<div class="accordion_content" style="display: none;">
<p>Second Accordian Body, it will have description</p>
</div>
<div class="accordion_heading">Third Accordian Head<span class="plusminus">+</span>
</div>
<div class="accordion_content" style="display: none;">
<p>Third Accordian Body, it will have description</p>
</div>
</div>
</body>
</html>
/////////////////////////////////CSS///////////////////////////////////////////////////
.accordion_container {
width: 500px;
}
.accordion_heading {
background-color:skyblue;
color: white;
cursor: pointer;
font-family: arial;
font-size: 14px;
margin: 0 0 1px 0;
padding: 7px 11px;
font-weight: bold;
}
.accordion_content {
background: lightgray;
}
.accordion_content p {
padding: 18px 5px;
margin: 0px;
}
.plusminus {
float:right;
}
/////////////////////////////////////////////Script/////////////////////////////
$(document).ready(function () {
$(".accordion_heading").click(function () {
if ($('.accordion_content').is(':visible')) {
$(".accordion_content").slideUp(300);
$(".plusminus").text('+');
}
if ($(this).next(".accordion_content").is(':visible')) {
$(this).next(".accordion_content").slideUp(300);
$(this).children(".plusminus").text('+');
} else {
$(this).next(".accordion_content").slideDown(300);
$(this).children(".plusminus").text('-');
}
});
});
Thursday, June 27, 2024
Display Category Description on First Page only Woocommerce
add_action( 'wp', function() {
$page = (get_query_var('paged')) ? get_query_var('paged') : 1;
if ( 1 !== $page ) {
remove_action( 'woocommerce_archive_description', 'shoptimizer_woocommerce_taxonomy_archive_description' );
remove_action( 'woocommerce_archive_description', 'shoptimizer_category_image', 20 );
// If you also want to remove the "Below category content" area:
remove_action( 'woocommerce_after_shop_loop', 'shoptimizer_product_cat_display_details_meta', 40 );
};
}, 20 );
Friday, June 21, 2024
Wordprress, Web Design Jobs.
Hello All,
We are open to project-based /freelancing work. You can contact us on email, Upwork and Fiverr for same.
Email: Webcodeaddicted@gmail.com
Upwork: https://www.upwork.com/freelancers/~0116762a5d8c511579?viewMode=1
https://www.upwork.com/freelancers/~018e66074633ac95a7?viewMode=1
Fiverr: https://www.fiverr.com/s/dD0EAQ3
Monday, June 10, 2024
How to add To cart and custom Quantity Field in Woo commerce with Plus and minus button
Quantity Box With Add to Cart button
<form class="cart" method="post" enctype="multipart/form-data">
<div class="quantity">
<button type="button" class="minus" >-</button>
<input type="number" step="1" min="1" max="" name="quantity" value="1" title="Quantity" class="input-text qty text" size="4" pattern="[0-9]*" inputmode="numeric">
<button type="button" class="plus" >+</button>
</div>
<input type="hidden" name="add-to-cart" value="<?php echo get_the_ID(); ?>">
<button type="submit" class="single_add_to_cart_button button alt shop-button-cart"><i class="fa fa-cart-plus" aria-hidden="true"></i> Add to cart</button>
</form>
Script to make the Minus Plus button work for Quantity box
<script>
jQuery(document).ready(function($){
$('form.cart').on( 'click', 'button.plus, button.minus', function() {
var qty = $( this ).closest( 'form.cart' ).find( '.qty' );
var val = parseFloat(qty.val());
var max = parseFloat(qty.attr( 'max' ));
var min = parseFloat(qty.attr( 'min' ));
var step = parseFloat(qty.attr( 'step' ));
if ( $( this ).is( '.plus' ) ) {
if ( max && ( max <= val ) ) {
qty.val( max );
} else {
qty.val( val + step );
}
} else {
if ( min && ( min >= val ) ) {
qty.val( min );
} else if ( val > 1 ) {
qty.val( val - step );
}
}
});
});
</script>
Sunday, April 28, 2024
Monday, April 15, 2024
How to display category description on first page only?
add_action( 'wp', function() {
$page = (get_query_var('paged')) ? get_query_var('paged') : 1;
if ( 1 !== $page ) {
remove_action( 'woocommerce_archive_description', 'shoptimizer_woocommerce_taxonomy_archive_description' );
remove_action( 'woocommerce_archive_description', 'shoptimizer_category_image', 20 );
// If you also want to remove the "Below category content" area:
remove_action( 'woocommerce_after_shop_loop', 'shoptimizer_product_cat_display_details_meta', 40 );
};
}, 20 );
Thursday, April 4, 2024
How to allow Html Tags in category description area.
foreach ( array( 'pre_term_description' ) as $filter ) {
remove_filter( $filter, 'wp_filter_kses' );
}
foreach ( array( 'term_description' ) as $filter ) {
remove_filter( $filter, 'wp_kses_data' );
}
remove_filter( $filter, 'wp_filter_kses' );
}
foreach ( array( 'term_description' ) as $filter ) {
remove_filter( $filter, 'wp_kses_data' );
}
Monday, February 26, 2024
How to increase Logout session With AJAX in WordPress
function login_session_expired() {
// we only care to add scripts and styles if the user is logged in.
if ( is_user_logged_in() ) {
// add javascript file
wp_register_script( 'wp_auth_check', '/wp-includes/js/wp-auth-check.js' , array('heartbeat'), false, 1);
wp_localize_script( 'wp_auth_check', 'authcheckL10n', array(
'beforeunload' => __('Your session has expired. You can log in again from this page or go to the login page.'),
'interval' => apply_filters( 'wp_auth_check_interval', 1 * MINUTE_IN_SECONDS ), // default interval is 3 minutes
) );
wp_enqueue_script ('wp_auth_check');
// add css file
wp_enqueue_style( 'wp_auth_check','/wp-includes/css/wp-auth-check.css', array( 'dashicons' ), NULL, 'all' );
// add the login html to the page
add_action( 'wp_print_footer_scripts', 'wp_auth_check_html', 5 );
}
}
add_action( 'wp_enqueue_scripts', 'login_session_expired' );
// make sure the stylesheet appears on the lightboxed login iframe
function login_session_expired_styles() {
wp_enqueue_style( 'wp_auth_check','/wp-includes/css/wp-auth-check.css', array( 'dashicons' ), NULL, 'all' );
}
add_action( 'login_enqueue_scripts', 'login_session_expired_styles' );
Thursday, February 15, 2024
How to add Preloader in WordPress without plugin
Copy the following snippet code in functions.php
// WordPress Preloader by https://webcodeaddict.blogspot.com/
add_action( 'init', 'webcodeaddict_Preloader' );
function webcodeaddict_Preloader() { if(!is_admin() && $GLOBALS["pagenow"] !== "wp-login.php" ) {
$delay = 1; //seconds
$loader = 'https://lh3.googleusercontent.com/drive-viewer/AEYmBYSOBFwcTqY5wcd0fQwWh9mOILRr9y6ximWsEzs72TKa3kxK3BIxm9wFtcpaSqJfiHOTTkD2EjsNKipAId8105QKAawYjQ=s1600';
$overlayColor = '#ffffff';
echo '<div class="Preloader"><img src="'.$loader.'" alt="" style="height: 150px;"></div>
<style>
.Preloader {
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
background-color: '.$overlayColor.';
z-index: 100000;
display: flex;
align-items: center;
justify-content: space-around;
}
</style>
<script>
document.body.style.overflow = "hidden";
document.addEventListener("DOMContentLoaded", () => setTimeout( function() { document.querySelector("div.Preloader").remove(); document.body.style.overflow = "visible"; } , '.$delay.' * 1000));
</script>
'; }}
Subscribe to:
Posts (Atom)
-
Web Design ,Logo Design, graphic design, website design: Web Design : encompasses many different skills and disciplines in the production a...
-
The Wedding is Responsive HTML theme for wedding planner websites. which helps you to build your own site. Wedding Planner theme has ... -
<!doctype HTML> <html> <head> <meta content="text/html; charset=UTF-8" /> <title>Web Code Addict Ac...