Skip to content

Instantly share code, notes, and snippets.

View DevShahidul's full-sized avatar
🎯
Focusing

Shahidul Islam DevShahidul

🎯
Focusing
7 followers · 21 following
  • http://webtricker.com/
View GitHub Profile
@DevShahidul
DevShahidul / Header Clone function.js
Created July 20, 2017 14:09
var $header = $(".header-area"),
$clone = $header.before($header.clone().addClass("fixedTop"));
$(window).on("scroll", function() {
var fromTop = $(window).scrollTop();
$("body").toggleClass("down", (fromTop > 300));
});
@DevShahidul
DevShahidul / Animation-effect.css
Created July 25, 2017 13:40
.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:
@DevShahidul
DevShahidul / Scroll and drawing triangle with js.html
Created August 16, 2017 12:08
<!DOCTYPE html>
<html>
<head>
<style>
body {
height: 2000px;
background: #f1f1f1;
}
#mySVG {
@DevShahidul
DevShahidul / Pricing Range slider.html
Created August 18, 2017 20:21
Plugins link >>> http://bashooka.com/coding/25-amazing-css-range-slider-designs/ And Video tutorial link >>> https://www.youtube.com/watch?v=reNLCuaxFF8
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script type="text/javascript" src="scripts/jquery-1.12.4.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
@DevShahidul
DevShahidul / sticky footer style.html
Created August 26, 2017 06:48
Tutorial link >>> https://codepen.io/blustemy/pen/IxcCw
@DevShahidul
DevShahidul / Set Parent Dive height from element height.js
Last active September 14, 2017 12:12
See example here >>> http://173.254.28.169/~greenbo4/bikeandsaddle-wp/map/
var mapHeight = $(".cycle-map img").height();
$(".cycle-map-inner-wrap").height(mapHeight);
function heightResize(){
mapHeight = $(".cycle-map img").height();
$(".cycle-map-inner-wrap").height(mapHeight);
}
$(window).on("resize", heightResize);
@DevShahidul
DevShahidul / ScrollTop with minus position header function.js
Created September 15, 2017 04:23
if ($(window).width() > 767) {
lasPos = 0
var getHeaderHeight = $('.header-section').outerHeight();
$(window).scroll(function () {
var wScroll = $(window).scrollTop();
$('.header-section').css('top', '-' + getHeaderHeight + 'px')
if (wScroll > 250) {
$('.header-section').addClass('is-active').css('top', 0);
if (lasPos > wScroll) {
$('.header-section').css('top', 0);
@DevShahidul
DevShahidul / Custom Scrollbar.html
Last active November 17, 2017 20:16
Download from here >>>> http://manos.malihu.gr/jquery-custom-content-scroller/
See here >>> http://manos.malihu.gr/jquery-custom-content-scroller/
Custom scroll bar with custom scripting see here >>> http://www.jankoatwarpspeed.com/reinventing-a-drop-down-with-css-and-jquery/
<!-- html markut -->
<div class="selectrick-wraper" id="selectrick-wraper">
<span><img src="images/rating-5.png"></span>
<ul>
<li class="five-star"><img src="images/rating-5.png"></li>
@DevShahidul
DevShahidul / Animate from top and bottom jquery.js
Last active April 10, 2018 12:57
See the example second function from here >>> https://codepen.io/SitePoint/pres/warKXE
// This function for scroll from bottom animation
if ($(window).width() > 767){
var $animation_elements = $('.animate-from-bottom');
var $window = $(window);
function check_if_in_view() {
var window_height = $window.height();
var window_top_position = $window.scrollTop();
var window_bottom_position = (window_top_position + window_height);
@DevShahidul
DevShahidul / Define first word and last word with span tag.js
Last active April 3, 2018 13:50
Stacoverflow site link >>> https://stackoverflow.com/questions/10495574/target-the-last-word-within-an-h1-element
$('.book-consultation em a').html(function(index, curHTML) { // This function for select last word
var text = curHTML.split(/[\s-]/),
newtext = '<span class="last-word">' + text.pop() + '</span>';
return text.join(' ').concat(' ' + newtext);
});
// Another way to select First word and last word =========================
$("#lastWord").html(function(){ // Class or id can be use
var text = $("#lastWord").text().split(" "); // All text convert to array.
var last = text.pop(); // Select last wrod.