DevShahidul’s gists

DevShahidul / Change upload file name.js

Created April 11, 2018 13:59

See the example here >>> https://www.tutorialrepublic.com/faq/how-to-get-selected-file-name-from-input-type-file-using-jquery.php // We implemented this function to Credence project.

	if($('#chosefile').length){
	$('#chosefile').change(function(e){
	var fileName = e.target.files[0].name;
	$(".attach-btn-wrap span").text(fileName);
	});
	}

DevShahidul / kenburnSlider.html

Created April 17, 2018 10:44

See example Here >>> https://codepen.io/ibanez182/pen/LZPgrY

	<h1><small>Fullscreen</small> Ken Burns effect <small>without javascript</small></h1>

	<!-- You can add more ".slideshow-image" elements, but remember to update the "$items" variable on SCSS -->
	<div class="slideshow">
	<div class="slideshow-image" style="background-image: url('https://source.unsplash.com/category/nature/1600x1400')"></div>
	<div class="slideshow-image" style="background-image: url('https://source.unsplash.com/category/buildings/1600x1400')"></div>
	<div class="slideshow-image" style="background-image: url('https://source.unsplash.com/category/food/1600x1400')"></div>
	<div class="slideshow-image" style="background-image: url('https://source.unsplash.com/category/technology/1600x1400')"></div>
	</div>

DevShahidul / Youtube Custom play button.html

Last active May 26, 2018 05:50

See example here >>> https://codepen.io/romkaa/pen/JKqgmN and Live example in our Project here >>> http://webtricker.com/projects/electric-south/

	<!DOCTYPE html>
	<html>
	<head>
	<style>
	body {
	font-family: avenir,sans-serif;
	}
	.video_wrapper {
	width: 560px;
	margin: 0 auto;

DevShahidul / Custom preloader script.js

Created April 23, 2018 06:40

See example here >>> https://www.webtricker.com/

	var preload = document.getElementById("main-preloader");
	window.addEventListener("load", function(){
	//preload.style.animation = " fadeOut 1s ease"
	preload.style.display = " none"
	})

DevShahidul / Scroll Reveal Effect.html

Last active June 10, 2018 04:46

See Example here >>> http://webtricker.com/projects/e-Marefa-v2/


	<!-- Html Markup -->
	<div class="product-details-wrap" id="product-details-wrap">
	<div class="product-item-info scroll-effect">
	<span class="economic"> Economics</span>
	<h6>e-Marefa DataBank for Islamic Economics and Finance</h6>
	<p>An integrated set of databases containing tens of thousands of records from 300 institutions in 40 countries.</p>
	<a href="#">View Service</a>
	</div>
	<div class="product-item-info scroll-effect">

DevShahidul / count Down.js

Created June 10, 2018 12:27

See example here >>> http://jsfiddle.net/GNrUM/ or find on Oliver Whyte project

	var sec = 2
	var timer = setInterval(function() {
	$('#hideMsg span').text(sec--);
	if (sec == -1) {
	$('#hideMsg').fadeOut('fast');
	clearInterval(timer);
	}
	}, 1000);

DevShahidul / Roated Element when scroll.js

Last active June 13, 2018 05:03

See example here >>> https://codepen.io/dudleystorey/pen/vHBAE and http://thenewcode.com/718/Rotating-Elements-With-Page-Scroll-In-JQuery of find in our LAM project which we did (Jun - 2018)

	$(window).scroll(function() {
	var theta = $(window).scrollTop() / 800 % Math.PI;
	$('#leftgear').css({ transform: 'rotate(' + theta + 'rad)' });
	$('#rightgear').css({ transform: 'rotate(-' + theta + 'rad)' });
	});

DevShahidul / Custom parallax effect in a single element.js

Created June 13, 2018 12:27

See the example here >>> https://jsfiddle.net/vvup5ob5/3/ or see our work in Lam-v2 (Jun 2018) Link >> http://webtricker.com/projects/lam

	// Parallax effect
	if($(".parallax-section").length){
	var winScrollTop=0;
	$.fn.is_on_screen = function(){
	var win = $(window);
	var viewport = {
	top : win.scrollTop(),
	left : win.scrollLeft()
	};
	//viewport.right = viewport.left + win.width();

DevShahidul / scroll to specific section on click in nav menu.js

Created June 14, 2018 08:29

See example here >>> http://webtricker.com/projects/e-Marefa-v3/


	(function($){
	$(function(){
	$('.main-nav ul li a').on('click', function(e) {

	$(".main-nav ul li").removeClass("current-menu-item");
	$(this).parent().addClass("current-menu-item");

	if($(window).width() <= 767 ){
	$(".navigation-wrapper").removeClass("navShown");

DevShahidul / Sticky Sidebar function.js

Created July 16, 2018 04:53

See Example here >>> https://codepen.io/perminder-klair/pen/tdzue

	$( document ).ready(function() {
	console.log( "document ready!" );

	var $sticky = $('.sticky');
	var $stickyrStopper = $('.sticky-stopper');
	if (!!$sticky.offset()) { // make sure ".sticky" element exists

	var generalSidebarHeight = $sticky.innerHeight();
	var stickyTop = $sticky.offset().top;
	var stickOffset = 0;

Shahidul Islam DevShahidul