Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 13.07.2015, 23:00
Новичок на форуме
Отправить личное сообщение для meke Посмотреть профиль Найти все сообщения от meke
 
Регистрация: 13.07.2015
Сообщений: 6

Конфликт слайдера и меню
Доброго времени суток!
Подскажите пожалуйста начинающему, как решить проблему конфликта jQuery скриптов? Стоит выпадающее меню и слайдер. Работает только один из них.


Слайдер:
/**
 *   Unslider by @idiot and @damirfoy
 *   Contributors:
 *   - @ShamoX
 *
 */

(function($, f) {
	var Unslider = function() {
		//  Object clone
		var _ = this;

		//  Set some options
		_.o = {
			speed: 500,     // animation speed, false for no transition (integer or boolean)
			delay: 3000,    // delay between slides, false for no autoplay (integer or boolean)
			init: 0,        // init delay, false for no delay (integer or boolean)
			pause: !f,      // pause on hover (boolean)
			loop: !f,       // infinitely looping (boolean)
			keys: f,        // keyboard shortcuts (boolean)
			dots: f,        // display dots pagination (boolean)
			arrows: f,      // display prev/next arrows (boolean)
			prev: '←', // text or html inside prev button (string)
			next: '→', // same as for prev option
			fluid: f,       // is it a percentage width? (boolean)
			starting: f,    // invoke before animation (function with argument)
			complete: f,    // invoke after animation (function with argument)
			items: '>ul',   // slides container selector
			item: '>li',    // slidable items selector
			easing: 'swing',// easing function to use for animation
			autoplay: true  // enable autoplay on initialisation
		};

		_.init = function(el, o) {
			//  Check whether we're passing any options in to Unslider
			_.o = $.extend(_.o, o);

			_.el = el;
			_.ul = el.find(_.o.items);
			_.max = [el.outerWidth() | 0, el.outerHeight() | 0];
			_.li = _.ul.find(_.o.item).each(function(index) {
				var me = $(this),
					width = me.outerWidth(),
					height = me.outerHeight();

				//  Set the max values
				if (width > _.max[0]) _.max[0] = width;
				if (height > _.max[1]) _.max[1] = height;
			});


			//  Cached vars
			var o = _.o,
				ul = _.ul,
				li = _.li,
				len = li.length;

			//  Current indeed
			_.i = 0;

			//  Set the main element
			el.css({width: _.max[0], height: li.first().outerHeight(), overflow: 'hidden'});

			//  Set the relative widths
			ul.css({position: 'relative', left: 0, width: (len * 100) + '%'});
			if(o.fluid) {
				li.css({'float': 'left', width: (100 / len) + '%'});
			} else {
				li.css({'float': 'left', width: (_.max[0]) + 'px'});
			}

			//  Autoslide
			o.autoplay && setTimeout(function() {
				if (o.delay | 0) {
					_.play();

					if (o.pause) {
						el.on('mouseover mouseout', function(e) {
							_.stop();
							e.type === 'mouseout' && _.play();
						});
					};
				};
			}, o.init | 0);

			//  Keypresses
			if (o.keys) {
				$(document).keydown(function(e) {
					switch(e.which) {
						case 37:
							_.prev(); // Left
							break;
						case 39:
							_.next(); // Right
							break;
						case 27:
							_.stop(); // Esc
							break;
					};
				});
			};

			//  Dot pagination
			o.dots && nav('dot');

			//  Arrows support
			o.arrows && nav('arrow');

			//  Patch for fluid-width sliders. Screw those guys.
			o.fluid && $(window).resize(function() {
				_.r && clearTimeout(_.r);

				_.r = setTimeout(function() {
					var styl = {height: li.eq(_.i).outerHeight()},
						width = el.outerWidth();

					ul.css(styl);
					styl['width'] = Math.min(Math.round((width / el.parent().width()) * 100), 100) + '%';
					el.css(styl);
					li.css({ width: width + 'px' });
				}, 50);
			}).resize();

			//  Move support
			if ($.event.special['move'] || $.Event('move')) {
				el.on('movestart', function(e) {
					if ((e.distX > e.distY && e.distX < -e.distY) || (e.distX < e.distY && e.distX > -e.distY)) {
						e.preventDefault();
					}else{
						el.data("left", _.ul.offset().left / el.width() * 100);
					}
				}).on('move', function(e) {
					var left = 100 * e.distX / el.width();
				        var leftDelta = 100 * e.deltaX / el.width();
					_.ul[0].style.left = parseInt(_.ul[0].style.left.replace("%", ""))+leftDelta+"%";

					_.ul.data("left", left);
				}).on('moveend', function(e) {
					var left = _.ul.data("left");
					if (Math.abs(left) > 30){
						var i = left > 0 ? _.i-1 : _.i+1;
						if (i < 0 || i >= len) i = _.i;
						_.to(i);
					}else{
						_.to(_.i);
					}
				});
			};

			return _;
		};

		//  Move Unslider to a slide index
		_.to = function(index, callback) {
			if (_.t) {
				_.stop();
				_.play();
	                }
			var o = _.o,
				el = _.el,
				ul = _.ul,
				li = _.li,
				current = _.i,
				target = li.eq(index);

			$.isFunction(o.starting) && !callback && o.starting(el, li.eq(current));

			//  To slide or not to slide
			if ((!target.length || index < 0) && o.loop === f) return;

			//  Check if it's out of bounds
			if (!target.length) index = 0;
			if (index < 0) index = li.length - 1;
			target = li.eq(index);

			var speed = callback ? 5 : o.speed | 0,
				easing = o.easing,
				obj = {height: target.outerHeight()};

			if (!ul.queue('fx').length) {
				//  Handle those pesky dots
				el.find('.dot').eq(index).addClass('active').siblings().removeClass('active');

				el.animate(obj, speed, easing) && ul.animate($.extend({left: '-' + index + '00%'}, obj), speed, easing, function(data) {
					_.i = index;

					$.isFunction(o.complete) && !callback && o.complete(el, target);
				});
			};
		};

		//  Autoplay functionality
		_.play = function() {
			_.t = setInterval(function() {
				_.to(_.i + 1);
			}, _.o.delay | 0);
		};

		//  Stop autoplay
		_.stop = function() {
			_.t = clearInterval(_.t);
			return _;
		};

		//  Move to previous/next slide
		_.next = function() {
			return _.stop().to(_.i + 1);
		};

		_.prev = function() {
			return _.stop().to(_.i - 1);
		};

		//  Create dots and arrows
		function nav(name, html) {
			if (name == 'dot') {
				html = '<ol class="dots">';
					$.each(_.li, function(index) {
						html += '<li class="' + (index === _.i ? name + ' active' : name) + '">' + ++index + '</li>';
					});
				html += '</ol>';
			} else {
				html = '<div class="';
				html = html + name + 's">' + html + name + ' prev">' + _.o.prev + '</div>' + html + name + ' next">' + _.o.next + '</div></div>';
			};

			_.el.addClass('has-' + name + 's').append(html).find('.' + name).click(function() {
				var me = $(this);
				me.hasClass('dot') ? _.stop().to(me.index()) : me.hasClass('prev') ? _.prev() : _.next();
			});
		};
	};

	//  Create a jQuery plugin
	$.fn.unslider = function(o) {
		var len = this.length;

		//  Enable multiple-slider support
		return this.each(function(index) {
			//  Cache a copy of $(this), so it
			var me = $(this),
				key = 'unslider' + (len > 1 ? '-' + ++index : ''),
				instance = (new Unslider).init(me, o);

			//  Invoke an Unslider instance
			me.data(key, instance).data('key', key);
		});
	};

	Unslider.version = "1.0.0";
})(jQuery, false);

head
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<meta name="language" content="ru" />
	<link rel="stylesheet" href="/themes/meke/views/site/css/style.css">
	<link rel="stylesheet" type="text/css" href="/assets/a8f0f84/css/bootstrap.min.css" />
<link rel="stylesheet" type="text/css" href="/assets/a8f0f84/css/yii.css" />
<script type="text/javascript" src="/assets/74e1bcec/jquery.min.js"></script>
<script type="text/javascript" src="/assets/74e1bcec/jquery.ba-bbq.min.js"></script>
<script type="text/javascript" src="/assets/a8f0f84/js/bootstrap.min.js"></script>
<title>СS:Bans 1.3</title>
				<script src="/themes/meke/views/site/js/unslider.js"></script>
	<link rel="stylesheet" type="text/css" href="/css/styles.css" />
</head>
Ответить с цитированием
  #2 (permalink)  
Старый 13.07.2015, 23:00
Новичок на форуме
Отправить личное сообщение для meke Посмотреть профиль Найти все сообщения от meke
 
Регистрация: 13.07.2015
Сообщений: 6

Вся страница:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ru" lang="ru">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<meta name="language" content="ru" />
	<link rel="stylesheet" href="/themes/meke/views/site/css/style.css">
	<link rel="stylesheet" type="text/css" href="/assets/a8f0f84/css/bootstrap.min.css" />
<link rel="stylesheet" type="text/css" href="/assets/a8f0f84/css/yii.css" />
<script type="text/javascript" src="/assets/74e1bcec/jquery.min.js"></script>
<script type="text/javascript" src="/assets/74e1bcec/jquery.ba-bbq.min.js"></script>
<script type="text/javascript" src="/assets/a8f0f84/js/bootstrap.min.js"></script>
<title>СS:Bans 1.3</title>
				<script src="/themes/meke/views/site/js/unslider.js"></script>
	<link rel="stylesheet" type="text/css" href="/css/styles.css" />
</head>
<body>
<div class="navbar navbar-fixed-top"><div class="navbar-inner"><div class="container"><ul id="yw0" class="nav"><li><a href="/">Главная</a></li><li><a href="/bans/index.html">Банлист</a></li><li><a href="/amxadmins/index.html">Админы</a></li><li><a href="/serverinfo/index.html">Серверы</a></li><li><a href="http://vk.com/cslove">Вконтакте</a></li><li><a href="/billing/buy.html">Магазин</a></li><li><a href="http://cslove.ru/">Мониторинг</a></li></ul><ul class="pull-right nav" id="yw1"><li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#">sheremekkee <span class="caret"></span></a><ul id="yw2" class="dropdown-menu"><li><a tabindex="-1" href="/admin.html">Админцентр</a></li><li class="divider"></li><li><a tabindex="-1" href="/site/logout.html"><i class="icon-off"></i> Выйти</a></li></ul></li></ul></div></div></div><div id="wrap">
	<div class="container" id="page">
							
		<div id="content">
	<div class="banner">
			<ul style="list-style: none; list-style-type: none;">

				<li style="background-image: url('/themes/meke/views/site/images/wood.jpg');">
					<div class="inner">
						<h1>Fluid, flexible, fantastically minimal.</h1>
						<p>Use any HTML in your slides, extend with CSS. You have full control.</p>

						<a class="btn" href="#download">Download</a>
					</div>
				</li>

				<li style="background-image: url('/themes/meke/views/site/images/subway.jpg');">
					<div class="inner">
						<h1>Open-source.</h1>
						<p>Everything to do with Unslider is hosted on GitHub.</p>

						<a class="btn" href="//github.com/idiot/unslider">Contribute</a>
					</div>
				</li>

				<li style="background-image: url('/themes/meke/views/site/images/shop.jpg');">
					<div class="inner">
						<h1>Uh, that’s about it.</h1>
						<p>I just wanted to show you another slide.</p>

						<a class="btn" href="#download">Download</a>
					</div>
				</li>
			</ul>
		</div> 

		<script>
			if(window.chrome) {
				$('.banner li').css('background-size', '100% 100%');
			}

			$('.banner').unslider({
				speed: 500,
				delay: 3000,
				arrows: true,
				fluid: true,
				dots: true
			});

			//  Find any element starting with a # in the URL
			//  And listen to any click events it fires
			$('a[href^="#"]').click(function() {
				//  Find the target element
				var target = $($(this).attr('href'));

				//  And get its position
				var pos = target.offset(); // fallback to scrolling to top || {left: 0, top: 0};

				//  jQuery will return false if there's no element
				//  and your code will throw errors if it tries to do .offset().left;
				if(pos) {
					//  Scroll the page
					$('html, body').animate({
						scrollTop: pos.top,
						scrollLeft: pos.left
					}, 1000);
				}

				//  Don't let them visit the url, we'll scroll you there
				return false;
			});

			var GoSquared = {acct: 'GSN-396664-U'};
		</script>
<br>

<div class="row-fluid">
	<div class="span6">
		<div class="alert alert-info"><h4>Последние 10 банов</h4></div>
		<div id="bans-grid" class="grid-view">
<table class="items table table-striped table-bordered table-condensed">
<thead>
<tr>
<th id="bans-grid_c0">Ник игрока</th><th id="bans-grid_c1">Дата</th><th id="bans-grid_c2">Срок бана</th></tr>
</thead>
<tbody>
<tr style="cursor:pointer;" class="bantr odd" onclick="document.location.href=&#039;/bans/6557.html&#039;">
<td>1$R01L DANGEROUS 939393</td><td>13.07.2015</td><td style="width: 130px">1 дн. </td></tr>
<tr style="cursor:pointer;" class="bantr even" onclick="document.location.href=&#039;/bans/6556.html&#039;">
<td>Mr. Skillovik</td><td>13.07.2015</td><td style="width: 130px">1 час. </td></tr>
<tr style="cursor:pointer;" class="bantr odd" onclick="document.location.href=&#039;/bans/6555.html&#039;">
<td>KAZ4KCOREJZ</td><td>13.07.2015</td><td style="width: 130px">1 дн. </td></tr>
<tr style="cursor:pointer;" class="bantr even" onclick="document.location.href=&#039;/bans/6554.html&#039;">
<td>Player</td><td>13.07.2015</td><td style="width: 130px">2 дн. </td></tr>
<tr style="cursor:pointer;" class="bantr odd" onclick="document.location.href=&#039;/bans/6553.html&#039;">
<td>Андрюша*</td><td>13.07.2015</td><td style="width: 130px">1 дн. </td></tr>
<tr style="cursor:pointer;" class="bantr even" onclick="document.location.href=&#039;/bans/6552.html&#039;">
<td>Snaiper_</td><td>13.07.2015</td><td style="width: 130px">1 нед. </td></tr>
<tr style="cursor:pointer;" class="bantr odd" onclick="document.location.href=&#039;/bans/6551.html&#039;">
<td>FaNToM</td><td>12.07.2015</td><td style="width: 130px">1 нед. </td></tr>
<tr style="cursor:pointer;" class="bantr even" onclick="document.location.href=&#039;/bans/6550.html&#039;">
<td>[A_D_D]IMBA</td><td>11.07.2015</td><td style="width: 130px">1 нед. </td></tr>
<tr style="cursor:pointer;" class="bantr odd" onclick="document.location.href=&#039;/bans/6549.html&#039;">
<td>BEAV!SE</td><td>11.07.2015</td><td style="width: 130px">1 мес. 1 дн. </td></tr>
<tr style="cursor:pointer;" class="bantr even" onclick="document.location.href=&#039;/bans/6548.html&#039;">
<td>dsad</td><td>10.07.2015</td><td style="width: 130px">1 нед. </td></tr>
</tbody>
</table> <div class="keys" style="display:none" title="/"><span>6557</span><span>6556</span><span>6555</span><span>6554</span><span>6553</span><span>6552</span><span>6551</span><span>6550</span><span>6549</span><span>6548</span></div>
</div>	</div>

		<div class="span6">
		<div class="alert alert-info"><h4>Сервера</h4></div>
		<table class="table table-bordered table-condensed table-striped">
			<thead>
				<tr>
					<th>Имя сервера</th>
					<th>Игроки</th>
					<th>Карта</th>
				</tr>
			</thead>
			<tbody id="servers">
								<tr 
					class="warning" 
					style="cursor: pointer"
					id="server3"
					onclick="document.location.href='/serverinfo/3.html'"
				>
					<td colspan="3">
						Guide to Skill - CSLOVE.Ru						&nbsp;
						<img src="/images/loading.gif" alt="" />					</td>
				</tr>
							</tbody>
		</table>

	</div>
</div>
<script>
	$(document).ready(function(){
			$.post(
			"/serverinfo/getinfo.html",
			{
				'YII_CSRF_TOKEN': 'fbe8d3bb35d254cce92862cd587a12324e577a77',
				'server': '3'
			},
			function(data){
				var ret;
				var info = $.parseJSON(data);
				var elem = $('#server3');
				if(!info)
				{
					ret = '<td colspan="3">Guide to Skill - CSLOVE.Ru <b>Не отвечает</b></td>';
					elem.addClass('error');
				}
				else
				{
					ret = '<td>' + info.name + '</td><td>' + info.players + '/' + info.playersmax + '</td><td>' + info.map + '</td>';
				}
				elem.removeClass('warning').html(ret);
			}
		);
		});
</script>
</div>

		<div class="clear"></div>
		<div id="push"></div>
	</div>
</div>
<div id="footer">
	<div class="container">
		<p class="muted credit">
			&copy; 2015 
			<a target="_blank" href="http://craft-soft.ru">Craft-Soft Studio</a>			<br />
			All Rights Reserved.
			<br />
			<br />
		</p>
	</div>
</div>
<div id="loading">
	<h1>Загрузка</h1>
	<div class="circle"></div>
	<div class="circle1"></div>
</div>
<script type="text/javascript" src="/assets/29e2710d/gridview/jquery.yiigridview.js"></script>
<script type="text/javascript">
/*<![CDATA[*/
jQuery(function($) {
jQuery('#bans-grid').yiiGridView({'ajaxUpdate':['bans-grid'],'ajaxVar':'ajax','pagerClass':'pagination','loadingClass':'grid-view-loading','filterClass':'filters','tableClass':'items table table-striped table-bordered table-condensed','selectableRows':1,'enableHistory':false,'updateSelector':'{page}, {sort}','filterSelector':'{filter}'});
jQuery('body').tooltip({'selector':'a[rel=tooltip]'});
jQuery('body').popover({'selector':'a[rel=popover]'});
});
/*]]>*/
</script>
</body>
</html>
Ответить с цитированием
  #3 (permalink)  
Старый 14.07.2015, 08:40
Аватар для join
Профессор
Отправить личное сообщение для join Посмотреть профиль Найти все сообщения от join
 
Регистрация: 05.03.2012
Сообщений: 477

Лучше бы сразу сделал архив со всеми стилями и скриптами со страницы и прикрепил к сообщению. И jQuery библиотеку не забываем подключать.

заменить внизу:
(function($) {
$('#bans-grid').yiiGridView({'ajaxUpdate':['bans-grid'],'ajaxVar':'ajax','pagerClass':'pagination','loadingClass':'grid-view-loading','filterClass':'filters','tableClass':'items table table-striped table-bordered table-condensed','selectableRows':1,'enableHistory':false,'updateSelector':'{page}, {sort}','filterSelector':'{filter}'});
$('body').tooltip({'selector':'a[rel=tooltip]'});
$('body').popover({'selector':'a[rel=popover]'});
})(jQuery);
Ответить с цитированием
  #4 (permalink)  
Старый 14.07.2015, 23:38
Новичок на форуме
Отправить личное сообщение для meke Посмотреть профиль Найти все сообщения от meke
 
Регистрация: 13.07.2015
Сообщений: 6

Сообщение от join Посмотреть сообщение
Лучше бы сразу сделал архив со всеми стилями и скриптами со страницы и прикрепил к сообщению. И jQuery библиотеку не забываем подключать.

заменить внизу:
(function($) {
$('#bans-grid').yiiGridView({'ajaxUpdate':['bans-grid'],'ajaxVar':'ajax','pagerClass':'pagination','loadingClass':'grid-view-loading','filterClass':'filters','tableClass':'items table table-striped table-bordered table-condensed','selectableRows':1,'enableHistory':false,'updateSelector':'{page}, {sort}','filterSelector':'{filter}'});
$('body').tooltip({'selector':'a[rel=tooltip]'});
$('body').popover({'selector':'a[rel=popover]'});
})(jQuery);
То что внизу в исходниках не смог найти, чтобы заменить. Есть еще варианты решения? Каждая строчка ссылается из множества других файлов, да и вообще еще не могу понять, как работает yii
Ответить с цитированием
  #5 (permalink)  
Старый 15.07.2015, 08:11
Аватар для join
Профессор
Отправить личное сообщение для join Посмотреть профиль Найти все сообщения от join
 
Регистрация: 05.03.2012
Сообщений: 477

Сообщение от meke Посмотреть сообщение
Есть еще варианты решения?
Есть конечно. Первый: Подождать шамана_бубенгеича. Второй: Сходить к гадалке на сеанс ворожбы.
Ответить с цитированием
  #6 (permalink)  
Старый 28.07.2015, 00:37
Новичок на форуме
Отправить личное сообщение для meke Посмотреть профиль Найти все сообщения от meke
 
Регистрация: 13.07.2015
Сообщений: 6

join,
Найти так и не смог...
Попробовал изменить через google chrome "Показать код элемента" - там изменил скрипт, как Вы говорили, чтобы посмотреть действительно будет работать или нет. Но увы не чего не произошло, меню не открывается..
Ответить с цитированием
  #7 (permalink)  
Старый 28.07.2015, 12:26
Новичок на форуме
Отправить личное сообщение для meke Посмотреть профиль Найти все сообщения от meke
 
Регистрация: 13.07.2015
Сообщений: 6

Скрипт выпадающего меню ( не реклама )
Ответить с цитированием
  #8 (permalink)  
Старый 28.07.2015, 12:38
Новичок на форуме
Отправить личное сообщение для meke Посмотреть профиль Найти все сообщения от meke
 
Регистрация: 13.07.2015
Сообщений: 6

сам js файл
Вложения:
Тип файла: zip bootstrap-dropdown.zip (1.6 Кб, 0 просмотров)
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Бесконечноуровневое меню на CSS ruslan_mart Ваши сайты и скрипты 5 12.01.2015 20:59
Текуший пункт меню и разные родители Kiano Элементы интерфейса 17 08.01.2015 07:59
Выделение активных пунктов многоуровневого меню на jQuery Letto Элементы интерфейса 2 04.12.2013 15:30
Выпадающие меню like2dev Общие вопросы Javascript 9 21.10.2011 14:09
Проблема с аккордионом и меню Tie ExtJS 3 01.09.2011 14:36