Страница 4 из 5 « Первая < 23 4 5 >
Показывать 40 сообщений этой темы на одной странице

Javascript-форум (https://javascript.ru/forum/)
-   Общие вопросы Javascript (https://javascript.ru/forum/misc/)
-   -   можно ли изменить цвет ссылок? и одну ссылку заменить на текст? (https://javascript.ru/forum/misc/76934-mozhno-li-izmenit-cvet-ssylok-i-odnu-ssylku-zamenit-na-tekst.html)

Блондинка 31.03.2019 19:38
Malleys, неужели сложно к этому скрипту добавить следующий функционал,
Цитата:
Сообщение от Malleys (Сообщение 505755) 
<!DOCTYPE html>
<head><title></title></head>
<body>
<style type="text/css">
body { font: 14px normal Times, serif; }
a { text-decoration: none; color: #5a5aff; }
a:hover { color: #5a96ff; }
a.act { color: #4c994c; }
span.act { color: #4c994c; }
</style>
<div id="msgText">
<a href="001.html">Ссылка 001</a><br/>
<a href="/001.html">Ссылка /001</a><br/>
<a href="css/001.html">Ссылка css/001</a><br/>
<a href="/css/001.html">Ссылка /css/001</a><br/>
<a href="002.html">Ссылка2</a><br/>
<a href="003.html">Ссылка3</a><br/>
<a href="004.html">Ссылка4</a><br/>
<a href="005.html">Ссылка5</a><br/>
<a href="006.html">Ссылка6</a><br/>
<a href="007.html">Ссылка7</a><br/>
</div>
<script type="text/javascript">
(function() {
	var links = Array.prototype.slice.call(document.links);
	for(var index = 0, length = links.length, link; index < length; index++) {
		link = links[index];

		if(link.href === location.href) {
			var p = document.createElement("span");
			p.className = "act";
			p.innerHTML = link.innerHTML;
			link.parentNode.replaceChild(p, link);
		}
	}
})();
</script>
</body>
</html>
массив с именами классов, скрипт после замены тега <а> на спан обрезает адрес полученный через location, с конца до первого слеша находит совпадение среди ссылок и присвает класс который второй в массиве, потом обрезает адрес до второго слеша и присваивает следующий класс из массива и так далее и обернуть в конструкцию DOMContentLoaded

Malleys 31.03.2019 21:34
Цитата:
Сообщение от Блондинка
надо подсветить первые три ссылки в каждом див'е
 
div > a:nth-of-type(-n + 3) { background: yellow; }


Вы посмотрели хоть какие-нибудь материалы, которые я посоветовал вам для изучения CSS?

Цитата:
Сообщение от Блондинка
после замены тега <а> на спан обрезает адрес полученный через location, с конца до первого слеша находит совпадение среди ссылок и присвает класс который второй в массиве, потом обрезает адрес до второго слеша и присваивает следующий класс из массива и так далее
Вы просите найти части URL (это location.href), которые я подсветил в следующем примере... но кроме первой (которую вы заменили на <span>) таких совпадении не происходит!
<p><s>https://example.com/<mark>textbook/css/css-filters-2/properties/backdrop-filter</mark></s></p>
<p>https://example.com/textbook/<mark>css/css-filters-2/properties/backdrop-filter</mark></p>
<p>https://example.com/textbook/css/<mark>css-filters-2/properties/backdrop-filter</mark></p>
<p>https://example.com/textbook/css/css-filters-2/<mark>properties/backdrop-filter</mark></p>
<p>https://example.com/textbook/css/css-filters-2/properties/<mark>backdrop-filter</mark></p>

Блондинка 31.03.2019 23:05
Malleys,
вот код страницы 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="https://www.w3.org/1999/xhtml">
<head>
<title>transform</title>
<style type="text/css">
body { font: 14px normal Times, serif; }
div { border: 1px solid #999; padding: 5px; margin: 5px; }
a:active, a:link { color: #005aff; text-decoration: none; } 
a.:visited { color: #5995ff; text-decoration: none; } 
a:hover { color: #7a00ff; text-decoration: none; }
.efg { color: #167016; }
.def { color: #127a12; }
.cde { color: #0d850d; }
.bcd { color: #068f06; }
.abc { color: #009900; }
</style>
<script>
var classes = ['act',  'abc', 'bcd', 'cde', 'def', 'efg'];
(function() {
	var links = Array.prototype.slice.call(document.links);
	for(var index = 0, length = links.length, link; index < length; index++) {
		link = links[index];

		if(link.href === location.href) {
			var p = document.createElement("span");
			p.className = "act";
			p.innerHTML = link.innerHTML;
			link.parentNode.replaceChild(p, link);
		}
	}
})();
</script>
</head>
<body>
<div class="menu" id="menu1">
<a href="/razdel/">razdel/</a><br>
<a href="/razdel/01.html">page-01</a><br>
<a href="/razdel/02.html">page-02</a><br>
<a href="/razdel/03.html">page-03</a>
<div class="menu" id="menu2">
<a href="/razdel/podrazdel/">podrazdel/</a><br>
<a href="/razdel/podrazdel/01.html">page-01</a><br>
<a href="/razdel/podrazdel/02.html">page-02</a><br>
<a href="/razdel/podrazdel/03.html">page-03</a>
<div class="menu" id="menu3">
<a href="/razdel/podrazdel/podpodrazdel/">podpodrazdel/</a><br>
<a href="/razdel/podrazdel/podpodrazdel/01.html">page-01</a><br>
<a href="/razdel/podrazdel/podpodrazdel/02.html">page-02</a><br>
<a href="/razdel/podrazdel/podpodrazdel/03.html">page-03</a>
<div class="menu" id="menu4">
<a href="/razdel/podrazdel/podpodrazdel/podrazdel-a/">podrazdel-a/</a><br>
<a href="/razdel/podrazdel/podpodrazdel/podrazdel-a/01.html">page-01</a><br>
<a href="/razdel/podrazdel/podpodrazdel/podrazdel-a/02.html">page-02</a><br>
<a href="/razdel/podrazdel/podpodrazdel/podrazdel-a/03.html">page-03</a>
</div>
</div>
</div>
</div>
</body>
</html>

а вот адрес сайт.ru/razdel/podrazdel/podpodrazdel/podrazdel-a/01.html"

На этой странице надо найти ссылки соответствующие текущему адресу, через location href обрезать окончания адреса до слеша и присвоить классы из массива, так понятно будет?

Malleys 01.04.2019 00:18
Цитата:
Сообщение от Блондинка
надо найти ссылки соответствующие текущему адресу, через location href обрезать окончания адреса
 
<!doctype html>
<html>
<head>
	<title>transform</title>
	<style>
		body { font: 14px normal Times, serif; }
		div { border: 1px solid #999; padding: 5px; margin: 5px; }
		a { color: #005aff; text-decoration: none; } 
		a:visited { color: #5995ff; text-decoration: none; } 
		a:hover { color: #7a00ff; text-decoration: none; }
		.act { color: initial; pointer-events: none; }
		.efg { color: #167016; }
		.def { color: #127a12; }
		.cde { color: #0d850d; }
		.bcd { color: #068f06; }
		.abc { color: #009900; }
	</style>
	<script>
		document.addEventListener("DOMContentLoaded", function() {
			var links = Array.prototype.slice.call(document.links);
			var classes = ["act",  "abc", "bcd", "cde", "def", "efg"];
			var href = location.href;

			for(var index = 0, length = links.length, link; index < length; index++) {
				link = links[index];

				for(var level = 0, part = href; level < classes.length; level++) {
					if(link.href === part || link.href === part + "/") {
						link.className = classes[level];
						break;
					}

					part = part.replace(/\/[^/]*\/?$/, "");
				}
			}
		});
	</script>
</head>
<body>
<div class="menu" id="menu1">
	<a href="/razdel/">razdel/</a><br>
	<a href="/razdel/01.html">page-01</a><br>
	<a href="/razdel/02.html">page-02</a><br>
	<a href="/razdel/03.html">page-03</a>
	<div class="menu" id="menu2">
		<a href="/razdel/podrazdel/">podrazdel/</a><br>
		<a href="/razdel/podrazdel/01.html">page-01</a><br>
		<a href="/razdel/podrazdel/02.html">page-02</a><br>
		<a href="/razdel/podrazdel/03.html">page-03</a>
		<div class="menu" id="menu3">
			<a href="/razdel/podrazdel/podpodrazdel/">podpodrazdel/</a><br>
			<a href="/razdel/podrazdel/podpodrazdel/01.html">page-01</a><br>
			<a href="/razdel/podrazdel/podpodrazdel/02.html">page-02</a><br>
			<a href="/razdel/podrazdel/podpodrazdel/03.html">page-03</a>
			<div class="menu" id="menu4">
				<a href="/razdel/podrazdel/podpodrazdel/podrazdel-a/">podrazdel-a/</a><br>
				<a href="/razdel/podrazdel/podpodrazdel/podrazdel-a/01.html">page-01</a><br>
				<a href="/razdel/podrazdel/podpodrazdel/podrazdel-a/02.html">page-02</a><br>
				<a href="/razdel/podrazdel/podpodrazdel/podrazdel-a/03.html">page-03</a>
			</div>
		</div>
	</div>
</div>
</body>
</html>
Так подходит?

Широкие однако у вас интересы... Теперь учебник про подподподразделы пишете!

Цитата:
Сообщение от Блондинка
так понятно будет?
Откуда мне знать было, что ссылки надо читать справа налево!

Блондинка 01.04.2019 10:23
Malleys,
если честно то не знаю, на странице почему то не подсвечивает,

P. S. я походу опять не так объяснила, ссылка на саму себя должна заменится на спан которому надо присвоить класс который стоит первым в массиве
степень вложенности может быть намного больше, порядка 12-15, до 20 (/папка/папка/.../папка/ и т.д.)

Блондинка 01.04.2019 11:26
мне почему-то казалось что фраза (ну или пост)
Цитата:
Сообщение от Блондинка
неужели сложно к этому скрипту добавить следующий функционал
автоматически подразумевает замену тега <а> на спан

Malleys 01.04.2019 11:29
Вы поменяли 33 строчку... хотя это вы попытались пошутить и неожиданно спалились, что вы знаете тонкости RegExp!

Какой баг!!! Я проверял этот скрипт на реальных переходах по ссылке (сервер же можно настроить так, чтобы он отвечал на все запросы одним ответом) Однако ваш ларёк теряет обратные слеши, если создавать файл через их сайт, однако если загрузить файл, то не теряет! Вам надо сохранить скрипт в файл, и затем загрузить на ларёк!

Блондинка 01.04.2019 12:27
Malleys,
сейчас загрузила страницу, обратные слеши появились, ссылка на саму себя заменилась на текст, но ссылки на главные папок почему то не подсвечивает, и в моём браузере и в опере классик

Malleys 01.04.2019 12:44
А почему вы решили, что если правило написать ниже в CSS, то оно отменяет те, которые выше?

a:active, a:link замените на a


Вы не ответили на вопрос... Вы посмотрели видео/статьи про CSS?

Цитата:
Сообщение от Блондинка
ссылки на главные папок почему то не подсвечивает
Вы хоть какие-нибудь усилия предприняли, чтобы понять почему оно не подсвечивает? Скрипт уже расставил ваши классы!

Блондинка 01.04.2019 13:50
Цитата:
Сообщение от Malleys
Вы не ответили на вопрос... Вы посмотрели видео/статьи про CSS?
если честно, то не до конца, пока в процессе изучения/запоминания

Блондинка 01.04.2019 13:53
походу я опять где-то накосячила, скрипт подсвечивает ссылки на главные папок, но ссылку на саму себя не меняет на спан

Блондинка 01.04.2019 21:01
Malleys,
можно спросить? какая строка меняет тег <а> на спан?

Блондинка 02.04.2019 11:01
Никто не знает как на этой странице ссылку (тег <а>) заменить на текст (тег <span>)?
<!DOCTYPE html>
<html>
<head>
<title>transform</title>
<style>
body { font: 14px normal Times, serif; }
div { border: 1px solid #999; padding: 5px; margin: 5px; }
a:active, a:link { color: #005aff; text-decoration: none; }
a.act:active, a.act:link { color: #009900; text-decoration: none; } 
a.abc:active, a.abc:link { color: #009900; text-decoration: none; } 
a.bcd:active, a.bcd:link { color: #068f06; text-decoration: none; } 
a.cde:active, a.cde:link { color: #0d850d; text-decoration: none; } 
a.def:active, a.def:link { color: #127a12; text-decoration: none; } 
a.efg:active, a.efg:link { color: #167012; text-decoration: none; } 
a.:visited { color: #5995ff; text-decoration: none; } 
a:hover { color: #7a00ff; text-decoration: none; }
</style>
<script>
document.addEventListener("DOMContentLoaded", function() {
var links = Array.prototype.slice.call(document.links);
var classes = ["act","abc", "bcd", "cde", "def", "efg"];
var href = location.href;
for(var index = 0, length = links.length, link; index < length; index++) {
link = links[index];
for(var level = 0, part = href; level < classes.length; level++) {
if(link.href === part || link.href === part + "/") {
link.className = classes[level];
break;
}
part = part.replace(/\/[^/]*\/?$/, "");

}
}
});
</script>
</head>
<body>
<div class="menu" id="menu1">
<a href="/razdel/">razdel/</a><br>
<a href="/razdel/01.html">page-01</a><br>
<a href="/razdel/02.html">page-02</a><br>
<a href="/razdel/03.html">page-03</a>
<div class="menu" id="menu2">
<a href="/razdel/podrazdel/">podrazdel/</a><br>
<a href="/razdel/podrazdel/01.html">page-01</a><br>
<a href="/razdel/podrazdel/02.html">page-02</a><br>
<a href="/razdel/podrazdel/03.html">page-03</a>
<div class="menu" id="menu3">
<a href="/razdel/podrazdel/podpodrazdel/">podpodrazdel/</a><br>
<a href="/razdel/podrazdel/podpodrazdel/01.html">page-01</a><br>
<a href="/razdel/podrazdel/podpodrazdel/02.html">page-02</a><br>
<a href="/razdel/podrazdel/podpodrazdel/03.html">page-03</a>
<div class="menu" id="menu4">
<a href="/razdel/podrazdel/podpodrazdel/podrazdel-a/">podrazdel-a/</a><br>
<a href="/razdel/podrazdel/podpodrazdel/podrazdel-a/01.html">page-01</a><br>
<a href="/razdel/podrazdel/podpodrazdel/podrazdel-a/02.html">page-02</a><br>
<a href="/razdel/podrazdel/podpodrazdel/podrazdel-a/03.html">page-03</a>
</div>
</div>
</div>
</div>
</body>
</html>

Malleys 02.04.2019 11:14
Чтобы ссылка не нажималась можно так...
.act {
    pointer-events: none;
}


Непонятно зачем вы это удалили!

Для вас имеет какой-то сакральный смысл элемент <span>?

Зачем вы удаляете все отступы в коде? https://javascript.ru/forum/505820-post124.html

Блондинка 02.04.2019 11:49
Malleys,
ссылка хоть не нажималась, но не подсвечивалась
у меня есть какая то старая версия оперы-мини которая даже радиус углов не распознаёт, этим я хочу сказать, что если я сама могу обновить свой браузер до последней версии, то заставить всех посетителей обновлять браузеры я не могу, так же нельзя предугадать с какого браузера зайдёт посетитель, поэтому желательно чтобы скрипт работал во всех браузерах и старых версиях тоже (разные недоразумения типа ослика иа в список не входят).

Malleys 02.04.2019 12:07
Так напишите в .act как должна выглядеть эта ссылка!

99.9% обычных людей заходят с обновлённого браузера, остальные являются параноиками, веб-программистами, веб куда-то скатился, против всех, гугл следит, люблю хрюшу, гиками, ночтальгия по 2007... а вы тут со своим border-radius

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

Цитата:
Сообщение от Блондинка
возможно ли сделать со спаном или нет?
вам уже показали со <span> вы продолжили возмущаться, поэтому его убрали...

У вас прямо философия получается: меняю кнопку на див, ссылку на спан.

Давайте угадаю, дальше идёт: меняю стиль на блок, картинку на холст... как зачем? Меняю текст на картинку!

Какой баг!!! типа печатаете и сразу результат видно, а то ваш ларёк на погроммирование в аду похож! И попробуй введи обратный слеш!

Блондинка 02.04.2019 12:12
возможно ли сделать со спаном или нет?

Блондинка 02.04.2019 13:37
Цитата:
Сообщение от Malleys
вам уже показали со <span> вы продолжили возмущаться, поэтому его убрали...
а в каком посте?

Блондинка 02.04.2019 13:55
Цитата:
Сообщение от Malleys (Сообщение 505755) 
<!DOCTYPE html>
<head><title></title></head>
<body>
<style type="text/css">
body { font: 14px normal Times, serif; }
a { text-decoration: none; color: #5a5aff; }
a:hover { color: #5a96ff; }
a.act { color: #4c994c; }
span.act { color: #4c994c; }
</style>
<div id="msgText">
<a href="001.html">Ссылка 001</a><br/>
<a href="/001.html">Ссылка /001</a><br/>
<a href="css/001.html">Ссылка css/001</a><br/>
<a href="/css/001.html">Ссылка /css/001</a><br/>
<a href="002.html">Ссылка2</a><br/>
<a href="003.html">Ссылка3</a><br/>
<a href="004.html">Ссылка4</a><br/>
<a href="005.html">Ссылка5</a><br/>
<a href="006.html">Ссылка6</a><br/>
<a href="007.html">Ссылка7</a><br/>
</div>
<script type="text/javascript">
(function() {
	var links = Array.prototype.slice.call(document.links);
	for(var index = 0, length = links.length, link; index < length; index++) {
		link = links[index];

		if(link.href === location.href) {
			var p = document.createElement("span");
			p.className = "act";
			p.innerHTML = link.innerHTML;
			link.parentNode.replaceChild(p, link);
		}
	}
})();
</script>
</body>
</html>


Проверил пример... работает как следует! Но очень зависит, откуда вы запускаете...

Так чтобы работало, вы и должны просматривать файл 001.html в корне сайта/файловой системы

Так чтобы работало, вы и должны просматривать http://сайт.ru/001.html

Какой баг!!! <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="https://www.w3.org/1999/xhtml"> и ларк не переваривает!
этот пост? данный пост и скрипт я воспринимаю как отдельный отличный скрипт, который можно и нужно использовать на простых сайтах с одноуровневым меню, а не начала/продолжила возмущаться,

дальше я просто спросила про скрипт для более сложного сайта, где много папок и страниц, с большой вложенностью,

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

Malleys 02.04.2019 14:39
Вот оно для одного и другого вместе, объединил, проверьте...

<!doctype html>
<html>
<head>
	<title>transform</title>
	<style>
		body { font: 14px normal Times, serif; }
		div { border: 1px solid #999; padding: 5px; margin: 5px; }
		a { color: #005aff; text-decoration: none; } 
		a:visited { color: #5995ff; text-decoration: none; } 
		a:hover { color: #7a00ff; text-decoration: none; }
		.act { text-decoration: underline; }
		.efg { color: #167016; }
		.def { color: #127a12; }
		.cde { color: #0d850d; }
		.bcd { color: #068f06; }
		.abc { color: #009900; }
	</style>
	<script>
		document.addEventListener("DOMContentLoaded", function() {
			var links = Array.prototype.slice.call(document.links);
			var classes = ["act",  "abc", "bcd", "cde", "def", "efg"];
			var href = location.href;

			for(var index = 0, length = links.length, link; index < length; index++) {
				link = links[index];

				for(var level = 0, part = href; level < classes.length; level++) {
					if(link.href === part || link.href === part + "/") {
						if(level === 0) {
							var p = document.createElement("span");
							p.className = classes[level];
							p.innerHTML = link.innerHTML;
							link.parentNode.replaceChild(p, link);
						} else {
							link.className = classes[level];
						}
						break;
					}

					part = part.replace(/\/[^/]*\/?$/, "");
				}
			}
		});
	</script>
</head>
<body>
<div class="menu" id="menu1">
	<a href="/razdel/">razdel/</a><br>
	<a href="/razdel/01.html">page-01</a><br>
	<a href="/razdel/02.html">page-02</a><br>
	<a href="/razdel/03.html">page-03</a>
	<div class="menu" id="menu2">
		<a href="/razdel/podrazdel/">podrazdel/</a><br>
		<a href="/razdel/podrazdel/01.html">page-01</a><br>
		<a href="/razdel/podrazdel/02.html">page-02</a><br>
		<a href="/razdel/podrazdel/03.html">page-03</a>
		<div class="menu" id="menu3">
			<a href="/razdel/podrazdel/podpodrazdel/">podpodrazdel/</a><br>
			<a href="/razdel/podrazdel/podpodrazdel/01.html">page-01</a><br>
			<a href="/razdel/podrazdel/podpodrazdel/02.html">page-02</a><br>
			<a href="/razdel/podrazdel/podpodrazdel/03.html">page-03</a>
			<div class="menu" id="menu4">
				<a href="/razdel/podrazdel/podpodrazdel/podrazdel-a/">podrazdel-a/</a><br>
				<a href="/razdel/podrazdel/podpodrazdel/podrazdel-a/01.html">page-01</a><br>
				<a href="/razdel/podrazdel/podpodrazdel/podrazdel-a/02.html">page-02</a><br>
				<a href="/razdel/podrazdel/podpodrazdel/podrazdel-a/03.html">page-03</a>
			</div>
		</div>
	</div>
</div>
</body>
</html>


Надо для простого пишите var classes = ["act"];

Надо для сложного пишите var classes = ["act", "abc", "bcd", "cde", "def", "efg"];

Строка 21 в этом посте

Блондинка 02.04.2019 17:56
не знаю почему, но на странице спан почему-то черный

Nexus 02.04.2019 19:20
Блондинка, решетку пропустили.
span.act { color: *!*#*/!*ffff00; }

Блондинка 02.04.2019 20:52
Nexus,
:thanks:

Блондинка 02.04.2019 20:53
Malleys,
:thanks:

Блондинка 03.04.2019 15:56
возможно ли на странице с помощью css, так сказать "прокрутить" содержимое див'а чтобы спан или занимал верхнее положение, а ссылки которые перед ним были скрыты но можно было прокрутить вниз, или чтобы занимал такое место чтобы ниже ссылок не оставалось свободного места,

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

Блондинка 03.04.2019 21:18
наверное лучше использовать margin с отрицательным значением для первой ссылки? и на каждой странице выставлять своё значение? вместо позиционирования? вопрос как лучше реализовать на css без использования js.

Блондинка 03.04.2019 23:37
свойство margin с минусовыми значениями сдвигает только до границы родительского див'а, свойство position relative сдвигает на нужное количество пикселей но не даёт прокручивать вниз, только можно покрутить вверх, и при прокручивании вверх до конца остаётся свободное место между последней ссылкой и нижним краем див'а, кто знает что можно предпринять?

Блондинка 04.04.2019 22:53
как обычно, не могу правильно сформулировать вопрос,
ну незнаю я как правильно объяснить

Блондинка 05.04.2019 11:34
laimas,
и ты тоже ничего не подскажешь по css ?

laimas 05.04.2019 15:11
Цитата:
Сообщение от Блондинка
и ты тоже ничего не подскажешь по css ?
Я вообще не понимаю о чем тут речь, ибо не слежу, что тут хотят раскрасить и зачем. Я в эту тему только по ошибке попадаю, случайно. :)

Блондинка 05.04.2019 19:09
laimas,
так уже давно всё раскрасили,

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

Блондинка 05.04.2019 19:14
Поскольку я буду вручную редактировать страницы, скрипты не нужны, чисто стили

Блондинка 05.04.2019 23:01 
<script>
  window.onload = function() {
    menu5.scrollTop = 36
  };
</script>

вот что нужно, но вопрос как реализовать это чисто на css?

laimas 06.04.2019 00:56
Я не знаю средств css, которые бы занимались прокруткой, есть отступы внутренние/внешние.

Malleys 06.04.2019 02:14
Цитата:
Сообщение от laimas
Я не знаю средств css, которые бы занимались прокруткой
CSS Snap Level 1, хотя то, что требует Блондинка, является скорей якорем!

Цитата:
Сообщение от Блондинка
Поскольку я буду вручную редактировать страницы, скрипты не нужны, чисто стили
А зачем вам страницы, вам достаточно одной страницы! Вам же не нужен кипятильно-плиточный код!

Цитата:
Сообщение от Блондинка
вот что нужно, но вопрос как реализовать это чисто на css?
Я не знаю, чем вам не подходит вами же написанное решение на JS! А не кажется ли вам, что пользователь должен сам решать, что ему смотреть? Может тогда стоит удалить или переместить ниже то, что вы хотите скрыть!

UPD Ваше width: 200px; display: inline-block; делается так: display: block;

Блондинка 06.04.2019 02:46
Цитата:
Сообщение от laimas
Я не знаю средств css, которые бы занимались прокруткой, есть отступы внутренние/внешние.
внешние это наверное правильнее назвать полями, но не суть, главное что понятно о чём разговор.

возможно ли переделать этот скрипт
Цитата:
Сообщение от Блондинка (Сообщение 506068) 
<script>
  window.onload = function() {
    menu5.scrollTop = 36
  };
</script>
есть несколько див'ов со скроллингом, в каждом див'е надо найти элемент с определённым классом, получить координату "х" или "у" от этого значения отнять определённое количество пикселей и подставить в scrollTop или scrollLeft,

поскольку я вручную буду редактировать страницы, то на каждой странице выставлять свои имена классов/идов див'ов, имена классов элементов чьи координаты надо найти, и значения которые надо отнять вручную – не проблема.

Блондинка 06.04.2019 02:51
Malleys,
я не хочу скрывать от пользователя что либо, а только прокрутить до спана на который была заменена ссылка, и чтобы пользователь мог прокрутить и назад и вперёд.

Блондинка 06.04.2019 03:00
другими словами я хочу чтобы подсвеченные ссылки и спан были в зоне видимости по умолчанию, а пользователь решал в какую сторону прокручивать меню

Блондинка 06.04.2019 03:42
если пользователь на пятнадцатой странице или допустим на стокакойто, то ссылку (или ссылку замененную на спан) естественно не увидит без прокрутки вручную, я же хочу чтобы по умолчанию при загрузке страницы уже было "прокрученно"

laimas 06.04.2019 04:30
Цитата:
Сообщение от Блондинка
есть несколько див'ов со скроллингом, в каждом див'е надо найти элемент с определённым классом, получить координату "х" или "у" от этого значения отнять определённое количество пикселей и подставить в scrollTop или scrollLeft
А css тут причем? То на что ссылается Malleys, это статика. Искать скриптом значения и управлять ими прокруткой, ну так и управляйте сразу scrollTop.

Если такая забота о доступе, фиксируйте меню, делайте его более удобным и т.д.


Часовой пояс GMT +3, время: 23:45.
Страница 4 из 5 « Первая < 23 4 5 >
Показывать 40 сообщений этой темы на одной странице