How To Detect HTTP Or HTTPS in JavaScript?

console.log(location.protocol);
//output => https:

You can change the protocol of the site simply by using following logic:

var protocol = location.protocol === 'https:' ? 'http' : 'https';

console.log(protocol);
//output => http

Free Download Wedding Planner – Beautiful Wedding Event & Planner Responsive HTML5 Template

The Wedding is Responsive HTML theme for wedding planner websites.  which helps you to build your own site. Wedding Planner theme has a fully responsive layout.

Key Features

• Bootstrap 3.3.7
• Developer-friendly  & Clean HTML5 and CSS3 code
• Google Fonts Support
• Single page theme
• Scroll animation
• Fully Customization
• Unique Wedding design
• Responsive wedding website
• 
  

Download free: WeddingPlanner

Photography Template HTML coming soon...

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();​

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>

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...

});

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.

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();
        });
    })

One button clicked another buttons click event

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

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

Create a scrolling anchor link with jQuery

Very simply put, this will function like a normal internal anchor link or named anchor link, but will scroll to the specified destination instead of merely jumping there. It’s a really easy-to-implement and awesome thing to add to almost any website.

I’m going to jump right into it.

The HTML
All that is needed for this example is an element to click, and an element to scroll to.

<a id="scroll">Click here to scroll</a>

<img src="images/cat.png" alt="cat" />

I’ve decided to scroll to an image of a random cat, however I think this would be most useful for something like a table of contents.

The jQuery/Javascript
We will be using the click() event, animate effect, scrollTop() manipulation and offset manipulation.

// When the Document Object Model is ready
jQuery(document).ready(function(){
// 'catTopPosition' is the amount of pixels #cat
// is from the top of the document
var catTopPosition = jQuery('#cat').offset().top;

// When #scroll is clicked
jQuery('html, body').animate({scrollTop:catTopPosition}, 'slow');
// Stop the link from acting like a normal anchor link
return false;
});
});

Fairly simple and straight forward jQuery.
Note: jQuery('html, body') is necessary for cross-browser compatibility.