Skip to content

Instantly share code, notes, and snippets.

View DevShahidul's full-sized avatar
🎯
Focusing

Shahidul Islam DevShahidul

🎯
Focusing
6 followers · 21 following
  • http://webtricker.com/
View GitHub Profile
@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>');
});
});
@DevShahidul
DevShahidul / play,pause,stop HTML5 video custom function.html
Last active May 16, 2019 09:57
See the example >>> http://www.inwebson.com/html5/custom-html5-video-controls-with-jquery/ and https://codepen.io/blackjacques/pen/bgamaj or http://www.iamramraj.com/html5-video-controls-jquery-css/
<!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>Tswalu | Happening Tswalu</title>
<link href="https://fonts.googleapis.com/css?family=Montserrat:300,400,400i,500" rel="stylesheet">
<link type="text/css" rel="stylesheet" href="css/slick.css">
@DevShahidul
DevShahidul / wrap each line with span tag in paragraph.html
Last active May 15, 2019 09:49
Note: Please Don't use the float: left css in body-copy selector ;
<!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>Strider | Home</title>
<link type="text/css" rel="stylesheet" href="css/style.css">
@DevShahidul
DevShahidul / Image or div Follow mouse.html
Created April 16, 2019 13:07
See the example here >>> https://codepen.io/redspiderfish/pen/MYmeYz
<!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>Follow Mouse</title>
<style>
@DevShahidul
DevShahidul / Adding and removing classes when viewport element or section on page scroll.html
Last active March 26, 2019 12:25
See the example here >>> https://codereview.stackexchange.com/questions/120537/adding-and-removing-classes-at-different-heights-on-page-using-jquery
<!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>Endy | Home</title>
<link href="images/favicon.ico" rel="shortcut icon">
</head>
<body>
@DevShahidul
DevShahidul / Extend jQuery addClass and removeClass function to accept callback function.js
Created March 26, 2019 10:31
See the example here >>> https://stackoverflow.com/questions/14567990/how-to-add-a-callback-function-to-the-addclass-method-of-jquery
// Extend jQuery addClass function to accept callback function
var oAddClass = $.fn.addClass;
var oRemoveClass = $.fn.removeClass;
$.fn.addClass = function () {
for (var i in arguments) {
var arg = arguments[i];
if ( !! (arg && arg.constructor && arg.call && arg.apply)) {
arg();
delete arg;
}
@DevShahidul
DevShahidul / youtube-custom-play-pause-stop-btn.html
Created March 21, 2019 09:26
See the example here >>> https://codepen.io/AmrSubZero/pen/oLOYrA
<!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> Franchesca Watson | Home-HD</title>
<link type="text/css" rel="stylesheet" href="css/magnific-popup.css">
<link type="text/css" rel="stylesheet" href="css/style.css">
@DevShahidul
DevShahidul / Smoth scroll function.js
Created March 20, 2019 14:07
See here >>> http://jsfiddle.net/7dgrndw9/1/
/* Smooth scroll */
Math.easeOut = function (t, b, c, d) { t /= d; return -c * t*(t-2) + b; };
(function() { // do not mess global space
var
interval, // scroll is being eased
mult = 0, // how fast do we scroll
dir = 0, // 1 = scroll down, -1 = scroll up
steps = 50, // how many steps in animation
length = 30; // how long to animate
@DevShahidul
DevShahidul / Type text effect in slider.html
Last active March 15, 2019 13:47
See the reference here >>> https://stackoverflow.com/questions/51983080/slick-carousel-after-slide-change-run-typewriter-function
<!DOCTYPE html>
<html lang="en">
<head>
<style>
.slick-rick .phrase {
padding-top: 1rem;
padding-bottom: 1rem;
text-align: center;
color: black;
background: lightgray;
@DevShahidul
DevShahidul / Slick carousel only for mobile with custom navigation.html
Created February 24, 2019 07:16
See example in SnapScan project