Web Code Addict: September 2018

Tuesday, September 18, 2018

if section scroll top add remove active class

<div class="wrapper">
   <section class="sec" style="height:500;  background: #24dab4;"></section>
   <section class="sec" style="height:500;  background: #6610f2;"></section>
   <section class="sec" style="height:500;  background: #28a745;"></section>
   <section class="sec" style="height:500;  background: #8bc34a;"></section>
</div>

$(window).scroll(function() {
    var windscroll = $(window).scrollTop();
    if (windscroll >= 100) {
        $('nav').addClass('fixed');
        $('.wrapper .sec').each(function(i) {
            if ($(this).position().top <= windscroll - 100) {
                $('.sec.active').removeClass('active');
                $('.sec').eq(i).addClass('active');
            }
        });

    } else {
        $('.sec.active').removeClass('active');
        $('.sec:first').addClass('active');
    }

}).scroll();

Wednesday, September 12, 2018

How to Enable scroll wheel zooming on a map on click ?

<iframe class="map" width="100%" height="450" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="https://www.google.com/maps/embed/v1/place?q=Status201%20Web%20Development&amp;key=AIzaSyCCGx7iveK21dme8OuLgX9Je7TUDDCw3_A" class=""></iframe>



iframe {





width: 100%;
display: block;
pointer-events: none;
position: relative;





}

iframe.clicked {
pointer-events: auto;
}


   <script>

       $('.map-container').click(function(){

       $(this).find('iframe').addClass('clicked')}).mouseleave(function(){

       $(this).find('iframe').removeClass('clicked')});

   </script>

Friday, September 7, 2018

What is jQuery?

jQuery is a fast, small, and feature-rich JavaScript library. It makes things like HTML document traversal and manipulation, event handling, animation, and Ajax much simpler with an easy-to-use API that works across a multitude of browsers. With a combination of versatility and extensibility, jQuery has changed the way that millions of people write JavaScript.

Basic syntax is: $(selector).action()

A $ sign to define/access jQuery
A (selector) to "query (or find)" HTML elements
A jQuery action() to be performed on the element(s)

Examples:

$(this).hide() - hides the current element.

$("p").hide() - hides all <p> elements.

$(".test").hide() - hides all elements with class="test".

$("#test").hide() - hides the element with id="test".

EXAMPLE:

$(document).ready(function(){

// jQuery methods go here...

});

Thursday, September 6, 2018

what is javascript?

Javascript is a dynamic computer programming language. It is supported by most web browsers including Chrome, Firefox, Safari, internet Explorer, Edge, Opera, etc. Most mobile browsers for smart phones support JavaScript too. It is lightweight and most commonly used as a part of web pages, whose implementations allow client-side script to interact with the user and make dynamic pages. It is an interpreted programming language with object-oriented capabilities.

JavaScript was first known as LiveScript, but Netscape changed its name to JavaScript, possibly because of the excitement being generated by Java. JavaScript made its first appearance in Netscape 2.0 in 1995 with the name LiveScript. The general-purpose core of the language has been embedded in Netscape, Internet Explorer, and other web browsers.

Javascript History

JavaScript was developed by Brendan Eich in 1995, which appeared in Netscape, a popular browser of that time.

JavaScript Engine

JavaScript engine in the browser interprets, compiles and executes JavaScript code which is in a web page. It does memory management, JIT compilation, type system etc. Each browser includes different JavaScript engines.

Tuesday, September 4, 2018

Get height of screen window and height of div jquery

<body class="main">
   <div class="main-banner" style="background:red;">
   </div>
</body>

   $(document).ready(function() {
        function setHeight() {
            windowHeight = $(window).innerHeight();
            $('.main-banner').css('height', windowHeight);
        };
                
        setHeight();
        $(window).resize(function() {
            setHeight();
        });
    })

Monday, September 3, 2018

One button clicked another buttons click event

<input type="button" id="firstButton" onclick="ExistingLogic()" />
<input type="button" id="secondButton"/>


$('#secondButton').click(function(){
    $("#firstButton").click();
})

Pages