Morning and happy holidays!..
I am having some trouble with jQuery and IE7 quirks (suprise
suprise)..
Basically i wrote a script that truncates some text and when "More
Details" is clicked - JQuery unhides the truncated text and adds a
"Less Details" link at the bottom (which inturn hides the revealed
text) ..
This all works well in FF, Chrome, IE8 (shocker), Safari and pretty
much every other browser i have tried.
The trouble in IE7 is that the hidden (truncated) text lies in a
<span> tag & it wants to put the tag on a new line - quite annoying
when it splits a word like this ...
[Example - Before "more details" is clicked]
This is some tex.. (More Details)
[Example - When "More Details" is clicked]
This is some tex
t and here is some more text blah blah (Less Details)
Yet in IE8/FF/Etc it looks like this...
[Example - Before "more details" is clicked]
This is some tex.. (More Details)
[Example - When "More Details" is clicked]
This is some text and here is some more text blah blah (Less Details)
I have tried display:inline-block, display:inline and every
combination i can think of but i cannot get the text to sit on one
line in IE7 only...
Here is the mark up...
<div id="list">
<div class="entry">
Head of Web Analytics with excellent experience of web analytics and
data analysis is required by a leading London based organisation. You
should have an excellent grasp of web analytics tools such as
Omniture, Hitwise, web trends, google analytics etc. Experience with
data analysis, Excel and working with remote teams is also beneficial.
If you have team leading experience then this would be advantageous
but n
<span class="show-more-details">...<a href="/details/21427/">More
Details</a></span>
<span class="more-details">
ot essential. Being highly analytical is a must and you should hold
some sort of numerical degree. This is a fantastic role for one of
Londons most dynamic and forward thinking companies. This is very much
a team lead role; you shall be leading a team of online analysts and
business analysts. Your role will be to give insight and
recommendations for online strategies by analysing web statistics and
other statistical information. This is a fantastic role that has
massive scope for potential. You shall be working on a lot of exciting
projects and you become an integral part of the business. My client is
looking to pay a starting salary of between 55 66K + Benefits. <a
class="show-less-details" href="#">Less Details</a>
</span>
</div>
</div> <!-- End #list -->
-------------------------
Here is the jQuery that handles the clicks...
$("#list .show-more-details").click(function(ev) {
ev.preventDefault();
$(this).hide();
$(this).next("span.more-details").fadeIn(200);
});
$("#jlist .show-less-details").click(function(ev) {
ev.preventDefault();
var that=this;
$(this).parents('.entry span').prev('.show-more-details').fadeIn
(200,function(){
$(that).parent('span.more-details').hide();
$(that).parents('.entry
span').prev('.show-more-details').show(); //
IE8 Fix
});
});
As i said it works in every other browser (haven't tested IE6 but i
dont care about that)...
Has anyone had this problem before and knows a fix ?
Thanks in advance
Alex
