Pages

JQuery select the clicked class

Here is a JQuery code snippet  to get the clicked div elements's attribute or the value with the similar class names on click function

<script>

$(document).ready(function(){
    $('.simg').click(function(){
        //var pth = $('.simg').attr('src');
        
        var pth = $(this).attr('src');
        
        console.log(pth);
    });    
});

</script>

JQuery select the clicked class

Web Designer color palette 2015

Recomended Web designer color palette for 2015

Web Designer color palette 2015

Colors used by Google.com for the Olympic games


JQuery Detect the browser window top and change CSS on page

JQuery Detect the browser window top and change CSS on page

 var t = $("#nav2").offset().top;

    $(document).scroll(function() {
        if ($(this).scrollTop() > t)
        {
            $('#nav2').css('position', 'fixed');
            $('#nav2').css('top', '0');
        }
        else
        {
            $('#nav2').css('position', 'relative');
        }
    });

Apache localhost to access on LAN computers

Allow your Apache local host to access in LAN computers for Apache 2.4.x
Find  <Directory "c:/wamp/www"> </Directory>  in your Apache httpd.conf file and Replace with this code

Apache localhost to access on LAN computers


<Directory "c:/wamp/www">
    #
    # Possible values for the Options directive are "None", "All",
    # or any combination of:
    #   Indexes Includes FollowSymLinks SymLinksifOwnerMatch ExecCGI MultiViews
    #
    # Note that "MultiViews" must be named *explicitly* --- "Options All"
    # doesn't give it to you.
    #
    # The Options directive is both complicated and important.  Please see
    # http://httpd.apache.org/docs/2.4/mod/core.html#options
    # for more information.
    #
    Options Indexes FollowSymLinks

    #
    # AllowOverride controls what directives may be placed in .htaccess files.
    # It can be "All", "None", or any combination of the keywords:
    #   AllowOverride FileInfo AuthConfig Limit
    #
    AllowOverride All

    #
    # Controls who can get stuff from this server.
    #

    # This looks after 127.0.0.1 ::1 and localhost
    Require local
    # This should be the first 3 quartiles of the standard subnet ipaddress range
    Require ip 192.168.0
</Directory>

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

Search This Blog