denisator
-
Posts
22 -
Joined
-
Last visited
Content Type
Profiles
Forums
Calendar
Store
Everything posted by denisator
-
Почему на мобильном по разному работает зум canvas в хроме и файрфокс?
denisator posted a question in JavaScript
Делаю карту посёлка на Canvas denisator.ru/work/map/test и столкнулся с проблемой на мобильном Хроме и Опере. Если в Хроме щепоткой увеличить карту и отскролить её вниз то указатель, который должен перемещаться в точку нажатия пальцем, позиционируется где то в стороне. Причём такая проблема проявляется только в опере и хроме, а в стандартном браузере андроида и в файрфоксе всё работает нормально. Пробовал компенсировать это смещение но не смог вычислить формулу по которой считать величину смещения. <!DOCTYPE html> <html lang="ru"><head> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <meta charset="utf-8"> <script src="jquery-latest.js"></script> </head> <body> <div id="info"><img src="ugolok.png"><span id="text">Какой нибудь <br> динамический текст</span></div> <figure id="imapc"> <object data="map.svg" type="image/svg+xml" id="imap"> <p>К сожалению, вы используете устаревшую версию браузера, который не поддерживает интерактивную карту.</p> </object> </figure> <div id="data"></div> <script> $(window).load(function () { // Получаем доступ к SVG DOM var svgobject = document.getElementById('imap'); if ('contentDocument' in svgobject){ var svgdom = svgobject.contentDocument; } // Хак для WebKit (чтобы правильно масштабировал нашу карту) var viewBox = svgdom.rootElement.getAttribute("viewBox").split(" "); var aspectRatio = viewBox[2] / viewBox[3]; svgobject.height = parseInt(svgobject.offsetWidth / aspectRatio); size=svgobject.offsetWidth; $(svgdom).on("mousemove", function(event) { //Проблемное место!!! //var scale=($(document).width())/(window.innerWidth); //$("#info").offset({top:(event.pageY+20+(window.pageYOffset*scale)), left:(event.pageX+23+window.pageXOffset)}); $("#info").offset({top:(event.pageY+20), left:(event.pageX+23)}); }); }); </script> <style> html, body {width: 100%; height: 100%; margin:0px; padding: 0px;} #imapc { display: block; width: 100%; height: auto; margin: 0; padding: 0; border: 0; } #imap{ margin: 0; padding: 0; } div#info { position: absolute; border: 1px solid black; background: #FFFFCC; padding: 6px; font-family: Arial; //display: none; border-radius: 0px 12px 12px 12px; box-shadow: 0 0 10px rgba(0,0,0,0.8); } div#info img{ position: absolute; top: -18px; left: -22px; } </style> </body></html> -
Здравствуйте. Никак не могу сообразить как сделать что бы длинное название работы переносилось по строчкам учитывая что высота картинок фиксированная, а ширина плавующая? Код элемента галлереи: <style> div.gallery_detail_item {float: left; margin-right: 10px; height: 250px;} div.gallery_detail_works img {height: 150px;} div.gallery_detail_item_name {} div.gallery_detail_item_autor {}</style><div class="gallery_detail_item"> <a href=""> <img src="imgUrl"> </a> <div class="gallery_detail_item_name"> Работа с ну совсем уж очень длинным названием </div> <div class="gallery_detail_item_autor"> <a href="">Денис Ковальчук</a> </div></div>
-
У меня есть небольшой движочек карты на флэше http://denisator.ru/trash/map7/, но флэш не работает у 15-20% пользователей (и в часности на технике эпл) и я хочу переписать его на JS в максимально кросбраузерном виде. Рафаелис достаточно избыточный, а как он рисует в ИЕ6, ведь в нём не поддерживатеся SVG?
-
Хочу сделать небольшую интерактивную карту посёлка на JS, со скролом и зумом. В нижнем слое картинка, а в верхнем нарезанные полупрозрачные участки на которые можно наводить курсор, кликать и всё такое. Вот, не могу определиться чем рисовать эти участки. Хорошо бы, конечно, canvas, но судя по статистике он не будет работать примерно у 10% пользвателей, 8% из которых это IE8. Та же история и с SVG. Map и area тоже нельзя использовать так как участки получаются прозрачными. Подскажите, пожалуйста, максимально кросбраузерный вариант решения задачи.
-
Ох крутняк! спасибо!!!
-
Хм.. этот код я нашёл на просторах интернета. Я полагал что это корректная запись. Заменил var x = 0, y = 0; на var x = 0; var y = 0; Не помогло :-(
-
Пытаюсь вот таким вот кодом отслеживать мышиные координаты, но мне почему-то всё время выдаёт "0" <div id="test" onmousemove="this.innerHTML=mousePageXY(this).x;">test</div> <script> function mousePageXY(e){ var x = 0, y = 0; if (!e) e = window.event; if (e.pageX || e.pageY){ x = e.pageX; y = e.pageY; } else if (e.clientX || e.clientY){ x = e.clientX + (document.documentElement.scrollLeft || document.body.scrollLeft) - document.documentElement.clientLeft; y = e.clientY + (document.documentElement.scrollTop || document.body.scrollTop) - document.documentElement.clientTop; } return {"x":x, "y":y}; } </script>
-
Большое спасибо за статью. Очень помогла :-) Хотелось бы обойтись без jquery. В итоге сделал так: <html> <head> </head> <body> <div id="timeline_play" style="width: 20px;"></div> <script> alert(document.getElementById("timeline_play").style.width); </script> </body> </html> Этот вариант меня вполне устраивает :-) К сожалению не очень понимаю что вы имеете ввиду.
-
Ох, ребята, не понимаю. :-( Что значит не заданна? Вон же у меня указанно #timeline_play {width:10px;} Что это значит? Где это надо написать? Вот так? alert(document.getElementById("timeline_play").style.width()); Тоже не работает :-(
-
Ребята, подскажите. Почему алерт выводит значение ширины блока пустым? <html> <head> </head> <style> #timeline_play {width:10px;} </style> <body> <div id="timeline_play"></div> <script> alert(document.getElementById("timeline_play").style.width); </script> </body> </html>
-
Хм, а с какой версии ФФ скругляет методом обертка+картинка? Знаю, что раньше точно так было, но с тех пор, как фф перешел на частую смену версий, успел позабыть. Про ФФ не знаю, но судя по коментам на хабре такая-же проблема существует для Оперы до 11.6 версии.
-
Ох спасибо! Клёвая статья. Наверное заюзаю внутренние тени из неё. Однако моя проблема решается в этой статье именно тем способом которого я хотел избежать - засунуть картинку в фон блока. upd: похоже если я хочу юзать внутреннюю тень то без засовывания картинки в фон не обойтись :-(
-
Ну В общем если прикинуть на глаз, то моих закруглённых уголков не увидит примерно 10-12% пользователей.
-
Спасибо. Как оказалось наглядней всего показывает яндекс-метрика :-)
-
Да ну и хрен с ним :-) динозавры будут лицезреть острые уголки :-) Кстати, а никто случаем не знает ссылки на актуальную статистику интернет-пользователей с разбивкой по разным версиям браузеров?
-
Ну я изначально закруглял углы не у дива а именно у самой картинки. Попробовал ваш вариант: <div style="-moz-border-radius: 16px; background: #ccc; border: 1px solid red; overflow: hidden; display: block;"> <img src="sample.jpg" style=""> </div> не помогло, картина та же.
-
м-мда.. походу это косяк старого файрфокса. У меня версия 3.5.1 :-) Походу забью на эту проблемму, пусть у старья остаются острые уголки :-) Всем спасибо, вопрос закрыт.
-
Делаю закруглённые уголки у тега img при помощи CSS: img.catalog_main_item_img { margin-bottom: 5px; border: 2px solid white; overflow: hidden; display: block; -moz-border-radius: 16px; -webkit-border-radius: 16px; -khtml-border-radius: 16px; border-radius: 16px;} и возникает проблема в мозиле: уголки картинки не хотят прятаться под закругление. Вот так: Как решить проблему? Хотелось бы обойтись без засовывания картинки в бэкграунд диву.
-
Есть двухуровневая менюха. Я решил сверстать её по взрослому - на списках. Но вот незадача, как сделать картиночный фон у выбранного пункта? Если у <li> сделать фоном картинку то она режется границей блока и overflow: visible не помогает решить проблему. Можно как-то решить этот вопрос оставив список или все таки проще переверстать меню на дивах?
-
Подумал, понял что не просто. Признаю - погорячился :-) Я боялся этого. С JS у меня туго.
-
Разумеется произвольной. И контейнер и новости. Иначе было бы слишком просто :-)
-
Как сделать так что-бы блок новостей приклеенный к правому нижнему углу обтекался основным текстом? Если блок позиционировать абсолютно то он не будет обтекаться, если сделать "float: right" что-бы обтекался то как блок прилепить в к низу страницы?
