Naveen Yogi, Naveen Web Design, Web Designing: 2017

Friday 8 September 2017

How to create bootstap nested accordion

<!DOCTYPE html>
<html lang="en">
<head>
<title>Accordion</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<style>
    .panel-body > a {color: #333; display: block; font-size: 16px; text-decoration: none;}
.panel-body {padding: 5px 30px;}
.panel-heading {background-color: transparent; border: medium none; color: #333; padding: 5px;}
.panel-title > a {display: block; text-decoration: none;}
.panel-default{border:none;}
.panel-title a {padding-left: 20px;}
.panel > a {color: #333; display: block; font-size: 16px; text-decoration: none;}
.plus-ic, .minus-ic {background-color: #333; border-radius: 50%; color: #fff; height: 20px; line-height: 20px; margin-right: 6px; text-align: center; width: 20px;}
a[aria-expanded="true"] .minus-ic{display: inline-block;}
a[aria-expanded="true"] .plus-ic{display: none;}
a[aria-expanded="false"] .plus-ic{display: inline-block;}
a[aria-expanded="false"] .minus-ic{display: none;}
.minus-ic{display: none;}

.collapseOne1 .plus-ic{display: none;}
.collapseOne1 .minus-ic{display: inline-block;}
.collapseOne1.collapsed .minus-ic{display: none;}
.collapseOne1.collapsed .plus-ic{display: inline-block;}
</style>

</head>
<body>

<div class="panel-group" id="accordion1">
            <div class="panel panel-default">
                <div class="panel-heading">
                    <h4 class="panel-title">
                        <a data-toggle="collapse" data-parent="#accordion1" href="#collapseOne" class="collapseOne1"><span class="fa fa-plus plus-ic"></span><span class="fa fa-minus minus-ic"></span>My Account
                        </a>
                    </h4>
                </div>
                <div id="collapseOne" class="panel-collapse collapse in">
                    <div class="panel-body">
                        <a href="my-account.php">My Account</a>
                        <a href="login-info.php">Login Info</a>
                        <a href="contact.php">Contact</a>
                        <a href="company.php">Company</a>
                        <a href="payment.php">Payment</a>
                        <a href="#">Travel</a>
                        <a href="#">Documents</a>
                        <a href="#">Reports</a>
                        <a href="#">Email Preferences</a>
                        <a href="#">Account Deactivation</a>
                    </div>
                </div>
            </div>
            <div class="panel panel-default">
                <div class="panel-heading">
                    <h4 class="panel-title">
                        <a href="#">My K-Method Certification </a>
                    </h4>
                </div>

            </div>

            <div class="panel panel-default">
                <div class="panel-heading">
                    <h4 class="panel-title">
                        <a data-toggle="collapse" data-parent="#accordion1" href="#collapseTwo"><span class="fa fa-plus plus-ic"></span><span class="fa fa-minus minus-ic"></span>Profile Builder
                        </a>
                    </h4>
                </div>
                <div id="collapseTwo" class="panel-collapse collapse">
                    <div class="panel-body">
                        <div class="panel-body">
                            <a href="my-resume.php"><span class="fa fa-exclamation-circle"></span> Resume</a>
                            <a href="about-me.php"><span class="fa fa-exclamation-circle"></span> About Me</a>
                            <a href="#"><span class="fa fa-exclamation-circle"></span> Skills</a>
                            <a href="#"><span class="fa fa-exclamation-circle"></span> Work Experience</a>
                            <a href="#"><span class="fa fa-exclamation-circle"></span> Certifications</a>
                            <a href="#"><span class="fa fa-exclamation-circle"></span> References</a>
                            <a href="#"><span class="fa fa-exclamation-circle"></span> Education</a>
                            <div class="panel-group" id="accordion21">
                                <div class="panel">
                                    <a data-toggle="collapse" data-parent="#accordion21" href="#collapseTwoOne"><span class="fa fa-plus plus-ic"></span><span class="fa fa-minus minus-ic"></span>Training Delivery
                                    </a>
                                    <div id="collapseTwoOne" class="panel-collapse collapse">
                                        <div class="panel-body">
                                            <a href="#">Courses</a>
                                            <a href="#">MCT Identification</a>
                                        </div>
                                    </div>
                                </div>
                                <div class="panel ">
                                    <a data-toggle="collapse" data-parent="#accordion21" href="#collapseTwoTwo"><span class="fa fa-plus plus-ic"></span><span class="fa fa-minus minus-ic"></span>Design/Developement
                                    </a>
                                    <div id="collapseTwoTwo" class="panel-collapse collapse">
                                        <div class="panel-body">
                                            <a href="#">Authoring Tools</a>
                                            <a href="#">Work Samples</a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

</body>
</html>

Saturday 12 August 2017

Friday 21 July 2017

How to add attribute in HTML with jQuery

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$(document).ready(function(){

        $("a").attr("target", "_blank");

});
</script>
</head>
<body>
<a href="http://naveenwebdesign.blogspot.in" id="nvn">Naveen web design</a>
</body>

Saturday 1 July 2017

Show more and show less text button jQuery

<html>
<head>
    <title>jQuery Read More/Less Toggle Example</title>
</head>
<body>
    <span class="more">
      Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    </span>
    <br><br>
    <div class="more">
      Morbi placerat imperdiet risus quis blandit. Ut lobortis elit luctus, feugiat erat vitae, interdum diam. Nam sit amet arcu vitae justo lacinia ultricies nec eget tellus. Curabitur id sapien massa. In hac <a href="#">habitasse</a> platea dictumst. Integer tristique leo consectetur libero pretium pretium. Nunc sed mauris magna. Praesent varius purus id turpis iaculis iaculis. Nulla <em>convallis magna nunc</em>, id rhoncus massa ornare in. Donec et feugiat sem, ac rhoncus mauris. Quisque eget tempor massa.
    </div>
</body>
</html>



.morecontent span {
    display: none;
}
.morelink {
    display: block;
}



$(document).ready(function() {
    // Configure/customize these variables.
    var showChar = 100; // How many characters are shown by default
    var ellipsestext = "...";
    var moretext = "Show more >";
    var lesstext = "Show less";


    $('.more').each(function() {
        var content = $(this).html();

        if(content.length > showChar) {

            var c = content.substr(0, showChar);
            var h = content.substr(showChar, content.length - showChar);

            var html = c + '<span class="moreellipses">' + ellipsestext+ ' </span><span class="morecontent"><span>' + h + '</span>  <a href="" class="morelink">' + moretext + '</a></span>';

            $(this).html(html);
        }

    });

    $(".morelink").click(function(){
        if($(this).hasClass("less")) {
            $(this).removeClass("less");
            $(this).html(moretext);
        } else {
            $(this).addClass("less");
            $(this).html(lesstext);
        }
        $(this).parent().prev().toggle();
        $(this).prev().toggle();
        return false;
    });
});

Tuesday 20 June 2017

How to apply simple parallax scrolling

function parallax(){
    var scrolled = $(window).scrollTop();
    $('.bg').css('top', -(scrolled * 0.2) + 'px');
}

$(window).scroll(function(e){
    parallax();
});

How to apply parallax effect (changing active class on menu on scroll)

************* HTML**************

<header>
<nav>
    <span class="movetext">Company Name</span>
    <img class="" src="https://www.matchbook.com/assets/images/icons/white/Twitter_logo_white.png">
    <a href="#portion1" class="active">Portion1</a>
    <a href="#portion2">Portion2</a>
    <a href="#portion3">Portion3</a>
    <a href="#portion4">Portion4</a>
</nav>
</header>

<div class="portion">
<h2>Portion 1.</h2>
</div>

<div id="portion1" class="info">
<h3>Heading for Portion 1</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Debitis nobis ut dicta quisquam officia deleniti, amet. Obcaecati atque, cumque quae culpa ad hic commodi provident pariatur, iure nobis voluptatibus laborum amet temporibus quia, dolores veritatis, repellendus consectetur. Ut ullam officiis minus quod assumenda facere quaerat, esse, magni, aliquid culpa vero.</p>
<div class="button">
    <a href="#">Example Button</a>
</div>
</div>

<div class="portion two">
<h2>Portion 2</h2>
</div>

<div id="portion2" class="info">
<h3>Heading for Portion 2</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempora pariatur voluptate laboriosam impedit praesentium sed, nihil, dignissimos et minima recusandae quaerat enim consectetur. Molestiae assumenda distinctio, rem nostrum dolores repellendus.</p>
<div class="button">
    <a href="#">Example Button</a>
</div>
</div>

<div class="portion">
<h2>Portion 3.</h2>
</div>

<div id="portion3" class="info">
<h3>Heading for Portion 3.</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odio accusamus in vitae saepe harum soluta reiciendis eaque repellat distinctio quos voluptate nemo error ratione numquam, nisi quibusdam veritatis repudiandae ea possimus rerum pariatur dolores? Optio inventore iusto, voluptatibus numquam aperiam, harum maxime beatae minima aliquam quas sapiente totam cumque unde..</p>
<div class="button">
    <a href="#">Example Button</a>
</div>
</div>

<div class="portion two">
<h2>Portion 4.</h2>
</div>

<div id="portion4" class="info">
<h3>Heading for Portion 4.</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Magni incidunt quos iste voluptates, tenetur ad repudiandae ea fuga eveniet quam, unde iure suscipit rem odit in, sint nulla itaque? Labore beatae, est voluptatibus saepe rerum illum repudiandae quasi perspiciatis, molestiae quidem fugiat voluptates voluptate neque totam earum enim mollitia iure quod tempora veritatis quam optio. Error odit laudantium eum voluptate.</p>
<div class="button">
    <a href="#">Example Button</a>
</div>
</div>
<footer class="info">
<div id="toTop"><a href="#"><img src="http://www.superdruglookatme.com/wp-content/themes/superdrug/images/top.png"></a></div>
<p>© 2014 Arif Hussain Bangash</p>

</footer>

********************************CSS**************************************

body {
margin: 0;
padding: 0;
font-family: "Source Sans Pro", sans-serif;
font-size: 20px;
}

header nav {
text-align: right;
background: rgba(0,0,0,0.6);
color: white;
font-size: 1em;
position: fixed;
width: 100%;
}
header nav a {
color: inherit;
text-decoration: none;
display: inline-block;
padding: 2em 1em .5em;
-webkit-transition: all .3s ease-in;
}
.small {
padding: .5em 1em;
}
header nav a:hover {
text-decoration: underline;
}

.active {
background: rgba(255,255,255,0.3);
}

.portion {

background-image: url('http://p1.pichost.me/640/60/1842352.jpg');
background-position: center center;
background-attachment: fixed;
background-size: cover;
text-align: center;
}
.portion.two {
background-image: url('http://cdn.desktopwallpapers4.me/media/thumbs_400x250/4/31677.jpg');
}
.portion h2 {
color: white;
font-weight: normal;
font-size: 3em;
padding: 2em 0;
margin: 0;
text-shadow: 0 0 10px black;
background: rgba(0,0,0,0.6);
}

.info {
background: #FFFAF0;
color: #777;
padding: 3em 20%;
}

.button {
text-align: center;
}
.button a {
display: inline-block;
border: 2px solid #777;
padding: .75em 1.5em;
color: #777;
text-decoration: none;
text-transform: uppercase;
border-radius: 5px;
letter-spacing: .15em;
word-spacing: .25em;
font-weight: bold;
transition: all 0.3s ease-in-out;
}
.button a:hover {
color: #FFFAF0;
background: #777;
}
footer.info {
color: #FFFAF0;
background: #777;
padding: 0 auto;
text-align: center;
}

#toTop img {
width: 50px;
}
#toTop img:hover {
cursor: pointer;
}
nav img {
z-index: 1000;
height: 2.5em;
position: absolute;
left: 40px;
top: 10px;
transition: all 0.5s linear;
}

.move {
top: -60px;
}

nav span {
position: absolute;
left: 40px;
top: 10px;
font-weight: bold;
transition: all 0.5s ease-in;
}

.movetext {
top: -30px;
}

*******************************jQuery****************************

// Smooth Scroll on clicking nav items
$('nav a').click(function () {
var $href = $(this).attr('href');
$('body').stop().animate({
    scrollTop: $($href).offset().top
}, 1000);
return false;
});

// back to top
$('#toTop a').click(function () {
$('body').animate({
    scrollTop: 0
}, 1000);
return false;
});

// Parallaxing + add class active on scroll
$(document).scroll(function () {

// parallaxing
var $movebg = $(window).scrollTop() * -0.3;
$('.portion').css('background-positionY', ($movebg) + 'px');

// add class active to nav a on scroll
var scrollPos = $(document).scrollTop() + 100;
$('nav a').each(function () {
    var currLink = $(this);
    var refElement = $(currLink.attr("href"));
    if (refElement.position().top <= scrollPos && refElement.position().top + refElement.height() > scrollPos) {
      $('nav a').removeClass("active");
      currLink.addClass("active");
    }
});

// changing padding of nav a on scroll
    if (scrollPos > 250) {
      $('nav a').addClass('small');
      $('nav img').addClass('move');
      $('nav span').removeClass('movetext');
    } else {
      $('nav a').removeClass('small');
      $('nav img').removeClass('move');
      $('nav span').addClass('movetext');
    }

});

Monday 15 May 2017

How to open a webpage on click with jQuery ( without anchor tag )

<html>
<head>
<title>linked</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
    $('.nv').click(function() {
    window.location.href='http://google.com';
    });
    });
</script>
</head>
<body>
<button class="nv">click here</button>
</body>
</html>

Thursday 13 April 2017

Hover effect on button (effect#2)

<html>
<head>
   <title>demo</title>
   <style>
      .outer{position: relative;transition: 2s all ease;max-width: 400px;margin:200px auto;}
      .outer img{width: 100%;}
      .outer:hover .over5{transform: scale(2);transition: 1.5s all ease;opacity: 0.1;}
      .circle{width:150px;height:150px;border-radius: 50%;border:2px solid ;}

      .over1 {
    position: absolute;
    text-align: center;
    z-index: 10;
    background-color: transparent;
    opacity: 1;
    border: 1px solid #b7985b;
    border-radius: 100%;
    animation: pulseplaybutton 4s linear infinite;
    animation-delay:0ms;
    width: 150px;
    height: 150px;
    top: 0px;
    left: 0px;
    box-shadow: 0 0 7px -3px #000;
}
.over2 {
    position: absolute;
    text-align: center;
    z-index: 10;
    background-color: transparent;
    opacity: 1;
    border: 1px solid #b7985b;
    border-radius: 100%;
    animation: pulseplaybutton 4s linear infinite;
    animation-delay: 1000ms;
    width: 150px;
    height: 150px;
    top: 0px;
    left: 0px;
    box-shadow: 0 0 7px -3px #000;
}
.over3 {
    position: absolute;
    text-align: center;
    z-index: 10;
    background-color: transparent;
    opacity: 1;
    border: 1px solid #b7985b;
    border-radius: 100%;
    animation: pulseplaybutton 4s linear infinite;
    animation-delay: 2s;
    width: 150px;
    height: 150px;
    top: 0px;
    left: 0px;
    box-shadow: 0 0 7px -3px #000;
}
.over4 {
    position: absolute;
    text-align: center;
    z-index: 10;
    background-color: transparent;
    opacity: 1;
    border: 1px solid #b7985b;
    border-radius: 100%;
    animation: pulseplaybutton 3s linear infinite;
    animation-delay: 1000ms;
    width: 150px;
    height: 150px;
    top: 0px;
    left: 0px;
    box-shadow: 0 0 7px -3px #000;
}
.over5 {
    position: absolute;
    text-align: center;
    z-index: 10;
    background-color: transparent;
    opacity: 1;
    border: 0.5px solid #b7985b;
    border-radius: 100%;
    width: 150px;
    height: 150px;
    top: 0px;
    left: 0px;
    transition: 0s all ease;
    transform: scale(1);
    box-shadow: 0 0 7px -3px #000;
}

      @keyframes pulseplaybutton {
0% {
    -webkit-transform: scale(1);
            transform: scale(1);
    opacity: 0; }
25% {
    -webkit-transform: scale(1.25);
            transform: scale(1.25);
    opacity: 0.3; }
100% {
    opacity: 0;
    -webkit-transform: scale(2);
            transform: scale(2); } }
   </style>
</head>
   <body>
      <div class="outer">
         <div class="circle"></div>
         <div class="over over1"></div>
         <div class="over over2"></div>
         <div class="over over3"></div>
         <div class="over over4"></div>
         <div class="over over5"></div>
      </div>
   </body>
</html>

Wednesday 12 April 2017

Hover effect on image (effect#1)

<html>
<head>
   <title>demo</title>
   <style>
      .outer{position: relative;overflow: hidden;transition: 0.5s all ease;max-width: 400px;margin:0 auto;}
      .outer img{width: 100%;}
      .over{position: absolute;width: 0;height: 0;background-color: rgba(255,255,255,0.5);transition: 0.5s all ease;opacity: 1;}
      .over1{left:0;top: 0;}
      .over2{right:0;top: 0;}
      .over3{left:0;bottom: 0;}
      .over4{right:0;bottom: 0;}
      .outer:hover .over{width: 100%;height: 100%;transition: 0.5s all ease;opacity: 0.5;}
   </style>
</head>
   <body>
      <div class="outer">
         <img src="image/bitcoin1.jpg">
         <div class="over over1"></div>
         <div class="over over2"></div>
         <div class="over over3"></div>
         <div class="over over4"></div>
      </div>
   </body>
</html>

Thursday 6 April 2017

How to use jquery to toggle class for 1 second every 5 seconds

setInterval(function(){ 
   // toggle the class every five second
   $('#maindiv').toggleClass('activeclass');  
   setTimeout(function(){
     // toggle back after 1 second
     $('#maindiv').toggleClass('activeclass');  
   },1000);

},5000);

jQuery scroll to anchor (minus set amount of pixels)

Tuesday 4 April 2017

How to change three classes one by one continuously

Thursday 2 March 2017

CSS Sliding Underline Menu

<html>
<head>
<style>
* {
box-sizing: border-box;
}

body {
font: 300 100% 'Helvetica Neue', Helvetica, Arial;
}

.container {
width: 50%;
margin: 0 auto;
}

ul li {
display: inline;
text-align: center;
}

a {
display: inline-block;
width: 25%;
padding: .75rem 0;
margin: 0;
text-decoration: none;
color: #333;
}

.two:hover ~ hr {
margin-left: 25%;
}

.three:hover ~ hr {
margin-left: 50%;
}

.four:hover ~ hr {
margin-left: 75%;
}

hr {
height: .25rem;
width: 25%;
margin: 0;
background: tomato;
border: none;
transition: .3s ease-in-out;
}
</style>
</head>
<body>
<div class="container">
<ul>
<li class="one"><a href="#">Uno</a></li><li class="two"><a href="#">Dos</a></li><li class="three"><a href="#">Tres</a></li><li class="four"><a href="#">Quatro</a></li>
<hr />
</ul>
</div>
</body>
</html>

Monday 27 February 2017

How to Show and hide divs at a specific time interval using jQuery

<html>
<head>
<title>demo</title>

<style>

</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</head>
<body>

<script type="text/javascript">
    $(document).ready(function(){
        //initially hide second h1
        $(".second").hide();
        $(".third").hide();
        $(".fourth").hide();


        function show_first(){
            $(".first").show();
            $(".second").hide();
            $(".third").hide();
            $(".fourth").hide();
            setTimeout(show_second,1000);
        }
        function show_second(){
            $(".first").hide();
            $(".second").show();
            $(".third").hide();
            $(".fourth").hide();
            setTimeout(show_third,1000);
        }


        function show_third(){
            $(".first").hide();
            $(".second").hide();
            $(".third").show();
            $(".fourth").hide();
            setTimeout(show_fourth,1000);
        }

        function show_fourth(){
            $(".first").hide();
            $(".second").hide();
            $(".third").hide();
            $(".fourth").show();
            setTimeout(show_first,1000);
        }


        setTimeout(show_first,1000);

    });
</script>

<div class="media first">show first div 1 seconds</div>
<div class="media second">show second div 1 seconds</div>
<div class="media third">show third div 1 seconds</div>
<div class="media fourth">show fourth div 1 seconds</div>

</body>
</html>

Thursday 23 February 2017

How to add or remove class on resize window

Monday 13 February 2017

How to perform action on selection of two different select box option

Pages