Disable Mouse Scroll To Resize Window

Tags

, ,

Disable Mouse Scroll To Resize Window simply add below script to your site

$(window).bind('mousewheel DOMMouseScroll', function (event) {
   if (event.ctrlKey == true) {
   		event.preventDefault();
   }
});

Also, you can disable it on Ctrl + & Ctrl –

$(document).keydown(function(event) {
   if (event.ctrlKey==true && (event.which == '187'  || event.which == '189' ) ) {
	event.preventDefault();
    }
});
Advertisements

Round Border on Li’s

Tags

, ,

Simple Example for Beginners

 

HTML CODE

<div class="text-right">
	<ul class="leftToRight">
	  <li>1</li>
	  <li>2</li>
	  <li class="active">3</li>
	  <li>4</li>
	  <li>5</li>
	</ul>
</div>

<ul class="leftToRight setToRight">
  <li>5</li>
  <li>4</li>
  <li>3</li>
  <li class="active">2</li>
  <li>1</li>
</ul>

 

CSS CODE

* {
  margin: 0;
  padding: 0;
}
.text-right{ text-align:right; }
li {
  list-style: none;
}

.leftToRight {
  font-size: 0;
  background-color: #dde2e8;
  display: inline-block;
  border-radius: 50px 0 0 0;
  overflow: hidden;
  margin-bottom: 20px;
}

.leftToRight li {
  font-size: 20px;
  float: left;
  border-radius: 50px 0 0 0;
  background-color: #dde2e8;
  padding: 10px 30px;
  position: relative;
}

.leftToRight li:hover,
.leftToRight li.active {
  background-color: red;
  color: #ffffff;
}

.leftToRight li.active:after,
.leftToRight li:hover:after {
  content: '';
  height: 100%;
  width: 100%;
  margin: 0;
  position: absolute;
  z-index: 0;
  top: 0;
  left: 100%;
  background-color: red;
}

.leftToRight.setToRight {
  border-radius: 0 50px 0 0;
}

.leftToRight.setToRight li {
  border-radius: 0 50px 0 0;
  float:right;
}

.leftToRight.setToRight li.active:after,
.leftToRight.setToRight li:hover:after {
  left: -100%;
}

 

Js Fiddle Example

Google Map Hover Zoom after click

Tags

, ,

Google Map scrolling zoom on click

many of you facing the issue of google mouse scrolling zoom
while someone scrolling site to view and google map stop user to scroll down to site because of google map mouse scroll zooming

here is the simple trick to do the magic

i am using pointer-events

pointer-events

simply add this script to your site

$('iframe').css("pointer-events", "none");

$('address').click(function () {
  $('address iframe').css("pointer-events", "auto");
});

$( "address" ).mouseleave(function() {
  $('address iframe').css("pointer-events", "none");
});

Working Example

Cycle2 Visible slides According To Responsive View

Tags

, ,

In this article i am going to show you guys how can we adjust cycle2 visible slides according to responsive different window sizes

by using this code you can adjust slides as you want

if($(window).width() <= 320){
		$('.cycle-slideshow').cycle('destroy');
		$('.cycle-slideshow').cycle({
			carouselVisible: 2,
		});	
	}else{
		$('.cycle-slideshow').cycle('destroy');
		$('.cycle-slideshow').cycle({
			carouselVisible: 4,
		});	
	}

Working Example Click Here