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.

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

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() > headerHeight) { 
            $('#top_nav').slideUp("slow");
        }
        else{
            $('#top_nav').slideDown("slow");
        }
  });

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

CSS tricks to show or hide horizontal and vertical scroll bar

CSS tricks to show or hide horizontal and vertical scroll bar

Sometimes we need to add scroll bar to a div or span whenever text in the div or span get overflow. scroll bar is supported in all browsers like IE 5+, FF 3.5+, and Safari, Opera etc. To show scroll bar, we need to specify overflow property of css to "visible" or "auto". 

Horizontal and Vertical Scroll Bar

 .scrollbar
{
   overflow: auto; /*for horizontal and vertical scroll bars */
}

Horizontal Scroll Bar

.horizontal-scrollbar
{
       overflow-x: auto; /*for horizontal scroll bar */
       overflow-y: hidden; /*for hiding vertical scroll bar */
}

Vertical Scroll Bar

 .vertical-scrollbar
{
   overflow-x: hidden; /*for hiding horizontal scroll bar*/
   overflow-y: auto; /*for vertical scroll bar*/
}

Important to remember:

1. To show scroll bar always set overflow to "visible". It will show scroll bar whether text get overflow or not.
2. To show scroll bar only, when text get overflowed, set overflow property to "auto".

UI UX DESIGN

UI UX DESIGN

Design is a broad stream of subjects and isn’t limited to graphic design. When someone says “I’m a designer’, it is not immediately clear what they actually do day to day. There are a numerous pillars of responsibility which together holds design upright.

Design related roles exist in a range of domains viz, graphic design, textile design, interior design, fashion design, ceramic design, print design and more. With the relatively recent influx of tech companies focused on creating interfaces for screens, many new design roles have emerged.

Job titles like UX Developer or UI designer have emerged as the future front of design roles. Its meaning is unfamiliar even to designers who come from other industries.