Vitalya T

Как сверстать такую фигуру?

Моя идея: Сделать прямоугольник, добавить через псевдоэлемент треугольник. но как сделать его так, чтобы залить градиентом таким же, как и у прямоугольника?

Ссылка на псд.

http://rghost.ru/56934778

Вариант раз. Сделать подложку свою, а от слайдера сделать прозрачной.

Изначально использовал другой слайдер, но решил вернуться, чтобы не грузить дополнительные библиотеки.

Для таких целей отлично подойдет Bxslider.

Спасибо за совет попробую. Сейчас собираюсь использовать такой.

Добрый день. Хочу совместить Jquery UI slider и ajax галерею.

Проблема в том, что при изменении рейнджа больше чем на один шаг, изображения не проматываются адекватно. При изменении диапазона на один шаг, скрипт работает нормально.

Видео:

http://screencast.com/t/loDxRlNEncq

Сэмпл кода в котором это обрабатывается:

var ScrollToright=  function (Steps){			console.log ("Steps!!!!!!!!! "+Steps);					th.find('li').stop(true, true)			var next_li = th.find('li.showed:last').next()			if(next_li.length!=1)				return;			var all_li = th.find('li.showed:not(:first)')					var first_li = th.find('li.showed:first');			var additionalCollection = th.find('li.showed:first');			var trueIndexli = th.find('li.showed:first').index()-1;		    var next_li_add;			console.log ("trueIndexli "+trueIndexli);			/*for ( var i = 0; i < Steps; i++ ) {  				 additionalCollection = additionalCollection.add(th.find('li.showed').eq(i));  							}*/						for ( var i = 0; i < Steps; i++ ) {				trueIndexli= trueIndexli+i;	  				 additionalCollection = additionalCollection.add(th.find('li').eq(trueIndexli));  								}						//additionalCollection.css('background','red');			//th.find('li.showed').eq(0).css('background','red');			//console.log("additionalCollection "+additionalCollection);			//additionalCollection.css('background','red');			if (Steps>1){				first_li = additionalCollection;								all_li = th.find('li').not(additionalCollection);				 next_li_add = additionalCollection.last().next();  				next_li = next_li_add;			}			if (Steps>4) {				all_li = additionalCollection.nextAll();			}			next_li.addClass('showed').css('opacity', '0')			var left = $(first_li).width()+20			first_li.animate(				{					'left': '-'+left+'px',					'opacity': '0'				}, 				 __this__.speed,				function(){					__this__.normalize($(this))					$(this).removeClass('showed');					__this__.check_nav(th)					__this__.check_count(th);				}			);			all_li.animate(				{					'left': '-'+left+'px'				}, 				 __this__.speed, 				function(){	__this__.normalize($(this)) }			);			next_li.animate(				{					'left': '-'+left+'px',					'opacity': '1'				}, 				 __this__.speed,				function(){	__this__.normalize($(this)) }			);			__this__.ajax_li(th, "right")									//PUSH BACK									totalCountinThisLoad= th.find("li").size();						  			 if (totalCountinThisLoad > newcount1) newcount1 += totalCountinThisLoad-newcount;						  			 totalCountShow=th.find("li.showed").size();						  			 totalCountLeft=totalCountinThisLoad-totalCountShow;						  			// if (totalCountShow>5) totalCountShow = 5;						  			 totalCountLeft=totalCountinThisLoad-totalCountShow;						  									  							              		Maxrange=(totalCountinThisLoad-totalCountShow+1)*10;				              		$( ".slider1" ).slider( "option", "max", Maxrange);									$( ".slider1" ).slider("value", $( ".slider1" ).slider("value") + Steps);									if ( ( $( ".slider1" ).slider("value") == 	$( ".slider1" ).slider( "option", "max") ) && ( th.find('li.showed:last').nextAll("li").size()>0) ) {														var remain = th.find('li.showed:last').nextAll("li").size();						        				  		$( ".slider1" ).slider("value", $( ".slider1" ).slider("value") - (remain*10) );						        				} 								}var ScrollToLeft = function(Steps) {			var stepback = Math.abs(Steps);			console.log ("Steps!!!!!!!!! "+stepback);			th.find('li').stop(true, true)			var next_li = th.find('li.showed:first').prev()			if(next_li.length!=1)				return;			var last_li = th.find('li.showed:last')			var additionalCollection = th.find('li.showed:last');			var trueindex = last_li.index();			var totalShowed = th.find('li.showed').length-1;			//th.find('li.showed').eq(totalShowed).css('background','black');			console.log("totalShowed "+totalShowed);			console.log("trueindex "+trueindex);			for ( var i = 0; i <stepback; i++ ) {				if (i<=4){				 totalShowed = totalShowed-i;  				 additionalCollection = additionalCollection.add(th.find('li.showed').eq(totalShowed));  				}			}			if (stepback>1) last_li = additionalCollection;			//additionalCollection.css('background','green');			var left = $(last_li).width()+20			var all_li = th.find('li.showed:not(:last)')			next_li.addClass('showed').css('opacity', '0').css('left','-'+left+'px')			all_li.css('left','-'+left+'px')			last_li.css('left','-'+left+'px')			last_li.animate(				{					'left': 0+'px',					'opacity': '0'				}, 				__this__.speed,				function(){					__this__.normalize($(this)) 					$(this).removeClass('showed');					__this__.check_nav(th)					__this__.check_count(th);				}			);			all_li.animate(				{					'left': 0+'px'				}, 				__this__.speed, 				function(){	__this__.normalize($(this))}			);			next_li.animate(				{					'left': 0+'px',					'opacity': '1'				}, 				__this__.speed,				function(){	__this__.normalize($(this))}			);			__this__.ajax_li(th, "left")									//PUSH BACK									$( ".slider1" ).slider("value", $( ".slider1" ).slider("value") - 10);									 totalCountinThisLoad= th.find("li").size();						  			 if (totalCountinThisLoad > newcount) newcount += totalCountinThisLoad-newcount;						  			 totalCountShow=th.find("li.showed").size();						  			 totalCountLeft=totalCountinThisLoad-totalCountShow;						  			 totalCountLeft=totalCountinThisLoad-totalCountShow;						  									  							              		  $( ".slider1" ).slider( "option", "max", Maxrange);				              		 	 Prevli = th.find('li.showed:first').prevAll("li").size();						        				 if ( ( $( ".slider1" ).slider("value") == 0 ) && ( th.find('li.showed:first').prevAll("li").size()>0 ) ) {						        		 						$( ".slider1" ).slider("value", $( ".slider1" ).slider("value") + Prevli*10);						        			}}th.find( ".slider1" ).bind( "slide", function(event, ui){  															  								 totalCountinThisLoad= th.find("li").size();						  			 if (totalCountinThisLoad > newcount) newcount += totalCountinThisLoad-newcount;						  			 totalCountShow=th.find("li.showed").size();						  			 totalCountLeft=totalCountinThisLoad-totalCountShow;						  			totalCountLeft=totalCountinThisLoad-totalCountShow;						  			Maxrange=(totalCountinThisLoad-totalCountShow+1)*10;				              	 $( ".slider1" ).slider( "option", "max", Maxrange);				              															deltaValueStep = (ui.value-ValueOldOnSlide)/10;								//console.log("deltaValueSte "+deltaValueStep);  								if ( ui.value>ValueOldOnSlide){											//	console.log("step"+step);											//console.log("Its scroll down")				           					ScrollToright(deltaValueStep);				           															  }    									if ( ui.value<ValueOldOnSlide){												//console.log("Its scroll up")							           			ScrollToLeft(deltaValueStep);							           												}  								}); 

Скрипт целиком: http://pastebin.com/LdqPPS7K

Ссылка на сайт, где можно попробовать, как работает скрипт: http://testing.site-services.ru/

Добрый день. Ползунок в jquery ui slider в крайних положениях уходит за пределы трэка ровно наполовину. 

Какие есть варианты, чтобы он оставался внутри?

Ссылка на сайт: http://testing.site-services.ru/

Необходимо при наведении на блок с предложением цены перечеркивать ценник. Сейчас реализовано через горизонтальное зачеркивание при помощи картинки. 

.hoverClass{  background:url('redline.png') repeat-x 0 50%;     }

Какие есть идеи? Возможно ли повернуть картинку и расположить ее диагонально? Может нужно использовать text-decoration: line-through, при этом направив из левого нижнего угла в правый верхний?