WordPress Tricks

WordPress Copy Content Protection: Protect Specific page to be copied and disable CTRL+C, CTRL+V using jQuery and Javascript

allaboutbasic

Here I am sharing you a code snippet which you can use to protect your specific page to be copied. This Code will disable Right Click, CTRL+C and CTRL+V etc. I got this code from StackOverflow.com and modified it a little so that you can use it for your WordPress Page.

Just change the Page ID in the code with your own page ID which you want to be protected.

<?php
	if(is_page('YOUR PAGE ID')){?>
<script>

jQuery(document).ready(function() {
 jQuery(function() {
       jQuery(this).bind("contextmenu", function(e) {
            e.preventDefault();
        });
    });
});
	
// Disable Right click
document.addEventListener('contextmenu', event => event.preventDefault());

// Disable key down
document.onkeydown = disableSelectCopy;

// Disable mouse down
document.onmousedown = dMDown;

// Disable click
document.onclick = dOClick;

function dMDown(e) { return false; }

function dOClick() { return true; }

function disableSelectCopy(e) {
    // current pressed key
    var pressedKey = String.fromCharCode(e.keyCode).toLowerCase();
    if ((e.ctrlKey && (pressedKey == "c" || pressedKey == "x" || pressedKey == "v" || pressedKey == "a" || pressedKey == "u")) ||  e.keyCode == 123) {
        return false;
    }
}	
	
</script>
<?php } ?>
Web Development

Menu Drag and scroll in left and right using Mouse : HTML CSS and JavaScript

allaboutbasic

Basically I got the code from Codepan. But I am describing it here again with my html and css for the novice users. I am sharing the CSS, HTML and Javascript related to it.

CSS

<style>
.menu {
    overflow-x: scroll;
    display: -webkit-box !important;
    flex-wrap: inherit !important;
    width: 251px;
}
ul.menu li {
    list-style: none;
    margin-right: 12px;
}
</style>

HTML

<ul class="menu">
<li><a>test 1</a></li>
<li><a>test 2</a></li>
<li><a>test 3</a></li>
<li><a>test 4</a></li>
<li><a>test 5</a></li>
<li><a>test 6</a></li>
<li><a>test 7</a></li>
<li><a>test 8</a></li>
<li><a>test 9</a></li>
<li><a>test 10</a></li>

</ul>

Javascript

<script>

const slider = document.querySelector('ul.menu');
let isDown = false;
let startX;
let scrollLeft;

slider.addEventListener('mousedown', (e) => {
  isDown = true;
  slider.classList.add('active');
  startX = e.pageX - slider.offsetLeft;
  scrollLeft = slider.scrollLeft;
});
slider.addEventListener('mouseleave', () => {
  isDown = false;
  slider.classList.remove('active');
});
slider.addEventListener('mouseup', () => {
  isDown = false;
  slider.classList.remove('active');
});
slider.addEventListener('mousemove', (e) => {
  if(!isDown) return;
  e.preventDefault();
  const x = e.pageX - slider.offsetLeft;
  const walk = (x - startX) * 3; //scroll-fast
  slider.scrollLeft = scrollLeft - walk;
 // console.log(walk);
});

</script>
WordPress Tricks

Woocommerce shortcode to show product image, sku, regular price, sales price, title using wp_Query

allaboutbasic

Here I am sharing you the code to see how it works. The shortcode will be [strong_overstock_products]

function strong_overstock_products_output(){
 $args = array(
        'post_type'      => 'product',
         'product_cat'    => 'overstock'
    );

    $loop = new WP_Query( $args );
?>
 
<ul class="txt">
<?php
    while ( $loop->have_posts() ) : $loop->the_post();
        global $product;
	 $sku = get_post_meta( get_the_ID(), '_sku', true );
	echo '<li class="wc-taxonomy-child">' ;
        echo '<br /><a href="'.get_permalink().'">' . woocommerce_get_product_thumbnail().'<div class="taxc-product--overlay">
                            <div>
			                    VIEW PRODUCT                            </div>
                        </div>'.' </a>';
	echo "<div class='sku'>SKU : ".$sku."</div>";
	  echo ' <a href="'.get_permalink().'">' .get_the_title().'</a>';
   $pricer = get_post_meta( get_the_ID(), '_regular_price', true );
	$prices = get_post_meta( get_the_ID(), '_sale_price', true );
if ( $product->is_on_sale()) {
                 echo '<p class="taxc-product--price">
                    <del aria-hidden="true"><span class="woocommerce-Price-amount amount"><bdi> ' .$pricer.'</bdi></span></del> <ins><span class="woocommerce-Price-amount amount"><bdi>' .$prices . ' </bdi></span></ins> </p>';
            } else {
                 echo '<p class="taxc-product--price">
                      <ins><span class="woocommerce-Price-amount amount"><bdi>' .$pricer . ' </bdi></span></ins> </p>';
            }
	
	?>
	 
		
<?php	
	echo '</li>' ;
	endwhile;
	?>
</ul>	
<?php	

    wp_reset_query();
}

add_shortcode('strong_overstock_products', 'strong_overstock_products_output');
WordPress Tricks

Multi Blog By themeinwp :Photography Fashion or food blog and Modification of header footer sidebar using css

allaboutbasic

Multi Blog by ThemeinWp is a responsive WordPress theme which you can use for personal, travel, fashion, food, photography, publishing, tutorial blogs, or any other site. If you are a creative blogger,then you can use this theme. Here I am sharing you some css tips which you can use to modify the header, footer, sidebar, font color, font family and more using css. You can download MultiBlog by Themeinwp, Or you can see the demo of Multi Blog theme. If you have any question regarding css helps, feel free to ask question in comments section

Continue reading “Multi Blog By themeinwp :Photography Fashion or food blog and Modification of header footer sidebar using css” →
Web Development

Based on the value in URL parameter change text or contact number in Content section

allaboutbasic

This post is for those who has knowledge about HTML and jQuery. I am sharing the code directly here, If you have any question or facing similar issue, feel free to ask question in comments section

<script>

 	jQuery(document).ready(function(){
  
var params = new window.URLSearchParams(window.location.search);
console.log(params.get('assigned_to'));
var coach=params.get('assigned_to');
	if (coach.toLowerCase().indexOf("terry") >= 0){
	var terryNumber='(832)xxx-xxxx';
	 
jQuery("div#call a").text(terryNumber);
jQuery("div#call a").attr("href", "tel:"+terryNumber);
	}
	else if(coach.toLowerCase().indexOf("paul") >= 0){
	var jimNumber='(760)xxxx-xxxx';
	 
jQuery("div#call a").text(jimNumber);
jQuery("div#call a").attr("href", "tel:"+jimNumber);
	}
else if(coach.toLowerCase().indexOf("newname") >= 0){
	var newnameNumber='(760)xxx-xxxx';
	 
jQuery("div#call a").text(newnameNumber);
jQuery("div#call a").attr("href", "tel:"+newnameNumber);
	} 
	
 }); 		
 

</script>
Karma Observation

8th Lord in 5th or A8 pada in 5th house: Does my observation matches with you?

Karma Observation

As I have enthusiasm in astrology, but I don’t do it professionally, so I need your help to match what I observed regarding 8th lord in 5th house or A8 pada in 5th house. Please feel free to write and share your findings in comments section.

  1. 8th lord in 5th house native may face issue regarding child abortion or death
  2. Native may involve in affair to his/her student
  3. Native may get interest in Occult science

These 3 are my observation. So, if you have this combination please share your thoughts too.

Web Development

Click Button and show Drop down menu using CSS and jQuery

allaboutbasic

You can use it in your html css based website. 

	<script>


jQuery(document).ready(function() {
   

jQuery('.dropdown button#menu1').on('click',function(){
 var count=0;

if (  jQuery('ul.menu' ).hasClass("active")     ){ 

 jQuery('ul.menu').hide();
  jQuery('ul.menu').removeClass('active');
count=1
}

if(count!=1){
   jQuery('ul.menu').addClass('active');
   jQuery('ul.menu').show();
}




});






});

</script>
<style>
 
 
ul.menu.active {
    height: 150px !IMPORTANT;
    overflow-y: scroll;
}
 
 
.dropdown {
    display: block;
    margin-left: auto !IMPORTANT;
    margin-right: auto;
    width: 120px;
}
.dropdown ul.menu {
    width: 120px;
}
.dropdown ul.menu li.menu-item {
    line-height: 1rem;
    list-style: none;
}
.dropdown button#menu1 {
    width: 120px;
}
.dropdown ul.menu {
    width: 120px;
    margin-top: 0px;
    position: absolute;
}
 
</style>		
<div class="dropdown">
  <button class="btn btn-default dropdown-toggle" type="button" id="menu1" data-toggle="dropdown">Menu
  <span class="caret"></span></button>
  <ul class="menu" style="display:none;">
    
 
	
	<li class="menu-item"><a href="#123">Home</a></li>
    <li class="menu-item"><a href="#0">About</a></li>
    <li class="menu-item"><a href="#0">Shop</a></li>
	<li class="menu-item"><a href="#0">Streamers</a></li>
    <li class="menu-item"><a href="#456">ABC</a></li>
    <li class="menu-item"><a href="#456">DEF</a></li>
    <li class="menu-item"><a href="#0">12345</a></li>
	<li class="menu-item"><a href="#0">Gallery</a></li>
    <li class="menu-item"><a href="#789">Submenu 1</a></li>
                <li class="menu-item"><a href="#0">Submenu 2</a></li>
                <li class="menu-item"><a href="#0">Submenu 3</a></li>
                <li class="menu-item"><a href="#0">Random Text</a></li>
                <li class="menu-item"><a href="#0">Submenu 5</a></li>
                <li class="menu-item"><a href="#0">Submenu 6</a></li>
				<li class="menu-item"><a href="#0">Contact</a></li>
	 		
   </ul>
</div>
Web Development

Remove the title which generally shows when you mouse over or Hover over the image using jQuery

allaboutbasic

Just use this code and Replace section#wrapper-content with your image container

jQuery(document).ready(function(){
	jQuery("section#wrapper-content img").each(function(index, element) {
      jQuery(element).attr('data-title', jQuery(element).attr('title'));
   jQuery(element).removeAttr("title");
});
		});
WordPress Tricks

WordPress Twenty Twenty-Two theme By the WordPress team : Modify header and content width using css

allaboutbasic

Here I am sharing you 2 technique using css. Please Feel Free to do comments if you have any question regarding Twenty Twenty Two theme of wordpress by Automattic.

1 ) To change font size, color and font family and spacing of H1 header tag for Page titles

h1 {
    font-family: cursive !IMPORTANT;
    color: darkred;
    font-size: 25px !important;
    margin-bottom: 12px !IMPORTANT;
    margin-top: 12px !IMPORTANT;
}

2) To make contents full width using css in Twenty Twenty Two theme

.wp-block-post-content > * {
    max-width: 1022px !important;
}

3) Reduce space between two blog posts using css in Twenty Twenty two theme

.blog .wp-block-group .wp-block-spacer {
    height: 50px !important;
}

4) To reduce gap at the top of Leave A Reply Comment box in Twenty Twenty Two theme

.wp-block-post-comments {
    margin-top: 0px !IMPORTANT;
    padding-top: 0px !important;
}

5) To change font size, color, font family, font weight and using background color and alignment of “Leave a Reply” in twenty twenty two theme

h3#reply-title {
    font-size: 25px;
    color: white !IMPORTANT;
    font-weight: bold;
    font-family: cursive !important;
    background: green;
    padding: 12px;
    text-align: center;
}

6) To Change font size, background color of this Post Comment button

input#submit {
    background: darkred;
    font-size: 14px;
    font-weight: bold;
}

7) If you don’t want to show comments date in your blog post in Twenty Twenty Two theme

.comment-metadata {
    display: none;
}

8) If you want to change font size, color and font family of comments author in twenty twenty two theme

.comment-author, .comment-author * {
    font-size: 16px !IMPORTANT;
    color: darkblue;
    font-family: cursive;
}

9) If you want to make body background red and content header and footer background white

.wp-site-blocks header {
    background: white;
}
.wp-site-blocks main {
    background: white;
    margin-top: 0px;
}
.wp-site-blocks footer {
    background: white;
    margin-top: 0px !IMPORTANT;
    padding-top: 0px !IMPORTANT;
}
body {
    background: red;
}