Shahidul Islam DevShahidul

🎯

Focusing

I am a professional front-end web developer.

DevShahidul / Define browser with css.css

Created January 5, 2018 18:20

Ref link =>> https://www.wired.com/2010/02/browser-specific_css_hacks/

	/* Safari */
	@media screen and (-webkit-min-device-pixel-ratio:0) {
	.article-item { float: none; margin-left: 1.6%;}

	}

DevShahidul / Keyup and blur function.js

Created January 6, 2018 12:58

See example on Airbron drone Here >>> http://www.webtricker.com/projects/Airborne_drones/

	$('#searchBox').keyup(function(){
	$('div.search-wrap').addClass('value-added')
	})


	$('#searchBox').blur(function(){
	if(!this.value){this.value=this.defaultValue;}
	if(this.value==this.defaultValue){
	$('div.search-wrap').removeClass('value-added')
	}

DevShahidul / Custom mouse pointer function.html

Created January 18, 2018 14:26

See example here >>> http://173.254.28.169/~greenbo4/greenbox/


	<html !DOCTYPE html>

	<head>
	<style>
	/* Animated cursor style */
	.animated-cursor{cursor: none;}
	.mood_circle{width: 60px; height: 60px; border-radius: 50%; pointer-events: none; -webkit-transform-origin: center; transform-origin: center; z-index: 99; opacity: 0; transition: .5s opacity ease; transition: .5s opacity ease; position: absolute; display: block;}
	.start-event .mood_circle{opacity: .9;}
	.mood_circle__inner{position: absolute; top: 0; left: 0; width: 100%; border-radius: 50%; height: 100%; background-color: #40d1bd; transition: .5s -webkit-transform cubic-bezier(.165, .84, .44, 1); transition: .5s transform cubic-bezier(.165, .84, .44, 1); -webkit-transform: scale(0); transform: scale(0) }

DevShahidul / Define First Word and Last Word

Last active April 23, 2018 14:18

See example >>> https://stackoverflow.com/questions/5458605/first-word-selector


	function wrapFirstWord () { // This function for select first word.
	// Select only the first text node
	var node = $("div").contents().filter(function () {
	return this.nodeType == 3;
	}).first(),

	// Get the text...
	text = node.text(),

DevShahidul / Mouse wheel event on slider function.js

Created January 27, 2018 06:01



	var slider = $('#work-carousel'); // Add yoru slider id here

	slider.on('mousewheel DOMMouseScroll', function(event) {
	event.preventDefault();
	if(event.originalEvent.wheelDelta > 0 \|\| event.originalEvent.detail < 0) {

	slider.slick('slickPrev');

DevShahidul / Common tab function.js

Created February 2, 2018 09:09

See example here >>> http://www.yourprivateafrica.com/your-private-africa/africa-destinations/


	$("ul.tabs").each(function(){

	var $_this = $(this);

	$_this.find(">li").eq(0).addClass("active");
	$_this.parent().find("div.tab-content-wrap > div.pane").hide();
	$_this.parent().find("div.tab-content-wrap > div.pane").eq(0).show();

DevShahidul / Custom Animation in flex slider.js

Created February 2, 2018 09:17

See example fro here >>> http://173.254.28.169/~greenbo4/greenbox/

	;(function($){
	$(function(){
	// This function for create separate word from a tag.
	$('.hero-content h1').each(function(){
	var $_this = $(this);
	var words = $_this.text().split(" ");
	$_this.empty();
	$.each(words, function(i, v){
	$_this.append($("<dfn>").text(v + " "));
	});

DevShahidul / Slick thumb function.html

Last active February 5, 2018 17:18

Example see here >>> http://jsfiddle.net/Virtual/webyrb9d/ Another Example here >>> https://codepen.io/jatne/pen/qbYpKQ

DevShahidul / Change Active State of Links in Sticky Navigation on Scroll.js

Created February 20, 2018 14:01

See example here >>> http://codetheory.in/change-active-state-links-sticky-navigation-scroll/

	var sections = $('section')
	, nav = $('nav')
	, nav_height = nav.outerHeight();

	$(window).on('scroll', function () {
	var cur_pos = $(this).scrollTop();

	sections.each(function() {
	var top = $(this).offset().top - nav_height,
	bottom = top + $(this).outerHeight();

DevShahidul / Magnific popup video example.html

Created February 23, 2018 06:25

	<!-- html structure -->
	<a class="popup-youtube" href="https://www.youtube.com/watch?v=UbMCjJsCsok"><span>Watch the setup video</span><figure><img src="svgs/icn_ui_play_large.svg" width="32" height="32" alt="WatchBTN"></figure></a>

	<!-- Scripting function -->
	<script type="text/javascript">
	$(document).ready(function() {
	$('.popup-youtube, .popup-vimeo').magnificPopup({
	disableOn: 700,
	type: 'iframe',
	mainClass: 'mfp-fade',