За последние 24 часа нас посетили 63019 программистов и 1747 роботов. Сейчас ищут 794 программиста ...

Необновляемый блок div

Тема в разделе "JavaScript и AJAX", создана пользователем Zerox, 6 дек 2011.

  1. Zerox

    Zerox Активный пользователь

    С нами с:
    18 янв 2010
    Сообщения:
    123
    Симпатии:
    0
    Добрый день!
    Появилась такая задача: есть сайт. Надо, чтобы при переходах на другие страницы, один блок <div> (содержится на всех страницах) не обновлялся. Там будет Flash-проигрыватель (музыка). Я уже видел подобную вещь на "вконтакте.ру". Там сейчас плеер и чат не меняет своего положения. Т.к. даже не знаю как такое можно сделать, обращаюсь к вам. Подскажите плз.
    Спасибо!
     
  2. rainarr

    rainarr Активный пользователь

    С нами с:
    20 ноя 2010
    Сообщения:
    276
    Симпатии:
    0
    даа..вконтакте в этом плане и меня очень удивил когда я там зарегался. ссаному фейсбуку с его 250 индусами этого недостичь.
    всё просто - jquery. но на готовый проект это всё устроить будет очень сложно. проще всё с нуля переписать.
     
  3. Zerox

    Zerox Активный пользователь

    С нами с:
    18 янв 2010
    Сообщения:
    123
    Симпатии:
    0
    дак вот, сейчас решил делать новый дизайн для сайта, потому и решил встроить такую штучку. ибо как-то не солидно при переходе по страницам онлайн-радиостанции обрываться звуку. С jquery не был знаком... только далеко... может покажете как такое реализовать? (Вопрос не из категории "сделайте все за меня", а из категории "покажите, чтобы я знал как такое делать", спасибо).
     
  4. rainarr

    rainarr Активный пользователь

    С нами с:
    20 ноя 2010
    Сообщения:
    276
    Симпатии:
    0
    идея проста - сайт не обновляется, используя современные фишки можно изменять (не обязательно) url браузера (страницу не обновляя), лазить по сайту, давать кому то эти ссылки, а весь контент подгружается с jquery.. тем самым плеер всегда висит запущеным.
    в твоем случае можно для начала просто всплывающее окно поюзать откуда будет идти звук, а там постепенно и мутить новый интерфейс.
     
  5. Zerox

    Zerox Активный пользователь

    С нами с:
    18 янв 2010
    Сообщения:
    123
    Симпатии:
    0
    Сейчас подумал и понял как сделать.
    Маленькая загвостка - как забирать $_GET и передавать значение серверу?
    Погуглил. Нашел этот код парсинга GET массива.
    [js]function parseGET(url)
    {
    if(!url || url == '') url = document.location.search;
    if(url.indexOf('?') < 0) return Array();

    url = url.split('?');
    url = url[1];

    var GET = [];
    var params = [];
    var keyval = [];

    if(url.indexOf('#')!=-1)
    {
    anchor = url.substr(url.indexOf('#')+1);
    url = url.substr(0,url.indexOf('#'));
    }

    if(url.indexOf('&') > -1) params = url.split('&');
    else params[0] = url;

    for (i=0; i<params.length; i++)
    {
    if(params.indexOf('=') > -1) keyval = params.split('=');
    else { keyval[0] = params; keyval[1] = true; }
    GET[keyval[0]]=keyval[1];
    }

    return (GET);
    };
    var $_GET = parseGET();
    [/js]

    Нашел код AJAX.
    [js]$.ajax({
    url: '/ajax/example.php',
    dataType : "json",
    success: function (data, textStatus) {
    $.each(data, function(i, val) { // обрабатываем полученные данные
    /* ... */
    });
    }
    });[/js]
    Теперь надо в URL от запроса AJAX указать ?act=$_GET['act']
     
  6. Zerox

    Zerox Активный пользователь

    С нами с:
    18 янв 2010
    Сообщения:
    123
    Симпатии:
    0
    сделал все намного проще:
    [js]jQuery(function($){
    $('a').attr('onclick','return false;').click(function(){
    var href = $(this).attr('href');
    $('.wrapper').load(href+' .content', function(){
    history.pushState(null, null, href);
    });
    });
    });
    [/js]
     
  7. rainarr

    rainarr Активный пользователь

    С нами с:
    20 ноя 2010
    Сообщения:
    276
    Симпатии:
    0
    как то я уверен на 100% что это не то ;)
     
  8. Михаил

    Михаил Активный пользователь

    С нами с:
    12 июл 2009
    Сообщения:
    545
    Симпатии:
    0
    Адрес:
    Bielarus
    я думаю там используется flash storage (если я правильно уловил суть вопроса)
     
  9. Zerox

    Zerox Активный пользователь

    С нами с:
    18 янв 2010
    Сообщения:
    123
    Симпатии:
    0
    Все работает. В этом скрипте
    [js]jQuery(function($){
    $('a').attr('onclick','return false;').click(function(){
    var href = $(this).attr('href'); ЗАПОМИНАЕТСЯ АДРЕС
    $('.wrapper').load(href+' .content', function(){ В ОБЪЕКТ С КЛАССОМ wrapper ВСТАВЛЯЕТСЯ СОДЕРЖИМОЕ С ДРУГОЙ СТРАНИЦЫ ИЗ ОБЪЕКТА content
    history.pushState(null, null, href); ЗАМЕНА АДРЕСА
    });
    });
    });[/js]
    Вроде все правильно, но:
    Почему то при переходе на страницу не отображается виджет от ВК - комментарии (после перезагрузки страницы все норм) и при переходе по другой ссылке (уже получается второй раз) идет полная загрузка всей страницы... Странно
    посмотреть можете на http://radio-mixer.ru/test