Skip to content

Instantly share code, notes, and snippets.

View DevShahidul's full-sized avatar
🎯
Focusing

Shahidul Islam DevShahidul

🎯
Focusing
5 followers · 18 following
  • http://webtricker.com/
View GitHub Profile
@DevShahidul
DevShahidul / gsap-eases.css
Created August 27, 2024 07:04 — forked from jh3y/gsap-eases.css
GreenSock eases with CSS linear()
:root {
--none: linear(0, 1);
--power1-in: linear( 0, 0.0039, 0.0156, 0.0352, 0.0625, 0.0977, 0.1407, 0.1914, 0.2499, 0.3164, 0.3906 62.5%, 0.5625, 0.7656, 1 );
--power1-out: linear( 0, 0.2342, 0.4374, 0.6093 37.49%, 0.6835, 0.7499, 0.8086, 0.8593, 0.9023, 0.9375, 0.9648, 0.9844, 0.9961, 1 );
--power1-in-out: linear( 0, 0.0027, 0.0106 7.29%, 0.0425, 0.0957, 0.1701 29.16%, 0.2477, 0.3401 41.23%, 0.5982 55.18%, 0.7044 61.56%, 0.7987, 0.875 75%, 0.9297, 0.9687, 0.9922, 1 );
--power2-in: linear( 0, 0.0014 11.11%, 0.0071 19.24%, 0.0188 26.6%, 0.037 33.33%, 0.0634 39.87%, 0.0978 46.07%, 0.1407 52.02%, 0.1925 57.74%, 0.2559 63.49%, 0.3295 69.07%, 0.4135 74.5%, 0.5083 79.81%, 0.6141 85%, 0.7312 90.09%, 1 );
--power2-out: linear( 0, 0.2688 9.91%, 0.3859 15%, 0.4917 20.19%, 0.5865 25.5%, 0.6705 30.93%, 0.7441 36.51%, 0.8075 42.26%, 0.8593 47.98%, 0.9022 53.93%, 0.9366 60.13%, 0.963 66.67%, 0.9812 73.4%, 0.9929 80.76%, 0.9986 88.89%, 1 );
--power2-in-out: linear( 0, 0.0036 9.62%, 0.0185 16.66
@DevShahidul
DevShahidul / Highcharts Cheat Sheet.js
Created August 20, 2023 05:44 — forked from X-Raym/Highcharts Cheat Sheet.js
Highcharts Cheat Sheet
$('#container').highcharts({
chart: {
alignTicks: true, // When using multiple axis, the ticks of two or more opposite axes will automatically be aligned by adding ticks to the axis or axes with the least ticks.
animation: true, // Set the overall animation for all chart updating. Animation can be disabled throughout the chart by setting it to false here.
backgroundColor: '#FFF', // The background color or gradient for the outer chart area.
borderColor: '#4572A7', // The color of the outer chart border.
borderRadius: 5, // The corner radius of the outer chart border. In export, the radius defaults to 0. Defaults to 5.
borderWidth: 0, // The pixel width of the outer chart border.
className: null, // A CSS class name to apply to the charts container div, allowing unique CSS styling for each chart.
defaultSeriesType: 'line', // Alias of type.
@DevShahidul
DevShahidul / App.md
Created November 3, 2022 13:59 — forked from kcak11/App.md
Country Codes

Country Codes

List of all Country Codes (ISO & Dialing) sorted in alphabetical order.

@DevShahidul
DevShahidul / 404 error in wordpress solution.txt
Last active April 7, 2020 06:54
Ref link : https://www.fixrunner.com/how-to-fix-wordpress-error-404-page-not-found/ if it's not work then you can follow this step from here >>> https://www.wpbeginner.com/beginners-guide/beginners-guide-to-troubleshooting-wordpress-errors-step-by-step/
First time you need to change the permalinks then edite your
.httaccess text
=====================
for main domain
==================
@DevShahidul
DevShahidul / Show description bellow the content (featured gallery) box.js
Created November 13, 2019 04:14
See the example here >>> https://codepen.io/mtedwards/pen/tekah
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
@import "compass/css3";
@import url(http://weloveiconfonts.com/api/?family=entypo);
@DevShahidul
DevShahidul / youtube video auto play api.html
Last active September 27, 2019 19:01
See the example from tuatara project and/or here >>> https://www.internetrix.com.au/blog/how-to-use-youtube-video-as-your-webpage-background-2/
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0, initial-scale=1.0, user-scalable=no">
<meta name="format-detection" content="telephone=no">
<title>Youtube video</title>
<style>
@DevShahidul
DevShahidul / Sticky Sidebar function.html
Created July 12, 2019 06:47
See the example here >>> https://codepen.io/Shahidul_56/pen/KjYpXa
<style>
.sidebar{float: left; width: 360px; max-width: 100%;margin-top:97px; position: relative; background:#efefef;}
.sidebar-inner{width: 360px; position: absolute; top: auto;}
.sidebar-inner.fixed{position: fixed !important; top: 92px; bottom: auto;}
</style>
<!-- Html structure -->
<div class="common-wrap clear">
<div class="content-wrap">
<h2>Content title</h2>
@DevShahidul
DevShahidul / swiper custom pagination counter.html
Created June 9, 2019 11:45
See the example here >>> https://stackoverflow.com/questions/32196177/showing-number-of-slides-on-the-web-page
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0, initial-scale=1.0, user-scalable=no">
<meta name="format-detection" content="telephone=no">
<title>VMR | About</title>
<style>
#numberSlides{
@DevShahidul
DevShahidul / Custom play youtube video function.html
Created May 26, 2019 09:14
<!-- Html structure -->
<div class="video-wrap">
<iframe class="embed-player" width="100%" height="100%" src="https://www.youtube.com/embed/mQWxbjjn0gw?enablejsapi=1&controls=1&fs=0&iv_load_policy=3&rel=0&showinfo=0&loop=0" frameborder="0" allowfullscreen></iframe>
</div>
@DevShahidul
DevShahidul / wrap all same classes element.js
Created May 21, 2019 06:13
See the example here >>> https://www.readcereal.com/wp-content/themes/cereal/js/main.singlePost.js?ver=1.0 and live demo here >>> https://www.readcereal.com/fort-of-the-sun/
// wrap images with class of portrait into a group for styling
$(function(){
var cWrap=$('<div class="portrait-set clear"></div>');
$('.articleImages figure.portrait').each(function(){
var o = $(this).next('figure.portrait').length;
$(this).replaceWith(cWrap).appendTo(cWrap);
if (!o) cWrap=$('<div class="portrait-set clear"></div>');
});
});