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

[Critical Error]

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

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

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

[Helis]

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

[CalvinKlein]

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

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

Edited September 14, 2012 by CalvinKlein

[Critical Error]

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

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

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

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

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

[hedgehog]

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

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

[Critical Error]

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

[hedgehog]

  On 9/15/2012 at 10:04 AM, Critical Error said:

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

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

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

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

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

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

Edited September 15, 2012 by hedgehog

[nerv]

  On 9/15/2012 at 9:35 AM, Critical Error said:

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

  On 9/15/2012 at 9:58 AM, hedgehog said:

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

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

hedgehog,

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

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

  On 9/15/2012 at 10:12 AM, hedgehog said:

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

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

  On 9/15/2012 at 10:12 AM, hedgehog said:

сейчас как раз пытаюсь разобраться с замыканиями и инкапсуляцией данных в 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]

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

[nerv]

  On 9/15/2012 at 7:46 PM, Int said:

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

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

Edited September 15, 2012 by nerv

[hedgehog]

  On 9/15/2012 at 7:38 PM, nerv said:

hedgehog,

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

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

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

  On 9/15/2012 at 7:38 PM, nerv said:

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

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 said:

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

Эпично!

[nerv]

  On 9/16/2012 at 7:52 AM, hedgehog said:

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

var countclicks = (function() {

// some code

}());

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

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

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

  On 9/16/2012 at 7:52 AM, hedgehog said:

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

стр.98

Edited September 16, 2012 by nerv

[hedgehog]

  On 9/16/2012 at 8:54 AM, nerv said:

стр.98

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

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

[Critical Error]

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

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

  Reveal hidden contents

$(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++

	})
};