Обновление значения

Critical Error · September 14, 2012

Ребята, здравствуйте. Подскажите, пожалуйста, как для var сделать отслеживание изменения значения:

var width = $('#content').width();

При ресайзе окна браузера значение должно обновится без перезагрузки страницы. Есть просто функции, которые от этого значения работают. А при ресайзе значение остается прежним и отображение страдает.

Helis · September 14, 2012

А вы обработчик на ресайз окна повесили?

CalvinKlein · September 14, 2012


$(window).resize(function() {
   width = $('#content').width();
});

так подойдёт?

Edited September 14, 2012 by CalvinKlein

Critical Error · September 15, 2012

Да, повесил. Все нужные переменные определяются единственный раз в начале скрипта и являются общими для всех функций ниже.

При ресайзе идет работает

$(window).bind('resize', function(){
    // объявление переменных по новой
    // скрипт реинициализации. 
});

Получается так, что при ресайзе переменные обновляются и все нормально. Ширина объявляется по новой. А вот те функции, которые ниже, в них, при уже измененной ширине браузера, переменные берутся из первоначальных, кот. в начале скрипта.

Чтобы не писать в каждой функции объявление этих переменных, хочется понять как можно эти первоначальные значения обновлять если происходит ресайз.

hedgehog · September 15, 2012

Ну так организуйте некое хранилище для данных, которые должны быть доступны всем вашим функциям Например, с использованием замыкания: http://jsfiddle.net/4aRZZ/

Я сам чайник в JS, поэтому сейчас прибегут фанаты и напинают.

Critical Error · September 15, 2012

Интересует вот что - как правильно оформить функцию в определении переменной, даже через тот setInterval чтобы она возвращала значение этой ширины?

hedgehog · September 15, 2012

Интересует вот что - как правильно оформить функцию в определении переменной, даже через тот setInterval чтобы она возвращала значение этой ширины?

Почитайте про область видимости переменных. Переменная сначала ищется в scope функции, которая к ней обращается, потом у родителя и так далее. Самый верхний родитель - window, но загаживать глобальную область видимости - это не по-джедайски. Я сейчас как раз пытаюсь разобраться с замыканиями и инкапсуляцией данных в js

Если исходить из примера выше:

Функция clickHandler, при обращении к переменной clicks, ищет ее в своей области видимости. А нету.
Ищет у родителя (countClicks). Находит и использует.

Тот же пример, но с таймером: http://jsfiddle.net/4aRZZ/1/

По правде говоря, я надеюсь что в этот топик заглянет JS спец и укажет на мои ошибки, потому как я только начинаю понимать, как это работает

Edited September 15, 2012 by hedgehog

nerv · September 15, 2012

Чтобы не писать в каждой функции объявление этих переменных, хочется понять как можно эти первоначальные значения обновлять если происходит ресайз.

Ну так организуйте некое хранилище для данных, которые должны быть доступны всем вашим функциям Например, с использованием замыкания

$( window ).on( 'resize', (function() {
    var x = 1;
    return function() {
        alert( x );
    }
}()));

hedgehog,

var countclicks = (function() {
    // some code
})();               // <--

var countclicks = (function() {
    // some code
}());               // <-- не критично, но на мой взгляд этот вариант предпочтительней

По правде говоря, я надеюсь что в этот топик заглянет JS спец и укажет на мои ошибки, потому как я только начинаю понимать, как это работает

я не спец, но для начала запомните, что функции в js имеют лексическую область видимости

сейчас как раз пытаюсь разобраться с замыканиями и инкапсуляцией данных в js

коротко о главном

http://javascript.ru/forum/misc/31048-obyasnite-pochemu-funkciya-rabotaet-imenno-tak-2.html#post201858

http://javascript.ru/forum/misc/31048-obyasnite-pochemu-funkciya-rabotaet-imenno-tak-2.html#post201974

Edited September 15, 2012 by nerv

Int · September 15, 2012

А у этого #content ширина, случайно, не в процентах задана? Тогда нужно смотреть какое-нибудь innerWidth или outerWidth, потому что width как бы в процентах, так и будет. Я так это понимаю. Или в жиквере всё не так?

nerv · September 15, 2012

А у этого #content ширина, случайно, не в процентах задана? Тогда нужно смотреть какое-нибудь innerWidth или outerWidth, потому что width как бы в процентах, так и будет. Я так это понимаю. Или в жиквере всё не так?

http://jsfiddle.net/5JEF8/1/

Edited September 15, 2012 by nerv

hedgehog · September 16, 2012

hedgehog,

var countclicks = (function() {
    // some code
})();               // <--

var countclicks = (function() {
    // some code
}());               // <-- не критично, но на мой взгляд этот вариант предпочтительней

А в чем разница? Я пока не до конца понимаю смысл этих скобок.

коротко о главном
http://javascript.ru/forum/misc/31048-obyasnite-pochemu-funkciya-rabotaet-imenno-tak-2.html#post201858
http://javascript.ru/forum/misc/31048-obyasnite-pochemu-funkciya-rabotaet-imenno-tak-2.html#post201974

смысл замыкания в том, чтобы оставить сборщик мусора не у дел

Эпично!

nerv · September 16, 2012

Я пока не до конца понимаю смысл этих скобок.

var countclicks = (function() {

// some code

}());

скобки группировки

скобки вызова

Особенности функций в JavaScript

А в чем разница?

стр.98

Edited September 16, 2012 by nerv

hedgehog · September 16, 2012

стр.98

Вашу машу... Почему этого всего нету в десятках статей о замыканиях, которые я читал? После всего прочитанного возникает неприятная ситуация: знаешь, что можно сделать так и так, но понятия не имеешь, что конкретно делает этот код и как его применить самому.

Спасибо за pdf'ку!

Critical Error · September 16, 2012

Короче, я психнул , и сделал объявление переменных в каждой функции, их там немного. Вот что теперь загвоздка в том, что при сворачивании/разворачивании по кнопке окна браузера не срабатывает resize.

Вот что вышло:


$(function(){
	// Remove the slider-plugin-no-js class from the body
	$("body").removeClass("slider-plugin-no-js");
	// Прелоадер
	$(".slider-plugin").children('.slide').hide().end().prepend('<p class="loading">Loading...<br /><img src="'+dle_root+'images/ajax-loader.gif" alt="loading..." /></p>')
});

var sliderCount = 1;

$.fn.codaSlider = function(settings) {

	settings = $.extend({
		autoHeight: 1,
		autoHeightEaseDuration: 1000,
		autoHeightEaseFunction: "easeInOutExpo",
		autoSlide: 0,
		autoSlideInterval: 7000,
		autoSlideStopWhenClicked: 1,
		crossLinking: 1,
		dynamicArrows: 1,
		dynamicArrowLeftText: "« left",
		dynamicArrowRightText: "right »",
		dynamicTabs: 1,
		dynamicTabsAlign: "center",
		dynamicTabsPosition: "top",
		externalTriggerSelector: "a.xtrig",
		firstPanelToLoad: 1,
		panelTitleSelector: "h2.title",
		slideEaseDuration: 1000,
		slideEaseFunction: "easeInOutExpo",
		sliderResponse: 1
	}, settings);

	return this.each(function(){

		// Uncomment the line below to test your preloader
		// alert("Testing preloader");

		var slider = $(this);

		// Если нам нужны стрелки навигации
		if (settings.dynamicArrows) {
			slider.addClass("arrows");
			slider.prepend('<div class="slide-prev" id="slider-nav-prev-' + sliderCount + '"><a href="#">' + settings.dynamicArrowLeftText + '</a></div>');
			slider.append('<div class="slide-next" id="slider-nav-next-' + sliderCount + '"><a href="#">' + settings.dynamicArrowRightText + '</a></div>')
		};


		var sliderWidth = slider.width(); // Определяем ширину слайдера
		$('.slide', slider).css({ width : sliderWidth }); // Устанавливаем sliderWidth шириной для каждой панели

		var panelWidth = slider.find('.slide').width(); // Определяем ширину каждой панели в слайдере
		var panelCount = slider.find('.slide').size(); // Определяем количество панелей в слайдере
		var panelContainerWidth = panelWidth*panelCount; // Суммарная ширина всех панелей 

		$('.slide', slider).wrapAll('<div class="slides"><div class="deepest"></div></div>'); // Обволакиваем все панели в контейнер
		$('div.slides > div', slider).css({ width : panelContainerWidth }); // Устанавливаем panelContainerWidth как ширину обертки

		var navClicks = 0; // Используется если autoSlideStopWhenClicked = true

		if (settings.crossLinking && location.hash && parseInt(location.hash.slice(1)) <= panelCount){

			var currentPanel = parseInt(location.hash.slice(1));
			var offset = - (panelWidth*(currentPanel - 1));

			$('div.slides > div', slider).css({ marginLeft : offset })

		} else if (settings.firstPanelToLoad!=1 && settings.firstPanelToLoad <= panelCount){

			var currentPanel = settings.firstPanelToLoad;
			var offset = - (panelWidth*(currentPanel - 1));
			$('div.slides > div', slider).css({ marginLeft : offset })

		} else {

			var currentPanel = 1

		};

		slider.children('.slides').find('.slide').removeClass('active').parents('.slides > div').find('.slide:eq(' + (currentPanel - 1) + ')').addClass('active');

		function reinit() {
			var sliderWidth = slider.width(); // Определяем ширину слайдера
			$('.slide', slider).css({ width : sliderWidth }); // Устанавливаем sliderWidth шириной для каждой панели

			var panelWidth = slider.find('.slide').width(); // Определяем ширину каждой панели в слайдере
			var panelCount = slider.find('.slide').size(); // Определяем количество панелей в слайдере
			var panelContainerWidth = panelWidth*panelCount; // Суммарная ширина всех панелей 

			if (currentPanel == panelCount){
				var offset = 0;
				currentPanel = 1;
				$('div.slides > div', slider).css({ marginLeft : offset })
			} else { 
				currentPanel = $('.slide.active', slider).index();
				var offset = - (panelWidth*currentPanel);
				$('div.slides > div', slider).css({ marginLeft : offset })
			};

			$('div.slides > div', slider).css({ width : panelContainerWidth }); // Устанавливаем panelContainerWidth как ширину обертки

			var panelHeight = $('.slide.active', slider).height();
			slider.css({ height : panelHeight });
		}
		reinit();
		$(window).on('resize', function() {
			reinit();
		});

		$('#slider-nav-prev-' + sliderCount + ' a').click(function(){

			var sliderWidth = slider.width(); // Определяем ширину слайдера
			$('.slide', slider).css({ width : sliderWidth }); // Устанавливаем sliderWidth шириной для каждой панели

			var panelWidth = slider.find('.slide').width(); // Определяем ширину каждой панели в слайдере
			var panelCount = slider.find('.slide').size(); // Определяем количество панелей в слайдере
			var panelContainerWidth = panelWidth*panelCount; // Суммарная ширина всех панелей 

			$('div.slides > div', slider).css({ width : panelContainerWidth }); // Устанавливаем panelContainerWidth как ширину обертки

			navClicks++;
			if (currentPanel == 1){
				offset = - (panelWidth*(panelCount - 1));
				alterPanelHeight(panelCount - 1);
				currentPanel = panelCount;
				slider.children('.slider-nav').find('a.current').removeClass('current').parents('ul').find('li:last a').addClass('current');

				slider.children('.slides').find('.active').removeClass('active').parents('.slides > div').find('.slide:last').addClass('active')
			} else {
				currentPanel -= 1;
				alterPanelHeight(currentPanel - 1);
				offset = - (panelWidth*(currentPanel - 1));
				slider.children('.slider-nav').find('a.current').removeClass('current').parent().prev().find('a').addClass('current');

				slider.children('.slides').find('.slide').removeClass('active').parents('.slides > div').find('.slide:eq(' + (currentPanel - 1) + ')').addClass('active');

			};
			$('div.slides > div', slider).animate({ marginLeft : offset }, settings.slideEaseDuration, settings.slideEaseFunction);
			if (settings.crossLinking) { location.hash = currentPanel };
			return false
		});
		$('#slider-nav-next-' + sliderCount + ' a').click(function(){

			var sliderWidth = slider.width(); // Определяем ширину слайдера
			$('.slide', slider).css({ width : sliderWidth }); // Устанавливаем sliderWidth шириной для каждой панели

			var panelWidth = slider.find('.slide').width(); // Определяем ширину каждой панели в слайдере
			var panelCount = slider.find('.slide').size(); // Определяем количество панелей в слайдере
			var panelContainerWidth = panelWidth*panelCount; // Суммарная ширина всех панелей 

			$('div.slides > div', slider).css({ width : panelContainerWidth }); // Устанавливаем panelContainerWidth как ширину обертки

			navClicks++;
			if (currentPanel == panelCount){
				offset = 0;
				currentPanel = 1;
				alterPanelHeight(0);
				slider.children('.slider-nav').find('a.current').removeClass('current').parents('ul').find('a:eq(0)').addClass('current');

				slider.children('.slides').find('.slide').removeClass('active').parents('.slides > div').find('.slide:eq(0)').addClass('active')
			} else {
				offset = - (panelWidth*currentPanel);
				alterPanelHeight(currentPanel);
				currentPanel += 1;
				slider.children('.slider-nav').find('a.current').removeClass('current').parent().next().find('a').addClass('current');

				slider.children('.slides').find('.slide').removeClass('active').parents('.slides > div').find('.slide:eq(' + (currentPanel - 1) + ')').addClass('active');

			};
			$('div.slides > div', slider).animate({ marginLeft : offset }, settings.slideEaseDuration, settings.slideEaseFunction);
			if (settings.crossLinking){ location.hash = currentPanel };
			return false
		});
		if (settings.dynamicTabs){
			var dynamicTabs = '<div class="slider-nav" id="slider-nav-' + sliderCount + '"><ul class="deepest"></ul></div>';
			switch(settings.dynamicTabsPosition){
				case "bottom":
					slider.append(dynamicTabs);
					break;
				default:
					slider.prepend(dynamicTabs);
					break
			};
			ul = $('#slider-nav-' + sliderCount + ' ul');
			$('.slide', slider).each(function(n) {
				ul.append('<li class="tab' + (n + 1) + '"><a href="#' + (n + 1) + '">' + $(this).find(settings.panelTitleSelector).text() + '</a></li>')
			});
			//navContainerWidth = slider.width() + slider.children('.slide-nav-prev').width() + slider.children('.slide-nav-nex').width();
			//ul.css({ width : navContainerWidth });
			switch(settings.dynamicTabsAlign){
				case "center":
					ul.addClass('slider-nav-center');
					break;
				case "left":
					ul.addClass('slider-nav-left');
					break;
				case "right":
					ul.addClass('slider-nav-right');
					break
			}
		};
		$('#slider-nav-' + sliderCount + ' a').each(function(z) {

			$(this).bind("click", function() {

				var sliderWidth = slider.width(); // Определяем ширину слайдера
				$('.slide', slider).css({ width : sliderWidth }); // Устанавливаем sliderWidth шириной для каждой панели

				var panelWidth = slider.find('.slide').width(); // Определяем ширину каждой панели в слайдере
				var panelCount = slider.find('.slide').size(); // Определяем количество панелей в слайдере
				var panelContainerWidth = panelWidth*panelCount; // Суммарная ширина всех панелей 

				$('div.slides > div', slider).css({ width : panelContainerWidth }); // Устанавливаем panelContainerWidth как ширину обертки

				navClicks++;
				$(this).addClass('current').parents('ul').find('a').not($(this)).removeClass('current');

				offset = - (panelWidth*z);
				alterPanelHeight(z);
				currentPanel = z + 1;
				$('div.slides > div', slider).animate({ marginLeft : offset }, settings.slideEaseDuration, settings.slideEaseFunction);

				slider.children('.slides').find('.slide').removeClass('active').parents('.slides > div').find('.slide:eq(' + (currentPanel - 1) + ')').addClass('active');

				if (!settings.crossLinking) { return false }
			})
		});
		$(settings.externalTriggerSelector).each(function() {

			if (sliderCount == parseInt($(this).attr("rel").slice(12))) {
				$(this).bind("click", function(){

					var sliderWidth = slider.width(); // Определяем ширину слайдера
					$('.slide', slider).css({ width : sliderWidth }); // Устанавливаем sliderWidth шириной для каждой панели

					var panelWidth = slider.find('.slide').width(); // Определяем ширину каждой панели в слайдере
					var panelCount = slider.find('.slide').size(); // Определяем количество панелей в слайдере
					var panelContainerWidth = panelWidth*panelCount; // Суммарная ширина всех панелей 

					$('div.slides > div', slider).css({ width : panelContainerWidth }); // Устанавливаем panelContainerWidth как ширину обертки

					navClicks++;
					targetPanel = parseInt($(this).attr("href").slice(1));
					offset = - (panelWidth*(targetPanel - 1));
					alterPanelHeight(targetPanel - 1);
					currentPanel = targetPanel;
					slider.children('.slider-nav').find('a').removeClass('current').parents('ul').find('li:eq(' + (targetPanel - 1) + ') a').addClass('current');

					slider.children('.slides').find('.slide').removeClass('active').parents('.slides > div').find('.slide:eq(' + (currentPanel - 1) + ')').addClass('active');

					$('div.slides > div', slider).animate({ marginLeft : offset }, settings.slideEaseDuration, settings.slideEaseFunction);
					if (!settings.crossLinking){ return false }
				})
			}
		});
		if (settings.crossLinking && location.hash && parseInt(location.hash.slice(1)) <= panelCount){
			$("#slider-nav-" + sliderCount + " a:eq(" + (location.hash.slice(1) - 1) + ")").addClass("current")
		} else if (settings.firstPanelToLoad != 1 && settings.firstPanelToLoad <= panelCount){
			$("#slider-nav-" + sliderCount + " a:eq(" + (settings.firstPanelToLoad - 1) + ")").addClass("current")
		} else {
			$("#slider-nav-" + sliderCount + " a:eq(0)").addClass("current")
		};
		if (settings.autoHeight){
			panelHeight = $('.slide:eq(' + (currentPanel - 1) + ')', slider).height();
			slider.css({ height : panelHeight })
		};
		if (settings.autoSlide){
			slider.ready(function() {
				setTimeout(autoSlide, settings.autoSlideInterval)
			})
		};
		function alterPanelHeight(x) {
			if (settings.autoHeight) {
				panelHeight = $('.slide:eq(' + x + ')', slider).height();
				slider.animate({ height : panelHeight }, settings.autoHeightEaseDuration, settings.autoHeightEaseFunction)
			}
		};
		function autoSlide() {

			var sliderWidth = slider.width(); // Определяем ширину слайдера
			$('.slide', slider).css({ width : sliderWidth }); // Устанавливаем sliderWidth шириной для каждой панели

			var panelWidth = slider.find('.slide').width(); // Определяем ширину каждой панели в слайдере
			var panelCount = slider.find('.slide').size(); // Определяем количество панелей в слайдере
			var panelContainerWidth = panelWidth*panelCount; // Суммарная ширина всех панелей 

			$('div.slides > div', slider).css({ width : panelContainerWidth }); // Устанавливаем panelContainerWidth как ширину обертки

			if (navClicks == 0 || !settings.autoSlideStopWhenClicked) {
				if (currentPanel == panelCount){
					var offset = 0;
					currentPanel = 1
				} else { 
					var offset = - (panelWidth*currentPanel);
					currentPanel += 1
				};
				alterPanelHeight(currentPanel - 1);
				slider.children('.slider-nav').find('a').removeClass('current').parents('ul').find('li:eq(' + (currentPanel - 1) + ') a').addClass('current');

				slider.children('.slides').find('.slide').removeClass('active').parents('.slides > div').find('.slide:eq(' + (currentPanel - 1) + ')').addClass('active');

				$('div.slides > div', slider).animate({ marginLeft : offset }, settings.slideEaseDuration, settings.slideEaseFunction);
				setTimeout(autoSlide, settings.autoSlideInterval)
			}
		};


		$('.slide', slider).show().end().find("p.loading").remove();
		slider.removeClass("preload");

		sliderCount++

	})
};

Sign In

Обновление значения

Question

Link to comment

Share on other sites

13 answers to this question

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Обсуждения

Important Information