Pages

How to Stop Jquery code running on small screens

Using the IF ELSE statement and CSS media queries you can stop running a JQuery script on a Small screen or a mobile device which has a lowe screen resolution. This will be great to stop Jquery animations on the mobile phones

HTML Code

<div id="mobiledetech"></div>

<!--You can place this HTML somewhere in your HTML page-->

CSS Code

    .mobiledetech{
        display: block;
    }

    @media (min-width: 767px) {

        .mobiledetech {
            display: none;
            /* increases the carousel height so it looks good on phones */
        }
    }

/* This will detect the div tag to diaplay or display none*/


JQUery Code

<script>
//Apllying condition-
    $(window).scroll(function() {
        if ($(".toggleMenu").css("display") == "none") {
// Jquery code to run    
        var scroll = $(window).scrollTop();
        if (scroll >= 400) {
            $(".navbar-default").addClass("navbar-fixed-top slideDown hitebg");
            $('.line2').css('display', 'none');
        } else {
            $(".navbar-default").removeClass("navbar-fixed-top slideDown hitebg");
            $('.line2').css('display', 'block');
        }  
// END
        }
    });
</script>

// If the div tag is display none the Jquery will run on the page

Jquery Are you sure to Submit Confirmation

"Are you sure" alert box with Jquery for submit or a button on click

Jquery Are you sure to Submit Confirmation


Script

<script>
$(':submit[name="topup"][value="Request"]').click(function() {
    return window.confirm(this.title || 'Are you sure?');
});
</script>

Jquery Numbers Only Text Box

Jquery Numbers Only Text Box

Jquery Numbers Only Text Box


HTML Code for number only typed text box

<input class="login"  type="text" onkeypress="return isNumber(event)" name="reserve" id="reserve" />

JQuery Code

<script>
function isNumber(evt) {
    evt = (evt) ? evt : window.event;
    var charCode = (evt.which) ? evt.which : evt.keyCode;
    if (charCode > 31 && (charCode < 48 || charCode > 57)) {
        return false;
    }
    return true;
}
</script>

Jquery move background image horizontally on Scroll

How to Move the background image horizontal with the mouse as you scroll with Jquery and CSS which can also use as a horizontal parallax effect. This is done by adding a css class or an id and changing the background image with the JavaScript.

Jquery move background image horizontally on Scroll


The code

<script>
    $(window).scroll(function() {
        var x = $(this).scrollTop();
        $('.yourDivClass').css('background-position', parseInt(-x / 0.5) + 'px');
    });
</script>

How to Protect PHP include files

Add this .htaccess file to your includes of the views folder of your PHP project to Protect  include files. This file prevents that your .PHP view files are accessed directly from the outside

How to Protect PHP include files

CODE

<Files ~ "\.(htaccess|php)$">
order allow,deny
deny from all
</Files>

Search This Blog