как посчитать общую ширину текста в блоке
Как посчитать общую ширину текста в блоке с классом submenu на jquery?
<div class="submenu"> <a href="/main/pages/materials/">Статьи</a> <a href="/main/pages/materials/">Архив</a> </div> |
Ты можешь использовать WEBGL для текста, это красивее и понятнее.
var menu_text = new THREE.TextGeometry( menu, { size: 14, height: 5, curveSegments: 2, font: "arial" }); menu_text.computeBoundingBox(); var textMaterial = new THREE.MeshBasicMaterial( { color: Math.random() * 0xffffff, overdraw: true } ); var text = new THREE.Mesh( menu_text, textMaterial ); text.rotation.y = 180 * Math.PI/180; text.position.set(10* Math.cos(text.rotation.y), 90, -10* Math.sin(text.rotation.y)); чем мог тем помог |
это что плагин? что заводить в него мой класс .submenu? как он работает можно подробнее относительно моего случая, если вы конечно поняли чего я хочу добиться?
|
может это поможет http://www.wisdomweb.ru/HTML5d/html5_input.php
|
Друзья при чем здесь WEBGL, мне просто надо ответ на вопрос
|
А на javascript ответ не подойдет?
|
Если блоку(submenu) задать float, то можно узнавать его ширину следующим образом:
$('.submenu').width()
---
<!DOCTYPE html>
<html>
<head>
<title>[]</title>
<meta charset="utf-8">
<style>
.submenu{float:left}
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(document).ready(function(){
alert($('.submenu').width());
});
</script>
</head>
<body>
<div class="submenu">
<a href="#">Текст в первом блоке</a>
<a href="#">Еще текст</a>
</div>
</body>
</html>
|
а если блоку задана определенная ширина а нужно посчитать именну общую ширину текста в ссылках?
|
Цитата:
|
imediasun1,
:-/
<!DOCTYPE html>
<html>
<head>
<title>[]</title>
<meta charset="utf-8">
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(document).ready(function () {
var span = $('<span/>', {
'html': $('.submenu a').text()
})
document.body.appendChild(span[0]);
var span_width = span.width();
document.body.removeChild(span[0]);
var width = 0;
$('.submenu a').each(function (indx, element) {
width += $(element).width();
});
alert([$('.submenu').width(), span_width, width]);
});
</script>
</head>
<body>
<div class="submenu">
<a href="#">Текст в первом блоке</a>
<a href="#">Еще текст</a>
</div>
</body>
</html>
|
А если нужно посчитать только в том блоке на родитель которого навели мышь, а то ваш код подсчитывает во всем документе в идентичных классах, есть некоторые вопросы относительно этого
$('.menu').mouseover(function(){
$(this).find('.submenu_cont').css('display','inline-block')
var span = $('<span/>', {
'html': $(this).find('.submenu_links li a').text()
})
?document.body.appendChild(span[0]);
var span_width = span.width();
?document.body.removeChild(span[0]);
var width = 0;
$(this).find('.submenu_links li a').each(function (indx, element) {
elem_width = ?$(element).width();
width += elem_width+45;
});
$(this).find('.timeline').css('width',width+90);
В итоге я присваиваю классу timeline общую ширину всех ссылок на родитель которых навели мышь |
Сейчас подсчитывает ширину ссылок в блоках с классом submenu_links во всем документе
|
| Часовой пояс GMT +3, время: 15:11. |