Zahid Ali Keerio (PHP Developer)

Wednesday, June 26, 2019

Wordpress Pagination Function

$paged = get_query_var( 'paged' ) ? get_query_var( 'paged' ) : 1;

$number_posts = 15;

$args = array(

'posts_per_page' => $number_posts,

'orderby' => 'date',

'order' => 'DESC',

'post_type' => 'post',

'post_status' => 'publish',

'paged' => $paged,

);

$loop = new WP_Query( $args );

<?php
if (function_exists("pagination")) {
pagination($loop->max_num_pages);
}
?>

/*
* Pagination Function for blog page
*/

function pagination($pages = '', $range = 2)

{
$showitems = ($range * 2)+1;
global $paged;
if(empty($paged)) $paged = 1;

if($pages == '')
{
global $wp_query;
$pages = $wp_query->max_num_pages;
if(!$pages)
{

$pages = 1;

}
}

if(1 != $pages)
{
echo "<div class=\"pagination\"><span>Page ".$paged." of ".$pages."</span>";
if($paged > 2 && $paged > $range+1 && $showitems < $pages) echo "<a href='".get_pagenum_link(1)."'>« First</a>";

if($paged > 1 && $showitems < $pages) echo "<a href='".get_pagenum_link($paged - 1)."'>&lsaquo; Previous</a>";

for ($i=1; $i <= $pages; $i++)
{
if (1 != $pages &&( !($i >= $paged+$range+1 || $i <= $paged-$range-1) || $pages <= $showitems ))
{
echo ($paged == $i)? "<span class=\"current\">".$i."</span>":"<a href='".get_pagenum_link($i)."' class=\"inactive\">".$i."</a>";
}
}
if ($paged < $pages && $showitems < $pages) echo "<a href=\"".get_pagenum_link($paged + 1)."\">Next &rsaquo;</a>";
if ($paged < $pages-1 && $paged+$range-1 < $pages && $showitems < $pages) echo "<a href='".get_pagenum_link($pages)."'>Last »</a>";
echo "</div>\n";
}
}

Tuesday, June 11, 2019

Youtube Responsive video Iframe Code

<div class="container_video">
<iframe src="https://www.youtube.com/embed/bR0NCM639B8?controls=0" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen=""></iframe>
</div>
<style>

.section-video-container .container_video {
position: relative;
width: 100%;
height: 0;
padding-bottom: 56.25%;
}
.section-video-container .container_video iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
</style>

Tuesday, May 21, 2019

Countdown timer JS code

<section class="black-bar">
<h4>Cash Game Fix enrollment ends in:</h4>
<h2 class="countdown"><span class="days"></span> days <span class="line">|</span> <span class="hours"></span> hours <span class="line">|</span> <span class="minutes"></span> min <span class="line">|</span> <span class="seconds"></span> sec</h2>
</section>
<script type="text/javascript">
/* STatic Date Timer start */

function makeTimer() {

// var endTime = new Date("29 April 2018 9:56:00 GMT+01:00");
var endTime = new Date("24 May 2019 23:59:59 GMT-07:00");
endTime = (Date.parse(endTime) / 1000);

var now = new Date();
now = (Date.parse(now) / 1000);

var timeLeft = endTime - now;

var days = Math.floor(timeLeft / 86400);
var hours = Math.floor((timeLeft - (days * 86400)) / 3600);
var minutes = Math.floor((timeLeft - (days * 86400) - (hours * 3600 )) / 60);
var seconds = Math.floor((timeLeft - (days * 86400) - (hours * 3600) - (minutes * 60)));

$clock = $('h2.countdown');
$days = $clock.find('.days');
$hours = $clock.find('.hours');
$minutes = $clock.find('.minutes');
$seconds = $clock.find('.seconds');

if(days < 0) days = 0;

if(hours < 0) hours = 0;

if(minutes < 0) minutes = 0;

if(seconds < 0) seconds = 0;

// If lower than 10, then add 0;
if( days < 10 ) $days.html('0' + days);
if( hours < 10 ) $hours.html('0' + hours);
if( minutes < 10 ) $minutes.html('0' + minutes);
if( seconds < 10 ) $seconds.html('0' + seconds);

// If higher than don't add anything.
if( days > 10 ) $days.html(days);
if( hours > 10 ) $hours.html(hours);
if( minutes > 10 ) $minutes.html(minutes);
if( seconds > 10 ) $seconds.html(seconds);

if (timeLeft <= 0) {
clearInterval(makeTimer());
}

}
$(document).ready(function(){
setInterval(function() { makeTimer(); }, 1000);
})

</script>

Wednesday, March 27, 2019

Scroll inside of the div upto fixed height scroll

/**
* App Features Scroll JS
*/

// $('.sec-inner--appFeatures .left-col').bind('mousewheel DOMMouseScroll', function (event) {
// event.preventDefault();
// total = $(".sec-inner--appFeatures .left-col").find('.mediaObject').length;
// h = $(".sec-inner--appFeatures .left-col").height();
// scroll(event, h, total);
// });
<div class="left-col tabs">
<a class="tab mediaObject mediaObject--md mediaObject--purple">
<div class="mediaObject__body">
<div class="mediaObject__body__copy">
<h2 class="mediaObject__title">Chumash with Rashi</h2>
<p class="mediaObject__para">The daily learning of Chumash with Rashi is one of
the three daily
regimens which make up the learning of Chitas.</p>
</div>
<div class="mediaObject__body__img">
<img src="img/feldheim_blank_1.png" alt="">
</div>
</div>
</a>

<a class="tab mediaObject mediaObject--md mediaObject--orange">
<div class="mediaObject__body">
<div class="mediaObject__body__copy">
<h2 class="mediaObject__title">Chumash with Rashi</h2>
<p class="mediaObject__para">The daily learning of Chumash with Rashi is one of
the three daily
regimens which make up the learning of Chitas.</p>
</div>
<div class="mediaObject__body__img">
<img src="img/feldheim_blank_1.png" alt="">
</div>
</div>
</a>

<a class="tab mediaObject mediaObject--md mediaObject--seaBlue">
<div class="mediaObject__body">
<div class="mediaObject__body__copy">
<h2 class="mediaObject__title">Chumash with Rashi</h2>
<p class="mediaObject__para">The daily learning of Chumash with Rashi is one of
the three daily
regimens which make up the learning of Chitas.</p>
</div>
<div class="mediaObject__body__img">
<img src="img/Kehot.png" alt="">
</div>
</div>
</a>

<a class="tab mediaObject mediaObject--md mediaObject--lightGreen">
<div class="mediaObject__body">
<div class="mediaObject__body__copy">
<h2 class="mediaObject__title">Chumash with Rashi</h2>
<p class="mediaObject__para">The daily learning of Chumash with Rashi is one of
the three daily
regimens which make up the learning of Chitas.</p>
</div>
<div class="mediaObject__body__img">
<img src="img/Kehot.png" alt="">
</div>
</div>
</a>

<a class="tab mediaObject mediaObject--md mediaObject--darkGreen">
<div class="mediaObject__body">
<div class="mediaObject__body__copy">
<h2 class="mediaObject__title">Chumash with Rashi</h2>
<p class="mediaObject__para">The daily learning of Chumash with Rashi is one of
the three daily
regimens which make up the learning of Chitas.</p>
</div>
<div class="mediaObject__body__img">
<img src="img/Untitffled-3.png" alt="">
</div>
</div>
</a>

<a class="tab mediaObject mediaObject--md mediaObject--seaGreen">
<div class="mediaObject__body">
<div class="mediaObject__body__copy">
<h2 class="mediaObject__title">Chumash with Rashi</h2>
<p class="mediaObject__para">The daily learning of Chumash with Rashi is one of
the three daily
regimens which make up the learning of Chitas.</p>
</div>
<div class="mediaObject__body__img">
<img src="img/Untitffled-3.png" alt="">
</div>
</div>
</a>

<a class="tab mediaObject mediaObject--md mediaObject--yellow">
<div class="mediaObject__body">
<div class="mediaObject__body__copy">
<h2 class="mediaObject__title">Chumash with Rashi</h2>
<p class="mediaObject__para">The daily learning of Chumash with Rashi is one of
the three daily
regimens which make up the learning of Chitas.</p>
</div>
<div class="mediaObject__body__img">
<img src="img/artscrollbw1.png" alt="">
</div>
</div>
</a>

<a class="tab mediaObject mediaObject--md mediaObject--royalBlue">
<div class="mediaObject__body">
<div class="mediaObject__body__copy">
<h2 class="mediaObject__title">Chumash with Rashi</h2>
<p class="mediaObject__para">The daily learning of Chumash with Rashi is one of
the three daily
regimens which make up the learning of Chitas.</p>
</div>
<div class="mediaObject__body__img">
<img src="img/artscrollbw1.png" alt="">
</div>
</div>
</a>
</div>

// $('.sec-inner--appFeatures .left-col').on('scroll', function (event) {
// $('.sec-inner--appFeatures .left-col').bind('mousewheel DOMMouseScroll', function (event) {
// event.preventDefault();
// total = $(".sec-inner--appFeatures .left-col").find('.mediaObject').length;
// h = $(".sec-inner--appFeatures .left-col").height();
// scroll(event, h, total);
// });
// });

// var num = 0;
// var scrolling = false;

// function scroll(event, h, total) {
// event.preventDefault();

// // For 6 Items per block
// count = Math.ceil(total / 6);

// // For 4 Items per block
// // count = Math.ceil(total / 4);

// if (!scrolling) {
// scrolling = true;

// if (event.originalEvent.wheelDelta > 0 || event.originalEvent.detail < 0) {
// num--;
// num = num < 1 ? 0 : num;
// hight_offset = num < 1 ? 0 : h * num;
// } else {
// if (num < count - 1) { num++; } num = num >= count ? count : num;
// hight_offset = num > count ? num * h : (h) * num;
// }

// // console.log("hight_offset: "+hight_offset +" height:"+ h +" count: "+count+" Total:"+total+" Num:"+num);

// $('.sec-inner--appFeatures .left-col').animate({
// scrollTop: (hight_offset)
// }, 500, "linear", function () {
// scrolling = false;

// });

// if (num == parseInt(count - 1)) {
// $(".sec-inner--appFeatures .left-col").unbind("mousewheel");
// $(".sec-inner--appFeatures .left-col").bind("mousewheel");

// } else if (num == 0) {
// $(".sec-inner--appFeatures .left-col").unbind("mousewheel");
// $(".sec-inner--appFeatures .left-col").bind("mousewheel");

// } else {
// bindSection();

// }
// }
// }

// function bindSection() {
// $('.sec-inner--appFeatures .left-col').bind('mousewheel DOMMouseScroll', function (event) {
// event.preventDefault();
// total = $(".sec-inner--appFeatures .left-col").find('.mediaObject').length;
// h = $(".sec-inner--appFeatures .left-col").height();
// scroll(event, h, total);
// })
// };

Sunday, December 9, 2018

Scroll To Top Jquery Function and html

<script>

$(window).scroll(function() {
    if ($(window).scrollTop() > 100) {
        // > 100px from top - show div
      $('.scrollBtn').show();

    }
    else {
        // <= 100px from top - hide div
      $('.scrollBtn').hide();
    }
});

$("#button").click(function() {
   $('html, body').animate({
        scrollTop: $("header").offset().top
    }, 2000);
});$

</script>

<div class="scrollBtn" style="display: none;"> <
a href="javascript:;" id="scrollButton"><img src="images/arrowUp.png"></a>
</div>

<style>
.scrollBtn {
position: fixed; 
right: 20px; 
bottom: 20px; 
width: 40px; 
height: 40px; 
z-index: 10;}
.scrollBtn img {width: 100%; }
</style>

Wednesday, December 5, 2018

Random Color return in PHP function

function random_background_image(){
$rand = array('0', '1', '2', '3', '4', '5', '6', '7', '8', '9', 'a', 'b', 'c', 'd', 'e', 'f');
return $color = '#'.$rand[rand(0,15)].$rand[rand(0,15)].$rand[rand(0,15)].$rand[rand(0,15)].$rand[rand(0,15)].$rand[rand(0,15)]."45";
}

// function call
echo random_background_image();

Sunday, December 2, 2018

Redirect Domain and its all urls to you New domain using .htaccess

Using .htacess you can redirect the domain or page or link into your own or even can change the url of your domain in the .htaccess file.

Here is simple example to redirect the old domain to new domain in the .htaccess file

Permanant Redirect (301)

Syntax:
-------------------------------------------------------------------------------------
Redirect 301 / https://yourdomain.com/
Redirect 301 https://yourolddomain.com/ https://yournewdomain.com/

Pages