Web Code Addict: 2018

Friday, December 28, 2018

Photography Template HTML coming soon...

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

Tuesday, August 28, 2018

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.

Friday, August 24, 2018

How to Show/Hide Read More link With jQuery?

Sometimes you have long text and few space to show it, with jQuery and CSS is very simple to hide part of the text and create a "Read more" link.

So, this is the HTML, please note that the value of links DIV ID is replicated as CLASS in the links and in the extra text:

<div class="section">
<div id="lorem">
Lorem ipsum dolor sit amet
<a class="read lorem" href="#">(Read more...)</a>
 <a class="read hide lorem" href="#">(Hide...)</a>
 </div>

<div class="more lorem">
Praesent commodo, tellus vehicula facilisis laoreet,enim tellus sagittis metus, vel posuere risus tellus vel quam. Praesent fermentum, risus nec sagittis volutpat
 </div>

</div>
<div class="section">
<div id="nullam">
Nullam fringilla hendrerit nisi et varius.
<a class="read nullam" href="#">(Read more...)</a>
 <a class="read hide nullam" href="#">(Hide...)</a>
 </div>

<div class="more nullam">
Mauris blandit ullamcorper purus, sit amet imperdiet tortor suscipit et. Nulla luctus magna eu dolor tempor pharetra. Sed egestas, massa id consectetur
 </div>

</div>

With CSS we hide one of the links and the extra text.

<style type="text/css">
.more, .hide{ display:none;}
</style>

Then the jQuery!

$(".read").click(function (){
    var i=$(this).parent().attr("id"); //We get the ID in the parent DIV 
    $("a."+i).toggle();  //switch the link with toggle()
    $("div."+i).slideToggle("slow");
  });

Friday, August 10, 2018

Hide top nav on scroll

HTML:

<header class="header">
    <div class="nav-top">
        <span>Top Nav</span>
    </div>
    <nav class="navbar">
        <div class="container">
            <ul class="navbar-menu">
                <li><a href="">Home</a></li>
                <li><a href="">About</a></li>
                <li><a href="">Info</a></li>
                <li><a href="">Business</a></li>
                <li><a href="">Blog</a></li>
                <li><a href="">Contact</a></li>
            </ul>
        </div>
    </nav>
</header>

CSS:



header {  
   background: #f5b335;  
   position: fixed;  
   top: 0;  
   width: 100%;
}
.nav-top{  
   background: #045292;   
   padding: 10px 0;  
   text-align: center;
}

Jquery:

  var headerHeight = $('header').outerHeight();
    $(window).scroll(function () {
        if ($(window).scrollTop() &gt; headerHeight) { 
            $('#top_nav').slideUp("slow");
        }
        else{
            $('#top_nav').slideDown("slow");
        }
  });

Thursday, August 9, 2018

add/remove active class for ul list with jquery?

html

<ul class="nav nav-list">
  <li class='nav-header'>Test</li>
  <li class="active"><a href="page1.php">Page 1</a></li>
  <li><a href="page2.php">Page 2</a></li>
  <li><a href="page3.php">Page 3</li>
</ul>

jquery:

 $('.nav-list').click(function() {

    //console.log("Clicked");
    $('.nav-list li.active').removeClass('active');
    $(this).addClass('active');
});

Pages