evan
03-06-2012, 08:21 PM
What this will do:
Test code in a div and see if it's >10 chars
Shorten the amount of Chars
add "..." to the end
finally,
It will show/hide another div
what this does not do:
I would like this to work with individual links independently, what it is doing with more than one element names "elem" or "#div1" it ADDS them all together in the test for >10.
The other problem is I want it to conditionally apply the show/hide only when there are >10 chars as opposed to all the time.
I have tried several ways and what seems simple isn't. Thanks in advance for any help given.
<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
$("#div2").hide();
var elem = $("#div1");
var fn1 = function(){ $('#div2').show();};
var fn2 = function(){ $('#div2').hide();};
if(elem){
if (elem.text().length > 10)
elem.text(elem.text().substr(0,12)
)}
if(elem){
if (elem.text().length > 10)
elem.text(elem.append("...")
)};
$(elem).mouseover(fn1).mouseout(fn2);
});
</script>
<style>
#div2{color:blue; }
</style>
</head>
<body>
<div id="div1">
123456789011fwererfqewfr
</div>
<div id="div2">full text in tooltip</div>
</body>
</html>
Test code in a div and see if it's >10 chars
Shorten the amount of Chars
add "..." to the end
finally,
It will show/hide another div
what this does not do:
I would like this to work with individual links independently, what it is doing with more than one element names "elem" or "#div1" it ADDS them all together in the test for >10.
The other problem is I want it to conditionally apply the show/hide only when there are >10 chars as opposed to all the time.
I have tried several ways and what seems simple isn't. Thanks in advance for any help given.
<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
$("#div2").hide();
var elem = $("#div1");
var fn1 = function(){ $('#div2').show();};
var fn2 = function(){ $('#div2').hide();};
if(elem){
if (elem.text().length > 10)
elem.text(elem.text().substr(0,12)
)}
if(elem){
if (elem.text().length > 10)
elem.text(elem.append("...")
)};
$(elem).mouseover(fn1).mouseout(fn2);
});
</script>
<style>
#div2{color:blue; }
</style>
</head>
<body>
<div id="div1">
123456789011fwererfqewfr
</div>
<div id="div2">full text in tooltip</div>
</body>
</html>