Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 30.10.2010, 01:57
Аватар для Kauperwood
Интересующийся
Отправить личное сообщение для Kauperwood Посмотреть профиль Найти все сообщения от Kauperwood
 
Регистрация: 30.10.2010
Сообщений: 19

Независимое затухание обьектов, используя вместе с createRequestObject()
Здравствуйте! Вчера ночью стянул себе скрипт загрузки контента без перезагрузки страницы, мне он нужен для того что бы мой логотип, который под скрипт fade-In, fade-out -не перезагружался при переходах. Также похожий скрипт (fade-In,fade-out) юзался для вывода текстового контента.
Итого у меня jquery, 3 скрипта и noconflict()
Значт все пашет более менее, но вот с выводом текста борода, - по нажатию на ссылку появляеться, и плавно исчезает полностью, плюс заметил что логотип тоже перезагружаеться что не есть хорошо.
мой файл scripts,js
$.noConflict();
  jQuery(document).ready(function($) {jQuery(function() {

 //<затухание текстового контента>//
       $(document).ready(function() {
        $("#contentBody").css("display", "none");

        $("#contentBody").fadeIn(1000);

	$("a.transition").click(function(event){
		event.preventDefault();
		linkLocation = this.href;
		$("#contentBody").fadeOut(1500, redirectPage);
	});

	function redirectPage() {
		window.location = linkLocation;
	}
});
//<затухание текстового контента>//

//<неоновый логотип>//

$(document).ready(function(){

    setInterval(function(){
    var versions = $('.textVersion:visible');
    if(versions.length<2){
    $('.textVersion').fadeIn(2000);
      }
        else{
       
            versions.eq(0).fadeOut(2000);
        }
    },1000);
 
});
//</неоновый логотип>//

});

  });

//<Загрузка контента без перезагрузки страницы>//
 function showContent(link) {  
  
         var cont = document.getElementById('contentBody');  
         var loading = document.getElementById('loading');  
   
        cont.innerHTML = loading.innerHTML;  
   
         var http = createRequestObject();  
         if( http )   
         {  
             http.open('get', link);  
            http.onreadystatechange = function ()   
             {  
                 if(http.readyState == 4)   
                {  
                     cont.innerHTML = http.responseText;  
                 }  
              }  
             http.send(null);      
          }  
        else   
          {  
             document.location = link;  
         }  
     }  
   
// создание ajax объекта  
     function createRequestObject()   
     {  
         try { return new XMLHttpRequest() }  
       catch(e)   
         {  
             try { return new ActiveXObject('Msxml2.XMLHTTP') }  
            catch(e)   
             {  
                 try { return new ActiveXObject('Microsoft.XMLHTTP') }  
                 catch(e) { return null; }  
              }  
          }  
     }  
//</Загрузка контента без перезагрузки страницы>//


Пожалуйста помогите розобраться, трудно нагуглить правильный запрос, т.к в js нуб. Буду признателен за любую помощь, очень хочеться что бы зароботало))


локальный пример:
Вложения:
Тип файла: zip primer.zip (36.6 Кб, 5 просмотров)
Ответить с цитированием
  #2 (permalink)  
Старый 30.10.2010, 03:00
Аватар для Kauperwood
Интересующийся
Отправить личное сообщение для Kauperwood Посмотреть профиль Найти все сообщения от Kauperwood
 
Регистрация: 30.10.2010
Сообщений: 19

в принципе без затухания текстового контента, все роботает правильно. Конечно можно и так пользовоться, тем не меннее такое впечатление что нехватает буквально одной строчки кода. Посмотрите пожалуйста, если зделать, может кому то потом и пригодиться.
Ответить с цитированием
  #3 (permalink)  
Старый 30.10.2010, 10:16
Особый гость
Посмотреть профиль Найти все сообщения от monolithed
 
Регистрация: 02.04.2010
Сообщений: 4,260

Сообщение от Kauperwood
//<Загрузка контента без перезагрузки страницы>//
Используйте jQuery реализацию Ajax
Ответить с цитированием
  #4 (permalink)  
Старый 30.10.2010, 21:13
Аватар для Kauperwood
Интересующийся
Отправить личное сообщение для Kauperwood Посмотреть профиль Найти все сообщения от Kauperwood
 
Регистрация: 30.10.2010
Сообщений: 19

Цитата:
Используйте jQuery реализацию Ajax
Спасибо, понял что это приблизительно где то так:
$(document).ready(function(){    
$('#contentBody').click(function(){      // вешаем на клик по элементу с id = example-1
$(this).load('primer1.html');  // загрузку HTML кода из файла primer1.html
})
});

Просто теряюсь каким образом это связать с :
//<затухание текстового контента>//
	       $(document).ready(function() {
	        $("#contentBody").css("display", "none");
	 
	        $("#contentBody").fadeIn(1000);
	    $("a.transition").click(function(event){
	        event.preventDefault();
	        linkLocation = this.href;
	        $("#contentBody").fadeOut(1500, redirectPage);
	    });
	 
	    function redirectPage() {
	        window.location = linkLocation;
	    }
	});
	//<затухание текстового контента>//

полагаю что это все должно роботать вместе, или все же нужно модернизировать реализацию ajax?
Ответить с цитированием
  #5 (permalink)  
Старый 31.10.2010, 02:21
Аватар для Tim
Tim Tim вне форума
Профессор
Отправить личное сообщение для Tim Посмотреть профиль Найти все сообщения от Tim
 
Регистрация: 05.06.2009
Сообщений: 1,703

Ну что тут скажешь, править мне лень что то. А вот пояснить что к чему могу.

$(document).ready(function() {    // Обработчик события "загрузка документа". 
            $("#contentBody").css("display", "none");    // Установка css свойства "display" в значение "none". Т.е. скрытие элемента с айди "contentBody". инетесно почему не устроил такой вариант: .hide(); (вместо .css("display", "none"))
      
            $("#contentBody").fadeIn(1000); // Плавное отображение только что скрытого элемента

        // Обработчик кликов по ссылке с классом "transition"
        $("a.transition").click(function(event){
            event.preventDefault();  // Тут глушится немедленный переход по ссылке с тем, чтобы запустить его чуть позже
            linkLocation = this.href;  // Определяем значение атрибута "href" у ссылки по которой кликнули
            $("#contentBody").fadeOut(1500, redirectPage); // Плавно скрываем элемент с айди "contentBody" и осуществляем редирект.
        });
      
        // Зачем эту функцию сюда засунули? Только отступы лишние и всё. И зачем она вообще? Где логика? Где разум? Каллбячную функцию можно было и не выносить так далеко, особенно когда она состоит всего из одной строки.
        function redirectPage() {
            // Редирект собственно (вот по этому ваша страница и перезагружается). Кст, переход осуществляется по адресу указанном в атрибуте "href" на кликнутой ссылке
            window.location = linkLocation;
        }
    });



Код написан очень плохо. Зачем создавать свои функции для AJAX когда они есть в jQuery. Или они из jQuery только селекторы с анимацией взяли? На это получается ума хватило а на то чтобы код грамотно оформить - нет. Лучше всё переписать чем править тут что то. Не так уж это и сложно. Поставьте конкретную задачу, начните разбираться в ней и по ходу дела задавайте вопросы. Будем рады помочь.
__________________
Лучше установить FreeBSD, чем потратить 30 лет на Linux'ы и выяснить какой из них хуже.
Самые главные в жизни вещи - не вещи! (было написано на одном гараже =)

Последний раз редактировалось Tim, 31.10.2010 в 02:34.
Ответить с цитированием
  #6 (permalink)  
Старый 05.11.2010, 23:36
Аватар для Kauperwood
Интересующийся
Отправить личное сообщение для Kauperwood Посмотреть профиль Найти все сообщения от Kauperwood
 
Регистрация: 30.10.2010
Сообщений: 19

Tim спасибо за пояснения.
Цитата:
Лучше всё переписать чем править тут что то. Не так уж это и сложно.
Cогласен, нужно переделать, последовал вашему совету. В целом все ети вопросы решились, но появились новые.
перебрался на соседнюю ветку: сопутствующие проблемы jquery ajax
Ответить с цитированием
Ответ



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

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