Skip to content

Instantly share code, notes, and snippets.

View DevShahidul's full-sized avatar
🎯
Focusing

Shahidul Islam DevShahidul

🎯
Focusing
  • http://webtricker.com/
View GitHub Profile
$('div.question .answer').hide()
$('.accordion div.question > h6').click(function(){
$('.accordion div.question').removeClass('active')
$(this).parent().addClass('active')
$('div.question').find('.answer:visible').slideUp()
if( $(this).parent().find('.answer:visible').length){
$('.accordion div.question > .answer').slideUp()
$('.accordion div.question').removeClass('active')
//aside tab function
$("#asideTabs >li:nth-last-child(2)").addClass('active')
$("#tab-contents >.faq-tab-content").hide()
$("#tab-contents >.faq-tab-content:nth-last-child(2)").show()
$("#asideTabs >li").each(function(i){
$(this).click(function(){
if($(this).hasClass('active')) return false
else{
if (navigator.userAgent.indexOf('Safari') != -1 &&
navigator.userAgent.indexOf('Chrome') == -1) {
$("body").addClass("safari");
}
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jQuery UI Datepicker - Default functionality</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<div class="main-nav-wrap" id="main-nav-wrap">
<nav class="main-nav">
<ul>
<li><a href="index.html">Homepage</a></li>
<li><a href="#">Introduction</a></li>
<li><a href="#">Private Services</a></li>
<li><a href="single-and-fleet.html">Fleet</a></li>
<li><a href="#">Testimonials</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
$("#mobile-nav").click(function(){
$(".header-area").addClass("is-animating")
setTimeout(function(){
$(".header-area").removeClass("is-animating")
}, 2000);
if($("#main-nav-wrap").hasClass("navActive")){
$("#main-nav-wrap").addClass("is-exiting")
}
<div id="box1" class="box blurred-bg tinted">
<div class="content">
<h1>Blurred Background</h1>
<h2>By <a href="http://ariona.net" rel="follow" target="_blank">Ariona, Rian</a></h2>
<p>Drag this box to move around</p>
<p class="related">See also: <a href="https://codepen.io/ariona/details/LVZLGP/" target="_blank">Staged Dropdown Animation</a></p>
</div>
</div>
<section class="our-strategy-section">
<img src="images/about-page-image.jpg" alt="">
<div class="strategy-inner common-wrap clear" id="our-strategy">
<h6>The Right strategy</h6>
<h2>Our business model is underpinned by 6 strategic pillars</h2>
<div id="circle-tab-section" class="circle-tab-section clear">
<img class="maping-images" name="tabs-map" src="images/blank.gif" id="Roundcirclemaping" usemap="#tabs-map" alt="" />
<map name="tabs-map" id="tabs-map">
var $header = $(".header-area"),
$clone = $header.before($header.clone().addClass("fixedTop"));
$(window).on("scroll", function() {
var fromTop = $(window).scrollTop();
$("body").toggleClass("down", (fromTop > 300));
});
.hide {opacity: 0;}
.fade-in {opacity: 0; -webkit-transition: opacity .8s linear; transition: opacity .8s linear;}
.fade-in.in-view {opacity: 1;}
.animate-from-bottom{opacity: 0; -webkit-transform: translateY(100px); -moz-transform: translateY(100px); transform: translateY(100px); -webkit-transform: translate3d(0,100px,0); transform: translate3d(0,100px,0); -webkit-transition: -webkit-transform .8s cubic-bezier(.165,.84,.44,1), opacity .8s linear; transition: transform .8s cubic-bezier(.165,.84,.44,1), opacity .8s linear;}
.animate-from-bottom.in-view{opacity: 1; -webkit-transform: translateX(0px); -moz-transform: translateX(0px); transform: translateX(0px); -webkit-transform: translate3d(0,0,0); transform: translate3d(0,0,0); -webkit-transition: -webkit-transform .8s cubic-bezier(.165,.84,.44,1) , opacity .8s linear ; transition: transform .8s cubic-bezier(.165,.84,.44,1), opacity .8s linear;}
.animate-from-right{opacity: 0; -webkit-transform: translateX(50px); -moz-transform: translateY(50px); transform: