Avatar

Полезные скрипты HTML/JS (HTML, JS, another tricks)

by mak ⌂, Monday, April 15, 2024, 10:50 (220 days ago)

Привет,

Предлагаю тему, где можно публиковать полезные трюки в работе с HTML/JS, чтобы постоянно не гуглить, предлагаю собрать их в одном месте - здесь.

Например, чтобы выполнить переадресацию, можно использовать на странице между тегов head следующий код:

<meta http-equiv="refresh" content="3; url=http://website.com/page.html">

3 - это количество секунд до переадресации, 0 это мгновенно переадресовать.

или же то же самое, но с использованием JavaScript, но с определённым приколом, например если к вам пришли с определённого сайта:

if ( (document.referrer == "http://badsite.com/obosrat_site.html")|(document.referrer == "http://badsite2.net/obosrat_site.html") )
{
document.write("Идите на три буквы");
window.location.href = "http://microsoft.com";
}
else
{
window.location.href = "http://mysupersite.com";
}


Этот JS код можно совместить с вараинтом редиректа через метатеги, без опознования откуда пришёл посетитель, используя его между тегами head таким образом:

<script language="JavaScript" type="text/javascript" src="redirect.js"></script>
<noscript>
<meta http-equiv="refresh" content="3; url=http://website.com/page.html">
</noscript>

В этмо случае, если JS отключен или не поддерживается, сработает метатег.

Tags:
HTML, JS, tricks, трюки, хаки

Avatar

Полезные скрипты HTML/JS

by Turboblack ⌂, Monday, April 15, 2024, 11:02 (220 days ago) @ mak

Этот простой JavaScript-код используется для изменения текущего URL в адресной строке браузера на корневой URL (в данном случае "/").

<script>
window.history.replaceState({}, null, '/');
</script>

Проще говоря, если у вас адрес sitemane.com и вы добавили этот скрипт в свой index.html перед </head> то при переходе на sitename.com/что-то-там у вас всегда будет показываться адрес sitemane.com

--
We live in the distant past, we are still not at all civilized

Tags:
JS, JAVASCRIPT

Avatar

Полезные скрипты HTML/JS

by Turboblack ⌂, Saturday, April 20, 2024, 19:05 (214 days ago) @ mak

https://www.htaccessredirect.net/ очень полезный набор утилит для сайтостроителей нашел

--
We live in the distant past, we are still not at all civilized

Avatar

Полезные скрипты HTML/JS

by mak ⌂, Thursday, April 25, 2024, 12:40 (210 days ago) @ mak

Как сделать, чтобы на мобильном сайт отображался крупнее: добавляем для этого между head

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Tags:
HTML, tricks

Avatar

Полезные скрипты HTML/JS

by Turboblack ⌂, Wednesday, July 17, 2024, 11:04 (127 days ago) @ mak

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

CSS
_______________________________________________________

.blinking-cursor {
font-weight: bold;
font-size: 1em;
color: #ffffff; //цвет курсора
background-color: #693AEA; // цвет заднего фона для курсора
font-family: 'Courier New', Courier, monospace;
animation: blink 1s step-end infinite;
}

@keyframes blink {
from, to {
visibility: hidden;
}
50% {
visibility: visible;
}
}


JS
_______________________________________________________

<script>
(function() {
function updateCurrentPage() {
var currentPage = window.location.pathname;
var lastSegment = currentPage.substring(currentPage.lastIndexOf('/') + 1);
var lastSegmentWithoutExtension = lastSegment.split('.')[0];
var decodedSegment;

if (window.decodeURIComponent) {
decodedSegment = decodeURIComponent(lastSegmentWithoutExtension);
} else {
decodedSegment = unescape(lastSegmentWithoutExtension);
}

var upperCaseSegment = decodedSegment.toUpperCase();
var formattedSegment = 'C:\\>' + upperCaseSegment;
document.getElementById('current-page').innerHTML = formattedSegment + '<span class="blinking-cursor">_</span>';
}

if (document.addEventListener) {
document.addEventListener('DOMContentLoaded', updateCurrentPage);
} else if (document.attachEvent) {
document.attachEvent('onreadystatechange', function() {
if (document.readyState === 'complete') {
updateCurrentPage();
}
});
} else {
window.onload = updateCurrentPage;
}
})();
</script>

_________________________________________________________________
этот код перед названием страницы отображает C:\> и на странице это будет выглядеть
как C:\\>НАЗВАНИЕ_

HTML
________________________________________
в нужном месте вашего гипертекста установите:

<div id="current-page"></div>
________________________________________

это весь рецепт
пользуйтесь

--
We live in the distant past, we are still not at all civilized

Avatar

Полезные скрипты HTML/JS

by Turboblack ⌂, Monday, July 22, 2024, 06:32 (122 days ago) @ mak

Setting the button "up" to any theme

Step 1. Add the JavaScript in the site template before the closing </ head>

<script type="text/javascript">$(document).ready(function(){
$(window).scroll(function () {if ($(this).scrollTop() > 0) {$('#scroller').fadeIn();} else {$('#scroller').fadeOut();}});
$('#scroller').click(function () {$('body,html').animate({scrollTop: 0}, 400); return false;});
});</script>

Step 2. Add the html-code in the template of the site before the closing </ body>

<div id="scroller" class="b-top" style="display: none;"><span class="b-top-but">наверх</span></div>

Step
3. Add the CSS-style block and button up in the file style.css
(style.css file name you can have both, but it does not matter, add the
code in any style file that connects to the site).

.b-top {z-index:2600;position:fixed;left:0;bottom:90px;width:34%;margin-left:50%;opacity: 0.5;filter:alpha(opacity=50);}
.b-top:hover {opacity:1;filter:alpha(opacity=100);cursor:pointer;}
.b-top-but {z-index:2600;position:absolute;display:block;left:56px;bottom:0;margin:0 0 0 100%;padding:32px 12px 4px;
color:white;background:#D8D5C2 url(http://yourpageadress/up.png) no-repeat 50% 11px;border-radius:7px;}

Change path to the image on your's server ;-)

--
We live in the distant past, we are still not at all civilized

Tags:
up button

Полезные скрипты HTML/JS

by Ftod, Monday, July 22, 2024, 08:16 (122 days ago) @ mak

Перетаскивание Div блока на странице

Для того что бы сделать блок перетаскиваемым на странице, надо добавить следующий код

Добавим стили:
<style>
.draggable {
width: 200px;
position: absolute;
cursor: move;
padding: 10px;
user-select: none; /* Отключение выделение текста */
border: none; /* Убирание рамки */
background-color: transparent; /* Прозрачный фон */
}
</style>

Вставим js скрипт:
<script>
document.addEventListener('DOMContentLoaded', () => {
const dragElement = document.getElementById('draggable');

dragElement.addEventListener('mousedown', (e) => {
e.preventDefault(); // Отключаем выделение текста

let shiftX = e.clientX - dragElement.getBoundingClientRect().left;
let shiftY = e.clientY - dragElement.getBoundingClientRect().top;

function moveAt(pageX, pageY) {
dragElement.style.left = pageX - shiftX + 'px';
dragElement.style.top = pageY - shiftY + 'px';
}

function onMouseMove(e) {
moveAt(e.pageX, e.pageY);
}

document.addEventListener('mousemove', onMouseMove);

document.addEventListener('mouseup', () => {
document.removeEventListener('mousemove', onMouseMove);
}, { once: true });
});

dragElement.ondragstart = () => false;
});
</script>

И теперь упакуем наш контент в div блок:
<div id="draggable" class="draggable">
контент
</div>

Полезные скрипты HTML/JS

by Ftod, Monday, July 22, 2024, 17:29 (121 days ago) @ mak

Рандомный показ изображений на сайте

Вставляем этот js код:
<script>
document.addEventListener('DOMContentLoaded', function() {
// Генерация случайного числа
var randomNumber = Math.floor(Math.random() * 50) + 1;
// Формирование пути к файлу
var imagePath = 'ВАША ПАПКА/' + randomNumber + '.png';
// Получение элемента img по его id
var imgElement = document.getElementById('randomImage');
// Установка пути к файлу в атрибут src элемента img
imgElement.src = imagePath;
});
</script>

Там где генерация случайного числа, надо поставить число ваших картинок в папке, в моем случае их было 50, вы ставите свое число

В форматировании пути указывайте свою папку

Что бы картинки отображались, вставьте этот код:
<img id="randomImage" src="" width="600" height="200" alt="Случайная фотография">

Avatar

HTML/JS - создаем собственные теги

by Turboblack ⌂, Saturday, July 27, 2024, 07:34 (117 days ago) @ mak

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

Этот прием покажет как сделать свои собственные, и зачем.
Способ предполагает, что вы используете нестандартные HTML теги (<m> и </m>), что работает в большинстве современных браузеров, но не является стандартной практикой.

пример скрипта:

CSS

m {
font-style: italic;
}

JavaScript

document.addEventListener("DOMContentLoaded", function() {
const mTags = document.querySelectorAll("m");
mTags.forEach(tag => {
tag.classList.add("m");
});
});


HTML

Пример текста <m>который должен стать курсивным</m> внутри фразы.

Как вы понимаете - в стили можно вставить любое условие, которое вам нравится.
например: сделать градиент цветов для текста, или изменить шрифт, добавить фон картинкой, да что угодно можно сделать ;-)

--
We live in the distant past, we are still not at all civilized

Tags:
нестандартный, джаваскрипт

RSS Feed of thread