New Topic/Question
Reply
<html>
<head>
<style>
.base { position: relative; top: -5; font-size: x-small; display: inline;}
.nested {position: relative; font-size: x-small; }
</style>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".nested").each(function() {
level = $(this).prevUntil(".base").length + 2;
newpos = -(level*5);
$(this).css('top',newpos);
if ($(this).next("span").hasClass('base') || $(this).nextAll("span.base").length == 0 )
$(this).css('margin-top',15);
});
});
</script>
</head>
<body>
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vitae magna elit, a ornare magna. Sed pharetra risus nec neque feugiat ut placerat turpis lobortis. Vestibulum lobortis massa ut lacus ullamcorper vel aliquam ante consequat. Duis non ligula eros, ut sodales odio. Phasellus vel orci in leo<span class = 'base'>1</span><span class = 'nested'>2</span><span class = 'nested'>3</span> vehicula venenatis. Sed venenatis interdum justo, sed imperdiet ante malesuada vel. Cras ullamcorper arcu id mauris aliquam sollicitudin. Mauris nulla felis, ullamcorper placerat suscipit tincidunt, placerat eu felis. Etiam vel tempor quam.</div>
</body>
</html>
2 Replies - 797 Views - Last Post: 02 December 2011 - 04:10 AM
#1
cupidvogel
- D.I.C Addict
Reputation: 31
- Posts: 593
- Joined: 25-November 10
Nested Superscript Notation
Posted 01 December 2011 - 12:10 PM
Hi, this code is meant to properly render nested superscript expressions, for example, imagine a to the power of b to the power of c. The jQuery does that, problem is that with higher levels of nesting, the superscript expressions start encroaching upon the line above. Declaring a margin for the spans have no effect, coz margins are not defined for inline elements. Any help?
Is This A Good Question/Topic?
0
MultiQuoteReplies To: Nested Superscript Notation
#2
e_i_pi
- = -1
-
Reputation: 879
- Posts: 1,893
- Joined: 30-January 09
Re: Nested Superscript Notation
Posted 01 December 2011 - 01:03 PM
I've made two changes and got it working, though tested only in FF.
First change is styling base and nested to "display:inline-block".
Second is changing the positioning algorithm to increase the "bottom" value rather than decrease the "top" value. Not sure if that part was necessary, but I think using negative values for positioning elements is a dangerous trade
First change is styling base and nested to "display:inline-block".
Second is changing the positioning algorithm to increase the "bottom" value rather than decrease the "top" value. Not sure if that part was necessary, but I think using negative values for positioning elements is a dangerous trade
<html>
<head>
<style>
.base { position: relative; bottom: 5px; font-size: x-small; display:inline-block}
.nested { position: relative; font-size: x-small; display:inline-block}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".nested").each(function() {
level = $(this).prevUntil(".base").length + 2;
newpos = (level*5);
$(this).css('bottom',newpos);
if ($(this).next("span").hasClass('base') || $(this).nextAll("span.base").length == 0 )
$(this).css('margin-top',15);
});
});
</script>
</head>
<body>
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vitae magna elit, a ornare magna. Sed pharetra risus nec neque feugiat ut placerat turpis lobortis. Vestibulum lobortis massa ut lacus ullamcorper vel aliquam ante consequat. Duis non ligula eros, ut sodales odio. Phasellus vel orci in leo
<span class = 'base'>1</span><span class = 'nested'>2</span><span class = 'nested'>3</span>
vehicula venenatis. Sed venenatis interdum justo, sed imperdiet ante malesuada vel. Cras ullamcorper arcu id mauris aliquam sollicitudin. Mauris nulla felis, ullamcorper placerat suscipit tincidunt, placerat eu felis. Etiam vel tempor quam.</div>
</body>
</html>
Was This Post Helpful?
1
#3
cupidvogel
- D.I.C Addict
Reputation: 31
- Posts: 593
- Joined: 25-November 10
Re: Nested Superscript Notation
Posted 02 December 2011 - 04:10 AM
That was cool. Never knew that there is a display style called inline-block! However, I use both bottom and top to position elements, although here they are interchangeable...
Was This Post Helpful?
0
Page 1 of 1
| 