Список форумов wap-club.ru
  Текущее время 07/Май/2024, 3:01:06   

Список форумов wap-club.ru -> WEB-стройка

изменить title сайта из JS / JQuery

  Автор    Thread Начать новую тему Ответить на тему
SWEN
Администратор форума


Зарегистрирован: 08.02.2021
Сообщения: 615
Откуда: РЕСПУБЛИКА КРЫМ
изменить title сайта из JS / JQuery

https://snipp.ru/jquery/title-js

Сообщение 03/Апр/2022, 21:06:40 
 Посмотреть профиль Отправить личное сообщение sw-en@mail.ru HTTPS://WAP-CLUB.RU Имя в реале: ВЛАДИМИР  Ответить с цитатой  
SWEN
Администратор форума


Зарегистрирован: 08.02.2021
Сообщения: 615
Откуда: РЕСПУБЛИКА КРЫМ

Для привлечения внимания пользователя, например о каком либо событии, изменяют title страницы (особенно это заметно когда вкладка с сайтом не активна).

В JS за содержимое элемента <title> отвечает свойство document.title, оно содержит текущий заголовок документа:

var title = document.title;
console.log(title);
JS
А также назначает новый:

document.title = 'Новый заголовок страницы';
JS
Тitle в JQuery
В JQuery работа с тайтлом происходит как с обычном элементом:

var title = $('title').text();
console.log(title);
JS
$('title').text('Новый заголовок страницы');
JS
Далее несколько примеров как сделать динамический заголовок страницы.

1
Бегущая строка в title
<button id="start">Запустить</button>
<button id="stop">Остановить</button>

<script>
var timer;
var start_title = document.title;

$('#start').click(function(){
for (i = 0; i < 5; i++) {
document.title = document.title + ' | ' + start_title;
}

timer = setInterval(function(){
lenta = document.title;
if (lenta.length == 100){
lenta = lenta + ' | ' + start_title;
}
document.title = lenta.substr(1, lenta.length);
}, 100);
});

$('#stop').click(function(){
clearInterval(timer);
document.title = start_title;
});
</script>

Сообщение 03/Апр/2022, 21:07:05 
 Посмотреть профиль Отправить личное сообщение sw-en@mail.ru HTTPS://WAP-CLUB.RU Имя в реале: ВЛАДИМИР  Ответить с цитатой  
SWEN
Администратор форума


Зарегистрирован: 08.02.2021
Сообщения: 615
Откуда: РЕСПУБЛИКА КРЫМ

Мигающий заголовок страницы
Поочередный вывод сообщения «* Новое сообщение *» в <title>:

<button id="start">Запустить</button>
<button id="stop">Остановить</button>

<script>
var timer;
var counter = 0;
var start_title = document.title;
var message = '* Новое сообщение *';

$('#start').click(function(){
timer = setInterval(function(){
if (counter % 2) {
document.title = start_title;
} else {
document.title = message;
}
counter++;
}, 1000);
});

$('#stop').click(function(){
clearInterval(timer);
document.title = start_title;
});
</script>

Сообщение 03/Апр/2022, 21:07:36 
 Посмотреть профиль Отправить личное сообщение sw-en@mail.ru HTTPS://WAP-CLUB.RU Имя в реале: ВЛАДИМИР  Ответить с цитатой  
  Показать сообщения:      
Начать новую тему Ответить на тему

Перейти:  


Last Thread | Next Thread  >

Forum Rules:
Вы не можете начинать темы
Вы не можете отвечать на сообщения
Вы не можете редактировать свои сообщения
Вы не можете удалять свои сообщения
Вы не можете голосовать в опросах
Вы не можете вкладывать файлы
Вы не можете скачивать файлы

 

Professional Website Templates Free web design, web templates, web layouts, and website resources, psd templates | lminteractive | layoutbank | linkauction | bizsell
Web Templates

Professional Website Templates Free web design, web templates, web layouts, and website resources, and psd templates!