PHP Kishan: Example

Showing posts with label Example. Show all posts

Friday, 5 March 2021

Add and remove a class on click using jQuery

jQuery(document).ready(function(){

jQuery('#btnSubmit').on('click', function() {

jQuery(this).addClass('toggle').removeClass('codepen');

});

</script>

According To Question:

#jQuery add remove class onclick codepen

#Add Class jQuery

#jQuery Onclick Remove Class And Addclass

#toggle class jQuery

#Onclick Add And Remove Class To Body

#Add Class JavaScript

#jQuery Add Class On Click

#Remove Class In JavaScript

#Add Remove Class Onclick By jQuery

Saturday, 20 February 2021

Change Div Order In Mobile View By jQuery

Web View

Before Change After Change

<html>

<head>

<title>Change Div Order In Mobile View By jQuery.</title>

body{

padding:20px;

}

#container {

width:100%;

margin: 0 auto;

text-align: center;

}

.display_inline{

border: 2px solid;

width: auto;

display: inline-block;

padding: 150px 100px;

margin: 22px;

font-size: 50px;

color: #fff;

font-family: emoji;

}

#div1{

background:#1a3a5f;

}

#div2{

background:#79286c;

}

@media only screen and (max-width: 600px) {

.display_inline{

width: auto;

display: block !important;

bolder:2px solid red;

padding: 10%;

}

</style>

</head>

<body>

Div One

</div>

Div Two

</div>

<script type="text/javascript">

function listenWidth( ) {

if (jQuery(window).width() <= 600) {

jQuery("#div2").remove().insertBefore(jQuery("#div1"));

} else {

jQuery("#div2").remove().insertAfter(jQuery("#div1"));

}

jQuery(document).ready(function(){

listenWidth();

});

jQuery(window).resize(function() {

listenWidth();

});

</script>

</body>

</html>

According To Question:

#Change Div Position In Mobile

#How To Change Div Position In Responsive

#jQuery Change Order Of Divs

#Change Order Of Divs Responsive

#Div Order Change jQuery

#jQuery Change Column Order

#Javascript Reorder Divs

#Change Div Position By jQuery

Tuesday, 11 August 2020

How To Search In PHP Array Element Containing String | Like Binod

$example = array(

"who" => "Who is Binod?",

"name" => "Dose Binod Tharu is Binod?",

"where" => "Where is Binod?",

"whose" => "Whose name is binod?",

"YouTube" => "Dose Binod in the YouTube?",

"meaning" => "What is Binod meaning?",

"fullform" => "What is Binod full form?",

"pronunciation" => "What is Binod pronunciation?",

"english" => "Dose Vinod in english",

"how" => "How to write Vinod in sanskrit?",

"nickname" => "Which best nickname for Vinod?",

"kon" => "Binod kon he?",

"kaha" =>"Binod kaha he?",

"kiska" =>"Binod kiska name he?"

);

$searchword = 'Binod';

$search_results = array_filter($example, function($var) use ($searchword) {

return preg_match("/\b$searchword\b/i", $var);

});

echo "Search Word: ".$searchword;

echo "<br>Search Results";

echo "<pre>";

echo "Total Search: ".count($search_results);

echo "<hr>";

print_r($search_results);

echo "</pre>";

OutPut:

Friday, 15 November 2019

How can I remove a particular value from an array in JavaScript with Example?

<!DOCTYPE html>
<html>
<head>
   <title>How can I remove a particular value from an array in JavaScript with Example? -PHP Kishan</title>
   <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js" crossorigin="anonymous"></script>
   <script>
   jQuery(document).ready(function(){
       orig_array = ['BattleGrounds', 'Fornite Battle Royale', 'League of Legends (LOL)', 'Counter-Strike: Global Offensive (CS: GO)', 'HearthStone', 'Minecraft', 'DOTA 2', 'Apex Legends', 'The Division 2', 'Splatoon 2', 'Rummy'];   //Ex: Game List
       document.getElementById("orig_array").innerHTML = orig_array;


       remove_game = orig_array.indexOf('Fornite Battle Royale'); // You can remove only one value (Game name)
       if (remove_game > -1) {
          orig_array.splice(remove_game, 1);
       }
       document.getElementById("new_array").innerHTML = orig_array;
   });
   </script>
</head>
<body>
   <p><strong>Array Games List: </strong><br>=> <span id="orig_array"></span></p>
   <p><strong>Reomve Game From List: </strong><br>=> Fornite Battle Royale</p>
   <p><strong>New Array Games List: </strong><br>=> <span id="new_array"></span></p>
</body>
</html>

Sunday, 28 July 2019

How to compare dates greater than in php?

<?php
$today = date('d-m-Y'); // Date must be in 'd-m-Y' format
$date = "07-07-2020";

if(strtotime($date) < strtotime($today)){
echo $date .' date is smaller than today '.$today .' date';
}else{
echo $today .' date is larger than today '.$date .' date';
}
?>

Wednesday, 10 July 2019

How do I set and get a cookie with jQuery?

Sunday, 19 May 2019

HTML to PDF Example

<!DOCTYPE html>
<html lang="en-US">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>HTML to PDF Example - PHP Kishan</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.5.3/jspdf.debug.js"></script>
<script src="https://html2canvas.hertzen.com/dist/html2canvas.js"></script>
<style>
.center{text-align: center;}
.pdfdiv{background-color: #d9ec58;margin: 50px;padding:30px;}
.innerdiv{padding: 10px;margin: 15px 0;border: 2px solid #ea5555;}
.loader-div {position: fixed;top: 0;left: 0;width: 100%;height: 100%;background: rgba(0, 0, 0, 0.66);z-index: 9;bottom: 0;display: block;text-align:center;color: #fff;font-size: 22px;padding: 30% 0;}
.dp-img{border: 1px solid #e65959;border-radius: 50%;padding: 12px;margin: 6px;}
.btn-div{margin: 58px auto;}
.downloadpdf{text-align: center;background-color: #27d848;width: max-content;padding: 10px;border-radius: 10px;margin: 0 auto;font-size: 30px;text-decoration-line: none;}
.downloadpdf:hover{background-color: #d1d451;}
</style>
</head>
<body>
    <div class="btn-div center">
        <a class="downloadpdf" href="javascript:;" data-pdf="html2pdf" data-target="pdfdiv">Download PDF</a>
    </div>
    <div id="pdfdiv" class="pdfdiv center">
        <div class="innerdiv">
            <h1>This is a Heading</h1>
            <p>This is a paragraph.</p>
            <h5>This is a image.</h5>
            <div>
                <img class="dp-img" src="image.png" alt="HTML to PDF">
            </div>
        </div>
        <div class="innerdiv">
            <h1>This is a Heading</h1>
            <p>This is a paragraph.</p>
            <h5>This is a image.</h5>
            <div>
                <img class="dp-img" src="image.png" alt="HTML to PDF">
                <img class="dp-img" src="image.png" alt="HTML to PDF">
                <img class="dp-img" src="image.png" alt="HTML to PDF">
                <img class="dp-img" src="image.png" alt="HTML to PDF">
                <img class="dp-img" src="image.png" alt="HTML to PDF">
                <img class="dp-img" src="image.png" alt="HTML to PDF">
                <img class="dp-img" src="image.png" alt="HTML to PDF">
                <img class="dp-img" src="image.png" alt="HTML to PDF">
            </div>
        </div>
        <div class="innerdiv">
            <h1>This is a Heading</h1>
            <p>This is a paragraph.</p>
            <h5>This is a image.</h5>
            <div>
                <img class="dp-img" src="image.png" alt="HTML to PDF">
            </div>
        </div>
    </div>
    <div class="btn-div center">
        <a class="downloadpdf" href="javascript:;" data-pdf="html2pdf" data-target="pdfdiv">Download PDF</a>
    </div>
    <div class="loader-div">Loading...</div>
<footer>
<script>
jQuery(document).ready(function(){
    jQuery('.loader-div').hide();
    jQuery(".downloadpdf").click(function(e){
        jQuery('.loader-div').show();
        var pdfname = jQuery(this).data('pdf');
        var pdftarget = jQuery(this).data('target');
        console.log("PDF NAME:" + pdfname + "PDF HTML Div: " + pdftarget);


        var pdfw = jQuery('#'+pdftarget).width();
        var pdfh = jQuery('#'+pdftarget).height();
        // console.log ('div width: '+ pdfw + ' div height: '+pdfh);

        html2canvas(document.getElementById(pdftarget)).then(function(canvas) {
            var imgData = canvas.toDataURL("image/jpeg");
            // console.log(imgData);

            var pdf = new jsPDF('','px',[pdfw,pdfh]);
            var pwidth = pdf.internal.pageSize.getWidth();
            var pheight = pdf.internal.pageSize.getHeight();
            // console.log('PDF pwidth: '+ pwidth + ' PDF height: '+pheight);

            pdf.addImage(imgData, 'JPEG', 0, 0, pwidth, pheight);
            pdf.save(pdfname+'.pdf');
            jQuery('.loader-div').hide();
        }).catch(function(M) {
            console.log(M);
        });
    });
});
</script>
</footer>
</body>
</html>

PHP Kishan