![](https://htmlforum.dev/uploads/set_resources_18/84c1e40ea0e759e3f1505eb1788ddf3c_pattern.png)
Nushaba
-
Posts
25 -
Joined
-
Last visited
Content Type
Profiles
Forums
Calendar
Store
Posts posted by Nushaba
-
-
Всё равно прыгает. На картинке написано почему.
Ну ради бога, хочешь такой дёрганый вариант, пусть останется дёрганым.
<script type="text/javascript">
var form-wrap = document.getElementById('form-wrap');
window.onscroll = function(){
var scroll = document.documentElement.scrollTop || document.body.scrollTop;
if(scroll >= 130){
form-wrap.style.top = scroll + 'px';
}else {
form-wrap.style.top = 180 + 'px';
}
}
</script>Это должно работать как ты задумал.
-
фф, хром,
tengritel.kz/catalog/temp/push/
Плохой приём используешь. Тебе надо создать два стиля для этого блока, в первом положение до скрола страницы и второй стиль положения при прокрутке страницы, а в скрипте прописать просто замену одного стиля на другой. Лучшим вариантом будет ставить position: fixed для плавающего поиска, как у панельки верхней на сайте. Нечто похожее я делал вот тут:
aviaposylka.ru/index1.html
Сам скрипт здесь: aviaposylka.ru/js/fly2.js
Твой вариант скрипта будет дёрганым, если полностью прочитаешь этот топик, то увидишь что я целую дилемму развёл по этому поводу. Только в моём примере соединено два скрипта, полоска прыжка на верх страницы что слева появляется и само меню плавающее, ну разберёшься думаю чего выкинуть.
-
Псиволкел, ребята, привет всем.
Я по примеру сделал в общем у себя.
Вроде работает, но с багом (или фитчей), при загрузке страницы, блок menu (у меня другой ид), приклеивается к потолку. И только если двинуть ползунком даже на миллиметр - занимает своё место (прыгает вниз, на обозначенные в стилях координаты) и всё становится нормальным. То есть сам эффект норм - при прокрутке становится вверху и остаётся. Как побороть приклеивание при загрузке?
Привет. Покажи страницу и в каком браузере глюк такой. Вероятно где то в скрипте напортачил ты.
-
Итак, кому интересно реализовал вот так:
<?php
$useragent=$_SERVER['HTTP_USER_AGENT'];
if(preg_match('/(android|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows (ce|phone)|xda|xiino/i',$useragent)||preg_match('/1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas\-|your|zeto|zte\-/i',substr($useragent,0,4)))
echo'<a style="z-index: 2; position: absolute;" href="tel:+74956482648">+7 (495) 648-2-648</a>';
?>
<a class="z-index: 1;" href="skype:+74956482648">+7 (495) 648-2-648</a>Однако такой метод стоит обработать напильником, а именно убрать с проверки планшеты и прочие ненужные девайсы, не имеющие антенны для сотовой связи что бы оставить возможность звонить по скайпу например с планшета. Так же данный метод не заменяет код, а просто накладывает поверх телефонный номер с другим атрибутом, что не совсем верно, однако при небольшом понимании php можно исправить.
<script>
alert(navigator.platform); // на винде скажет "Win32", под убунтой скажет "Linux i686"
</script>Под андроидом скажет что-то другое. И не нужны никакие @media
Под андройдом определяется linux.
Тему можно закрывать.
-
Совет на будущее (причем кроме шуток говорю): вместо того, что бы про подобную ерунду создавать тему на форуме и ждать пока что-то ответят - пользуйтесь поиском. 99.99% что такую тему уже обсуждали и не раз, времени экономится просто море.
Это характер такой, важность свою обязательно показать? В народе таких называют проще. Я всего то попросил совет и если сложно ответить, так нечего лезть тогда! Столько усилий потратили на ерунду, жизни не жалко? Сколько времени уже суммарно ушло на подобные понты, за которые спасибо уж точно не кто не скажет?
Great Rash, спасибо за уточнение.
-
В Яндексе как рекомендовал мудрый lolka84 показывает в основном рекламные агенства.
Трудно даже представить, что вы пытаетесь у него спрашивать, но например у меня гугл по запросу "определить операционную систему php" выдает вполне приемлемые результаты, некоторые из них даже с готовыми примерами.
Вот за такой ответ действительно спасибо, сразу нашёл что то похожее.
-
Может есть примеры пхп и JS кода?
Гугл и яндекс наше всё.
Спасибо что ткнули носом в яндекс, я честно ценю такую помощь, реально! Это респект!
Switch74, что то я не понял что такое @media В Яндексе как рекомендовал мудрый lolka84 показывает в основном рекламные агенства.
-
Есть вариант со стилями и display: none; Но хотелось бы что то более разумное.
Как вы собираетесь с помощью css определять ОС у пользователя ?
Более разумное - это php например. На крайний случай js.
Спасибо за ответ. С помощью CSS можно попробовать подобрать все варианты мобильных браузеров, ну хотя бы наиболее популярные. Может есть примеры пхп и JS кода?
-
Здравствуйте уважаемые форумчане. Стоит задача сделать два разных HTML кода для разных операционных систем.
Например для виндовса я хотел бы показывать код вида:
<a href="skype:+71234567890">+7 (123) 456-7-890</a>Данный приём позволяет звонить с компа по средством скайпа.
Для телефона / смартфона :
<a href="tel:+71234567890">+7 (123) 456-7-890</a>Данный код позволяет звонить прямо с мобильника по клику в в ссылку со смартфона.
Есть вариант со стилями и display: none; Но хотелось бы что то более разумное.
-
Вот этот вариант тебе подошёл бы, но я не понимаю почему он работает через задний проход, я про -1000, эта цифра не поддаётся логике и подобрана наугад. Если разберусь, то выложу переделанный вариант. Скорее всего тут какая то фигня с наследственностью.
<!DOCTYPE html>
<html>
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
<title>Untitled 4</title>
<style type="text/css">
* { margin: 0; padding: 0;}
.footer { height: 200px; background: blue; position: relative;}
#menu {
width: 200px;
height: 200px;
background: red;
position: fixed;
bottom: 0px;
left: 20px;
}
</style>
</head>
<body>
<div class="content">
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /> <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /> <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /> <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /> <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /> <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /> <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /> <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
</div>
<div class="footer">
<div id="menu">
</div>
</div>
<script type="text/javascript">
var menu = document.getElementById('menu');
window.onscroll = function(){
var scroll = document.documentElement.scrollTop || document.body.scrollTop;
if(scroll >= -1000 + document.body.offsetHeight){
menu.style.position = 'absolute';
menu.style.bottom = 200 + 'px';
}else {
if(scroll < -1000 + document.body.offsetHeight){
menu.style.position = 'fixed';
menu.style.bottom = 0 + 'px';
}
}
}
</script>
</body>
</html>Кое что ясно, разные браузеры определяют разное количество пикселей через функцию document.body.offsetHeight
Её надо заменять аналогом...
В общем всю голову сломал, нужно работать с функцией: offsetHeight, но в силу моего малого знания js я не могу это осилить пока что, может кто сможет доработать, косяк с использованием параметра document.body.offsetHeight, так как разные браузеры показывают разную цифру, нужно определять высоту блока <div class="content">, а не тега <body>, возможно тут не будет проблем с определением пикселей.
-
andi25, способов несколько, объясни поподробнее что надо сделать, я так понял ты хочешь что бы не ниже какого то пикселя опускался блок? Лучше конечно увидеть где ты хочешь это применить, что бы понять что там за задумка.
-
psywalker, ок.
Во что нашёл: http://www.gesteves.com/experiments/starwars.html
Как делать описано тут: http://ajaxian.com/archives/star-wars-html-and-css-a-new-hope
-
mishka, респект! Это реально круто, не знал что так можно! Огромное спасибо.
-
Наверно такой скрипт будет очень сильно грузить хостинг, что не есть хорошо...
-
Откуда такие сомнительные предположения про продвижение доменных зон интересно? Я продвинул зону net так же быстро как и ru зону, а клиентам продвигал рф и разницы не заметил никакой, вообще никакой! Разве что яндекс не сильно любит когда домен рф, а ссылки пошли дальше формата /index&id_*.... Тоесть если взят РФ домен, то делай ЧПУ ссылки все в кириллице. А на счёт тематик: ссылочные биржи и биржи статей будут всегда востребованы. А так придумай гениальную идею, по типу фейсбука и живи в шоколаде, все варезики, онлайн видео, музыка и прочий хлам уже давно не в моде, будут копейки идти, а если забивать сайт рекламой, да ещё принудительной, то вообще позиций не набрать... В общем думай над онлайн сервисами какими то новыми, патентуй и продавай ) Ну а так попробуй ссылки продавать, что бы реально оценить прибыль с бирж ссылок, воспользуйся сервисом расчёта стоимости ссылок с сайта, в принципе очень точно считает стоимость ссылок: http://www.seobuilding.ru/link-price-calculator.php
-
Здравствуйте уважаемые, подскажите пожалуйста, возможно ли реализовать средствами html, css, js текст как вот на этой картинке: http://lexxcrazy.narod.ru/starwars.gif
Наклон шрифта не нужен, это я могу сделать свой шрифт в принципе, с эффектом наклона, хотя наверняка есть такой, если поискать, но нужно создать что то вроде div блока в форме трапеции (либо не делать трапецию, а просто использовать центрирование, хотя это немного неподходящий вариант, так как хочется сделать именно трапецию, что бы текст был в формате text-align: justify) и что бы в каждой новой строке ниже font-size был на 2% меньше верхней строки например. Разумеется это всё надо как то запихнуть потом в текстовый редактор, но это уже моя головная боль.
-
Я имел в виду что в моём варианте возможно есть лишняя функция какая то, а не в твоём. У тебя всё чисто, но есть подёргивания блока при прокрутке, из-за выбранного метода позиционирования блока, но это всё равно было основой, без которой я бы парился фиг знает сколько. А вообще изначально у меня была мысль подложить один блок с фиксированным позиционированием по другой с абсолютным позиционированием, используя z-index, но это смотрелось бы приторно ) В общем то js даёт реальные возможности для новых дизайнов, буду теперь изучать его. Всё равно ребят, у вас хороший форум, как блог свой закончу, ссылку обязательно сделаю на вас.
-
Привет всем ещё раз. Переделал немного скрипт, что бы лучше работал. Суть в том, что с абсолютным позиционированием невозможно избавиться от дрожания при прокрутке страницы, в связи с чем я добавил функцию menu.style.position = 'fixed';. В общем выглядит это примерно так:
<!DOCTYPE html>
<html>
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
<title>Untitled 4</title>
<style type="text/css">
* { margin: 0; padding: 0;}
body {}
.header { height: 200px; background: blue;}
#menu {
width: 200px;
height: 200px;
background: red;
position: absolute;
top: 200px;
left: 20px;
}
</style>
</head>
<body>
<div class="header"></div>
<div id="menu">
</div>
<div class="content">
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /> <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /> <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /> <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /> <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /> <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /> <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /> <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
</div>
<script type="text/javascript">
var menu = document.getElementById('menu');
window.onscroll = function(){
var scroll = document.documentElement.scrollTop || document.body.scrollTop;
if(scroll >= 200){
menu.style.position = 'fixed';
menu.style.top = 0 + 'px';
}else {
if(scroll < 200){
menu.style.position = 'absolute';
menu.style.top = 200 + 'px';
}
}
}
</script>
</body>
</html>psywalker, спасибо за код, даже лучше в js стал разбираться, благодаря твоему примеру. Один момент немаловажный: есть вероятность, что какая то функция в скрипте лишняя ) Ну в общем то я и говорил что я не знаю js программирования, но на мой взгляд всё работает и выкинуть больше нечего из скрипта.
-
Это не серьёзно как то )
psywalker, разобрался, спасибо за скрипт, осталось только пофиксить дрожания при прокрутке.
http://www.artlebedev.ru/tools/technogrette/html/fixed_in_msie/
-
psywalker, видимо я сильно скромный по натуре ) Просто не хотел лишний раз дёргать. Спасибо, буду разбираться сегодня.
Вопрос мучает, заметил что на форуме быстро отвечают, даже не ожидал, но какая цель? Неужели ради идеи?
-
В пятницу такое делал. Сделал
Мне ещё помогал волкер.
тебе нужно использовать document.documentElement.scrollTop, или, для других браузеров, document.body.scrollTop
Как только scrollTop становится больше, чем element.style.top (если он указан яваскриптом, а если нет, то там как-то хитро нужно, через document.defaultView.getComputedStyle), то или увеличиваешь элементу style.top или делаешь его fixed, на выбор.
Можешь скинуть свой пример как ты реализовал меню? Мне в принципе хватит одного js кода думаю.
-
Ну да, почти ) Спасибо, завтра покурю мануалы в инете по document.body.scrollTop. Напишу что получится.
psywalker, спасибо что отозвался, пока что не буду время у тебя отнимать, попробую сам разобраться, если что, можно к тебе обратиться?
-
Было в старых версиях хрома, что он не обновлялся автоматически, сам лично видел такого клиента.
-
Привет. Стоит задача разобраться, реализовать нечто подобное как у яндекс-музыки: http://music.yandex.ru/
Дизайн сайта представляет 4 блока:
1. верхний - шапка 233px;
2. меню под шапкой 30px;
3. контент height:100%;
4. подвал height:50px;
Надо сделать div блок под меню сайта с фиксированным позиционированием, но что бы он прокручивался до top:0px; и в топе фиксировался при дальнейшей прокрутке (position:fixed;), а в случае если страничку прокручивают обратно вверх, то меню сдвигалось с поправкой на шапку, что то вроде (position:absolute; top:233px;) Всю голову сломал, выручите, кто в теме... Не обязательно так изворачиваться, возможно есть выход альтернативный, по типу min-height, благодарен за любую идею. Вероятно есть решение на js, но я увы не силён в этом.
Хитрый position: fixed
in HTML Coding
Posted
Проверяю на своём примере, всё работает. Исправь ошибки в коде, вероятно какие то косяки с див блоками допущены у тебя, что то не закрыл. http://validator.w3.org/check?uri=http%3A%2F%2Ftengritel.kz%2Fcatalog%2Ftemp%2Fpush%2F&charset=%28detect+automatically%29&doctype=Inline&group=0&user-agent=W3C_Validator%2F1.3+http%3A%2F%2Fvalidator.w3.org%2Fservices