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

Address To Map Generator

Tags

, ,

Convert Address Text to Google Map using jQuery

css some styling

iframe{ width:100%; height:300px; }

html element

<address class="setmap">Eiffel Tower, Paris, France</address>

some javascript to do the magic

$("address.setmap").each(function(){
        var embed ="<iframe frameborder='0' scrolling='no'  marginheight='0' marginwidth='0'   src='https://maps.google.com/maps?&amp;q="+ encodeURIComponent( $(this).text() ) +"&amp;output=embed'></iframe>";
        $(this).html(embed);
});

To see working result click here